Ext 3.0 - API 文档中心

正在加载……
下载离线版本
Ext 3.0 - 中文API文档

Ext JS相关资源中文化（2007年初起）

1. 备忘

                1.此版本为公开测试版alpha 0.3 把我们当前已完成汉化的公开。

              Google SVN在http://code.google.com/p/chineseext/；

2.汉化工作持续进行中，有兴趣的朋友，不要犹豫了，加入我们翻译小组；

3.版权协议为Creative Commons 署名-非商业性使用 2.5

2. 翻译团队

                JS堂翻译小组名单：
第一期：Frank、甲壳、Nightmare（健坤）、

              BubbleBeast、虎头虎脑、下一道彩虹（明球）、

              阿雄、拥抱未来、小骏、夜色温柔、建峰、

              skywolf、野鹤、端阳、果连、旺财勇士（按照QQ组名单排列）

第二期：Frank、Jacky

3.当前总体进度

            1.x的文档翻译初完成（2007年中）；

          2.x的文档翻译初完成（2008年10月）；

          3.x的文档翻译初完成（2009年5月）。

          希望有兴趣参与文档翻译质量审核的朋友加入我们。

          EXT API2Chinese相关事宜具体在论坛帖子。

相关资源

  •
                            Ext 3.x范例

    •

  •
                            Ext学习中心

    •

  •
                            FAQ常见问题

    •

  •
                            官方中文教程

    •

  •
                            Ext Core手册

    •

  •
                            JS堂社区

    •

图标含义

  •
                              包Package

    •

  •
                              类Class

    •

  •
                              单例Singleton

    •

  •
                              组件Component

    •

  •
                              方法Method

    •

  •
                              属性Property

    •

  •
                              配置选项Config Option

    •

  •
                              事件Event

    •


Class App.user.FormPanel

Package: | App.user
Defined In: | UserForm.js
Class: | FormPanel
Extends: | Object
A typical FormPanel extension

Config Options

Config Options |  | Defined By
 | api : Object remoting api. should be defined in your own config js. | FormPanel

Public Properties

Property |  | Defined By
 | STATUS_EXCEPTION : Object response status codes. | FormPanel

Public Methods

Method Defined By
App() : void
Author: Chris Scott
Ext.App
Ext.App
Parameters:
  • None.
Returns:
  • void
FormPanel
ImageDragZone() : void
Create a DragZone instance for our JsonView
Create a DragZone instance for our JsonView
Parameters:
  • None.
Returns:
  • void
FormPanel
addMessage( String msg, Bool status ) : void
adds a message to queue.
adds a message to queue.
Parameters:
  • msg : String
  • status : Bool
Returns:
  • void
FormPanel
buildMessageBox() : void
buildMessageBox
buildMessageBox
Parameters:
  • None.
Returns:
  • void
FormPanel
decodeStatusIcon( Object status ) : void
decodeStatusIcon
decodeStatusIcon
Parameters:
  • status : Object
Returns:
  • void
FormPanel
getAPI() : void
getAPI return Ext Remoting api
getAPI return Ext Remoting api
Parameters:
  • None.
Returns:
  • void
FormPanel
getViewState( Object cmd ) : void
getViewState, aliaz for Ext.state.Manager.get
getViewState, aliaz for Ext.state.Manager.get
Parameters:
  • cmd : Object
Returns:
  • void
FormPanel
getViews() : void
getViews return list of registered views
getViews return list of registered views
Parameters:
  • None.
Returns:
  • void
FormPanel
initComponent() : void
initComponent
initComponent
Parameters:
  • None.
Returns:
  • void
FormPanel
loadRecord( Record rec ) : void
loadRecord
loadRecord
Parameters:
  • rec : Record
Returns:
  • void
FormPanel
onCreate() : void
onCreate
onCreate
Parameters:
  • None.
Returns:
  • void
FormPanel
onReset() : void
onReset
onReset
Parameters:
  • None.
Returns:
  • void
FormPanel
onUpdate() : void
onUpdate
onUpdate
Parameters:
  • None.
Returns:
  • void
FormPanel
registerActions( Object actions ) : void
registerActions registers new actions for API
registerActions registers new actions for API
Parameters:
  • actions : Object
Returns:
  • void
FormPanel
registerView( Object view ) : void
registerView register an application view component.
registerView register an application view component.
Parameters:
  • view : Object
Returns:
  • void
FormPanel
setAlert( String msg, Bool status ) : void
setAlert show the message box. Aliased to addMessage
setAlert show the message box. Aliased to addMessage
Parameters:
  • msg : String
  • status : Bool
Returns:
  • void
FormPanel
setViewState( Object key, Object value ) : void
setViewState, alias for Ext.state.Manager.set
setViewState, alias for Ext.state.Manager.set
Parameters:
  • key : Object
  • value : Object
Returns:
  • void
FormPanel
t( String to ) : String
t translation function. needs to be implemented. simply echos supplied word back currently.
t translation function. needs to be implemented. simply echos supplied word back currently.
Parameters:
  • to : String
    translate
Returns:
  • String
    translated.
FormPanel

Public Events

Event Defined By
create : ( FormPanel this, Object values, )
Fires when user clicks [create] button
Fires when user clicks [create] button
Listeners will be called with the following arguments:
  • this : FormPanel
  • values, : Object
    the Form's values object
FormPanel


类Array

包： |
定义的文件： | Ext.js
类全称： | Array
继承自于： | Object

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
indexOf( Object o ) : Number
检查对象是否存在于当前数组中。 Checks whether or n...
检查对象是否存在于当前数组中。 Checks whether or not the specified object exists in the array.
参数项：
  • o : Object
    要检查的对象。The object to check for
返回值：
  • Number
    返回该对象在数组中的位置（不存在则返回-1）。The index of o in the array (or -1 if it is not found)
remove( Object o ) : Array
删除数组中指定对象。如果该对象不在数组中，则不进行操作。 Remove...
删除数组中指定对象。如果该对象不在数组中，则不进行操作。 Removes the specified object from the array. If the object is not found nothing happens.
参数项：
  • o : Object
    要移除的对象。The object to remove
返回值：
  • Array
    当前数组。this array
getElapsed( Date date ) : Number
返回date对象创建时间与现在时间的时间差，单位为毫秒。 Return...
返回date对象创建时间与现在时间的时间差，单位为毫秒。 Returns the number of milliseconds between this date and date （译注：）例：var date = new Date(); var x=0; while(x<2){ alert('x'); x++; } var theTime = date.getElapsed(); alert(theTime); //将显示间隔的时间，单位是毫秒
参数项：
  • date : Date
    （可选的）默认时间是now。(optional) Defaults to now
返回值：
  • Number
    间隔毫秒数。The diff in milliseconds @member Date getElapsed

公共事件

这个类没有公告事件。


类Date

包： |
定义的文件： | Date.js
类全称： | Date
继承自于： | Object
日期的处理和格式化是PHP's date() function的一个子集， 提供的格式和转换后的结果将和 PHP 版本的一模一样。下面列出的是目前所有支持的格式：
样本数据：
'Wed Jan 10 2007 15:05:01 GMT-0600 （中区标准时间）'

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)\/
格式符    输出         说明
------  ----------  --------------------------------------------------------------
  d      10         月份中的天数，两位数字，不足位补“0”
  D      Wed        当前星期的缩写，三个字母
  j      10         月份中的天数，不补“0”
  l      Wednesday  当前星期的完整拼写
  S      th         英语中月份天数的序数词的后缀，2个字符（与格式符“j”连用）
  w      3          一周之中的天数（0～6）（周日为0, 周六为6）
  z      9          一年之中的天数（0～365）
  W      01         一年之中的周数，两位数字（00～53）
  F      January    当前月份的拼写
  m      01         当前的月份，两位数字，不足位补“0”
  M      Jan        当前月份的完整拼写，三个字母
  n      1          当前的月份，不补“0”
  t      31         当前月份的总天数
  L      0          是否闰年（“1”为闰年，“0”为平年）
  Y      2007       4位数字表示的当前年数
  y      07         2位数字表示的当前年数
  a      pm         小写的“am”和“pm”
  A      PM         大写的“AM”和“PM”
  g      3          12小时制表示的当前小时数，不补“0”
  G      15         24小时制表示的当前小时数，不补“0”
  h      03         12小时制表示的当前小时数，不足位补“0”
  H      15         24小时制表示的当前小时数，不足位补“0”
  i      05         不足位补“0”的分钟数
  s      01         不足位补“0”的秒数
  u      0.1        秒数的小数形式
  O      -0600      用小时数表示的与 GMT 差异数
  T      CST        当前系统设定的时区
  Z      -21600     用秒数表示的时区偏移量（西方为负数，东方为正数）
用法举例：（注意你必须在字母前使用转意字符“\\”才能将其作为字母本身而不是格式符输出）：

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 dS of F Y h:i:s A'));  //Wednesday, the 10th of January 2007 03:05:01 PM
下面有一些标准的日期/时间模板可能会对你有用。它们不是 Date.js 的一部分，但是你可以将下列代码拷出，并放在 Date.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));

开发者可以通过设置 parseFunctions 和 formatFunctions 实现自定义日期格式化与解释功能，以满足特殊的需求。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 parseFunctions and formatFunctions.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : String Date interval constant @static Date interval constant @static | Date

公共方法

方法 定义者
format( String v ) : String
根据指定的格式将对象格式化。
根据指定的格式将对象格式化。
参数项：
  • v : String
    格式符
返回值：
  • String
    格式化后的日期对象
Date
parseDate( String input, String format ) : Date
将输入的字串按照指定的格式转换为日期对象。请注意此函数接受的是普通的日...
将输入的字串按照指定的格式转换为日期对象。请注意此函数接受的是普通的日历格式，这意味着月份由1开始（1 ＝ 1月）而不是像 JS 的日期对象那样由0开始。任何没有指定的日期部分将默认为当前日期中对应的部分。时间部分也是可以指定的，默认值为 0. 在format字串中任何没有被的部分都将首先被Defaults的Hash值所取代，如果Defaults值并未指定，则取当前日期（年，月，日或夏令制零时时间？）。一定要注意输入的日期字串必须与指定的格式化字串相符，否则处理操作将会失败。用法举例：

//dt = Fri May 25 2007（当前日期）
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 （指定日期的所有部分）
dt = Date.parseDate("2006-1-15", "Y-m-d");

//dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
dt = Date.parseDate("2006-1-15 3:20:01 PM", "Y-m-d h:i:s A" );
参数项：
  • input : String
    输入的日期字串
  • format : String
    转换格式符
返回值：
  • Date
    转换后的日期对象 @static
Date
getTimezone() : String
返回当前所在时区的缩写（等同于指定输出格式“T”）。
返回当前所在时区的缩写（等同于指定输出格式“T”）。
参数项：
  • None.
返回值：
  • String
    时区缩写（例如：“CST”）
Date
getGMTOffset() : String
返回 GMT 到当前日期的偏移量（等同于指定输出格式“O”）。
返回 GMT 到当前日期的偏移量（等同于指定输出格式“O”）。
参数项：
  • None.
返回值：
  • String
    以“＋”或“－”加上4位字符表示的偏移量（例如：“-0600”）
Date
getDayOfYear() : Number
返回当前年份中天数的数值，已经根据闰年调整过。
返回当前年份中天数的数值，已经根据闰年调整过。
参数项：
  • None.
返回值：
  • Number
    0 到 365（闰年时为 366）
Date
getWeekOfYear() : String
返回当前的星期数（等同于指定输出格式“W”）。
返回当前的星期数（等同于指定输出格式“W”）。
参数项：
  • None.
返回值：
  • String
    “00”～“52”
Date
isLeapYear() : Boolean
返回当前日期是否闰年。
返回当前日期是否闰年。
参数项：
  • None.
返回值：
  • Boolean
    闰年为“true”，平年为“false”
Date
getFirstDayOfMonth() : Number
返回当前月份第一天的数值，已经根据闰年调整过。返回值为以数字表示的一周...
返回当前月份第一天的数值，已经根据闰年调整过。返回值为以数字表示的一周中的第几天（0～6） 可以与数组 dayNames （译者注：此处原文为“monthNames”。）一起使用来表示当天的星期。例子:

var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //输出: 'Monday'
参数项：
  • None.
返回值：
  • Number
    一周中的天数（0～6）
Date
getLastDayOfMonth() : Number
返回当前月份最后一天的数值，已经根据闰年调整过。返回值为以数字表示的一...
返回当前月份最后一天的数值，已经根据闰年调整过。返回值为以数字表示的一周中的第几天（0～6） 可以与数组 dayNames （译者注：此处原文为“monthNames”。）一起使用来表示当天的星期。例子:

var dt = new Date('1/10/2007');
document.write(Date.dayNames[dt.getLastDayOfMonth()]); //输出: 'Monday'
参数项：
  • None.
返回值：
  • Number
    一周中的天数（0～6）
Date
getFirstDateOfMonth() : Date
返回当前月份第一天的日期对象。
返回当前月份第一天的日期对象。
参数项：
  • None.
返回值：
  • Date
Date
getLastDateOfMonth() : Date
返回当前月份中最后一天的日期对象。
返回当前月份中最后一天的日期对象。
参数项：
  • None.
返回值：
  • Date
Date
getDaysInMonth() : Number
返回当前月份中天数的数值，已经根据闰年调整过。
返回当前月份中天数的数值，已经根据闰年调整过。
参数项：
  • None.
返回值：
  • Number
    月份中的天数
Date
getSuffix() : String
返回当天的英文单词的后缀（等同于指定输出格式“S”）。
返回当天的英文单词的后缀（等同于指定输出格式“S”）。
参数项：
  • None.
返回值：
  • String
    'st, 'nd', 'rd' or 'th'
Date
clone() : Date
创建并返回一个新的与原来一模一样的日期实例。新的实例通过地址复制，因此...
创建并返回一个新的与原来一模一样的日期实例。新的实例通过地址复制，因此新的实例的变量发生改变后，原来的实例的变量也会随之改变。当你想要创建一个新的变量而又不希望对原始实例产生影响时，你应该复制一个原始的实例。正确复制一个日期实例的例子：

//错误的方式:
var orig = new Date('10/1/2006');
var copy = orig;
copy.setDate(5);
document.write(orig);  //返回 'Thu Oct 05 2006'!

//正确的方式:
var orig = new Date('10/1/2006');
var copy = orig.clone();
copy.setDate(5);
document.write(orig);  //返回 'Thu Oct 01 2006'
参数项：
  • None.
返回值：
  • Date
    新的日期实例
Date
clearTime( Boolean clone ) : Date
清除日期对象中的所有时间信息。
清除日期对象中的所有时间信息。
参数项：
  • clone : Boolean
    值为“true”时复制一个当前日期实例，清除时间信息后返回。
返回值：
  • Date
    实例本身或复制的实例
Date
add( String interval, Number value ) : Date
一个便利的日期运算的方法。这个方法不会改变日期实例本身，而是返回一个以...
一个便利的日期运算的方法。这个方法不会改变日期实例本身，而是返回一个以运算结果创建的日期对象新实例。例如：

//基本用法:
var dt = new Date('10/29/2006').add(Date.DAY, 5);
document.write(dt); //返回 'Fri Oct 06 2006 00:00:00'

//负数的值将会减去数值:
var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
document.write(dt2); //返回 '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); //返回 'Fri Oct 06 2006 07:30:00'
参数项：
  • interval : String
    一个合法的日期间隔常数
  • value : Number
    修改的数值
返回值：
  • Date
    新的日期对象实例
Date
getElapsed( Date date ) : Number
返回date对象创建时间与现在时间的时间差，单位为毫秒。Returns...
返回date对象创建时间与现在时间的时间差，单位为毫秒。Returns the number of milliseconds between this date and date （译注：）例：var date = new Date(); var x=0; while(x<2){ alert('x'); x++; } var theTime = date.getElapsed(); alert(theTime); //将显示间隔的时间，单位是毫秒
参数项：
  • date : Date
    （可选的）默认时间是now。(optional) Defaults to now
返回值：
  • Number
    间隔毫秒数。The diff in milliseconds @member Date getElapsed
Date

公共事件

这个类没有公告事件。


类Ext.Action

包： | Ext
定义的文件： | Action.js
类全称： | Ext.Action
继承自于： | Object

Action是可复用性中可以抽象出来，被任意特定组件所继承的特性之一。Action使你可以通过所有实现了Actions接口的组件共享处理函数、配置选项对象以及UI的更新（比如Ext.Toolbar、Ext.Button和Ext.menu.Menu组件）。
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 Ext.Toolbar, Ext.Button and Ext.menu.Menu components).

除了提供的配置选项对象接口之外，任何想要使用Action的组件必需提供下列方法以便在Action所需时调用：
setText(string)、setIconCls(string)、setDisabled(boolean)、setVisible(boolean)和setHandler(function)。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({
    text: 'Do something',
    handler: function(){
        Ext.Msg.alert('Click', 'You did something.');
    },
    iconCls: 'do-something'
});

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

配置项

配置项 定义者
text : String
使用 action 对象的所有组件的文本（默认为 ''）。The te...
使用 action 对象的所有组件的文本（默认为 ''）。The text to set for all components using this action (defaults to '').
Action
iconCls : String
使用 action 对象的组件的图标样式表（默认为 ''）。该样式类应...
使用 action 对象的组件的图标样式表（默认为 ''）。该样式类应该提供一个显示为图标的背景图片。The CSS class selector that specifies a background image to be used as the header icon for all components using this action (defaults to '').

用css来指定图标的例子会是这样：An example of specifying a custom icon class would be something like:
Action
disabled : Boolean
True 则禁用组件，false 则启用组件（默认为 false）。T...
True 则禁用组件，false 则启用组件（默认为 false）。True to disable all components using this action, false to enable them (defaults to false).
Action
hidden : Boolean
True 则隐藏组件，false 则显示组件（默认为 false）。T...
True 则隐藏组件，false 则显示组件（默认为 false）。True to hide all components using this action, false to show them (defaults to false).
Action
handler : Function
每个使用 action 对象的组件的主要事件触发时调用的处理函数（默认...
每个使用 action 对象的组件的主要事件触发时调用的处理函数（默认为 undefined）。The function that will be invoked by each component tied to this action when the component's primary event is triggered (defaults to undefined).
Action
scope : Object
handler函数执行的作用域。The scope in which ...
handler函数执行的作用域。The scope in which the handler function will execute.
Action

公告属性

属性 |  | 定义者
 | isDisabled: 如果组件当前使用的 action 对象是禁用的，则返回 true，... 如果组件当前使用的 action 对象是禁用的，则返回 true，否则返回 false。只读。Returns true if the components using this action are currently disabled, else returns false. Read-only. | Action
 | isHidden: 如果组件当前使用的 action 对象是隐藏的，则返回 true，... 如果组件当前使用的 action 对象是隐藏的，则返回 true，否则返回 false。只读。Returns true if the components using this action are currently hidden, else returns false. Read-only. | Action

公共方法

方法 定义者
Action( Object config )
参数项：
  • config : Object
    配置选项对象。The configuration options
返回值：
  • void
Action
setText( String text )
设置使用 action 对象的所有组件的文本。Sets the tex...
设置使用 action 对象的所有组件的文本。Sets the text to be displayed by all components using this action.
参数项：
  • text : String
    显示的文本。The text to display
返回值：
  • void
Action
getText()
获取使用 action 对象的组件当前显示的文本。Gets the t...
获取使用 action 对象的组件当前显示的文本。Gets the text currently displayed by all components using this action.
参数项：
  • None.
返回值：
  • void
Action
setIconClass( String cls )
设置使用 action 对象的组件的图标样式表。该样式类应该提供一个显...
设置使用 action 对象的组件的图标样式表。该样式类应该提供一个显示为图标的背景图片。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.
参数项：
  • cls : String
    提供图标图片的 CSS 样式类。The CSS class supplying the icon image
返回值：
  • void
Action
getIconClass()
获取使用 action 对象的组件的图标样式表。Gets the ic...
获取使用 action 对象的组件的图标样式表。Gets the icon CSS class currently used by all components using this action.
参数项：
  • None.
返回值：
  • void
Action
setDisabled( Boolean disabled )
设置所有使用 action 对象的组件的 disabled 状态。en...
设置所有使用 action 对象的组件的 disabled 状态。enable 和 disable 方法的快捷方式。Sets the disabled state of all components using this action. Shortcut method for enable and disable.
参数项：
  • disabled : Boolean
    True 则禁用组件，false 则启用组件。True to disable the component, false to enable it
返回值：
  • void
Action
enable()
启用所有使用 action 对象的组件。Enables all com...
启用所有使用 action 对象的组件。Enables all components using this action.
参数项：
  • None.
返回值：
  • void
Action
disable()
禁用所有使用 action 对象的组件。Disables all co...
禁用所有使用 action 对象的组件。Disables all components using this action.
参数项：
  • None.
返回值：
  • void
Action
setHidden( Boolean hidden )
设置所有使用 action 对象的组件的 hidden 状态。hide...
设置所有使用 action 对象的组件的 hidden 状态。hide 和 show 方法的快捷方式。Sets the hidden state of all components using this action. Shortcut method for hide and show.
参数项：
  • hidden : Boolean
    True 则隐藏组件，false 则显示组件。True to hide the component, false to show it
返回值：
  • void
Action
show()
显示所有使用 action 对象的组件。Shows all compo...
显示所有使用 action 对象的组件。Shows all components using this action.
参数项：
  • None.
返回值：
  • void
Action
hide()
隐藏所有使用 action 对象的组件。Hides all compo...
隐藏所有使用 action 对象的组件。Hides all components using this action.
参数项：
  • None.
返回值：
  • void
Action
setHandler( Function fn, Object scope )
为每个使用 action 对象的组件设置主要事件触发时调用的处理函数。...
为每个使用 action 对象的组件设置主要事件触发时调用的处理函数。Sets the function that will be called by each component using this action when its primary event is triggered.
参数项：
  • fn : Function
    对象的组件调用的函数。调用该函数时没有参数。The function that will be invoked by the action's components. The function will be called with no arguments.
  • scope : Object
    函数运行的作用域。The scope in which the function will execute
返回值：
  • void
Action
each( Function fn, Object scope )
绑定到当前 action 对象上的所有组件都执行一次指定的函数。传入的...
绑定到当前 action 对象上的所有组件都执行一次指定的函数。传入的函数将接受一个由 action 对象所支持的配置选项对象组成的参数。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.
参数项：
  • fn : Function
    每个组件执行的函数。The function to execute for each component
  • scope : Object
    函数运行的作用域。The scope in which the function will execute
返回值：
  • void
Action
execute( Mixed arg1, Mixed arg2, Mixed etc )
手动执行动作，采用的是原配置对象上的默认句柄函数。参数也可以一并传递。...
手动执行动作，采用的是原配置对象上的默认句柄函数。参数也可以一并传递。Executes this action manually using the default handler specified in the original config object. Any arguments passed to this function will be passed on to the handler function.
参数项：
  • arg1 : Mixed
    （可选的）传入到处理器句柄的参数。(optional) Variable number of arguments passed to the handler function
  • arg2 : Mixed
    （可选的）(optional)
  • etc : Mixed
    ... （可选的）(optional)
返回值：
  • void
Action

公共事件

这个类没有公告事件。


类Ext.air.DragType

包： | Extair
定义的文件： | NativeDD.js
类全称： | Ext.air.DragType
继承自于： | Object
该对象提供了，拖放(Drag and Drop)进行时，对拖动内容类型定义的常量值。@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
TEXT()
Constant for text data
Constant for text data
参数项：
  • None.
返回值：
  • void
DragType
HTML()
Constant for html data
Constant for html data
参数项：
  • None.
返回值：
  • void
DragType
URL()
Constant for url data
Constant for url data
参数项：
  • None.
返回值：
  • void
DragType
BITMAP()
Constant for bitmap data
Constant for bitmap data
参数项：
  • None.
返回值：
  • void
DragType
FILES()
Constant for file list data
Constant for file list data
参数项：
  • None.
返回值：
  • void
DragType

公共事件

这个类没有公告事件。


类Ext.air.FileProvider

包： | Extair
定义的文件： | FileProvider.js
类全称： | Ext.air.FileProvider
继承自于： | Ext.state.Provider
Ext状态读取器实现的一种，基于AIR程序的特点而设计的，将状态的配置文件保存在程序存储区。

配置项

配置项 |  | 定义者
 | file : String 在程序存储区（application storage director... 在程序存储区（application storage directory）生成一个记录状态的文件。该项指定了那个文件的文件名 | FileProvider
 | defaultState : Object 若未找到任何状态文件，就使用默认的配置 若未找到任何状态文件，就使用默认的配置 | FileProvider

公告属性

这个类没有公告属性。

公共方法

方法 定义者
FileProvider( Object config )
参数项：
  • config : Object
返回值：
  • void
FileProvider
get( String name, Mixed defaultValue ) : Mixed
返回当前的键值（value for a key）
返回当前的键值（value for a key）
参数项：
  • name : String
    键名称
  • defaultValue : Mixed
    若键值找不到的情况下，返回的默认值
返回值：
  • Mixed
    State数据
Provider
clear( String name )
清除某个state的值
清除某个state的值
参数项：
  • name : String
    键名称
返回值：
  • void
Provider
set( String name, Mixed value )
设置键值
设置键值
参数项：
  • name : String
    键名称
  • value : Mixed
    设置值
返回值：
  • void
Provider
decodeValue( String value ) : Mixed
对之前用过的 encodeValue字符串解码。
对之前用过的 encodeValue字符串解码。
参数项：
  • value : String
    要解码的值
返回值：
  • Mixed
    已解码的值
Provider
encodeValue( Mixed value ) : String
针对某些类型的编码，可用 decodeValue解码。
针对某些类型的编码，可用 decodeValue解码。
参数项：
  • value : Mixed
    要编码的值
返回值：
  • String
    以编码值
Provider

公共事件

事件 定义者
statechange()
当state发生改变时触发
当state发生改变时触发
侦听器会传入以下的参数：
  • None.
 Provider


类Ext.air.NativeObservable

包： | Extair
定义的文件： | NativeObservable.js
类全称： | Ext.air.NativeObservable
继承自于： | Ext.util.Observable
Ext Observable类为AIR而设计的增强版，针对原生AIR对象的包装器而设的代理事件

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
NativeObservable()
参数项：
  • None.
返回值：
  • void
NativeObservable
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

这个类没有公告事件。


类Ext.air.NativeWindow

包： | Extair
定义的文件： | NativeWindow.js
类全称： | Ext.air.NativeWindow
继承自于： | Ext.air.NativeObservable
优化AIR原生窗体（NativeWindows）的功能，使之封装为Ext API的一部分

该类还包含这一功能：当程序最小化时，会自动通知系统托盘（system tray）。

此类许多的配置项只能应用到新窗口中。如果读取现有的一个窗体实例，来读取该实例的配置项传入到该类中，这样的做法是无效的

配置项

配置项 |  | 定义者
 | minimizeToTray : Boolean True表示为可允许最小化到系统托盘中。注意该项只适用于程序的主窗体，... True表示为可允许最小化到系统托盘中。注意该项只适用于程序的主窗体，而且系统托盘的图标必须是指定的。 | NativeWindow
 | instance : air.NativeWindow 要封装的那个原生窗体之实例。如没定义，就会新建一窗口。 要封装的那个原生窗体之实例。如没定义，就会新建一窗口。 | NativeWindow
 | trayIcon : String 当程序最小化到系统托盘时的图标。 当程序最小化到系统托盘时的图标。 | NativeWindow
 | trayMenu : NativeMenu 当托盘被右击时，出现的菜单 当托盘被右击时，出现的菜单 | NativeWindow
 | trayTip : String 托盘图标的提示信息 托盘图标的提示信息 | NativeWindow
 | chrome : String 原生窗体的风格（可以是"standard"或“none"） 原生窗体的风格（可以是"standard"或“none"） | NativeWindow
 | type : String 原生窗体的类型-普通、工具型或轻盈的（默认为普通） 原生窗体的类型-普通、工具型或轻盈的（默认为普通） | NativeWindow
 | width : Number | NativeWindow
 | height : Number | NativeWindow
 | resizable : Boolean | NativeWindow
 | minimizable : Boolean | NativeWindow
 | maximizable : Boolean | NativeWindow
 | transparent : Boolean | NativeWindow
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | : String | NativeWindow

公共方法

方法 定义者
NativeWindow( Object config )
参数项：
  • config : Object
返回值：
  • void
NativeWindow
getNative() : air.NativeWindow
返回air.NativeWindow实例
返回air.NativeWindow实例
参数项：
  • None.
返回值：
  • air.NativeWindow
NativeWindow
getCenterXY() : {x: Number, y: Number}
返回用于在屏幕居中的x/y坐标
返回用于在屏幕居中的x/y坐标
参数项：
  • None.
返回值：
  • {x: Number, y: Number}
NativeWindow
show()
显示窗体
显示窗体
参数项：
  • None.
返回值：
  • void
NativeWindow
activate()
显示激活窗体
显示激活窗体
参数项：
  • None.
返回值：
  • void
NativeWindow
hide()
隐藏窗体
隐藏窗体
参数项：
  • None.
返回值：
  • void
NativeWindow
close()
关闭窗体
关闭窗体
参数项：
  • None.
返回值：
  • void
NativeWindow
isMinimized() : Boolean
若window是最小化的状态返回true
若window是最小化的状态返回true
参数项：
  • None.
返回值：
  • Boolean
NativeWindow
isMaximized() : Boolean
若window是最大化的状态返回true
若window是最大化的状态返回true
参数项：
  • None.
返回值：
  • Boolean
NativeWindow
moveTo( Number x, Number y )
移动窗体到指定的xy坐标
移动窗体到指定的xy坐标
参数项：
  • x : Number
  • y : Number
返回值：
  • void
NativeWindow
resize( Number width, Number height )
参数项：
  • width : Number
    宽度
  • height : Number
    高度
返回值：
  • void
NativeWindow
getRootWindow() : air.NativeWindow @static
返回程序中初始窗体（主窗体）。
返回程序中初始窗体（主窗体）。
参数项：
  • None.
返回值：
  • air.NativeWindow @static
NativeWindow
getRootHtmlWindow() : Window @static
返回程序中初始窗体的那个"window"对象。这个"window"对象...
返回程序中初始窗体的那个"window"对象。这个"window"对象指的是浏览器中“原生”对象，与AIR编程模型无关。
参数项：
  • None.
返回值：
  • Window @static
NativeWindow
NativeObservable()
参数项：
  • None.
返回值：
  • void
NativeObservable
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
()
侦听器会传入以下的参数：
  • None.
 NativeWindow


类Ext.air.NativeWindowGroup

包： | Extair
定义的文件： | NativeWindow.js
类全称： | Ext.air.NativeWindowGroup
继承自于： | Object
NativeWindows集合类

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
register( Object win )
参数项：
  • win : Object
返回值：
  • void
NativeWindowGroup
unregister( Object win )
参数项：
  • win : Object
返回值：
  • void
NativeWindowGroup
get( String id )
参数项：
  • id : String
返回值：
  • void
NativeWindowGroup
closeAll()
Closes all windows
Closes all windows
参数项：
  • None.
返回值：
  • void
NativeWindowGroup
each( Function fn, Object scope )
Executes the specified function onc...
Executes the specified function once for every window in the group, passing each window as the only parameter. Returning false from the function will stop the iteration.
参数项：
  • fn : Function
    The function to execute for each item
  • scope : Object
    (optional) The scope in which to execute the function
返回值：
  • void
NativeWindowGroup

公共事件

这个类没有公告事件。


类Ext.air.NativeWindowManager

包： | Extair
定义的文件： | NativeWindow.js
类全称： | Ext.air.NativeWindowManager
继承自于： | Ext.air.NativeWindowGroup
所有的NativeWindows保存在该集合中。@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
NativeWindowManager()
参数项：
  • None.
返回值：
  • void
NativeWindowManager
register( Object win )
参数项：
  • win : Object
返回值：
  • void
NativeWindowGroup
unregister( Object win )
参数项：
  • win : Object
返回值：
  • void
NativeWindowGroup
get( String id )
参数项：
  • id : String
返回值：
  • void
NativeWindowGroup
closeAll()
Closes all windows
Closes all windows
参数项：
  • None.
返回值：
  • void
NativeWindowGroup
each( Function fn, Object scope )
Executes the specified function onc...
Executes the specified function once for every window in the group, passing each window as the only parameter. Returning false from the function will stop the iteration.
参数项：
  • fn : Function
    The function to execute for each item
  • scope : Object
    (optional) The scope in which to execute the function
返回值：
  • void
NativeWindowGroup

公共事件

这个类没有公告事件。


类Ext.air.Sound

包： | Extair
定义的文件： | Sound.js
类全称： | Ext.air.Sound
继承自于： | Object
@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
play( String file, Number startAt )
播放音频。
播放音频。
参数项：
  • file : String
    要播放音效的位置。这个文件应该在程序的安装目录下。
  • startAt : Number
    (optional) 指定音频开始播放的位置（可选的）
返回值：
  • void
Sound

公共事件

这个类没有公告事件。


类Ext.air.SystemMenu

包： | Extair
定义的文件： | SystemMenu.js
类全称： | Ext.air.SystemMenu
继承自于： | Object
提供一个跨平台的菜单控制类，你可以新建菜单，或者在菜单中插入新的子项

此类亦可以将Ext.Action的实例绑定到AIR菜单项上。@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
add( String text, Array actions, Number mindex ) : air.NativeMenu 原生菜单
为菜单添加某一项的内容
为菜单添加某一项的内容
参数项：
  • text : String
    指明在哪一个菜单上添加内容（如'File' or 'Edit'）。
  • actions : Array
    对象组成的数组或菜单项的配置对象组成的数组
  • mindex : Number
    键盘快捷键的字符索引
返回值：
  • air.NativeMenu 原生菜单
SystemMenu
get()
返回整个菜单对象
返回整个菜单对象
参数项：
  • None.
返回值：
  • void
SystemMenu

公共事件

这个类没有公告事件。


类Ext.Ajax

包： | Ext
定义的文件： | Connection.js
类全称： | Ext.Ajax
继承自于： | Ext.data.Connection
Ext.Ajax类继承了Ext.data.Connection，为Ajax的请求提供了最大灵活性的操作方式。示例代码： Global Ajax request class. Provides a simple way to make Ajax requests with maximum flexibility. Example usage:

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

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

// 规定每次请求的头部都有这样的字段。Default headers to pass in every request
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext'
};

// 规定每次请求的头部都有这样的事件！Global Ajax events can be handled on every request!
Ext.Ajax.on('beforerequest', this.showSpinner, this);
@singleton

配置项

配置项 |  | 定义者
 | url : String （可选项）被用来向服务发起请求默认的url（默认值为undefined... （可选项）被用来向服务发起请求默认的url（默认值为undefined）。(Optional) The default URL to be used for requests to the server. (defaults to undefined) | Connection
 | extraParams : Object （可选项）一个包含属性值的对象，这些属性在该Connection发起的... （可选项）一个包含属性值的对象，这些属性在该Connection发起的每次请求中作为外部参数（默认值为undefined）。(Optional) An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined) | Connection
 | defaultHeaders : Object （可选项）一个包含请求头信息的对象，此请求头被附加在该Connecti... （可选项）一个包含请求头信息的对象，此请求头被附加在该Connection对象的每次请求中（默认值为undefined）。(Optional) An object containing request headers which are added to each request made by this object. (defaults to undefined) | Connection
 | method : String （可选项）请求时使用的默认的http方法（默认为undefined；如... （可选项）请求时使用的默认的http方法（默认为undefined；如果存在参数但没有设值，则值为post,否则为get）。(Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set, but request params are present, POST will be used; otherwise, GET will be used.) | Connection
 | timeout : Number （可选项）一次请求超时的毫秒数（默认为30秒钟）。(Optional)... （可选项）一次请求超时的毫秒数（默认为30秒钟）。(Optional) The timeout in milliseconds to be used for requests. (defaults to 30000) | Connection
 | autoAbort : Boolean （可选项）该request是否应当中断挂起的请求（默认值为false）... （可选项）该request是否应当中断挂起的请求（默认值为false）。(Optional) Whether this request should abort any pending requests. (defaults to false) | Connection
 | disableCaching : Boolean （可选项）设置为true就会添加一个独一无二的cache-buster... （可选项）设置为true就会添加一个独一无二的cache-buster参数来获取请求（默认值为true）。(Optional) True to add a unique cache-buster param to GET requests. (defaults to true) | Connection
 | disableCachingParam : String （可选项）(Optional) Change the paramete... （可选项）(Optional) Change the parameter which is sent went disabling caching through a cache buster. Defaults to '_dc' | Connection
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | disableCaching 设置为true使得增加一cache-buster参数来获取请求（默认为true）。True to add a unique cache-buster param to GET requests. (defaults to true): Boolean | Ajax
 | url 默认的被用来向服务器发起请求的url（默认为 undefined）。The default URL to be used for requests to the server. (defaults to undefined): String | Ajax
 | extraParams 外部参数，一个包含属性的对象（这些属性在该Connection发起的每次请求中作为外部参数）。An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined): Object | Ajax
 | defaultHeaders 默认的请求头，一个包含请求头信息的对象（此请求头被附加在该Connection对象的每次请求中）。An object containing request headers which are added to each request made by this object. (defaults to undefined): Object | Ajax
 | method 请求的方法，请求时使用的默认的http方法（默认为undefined;如果存在参数但没有设值，则值为post，否则为get）。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 parms are present will use "POST," otherwise "GET."): String | Ajax
 | timeout 超时时间，请求的超时豪秒数（默认为30秒）。The timeout in milliseconds to be used for requests. (defaults to 30000): Number | Ajax
 | autoAbort 自动中断。该request是否应当中断挂起的请求（默认值为false）。Whether a new request should abort any pending requests. (defaults to false): Boolean | Ajax
 | : String @cfg {String} disableCachingParam ... @cfg {String} disableCachingParam （可选项）(Optional) Change the parameter which is sent went disabling caching through a cache buster. Defaults to '_dc' | Connection

公共方法

方法 定义者
Ajax()
参数项：
  • None.
返回值：
  • void
Ajax
serializeForm( String/HTMLElement form ) : String
序列化传入的form为编码后的url字符串。Serialize the...
序列化传入的form为编码后的url字符串。Serialize the passed form into a url encoded string
参数项：
  • form : String/HTMLElement
返回值：
  • String
Ajax
Connection( Object config )
参数项：
  • config : Object
    配置对象。a configuration object.
返回值：
  • void
Connection
request( Object options ) : Number
向远程服务器发送一http请求。Sends an HTTP requ...

向远程服务器发送一http请求。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.

要正确指定回调函数的作用域，应适用scope选项。To execute a callback function in the correct scope, use the scope option.

参数项：
  • options : Object
    包含如下属性的一对象：An object which may contain the following properties:
    • url : String/Function (Optional)
      （可选项）发送请求的url，默认为配置的url。若为函数类型那么其作用域将由配置项scope所指定。默认为配置好的URL。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 configured URL.
    • params : Object/String/Function （可选项）(Optional)
      一包含属性的对象（这些属性被用作request的参数）或一个编码后的url字串或一个能调用其中任一一属性的函数。若为函数类型那么其作用域将由配置项scope所指定。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)
      该请求所用的http方面，默认值为配置的方法，或者当没有方法被配置时，如果没有发送参数时用get，有参数时用post。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)
      该方法被调用时附上返回的http response对象。不管成功还是失败，该回调函数都将被调用，该函数中传入了如下参数: 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。True if the request succeeded.
      • response : Object
        包含了返回数据的xhr对象。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
        包含数据的xhr对象。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
        包含数据的xhr对象。The XMLHttpRequest object containing the response data.
      • options : Object
        请求所调用的参数。The parameter to the request call.
    • scope : Object （可选项）(Optional)
      回调函数的作用域：回调函数"this"对象指针。默认值为浏览器窗口。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.
    • form : Element/HTMLElement/String （可选项）(Optional)
      用来压入参数的一个<form>元素或<form>的标识。The <form> Element or the id of the <form> to pull parameters from.
    • isUpload : Boolean （可选项）(Optional)
      如果该form对象是上传form，为true（通常情况下会自动探测）。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。注意:它将会被用来在发送数据中代替参数任务参数将会被追加在url中。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,则添加一个独一无二的cache-buster参数来获取请求。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.

返回值：
  • Number
    transactionId The id of the server transaction. This may be used to cancel the request.
Connection
isLoading( Number transactionId ) : Boolean
确认该对象是否有正在的请求。Determine whether thi...
确认该对象是否有正在的请求。Determine whether this object has a request outstanding.
参数项：
  • transactionId : Number
    （可选项）默认是最后一次通讯。(Optional) defaults to the last transaction
返回值：
  • Boolean
    如果这是个正在的请求的话，返回true。True if there is an outstanding request.
Connection
abort( Number transactionId )
中断任何正在的请求。Aborts any outstanding re...
中断任何正在的请求。Aborts any outstanding request.
参数项：
  • transactionId : Number
    (或选项)默认值为最后一次事务。{(Optional) defaults to the last transaction
返回值：
  • void
Connection
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforerequest()
任何Ajax请求发送之前触发。Fires before a netwo...
任何Ajax请求发送之前触发。Fires before a network request is made to retrieve a data object.
侦听器会传入以下的参数：
  • None.
 Connection
requestcomplete()
任何Ajax成功请求后触发。Fires if the request ...
任何Ajax成功请求后触发。Fires if the request was successfully completed.
侦听器会传入以下的参数：
  • None.
 Connection
requestexception()
服务端返回一个错误的HTTP状态码时触发。Fires if an er...
服务端返回一个错误的HTTP状态码时触发。Fires if an error HTTP status was returned from the server. See HTTP Status Code Definitions for details of HTTP status codes.
侦听器会传入以下的参数：
  • None.
 Connection


类Ext.BoxComponent

包： | Ext
定义的文件： | BoxComponent.js
类全称： | Ext.BoxComponent
继承自于： | Ext.Component

任何使用矩形容器的作可视化组件Ext.Component的基类，该类的模型提供了自适应高度、宽度调节的功能，具备大小调节和定位的能力。所有的容器类Ext.Container都应从BoxComponent继承，从而让参与每个布局的嵌套容器都会紧密地联系在一起工作。
Base class for any Ext.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. All Ext.Container Container classes should subclass BoxComponent so that they will work consistently when nested within other Ext layout containers.

要让任意的HTML元素演变为所谓的组件概念中的一种，用BoxComponent就可以了，它可以使现有的元素，也可以是将来渲染之时要创建的元素。另外，一般来说，布局中的许多Component组件就是BoxComponent，使得具备高、宽可控的特性。
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.

要打算让一个现成有的元素为BoxComponent服务，使用el的配置选项，指定是哪个一个元素。
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'
});
然后就可以使用added来加入Container对象为子元素。

要打算在BoxComponent渲染之时自动创建一个HTML元素作为其容器元素，使用autoEl的配置选项。该配置项的内容就是一个DomHelper的特定项：
To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:

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

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.Button

包： | Ext
定义的文件： | Button.js
类全称： | Ext.Button
继承自于： | Ext.BoxComponent
简单的按钮类。Simple Button class

配置项

配置项 定义者
repeat : Boolean/Object
触发函数是否可以重复触发。默认为false，也可以为Ext.util....
触发函数是否可以重复触发。默认为false，也可以为Ext.util.ClickRepeater的参数对象。while the mouse is down.True to repeat fire the click event while the mouse is down. This can also be
Button
tabIndex : Number
按钮的DOM焦点序号即tab键时候得到焦点的序号（默认为undefin...
按钮的DOM焦点序号即tab键时候得到焦点的序号（默认为undefined）。Set a DOM tabIndex for this button (defaults to undefined)
Button
allowDepress : Boolean
False表示不允许按钮“固定按下的状态”，（默认为undefined...
False表示不允许按钮“固定按下的状态”，（默认为undefined）。当enableToggle激活时，该项才有效。False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when enableToggle is true.
Button
enableToggle : Boolean
True 是否在 pressed/not pressed 这两个状态间...
True 是否在 pressed/not pressed 这两个状态间切换 （默认为false）。True to enable pressed/not pressed toggling (defaults to false)
Button
toggleHandler : Function
当enableToggle激活时，该项才有效。这是点击的处理函数。会送...
当enableToggle激活时，该项才有效。这是点击的处理函数。会送入两个参数： Function called when a Button with enableToggle set to true is clicked. Two arguments are passed:
  • button : Ext.Button
    Button对象。this Button object
  • state : Boolean
    按钮的已发生的状态，true表示按了。The next state if the Button, true means pressed.
 Button
menu : Mixed
标准menu属性 可设置为menu的引用 或者menu的id 或者me...
标准menu属性 可设置为menu的引用 或者menu的id 或者menu的参数对象 （默认为undefined）。Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
Button
menuAlign : String
菜单的对齐方式（参阅Ext.ElementalignTo以了解个中细节...
菜单的对齐方式（参阅Ext.ElementalignTo以了解个中细节，默认为'tl-bl?'）。The position to align the menu to (see Ext.ElementalignTo for more details, defaults to 'tl-bl?').
Button
iconCls : String
用来指定背景图片的样式类。A css class which sets...
用来指定背景图片的样式类。A css class which sets a background image to be used as the icon for this button
Button
type : String
按钮的三种类型（submit、reset、button），默认为'bu...
按钮的三种类型（submit、reset、button），默认为'button'。submit, reset or button - defaults to 'button'
Button
clickEvent : String
handler 处理函数触发事件（默认是单击）。The type of...
handler 处理函数触发事件（默认是单击）。The type of event to map to the button's event handler (defaults to 'click')
Button
handleMouseEvents : Boolean
是否启用mouseover，mouseout与mousedown鼠标事...
是否启用mouseover，mouseout与mousedown鼠标事件（默认为true）。False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
Button
tooltipType : String
tooltip 的显示方式 既可是'qtip'（默认），也可是设置ti...
tooltip 的显示方式 既可是'qtip'（默认），也可是设置title属性的“标题”。The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
Button
buttonSelector : String
（可选的） 分辨DOM结构其中的激活、可点击元素的DomQuery。...

（可选的） 分辨DOM结构其中的激活、可点击元素的DomQuery。(Optional) A DomQuery selector which is used to extract the active, clickable element from the DOM structure created.

当定义了template，你必须保证该选择符的结果限于一个可以获得焦点的元素。When a custom template is used, you must ensure that this selector results in the selection of a focussable element.

默认为"button:first-child"。Defaults to "button:first-child".

 Button
scale : String
（可选的）元素的大小。可允许有这三种的值： (Optional) T...

（可选的）元素的大小。可允许有这三种的值： (Optional) The size of the Button. Three values are allowed:

  • "small"
    按钮元素是16px的高度。Results in the button element being 16px high.
  • "medium"
    按钮元素是24px的高度。Results in the button element being 24px high.
  • "large"
    按钮元素是32px的高度。Results in the button element being 32px high.

默认为"small"。Defaults to "small".

 Button
iconAlign : String
（可选的）渲染图标的按钮方向。可允许有这四种的值： (Optional...

（可选的）渲染图标的按钮方向。可允许有这四种的值： (Optional)The side of the Button box to render the icon. Four values are allowed:

  • "top"
  • "right"
  • "bottom"
  • "left"

默认为"left"。Defaults to "left".

 Button
arrowAlign : String
（可选的）渲染图标的箭头方向，如果有关联menu的话。可允许有这两种的...

（可选的）渲染图标的箭头方向，如果有关联menu的话。可允许有这两种的值： (Optional) The side of the Button box to render the arrow if the button has an associated menu. Two values are allowed:

  • "right"
  • "bottom"

Defaults to "right".

 Button
template : Ext.Template
（可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文...
（可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文本.修改这个属性要主意相关参数不能缺失。(Optional)A 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 getTemplateArgs.
Button
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : Boolean Read-only. 如果按钮是按下状态（仅当enableTogg... Read-only. 如果按钮是按下状态（仅当enableToggle = true时）。True if this button is pressed (only if enableToggle = true) | Button
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | template: Ext.Template @cfg {Ext.Template} template （可选配... @cfg {Ext.Template} template （可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文本.修改这个属性要主意相关参数不能缺失。(Optional)A 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 getTemplateArgs. | Button
 | btnEl: Ext.Element 一个对Button可点击元素的封装。默认下这是<button&... 一个对Button可点击元素的封装。默认下这是<button>元素的引用。只读的。An Element encapsulating the Button's clickable element. By default, this references a <button> element. Read only. | Button
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Button( Object config )
参数项：
  • config : Object
    参数对象。The config object
返回值：
  • void
Button
getTemplateArgs() : Object
这个方法返回一个提供可替换参数的对象，供Template所使用以创建...

这个方法返回一个提供可替换参数的对象，供Template所使用以创建按钮的DOM结构。TemplateThis method returns an object which provides substitution parameters for the Template used to create this Button's DOM structure.

实例或子类如果在模板上面有变化的话，可提供一个新的该方法之实现，以适应新模板创建不同的DOM结构。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 template returns an Array containing the following items:

  • 按钮的文本text。The Button's text
  • <button>的类型type。The <button>'s type
  • <button> element按钮元素的iconCls。The iconCls applied to the <button> element
  • The cls applied to the Button's main Element
  • 控制Button的scale与icon alignment的CSS样式名称。A CSS class name controlling the Button's scale and icon alignment
  • 若已设menu给Button所设的CSS样式名称。A CSS class name which applies an arrow to the Button if configured with a menu
参数项：
  • None.
返回值：
  • Object
    模板的替换数据。Substitution data for a Template.
Button
setIconClass( String cls ) : Ext.Button
替换按钮针对背景图片的css类。连动替换按钮参数对象中的该属性。Set...
替换按钮针对背景图片的css类。连动替换按钮参数对象中的该属性。Sets the CSS class that provides a background image to use as the button's icon. This method also changes the value of the iconCls config internally.
参数项：
  • cls : String
    图标的CSS样式类。The CSS class providing the icon image
返回值：
  • Ext.Button
    this
Button
setTooltip( String/Object tooltip ) : Ext.Button
设置该按钮的tooltip动态提示。Sets the tooltip ...
设置该按钮的tooltip动态提示。Sets the tooltip for this Button.
参数项：
  • tooltip : String/Object
    . This may be:
    • String : 用于在Tooltip显示的文本，由于分配到innerHTML属性因此可以是HTML标签的。A string to be used as innerHTML (html tags are accepted) to show in a tooltip
    • Object : Ext.QuickTipsregister的配置对象。A configuration object for Ext.QuickTipsregister.
返回值：
  • Ext.Button
    this
Button
setHandler( Function handler, Object scope ) : Ext.Button
增加按钮事件句柄触发函数的方法。Assigns this Button...
增加按钮事件句柄触发函数的方法。Assigns this Button's click handler
参数项：
  • handler : Function
    当按钮按下执行的函数。The function to call when the button is clicked
  • scope : Object
    （可选的）传入参数的作用域。(optional) Scope for the function passed in
返回值：
  • Ext.Button
    this
Button
setText( String text ) : Ext.Button
设置按钮文本。Sets this Button's text
设置按钮文本。Sets this Button's text
参数项：
  • text : String
    按钮的文字。The button text
返回值：
  • Ext.Button
    this
Button
getText() : String
获取按钮的文字。Gets the text for this Button
获取按钮的文字。Gets the text for this Button
参数项：
  • None.
返回值：
  • String
    按钮的文字。The button text
Button
toggle( Boolean state, Boolean supressEvent ) : Ext.Button
如果有传入state的参数，就按照state的参数设置否则当前的sta...
如果有传入state的参数，就按照state的参数设置否则当前的state就会轮换。If a state it passed, it becomes the pressed state otherwise the current state is toggled.
参数项：
  • state : Boolean
    （可选的）指定特定的状态。(optional) Force a particular state
  • supressEvent : Boolean
    （可选的）表示为调用该方法时不触发事件。(optional) True to stop events being fired when calling this method.
返回值：
  • Ext.Button
    this
Button
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
showMenu()
显示按钮附带的菜单（如果有的话）。Show this button's...
显示按钮附带的菜单（如果有的话）。Show this button's menu (if it has one)
参数项：
  • None.
返回值：
  • void
Button
hideMenu()
隐藏按钮附带的菜单（如果有的话）。Hide this button's...
隐藏按钮附带的菜单（如果有的话）。Hide this button's menu (if it has one)
参数项：
  • None.
返回值：
  • void
Button
hasVisibleMenu() : Boolean
若按钮附有菜单并且是显示着的就返回true。eturns true i...
若按钮附有菜单并且是显示着的就返回true。eturns true if the button has a menu and it is visible
参数项：
  • None.
返回值：
  • Boolean
Button
getPressed( String group ) : Button
在已按下的组中返回这些按钮。没有就null。Gets the pres...
在已按下的组中返回这些按钮。没有就null。Gets the pressed button in the passed group or null
参数项：
  • group : String
返回值：
  • Button
Button
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
单击触发事件。Fires when this button is cl...
单击触发事件。Fires when this button is clicked
侦听器会传入以下的参数：
  • None.
 Button
toggle()
按钮按下状态切换触发事件（仅当enableToggle = true时...
按钮按下状态切换触发事件（仅当enableToggle = true时）。Fires when the "pressed" state of this button changes (only if enableToggle = true)
侦听器会传入以下的参数：
  • None.
 Button
mouseover()
鼠标居上触发事件。Fires when the mouse hover...
鼠标居上触发事件。Fires when the mouse hovers over the button
侦听器会传入以下的参数：
  • None.
 Button
mouseout()
鼠标离开事件。Fires when the mouse exits t...
鼠标离开事件。Fires when the mouse exits the button
侦听器会传入以下的参数：
  • None.
 Button
menushow()
有menu的时候 menu显示触发事件。If this button ...
有menu的时候 menu显示触发事件。If this button has a menu, this event fires when it is shown
侦听器会传入以下的参数：
  • None.
 Button
menuhide()
有menu的时候 menu隐藏触发事件。If this button ...
有menu的时候 menu隐藏触发事件。If this button has a menu, this event fires when it is hidden
侦听器会传入以下的参数：
  • None.
 Button
menutriggerover()
有menu的时候 menu焦点转移到菜单项时触发事件。If this ...
有menu的时候 menu焦点转移到菜单项时触发事件。If this button has a menu, this event fires when the mouse enters the menu triggering element
侦听器会传入以下的参数：
  • None.
 Button
menutriggerout()
有menu的时候 menu焦点离开菜单项时触发事件。If this b...
有menu的时候 menu焦点离开菜单项时触发事件。If this button has a menu, this event fires when the mouse leaves the menu triggering element
侦听器会传入以下的参数：
  • None.
 Button
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


Observable
    Component
      BoxComponent
        Container
          Panel
            ButtonGroup

Class Ext.ButtonGroup

Package: | Ext
Defined In: | Toolbar.js
Class: | ButtonGroup
Extends: | Panel
xtype: | buttongroup
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',
        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

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use the An...

Note: this config is only used when this Component is rendered by a Container which has been configured to use the AnchorLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'anchor').

See Ext.layout.AnchorLayout.anchor also.

Component
animCollapse : Boolean
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...

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 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 renderTo will be ignored and the target element's parent node will automatically be used as the panel's container.

Panel
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoHeight : Boolean
true to use height:'auto', false to use fixed height (defaults to false). Note: Setting autoHeight:true means that th...
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.
Panel
autoLoad : Object/String/Function
A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...
A valid url spec according to the Updater 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 body element, so it may be refreshed at any time.

Panel
autoScroll : Boolean
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (defaults to false). Note: Although many components inherit this ...
True to use width:'auto', false to use fixed width (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.
BoxComponent
baseCls : String
Defaults to 'x-btn-group'. See Ext.Panel.baseCls.
ButtonGroup
bbar : Object/Array
The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...

The bottom toolbar of the panel. This can be a 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 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.

Panel
bbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

Panel
bodyBorder : Boolean
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only a...
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyCfg : Object
A DomHelper element specification object may be specified for any Panel Element. By default, the Default element in t...

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

Configuring a Custom element may be used, for example, to force the body Element to use a different form of markup than is created by default. An example of this might be to 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'
    },
    footer: true,
    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
});

The example above also explicitly creates a footer with custom markup and styling applied.

Panel
bodyCssClass : String/Object/Function
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defau...
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defaults to null). See bodyCfg.
Panel
bodyStyle : String/Object/Function
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to nu...
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to null). See bodyCfg.
Panel
border : Boolean
True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the bord...
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 bodyBorder to false.
Panel
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
buttonAlign : String
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right'...
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right').
Panel
buttons : Array
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration propert...
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration property will be an array of Ext.Buttons or 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.
Panel
bwrapCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

Panel
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
closable : Boolean
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Cla...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
collapseFirst : Boolean
true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...
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).
Panel
collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
collapsible : Boolean
True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header ...
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).
Panel
columns : Number
The columns configuration property passed to the configured layout manager. See Ext.layout.TableLayout.columns.
ButtonGroup
contentEl : String
Specify the id of an existing HTML node to use as the panel's body content (defaults to ''). Description : <div clas...

Specify the id of an existing HTML node to use as the panel's body content (defaults to '').

  • Description :
      This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel when the Panel is rendered to use as the content (it is not going to be the actual panel itself).
  • Notes :
      The specified HTML Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
      The specified HTML element used will not participate in any layout scheme that the Panel may use. It's just HTML. Layouts operate on child 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.
Panel
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
Render this panel disabled (default is false). An important note when using the disabled config on panels is that IE ...
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 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
        }
    }
});
Panel
disabledClass : String
CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
draggable : Boolean/Object
true to enable dragging of this Panel (defaults to false). For custom drag/drop implementations, an Ext.Panel.DD conf...

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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:

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
A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be gener...
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'.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into t...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's 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'
        }]
    }),
    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.

Panel
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
floating : Mixed
This property is used to configure the underlying Ext.Layer. Acceptable values for this configuration property are:<d...

This property is used to configure the underlying 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.
  • object :
    The specified object will be used as the configuration object for the Ext.Layer that will be created.
Panel
footer : Boolean
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if ...
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if buttons or a fbar have been configured. See bodyCfg for an example.
Panel
footerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCfg also.

Panel
frame : Boolean
Defaults to true. See Ext.Panel.frame.
ButtonGroup
header : Boolean
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will b...
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
headerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCfg also.

Panel
height : Number
The height of this component in pixels (defaults to auto).
BoxComponent
hidden : Boolean
Render this component hidden (default is false).
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset p...

How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
html : String/Object
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content ...
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
iconCls : String
The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). An example o...
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; }
Panel
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 see itemId.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id.

Note: to access the container of an item see ownerCt.

Component
items : Mixed
A single item, or an array of child Components to be added to this container. Each item can be any type of object bas...
A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Component.xtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
keys : Object/Array
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to thi...
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to this panel (defaults to null).
Panel
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (eg, Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String
Defaults to 'table'. See Ext.Container.layout.
ButtonGroup
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

Note: While some Observable classes export selected DOM events (eg "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement listeners must be added to the 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;
    },

    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() {
            c.el.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'
});

Observable
maskDisabled : Boolean
true to mask the panel when it is disabled, false to not mask it (defaults to true). Either way, the panel will alwa...
true to mask the panel when it is 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.
Panel
minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
preventBodyReset : Boolean
Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added the the panel's element, effe...
Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added the 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.
Panel
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (eg. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

  • Notes :
      When using this config, a call to render() is not required.
      Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render its child items.

See render also.

Component
shadow : Boolean/String
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (...
true (or a valid Ext.Shadow 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 floating = true.
Panel
shadowOffset : Number
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when float...
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies wh...
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

To set the state provider for the current page:

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

A stateful Component attempts to save state when one of the events listed in the 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the (@link #stateId}, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Pan...
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
tbar : Object/Array
The top toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button confi...

The top toolbar of the panel. This can be a 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 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.

Panel
tbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

Panel
title : String
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When...
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
titleCollapse : Boolean
true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, fa...
true to allow expanding and collapsing the panel (when 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 BorderLayout.Region floatable config option.
Panel
toolTemplate : Ext.Template/Ext.XTemplate
A Template used to create tools in the header Element. Defaults to:new Ext.Template('&lt;div class="x-tool x-tool-{id...

A Template used to create tools in the 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 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;}
Panel
unstyled : Boolean
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes ...
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
Panel
width : Number
The width of this component in pixels (defaults to auto).
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
body : Ext.Element
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, ...
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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 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 el also.

Panel
buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
dd : Ext.dd.DragSource.
If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles drag...

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.
Panel
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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), perform the adding of the listener in a render event listener:

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

See also getEl

Component
footer : Ext.Element
The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note ...
The Panel's footer Element. Read-only.

This Element is used to house the Panel's buttons or fbar.

Note: see the Note for el also.

Panel
header : Ext.Element
The Panel's header Element. Read-only. This Element is used to house the title and tools Note: see the Note for el al...
The Panel's header Element. Read-only.

This Element is used to house the title and tools

Note: see the Note for el also.

Panel
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
Add a Component to this Container. Description : <div class="sub-desc">Fires the beforeadd event before adding, the...

Add a Component to this Container.

  • Description :
      Fires the beforeadd event before adding, then fires the add event after the component has been added.
  • Notes :
      When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's layout manager. If you expect child items to be sized in response to user interactions, you must specify a 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();
      Omitting the layout config means that the 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).
      You should never specify renderTo or call the render method of a child Component when using a Container as child Components of this container are rendered/managed by this container's layout manager.
      Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, and Ext.layout.TableLayout. For example:
      var myNewGrid = new Ext.grid.GridPanel({
    store: myStore,
    colModel: myColModel
});
myTabPanel.add(myNewGrid); // Ext.TabPanel implicitly uses CardLayout
myTabPanel.setActiveTab(myNewGrid);
      If the Container is already rendered when add is called, you may need to call 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 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
      Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Ext.Component/Object
    The Component to add.

    Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    For a list of all available xtypes, see Ext.Component.xtype.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
Returns:
  • Ext.Component
    component The Component (or config object) that was added with the {@link #defaults Container's default config values} applied.
Container
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred approach is to ...
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 buttons config.
Parameters:
  • config : String/Object
    A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    The function to be called on button Ext.Button.click
  • scope : Object
    The scope to use for the button handler function
Returns:
  • Ext.Button
    The button that was added
Panel
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
    });
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collapse( Boolean animate ) : Ext.Panel
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse ac...
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component.
Disable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component.
Enable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
expand( Boolean animate ) : Ext.Panel
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action ...
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fcn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fcn : Function
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fcn, [Object scope] ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
Parameters:
  • fcn : Function
  • scope : Object
    (optional)
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar() : Ext.Toolbar
Returns the toolbar from the bottom (bbar) section of the panel.
Returns the toolbar from the bottom (bbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getComponent( String/Number id ) : Ext.Component
Gets a direct child Component by id, or by index.
Gets a direct child Component by id, or by index.
Parameters:
  • id : String/Number
    or index of child Component to return.
Returns:
  • Ext.Component
Container
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 autoEl config.

The 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), perform the adding of the listener in a one-off render event listener:

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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getFrameHeight() : Number
Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and header and ...
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 getInnerHeight.
Parameters:
  • None.
Returns:
  • Number
    The frame height
Panel
getFrameWidth() : Number
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the bo...
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
Parameters:
  • None.
Returns:
  • Number
    The frame width
Panel
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or generates an id:"ext-comp-" + (++Ext.Component.AUTO_ID)
Returns the id of this component or generates an id:
"ext-comp-" + (++Ext.Component.AUTO_ID)
Parameters:
  • None.
Returns:
  • String
Component
getInnerHeight() : Number
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame he...
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
Parameters:
  • None.
Returns:
  • Number
    The body height
Panel
getInnerWidth() : Number
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame widt...
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
Parameters:
  • None.
Returns:
  • Number
    The body width
Panel
getItemId() : String
Returns the item id of this component.
Returns the item id of this component.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getTool( String id ) : Object
Retrieve a tool by id.
Retrieve a tool by id.
Parameters:
  • id : String
Returns:
  • Object
    tool
Panel
getTopToolbar() : Ext.Toolbar
Returns the toolbar from the top (tbar) section of the panel.
Returns the toolbar from the top (tbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getUpdater() : Ext.Updater
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Parameters:
  • None.
Returns:
  • Ext.Updater
    The Updater
Panel
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component.
Hide this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
load( Object/String/Function config ) : Ext.Panel
Loads this content panel immediately with content returned from an XHR call.
Loads this content panel immediately with content returned from an XHR call.
Parameters:
  • config : Object/String/Function
    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.
Returns:
  • Ext.Panel
    this
Panel
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass( String cls ) : void
Sets the CSS class that provides the icon image for this panel. This method will replace any existing icon class if ...
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 iconchange event after completion.
Parameters:
  • cls : String
    The new CSS class name
Returns:
  • void
Panel
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setTitle( String title, [String iconCls] ) : void
Sets the title text for the panel and optionally the icon class. In order to be able to set the title, a header eleme...

Sets the title text for the panel and optionally the 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 title, or configuring it with header: true.

Parameters:
  • title : String
    The title text to set
  • iconCls : String
    (optional) iconCls A user-defined CSS class that provides the icon image for this panel
Returns:
  • void
Panel
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component.
Show this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse( Boolean animate ) : Ext.Panel
Shortcut for performing an expand or collapse based on the current state of the panel.
Shortcut for performing an expand or collapse based on the current state of the panel.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
activate : ( Ext.Panel p )
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some...
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been activated.
Panel
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished.
Fires after the component rendering is finished.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforeclose : ( Ext.Panel p )
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses d...
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like 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.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being closed.
Panel
beforecollapse : ( Ext.Panel p, Boolean animate )
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel being collapsed.
  • animate : Boolean
    True if the collapse is animated, else false.
Panel
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false to stop the destroy.
Fires before the component is destroyed. Return false to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p, Boolean animate )
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being expanded.
  • animate : Boolean
    True if the expand is animated, else false.
Panel
beforehide : ( Ext.Component this )
Fires before the component is hidden. Return false to stop the hide.
Fires before the component is hidden. Return false to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false to stop the render.
Fires before the component is rendered. Return false to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown. Return false to stop the show.
Fires before the component is shown. Return false to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false to stop the restore.
Fires before the state of the component is restored. Return false to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
bodyresize : ( Ext.Panel p, Number width, Number height )
Fires after the Panel has been resized.
Fires after the Panel has been resized.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has been resized.
  • width : Number
    The Panel's new width.
  • height : Number
    The Panel's new height.
Panel
close : ( Ext.Panel p )
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do...
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel within a Ext.TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been closed.
Panel
collapse : ( Ext.Panel p )
Fires after the Panel has been collapsed.
Fires after the Panel has been collapsed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel that has been collapsed.
Panel
deactivate : ( Ext.Panel p )
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but ...
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been deactivated.
Panel
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
Fires after the Panel has been expanded.
Fires after the Panel has been expanded.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been expanded.
Panel
hide : ( Ext.Component this )
Fires after the component is hidden.
Fires after the component is hidden.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p, String The, String The )
Fires after the Panel icon class has been set or changed.
Fires after the Panel icon class has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its icon class changed.
  • The : String
    new icon class.
  • The : String
    old icon class.
Panel
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown.
Fires after the component is shown.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
titlechange : ( Ext.Panel p, String The )
Fires after the Panel title has been set or changed.
Fires after the Panel title has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its title changed.
  • The : String
    new title.
Panel


类Ext.chart.Axis

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.Axis
继承自于： | Object
Defines a CartesianChart's vertical or horizontal axis.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | type: String The type of axis. The type of axis. | Axis
 | orientation: String The direction in which the axis i... The direction in which the axis is drawn. May be "horizontal" or "vertical". | Axis
 | reverse: Boolean If true, the items on the axis wi... If true, the items on the axis will be drawn in opposite direction. | Axis
 | labelFunction: String A string reference to the globall... A string reference to the globally-accessible function that may be called to determine each of the label values for this axis. | Axis
 | hideOverlappingLabels: Boolean If true, labels that overlap prev... If true, labels that overlap previously drawn labels on the axis will be hidden. | Axis

公共方法

方法 定义者
Axis()
参数项：
  • None.
返回值：
  • void
Axis

公共事件

这个类没有公告事件。


类Ext.chart.BarChart

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.BarChart
继承自于： | Ext.chart.CartesianChart

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
BarChart()
参数项：
  • None.
返回值：
  • void
BarChart
CartesianChart()
参数项：
  • None.
返回值：
  • void
CartesianChart
Chart()
参数项：
  • None.
返回值：
  • void
Chart
setStyle( String Name, Object New )
Sets a single style value on the Ch...
Sets a single style value on the Chart instance.
参数项：
  • Name : String
    of the Chart style value to change.
  • New : Object
    value to pass to the Chart style.
返回值：
  • void
Chart
setStyles( Object Initializer )
Resets all styles on the Chart inst...
Resets all styles on the Chart instance.
参数项：
  • Initializer : Object
    for all Chart styles.
返回值：
  • void
Chart
setSeriesStyles( Array Initializer )
Sets the styles on all series in th...
Sets the styles on all series in the Chart.
参数项：
  • Initializer : Array
    for all Chart series styles.
返回值：
  • void
Chart
bindStore( Store store )
Changes the data store bound to thi...
Changes the data store bound to this chart and refreshes it.
参数项：
  • store : Store
    The store to bind to this chart
返回值：
  • void
Chart
FlashComponent()
参数项：
  • None.
返回值：
  • void
FlashComponent
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.chart.BarSeries

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.BarSeries
继承自于： | Ext.chart.CartesianSeries
BarSeries class for the charts widget.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | xField: String The field used to access the x-ax... The field used to access the x-axis value from the items from the data source. | CartesianSeries
 | yField: String The field used to access the y-ax... The field used to access the y-axis value from the items from the data source. | CartesianSeries
 | type: String The type of series. The type of series. | Series
 | displayName: String The human-readable name of the se... The human-readable name of the series. | Series

公共方法

方法 定义者
BarSeries()
参数项：
  • None.
返回值：
  • void
BarSeries
CartesianSeries()
参数项：
  • None.
返回值：
  • void
CartesianSeries
Series()
参数项：
  • None.
返回值：
  • void
Series

公共事件

这个类没有公告事件。


类Ext.chart.CartesianChart

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.CartesianChart
继承自于： | Ext.chart.Chart

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
CartesianChart()
参数项：
  • None.
返回值：
  • void
CartesianChart
Chart()
参数项：
  • None.
返回值：
  • void
Chart
setStyle( String Name, Object New )
Sets a single style value on the Ch...
Sets a single style value on the Chart instance.
参数项：
  • Name : String
    of the Chart style value to change.
  • New : Object
    value to pass to the Chart style.
返回值：
  • void
Chart
setStyles( Object Initializer )
Resets all styles on the Chart inst...
Resets all styles on the Chart instance.
参数项：
  • Initializer : Object
    for all Chart styles.
返回值：
  • void
Chart
setSeriesStyles( Array Initializer )
Sets the styles on all series in th...
Sets the styles on all series in the Chart.
参数项：
  • Initializer : Array
    for all Chart series styles.
返回值：
  • void
Chart
bindStore( Store store )
Changes the data store bound to thi...
Changes the data store bound to this chart and refreshes it.
参数项：
  • store : Store
    The store to bind to this chart
返回值：
  • void
Chart
FlashComponent()
参数项：
  • None.
返回值：
  • void
FlashComponent
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.chart.CartesianSeries

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.CartesianSeries
继承自于： | Ext.chart.Series
CartesianSeries class for the charts widget.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | xField: String The field used to access the x-ax... The field used to access the x-axis value from the items from the data source. | CartesianSeries
 | yField: String The field used to access the y-ax... The field used to access the y-axis value from the items from the data source. | CartesianSeries
 | type: String The type of series. The type of series. | Series
 | displayName: String The human-readable name of the se... The human-readable name of the series. | Series

公共方法

方法 定义者
CartesianSeries()
参数项：
  • None.
返回值：
  • void
CartesianSeries
Series()
参数项：
  • None.
返回值：
  • void
Series

公共事件

这个类没有公告事件。


类Ext.chart.CategoryAxis

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.CategoryAxis
继承自于： | Ext.chart.Axis
A type of axis that displays items in categories.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | categoryNames: Array A list of category names to displ... A list of category names to display along this axis. | CategoryAxis
 | type: String The type of axis. The type of axis. | Axis
 | orientation: String The direction in which the axis i... The direction in which the axis is drawn. May be "horizontal" or "vertical". | Axis
 | reverse: Boolean If true, the items on the axis wi... If true, the items on the axis will be drawn in opposite direction. | Axis
 | labelFunction: String A string reference to the globall... A string reference to the globally-accessible function that may be called to determine each of the label values for this axis. | Axis
 | hideOverlappingLabels: Boolean If true, labels that overlap prev... If true, labels that overlap previously drawn labels on the axis will be hidden. | Axis

公共方法

方法 定义者
CategoryAxis()
参数项：
  • None.
返回值：
  • void
CategoryAxis
Axis()
参数项：
  • None.
返回值：
  • void
Axis

公共事件

这个类没有公告事件。


类Ext.chart.Chart

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.Chart
继承自于： | Ext.FlashComponent

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Chart()
参数项：
  • None.
返回值：
  • void
Chart
setStyle( String Name, Object New )
Sets a single style value on the Ch...
Sets a single style value on the Chart instance.
参数项：
  • Name : String
    of the Chart style value to change.
  • New : Object
    value to pass to the Chart style.
返回值：
  • void
Chart
setStyles( Object Initializer )
Resets all styles on the Chart inst...
Resets all styles on the Chart instance.
参数项：
  • Initializer : Object
    for all Chart styles.
返回值：
  • void
Chart
setSeriesStyles( Array Initializer )
Sets the styles on all series in th...
Sets the styles on all series in the Chart.
参数项：
  • Initializer : Array
    for all Chart series styles.
返回值：
  • void
Chart
bindStore( Store store )
Changes the data store bound to thi...
Changes the data store bound to this chart and refreshes it.
参数项：
  • store : Store
    The store to bind to this chart
返回值：
  • void
Chart
FlashComponent()
参数项：
  • None.
返回值：
  • void
FlashComponent
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.chart.ColumnChart

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.ColumnChart
继承自于： | Ext.chart.CartesianChart

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
ColumnChart()
参数项：
  • None.
返回值：
  • void
ColumnChart
CartesianChart()
参数项：
  • None.
返回值：
  • void
CartesianChart
Chart()
参数项：
  • None.
返回值：
  • void
Chart
setStyle( String Name, Object New )
Sets a single style value on the Ch...
Sets a single style value on the Chart instance.
参数项：
  • Name : String
    of the Chart style value to change.
  • New : Object
    value to pass to the Chart style.
返回值：
  • void
Chart
setStyles( Object Initializer )
Resets all styles on the Chart inst...
Resets all styles on the Chart instance.
参数项：
  • Initializer : Object
    for all Chart styles.
返回值：
  • void
Chart
setSeriesStyles( Array Initializer )
Sets the styles on all series in th...
Sets the styles on all series in the Chart.
参数项：
  • Initializer : Array
    for all Chart series styles.
返回值：
  • void
Chart
bindStore( Store store )
Changes the data store bound to thi...
Changes the data store bound to this chart and refreshes it.
参数项：
  • store : Store
    The store to bind to this chart
返回值：
  • void
Chart
FlashComponent()
参数项：
  • None.
返回值：
  • void
FlashComponent
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.chart.ColumnSeries

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.ColumnSeries
继承自于： | Ext.chart.CartesianSeries
ColumnSeries class for the charts widget.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | xField: String The field used to access the x-ax... The field used to access the x-axis value from the items from the data source. | CartesianSeries
 | yField: String The field used to access the y-ax... The field used to access the y-axis value from the items from the data source. | CartesianSeries
 | type: String The type of series. The type of series. | Series
 | displayName: String The human-readable name of the se... The human-readable name of the series. | Series

公共方法

方法 定义者
ColumnSeries()
参数项：
  • None.
返回值：
  • void
ColumnSeries
CartesianSeries()
参数项：
  • None.
返回值：
  • void
CartesianSeries
Series()
参数项：
  • None.
返回值：
  • void
Series

公共事件

这个类没有公告事件。


类Ext.chart.LineChart

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.LineChart
继承自于： | Ext.chart.CartesianChart

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
LineChart()
参数项：
  • None.
返回值：
  • void
LineChart
CartesianChart()
参数项：
  • None.
返回值：
  • void
CartesianChart
Chart()
参数项：
  • None.
返回值：
  • void
Chart
setStyle( String Name, Object New )
Sets a single style value on the Ch...
Sets a single style value on the Chart instance.
参数项：
  • Name : String
    of the Chart style value to change.
  • New : Object
    value to pass to the Chart style.
返回值：
  • void
Chart
setStyles( Object Initializer )
Resets all styles on the Chart inst...
Resets all styles on the Chart instance.
参数项：
  • Initializer : Object
    for all Chart styles.
返回值：
  • void
Chart
setSeriesStyles( Array Initializer )
Sets the styles on all series in th...
Sets the styles on all series in the Chart.
参数项：
  • Initializer : Array
    for all Chart series styles.
返回值：
  • void
Chart
bindStore( Store store )
Changes the data store bound to thi...
Changes the data store bound to this chart and refreshes it.
参数项：
  • store : Store
    The store to bind to this chart
返回值：
  • void
Chart
FlashComponent()
参数项：
  • None.
返回值：
  • void
FlashComponent
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.chart.LineSeries

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.LineSeries
继承自于： | Ext.chart.CartesianSeries
LineSeries class for the charts widget.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | xField: String The field used to access the x-ax... The field used to access the x-axis value from the items from the data source. | CartesianSeries
 | yField: String The field used to access the y-ax... The field used to access the y-axis value from the items from the data source. | CartesianSeries
 | type: String The type of series. The type of series. | Series
 | displayName: String The human-readable name of the se... The human-readable name of the series. | Series

公共方法

方法 定义者
LineSeries()
参数项：
  • None.
返回值：
  • void
LineSeries
CartesianSeries()
参数项：
  • None.
返回值：
  • void
CartesianSeries
Series()
参数项：
  • None.
返回值：
  • void
Series

公共事件

这个类没有公告事件。


类Ext.chart.NumericAxis

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.NumericAxis
继承自于： | Ext.chart.Axis
A type of axis whose units are measured in numeric values.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | minimum: Number The minimum value drawn by the ax... The minimum value drawn by the axis. If not set explicitly, the axis minimum will be calculated automatically. | NumericAxis
 | maximum: Number The maximum value drawn by the ax... The maximum value drawn by the axis. If not set explicitly, the axis maximum will be calculated automatically. | NumericAxis
 | majorUnit: Number The spacing between major interva... The spacing between major intervals on this axis. | NumericAxis
 | minorUnit: Number The spacing between minor interva... The spacing between minor intervals on this axis. | NumericAxis
 | snapToUnits: Boolean If true, the labels, ticks, gridl... 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. | NumericAxis
 | alwaysShowZero: Boolean If true, and the bounds are calcu... If true, and the bounds are calculated automatically, either the minimum or maximum will be set to zero. | NumericAxis
 | scale: String The scaling algorithm to use on t... The scaling algorithm to use on this axis. May be "linear" or "logarithmic". | NumericAxis
 | type: String The type of axis. The type of axis. | Axis
 | orientation: String The direction in which the axis i... The direction in which the axis is drawn. May be "horizontal" or "vertical". | Axis
 | reverse: Boolean If true, the items on the axis wi... If true, the items on the axis will be drawn in opposite direction. | Axis
 | labelFunction: String A string reference to the globall... A string reference to the globally-accessible function that may be called to determine each of the label values for this axis. | Axis
 | hideOverlappingLabels: Boolean If true, labels that overlap prev... If true, labels that overlap previously drawn labels on the axis will be hidden. | Axis

公共方法

方法 定义者
NumericAxis()
参数项：
  • None.
返回值：
  • void
NumericAxis
Axis()
参数项：
  • None.
返回值：
  • void
Axis

公共事件

这个类没有公告事件。


类Ext.chart.PieChart

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.PieChart
继承自于： | Ext.chart.Chart

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
PieChart()
参数项：
  • None.
返回值：
  • void
PieChart
Chart()
参数项：
  • None.
返回值：
  • void
Chart
setStyle( String Name, Object New )
Sets a single style value on the Ch...
Sets a single style value on the Chart instance.
参数项：
  • Name : String
    of the Chart style value to change.
  • New : Object
    value to pass to the Chart style.
返回值：
  • void
Chart
setStyles( Object Initializer )
Resets all styles on the Chart inst...
Resets all styles on the Chart instance.
参数项：
  • Initializer : Object
    for all Chart styles.
返回值：
  • void
Chart
setSeriesStyles( Array Initializer )
Sets the styles on all series in th...
Sets the styles on all series in the Chart.
参数项：
  • Initializer : Array
    for all Chart series styles.
返回值：
  • void
Chart
bindStore( Store store )
Changes the data store bound to thi...
Changes the data store bound to this chart and refreshes it.
参数项：
  • store : Store
    The store to bind to this chart
返回值：
  • void
Chart
FlashComponent()
参数项：
  • None.
返回值：
  • void
FlashComponent
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.chart.PieSeries

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.PieSeries
继承自于： | Ext.chart.Series
PieSeries class for the charts widget.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | type: String The type of series. The type of series. | Series
 | displayName: String The human-readable name of the se... The human-readable name of the series. | Series

公共方法

方法 定义者
PieSeries()
参数项：
  • None.
返回值：
  • void
PieSeries
Series()
参数项：
  • None.
返回值：
  • void
Series

公共事件

这个类没有公告事件。


类Ext.chart.Series

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.Series
继承自于： | Object
Series class for the charts widget.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | type: String The type of series. The type of series. | Series
 | displayName: String The human-readable name of the se... The human-readable name of the series. | Series

公共方法

方法 定义者
Series()
参数项：
  • None.
返回值：
  • void
Series

公共事件

这个类没有公告事件。


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart
              StackedBarChart

Class Ext.chart.StackedBarChart

Package: | Ext.chart
Defined In: | Chart.js
Class: | StackedBarChart
Extends: | CartesianChart
xtype: | stackedbarchart

Config Options

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
backgroundColor : String
The background color of the chart. Defaults to '#ffffff'.
FlashComponent
chartStyle : Object
Sets styles for this chart. Contains a number of default values. Modifying this property will override the base styl...
Sets styles for this chart. Contains a number of default values. Modifying this property will override the base styles on the chart.
Chart
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disableCaching : Boolean
True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
Chart
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
expressInstall : Boolean
True to prompt the user to install flash if not installed. Note that this uses Ext.FlashComponent.EXPRESS_INSTALL_URL...
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.
FlashComponent
extraStyle : Object
Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null.
Chart
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashVersion : String
Indicates the version the flash content was published for. Defaults to '9.0.45'.
FlashComponent
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
url : String
The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should be modified to point to the...
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.
Chart
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
wmode : String
The wmode of the flash object. This can be used to control layering. Defaults to 'opaque'.
FlashComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
CHART_URL : String
Sets the url to load the chart from. This should be set to a local resource.
Chart
EXPRESS_INSTALL_URL : String
Sets the url for installing flash if it doesn't exist. This should be set to a local resource.
FlashComponent
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
StackedBarChart()
Parameters:
  • None.
Returns:
  • void
xtype: stackedbarchart
StackedBarChart
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bindStore( Store store ) : void
Changes the data store bound to this chart and refreshes it.
Changes the data store bound to this chart and refreshes it.
Parameters:
  • store : Store
    The store to bind to this chart
Returns:
  • void
Chart
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles( styles {Array} ) : void
Sets the styles on all series in the Chart.
Sets the styles on all series in the Chart.
Parameters:
  • {Array} : styles
    Initializer for all Chart series styles.
Returns:
  • void
Chart
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setStyle( name {String}, value {Object} ) : void
Sets a single style value on the Chart instance.
Sets a single style value on the Chart instance.
Parameters:
  • {String} : name
    Name of the Chart style value to change.
  • {Object} : value
    New value to pass to the Chart style.
Returns:
  • void
Chart
setStyles( styles {Object} ) : void
Resets all styles on the Chart instance.
Resets all styles on the Chart instance.
Parameters:
  • {Object} : styles
    Initializer for all Chart styles.
Returns:
  • void
Chart
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


Observable
    Component
      BoxComponent
        FlashComponent
          Chart
            CartesianChart
              StackedColumnChart

Class Ext.chart.StackedColumnChart

Package: | Ext.chart
Defined In: | Chart.js
Class: | StackedColumnChart
Extends: | CartesianChart
xtype: | stackedcolumnchart

Config Options

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
backgroundColor : String
The background color of the chart. Defaults to '#ffffff'.
FlashComponent
chartStyle : Object
Sets styles for this chart. Contains a number of default values. Modifying this property will override the base styl...
Sets styles for this chart. Contains a number of default values. Modifying this property will override the base styles on the chart.
Chart
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disableCaching : Boolean
True to add a "cache buster" to the end of the chart url. Defaults to true for Opera and IE.
Chart
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
expressInstall : Boolean
True to prompt the user to install flash if not installed. Note that this uses Ext.FlashComponent.EXPRESS_INSTALL_URL...
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.
FlashComponent
extraStyle : Object
Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null.
Chart
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
flashVersion : String
Indicates the version the flash content was published for. Defaults to '9.0.45'.
FlashComponent
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
url : String
The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should be modified to point to the...
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.
Chart
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
wmode : String
The wmode of the flash object. This can be used to control layering. Defaults to 'opaque'.
FlashComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
CHART_URL : String
Sets the url to load the chart from. This should be set to a local resource.
Chart
EXPRESS_INSTALL_URL : String
Sets the url for installing flash if it doesn't exist. This should be set to a local resource.
FlashComponent
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
StackedColumnChart()
Parameters:
  • None.
Returns:
  • void
xtype: stackedcolumnchart
StackedColumnChart
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bindStore( Store store ) : void
Changes the data store bound to this chart and refreshes it.
Changes the data store bound to this chart and refreshes it.
Parameters:
  • store : Store
    The store to bind to this chart
Returns:
  • void
Chart
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSeriesStyles( styles {Array} ) : void
Sets the styles on all series in the Chart.
Sets the styles on all series in the Chart.
Parameters:
  • {Array} : styles
    Initializer for all Chart series styles.
Returns:
  • void
Chart
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setStyle( name {String}, value {Object} ) : void
Sets a single style value on the Chart instance.
Sets a single style value on the Chart instance.
Parameters:
  • {String} : name
    Name of the Chart style value to change.
  • {Object} : value
    New value to pass to the Chart style.
Returns:
  • void
Chart
setStyles( styles {Object} ) : void
Resets all styles on the Chart instance.
Resets all styles on the Chart instance.
Parameters:
  • {Object} : styles
    Initializer for all Chart styles.
Returns:
  • void
Chart
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


类Ext.chart.TimeAxis

包： | Extchart
定义的文件： | Chart.js
类全称： | Ext.chart.TimeAxis
继承自于： | Ext.chart.Axis
A type of axis whose units are measured in time-based values.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | minimum: Date The minimum value drawn by the ax... The minimum value drawn by the axis. If not set explicitly, the axis minimum will be calculated automatically. | TimeAxis
 | maximum: Number The maximum value drawn by the ax... The maximum value drawn by the axis. If not set explicitly, the axis maximum will be calculated automatically. | TimeAxis
 | majorUnit: Number The spacing between minor interva... The spacing between minor intervals on this axis. | TimeAxis
 | majorTimeUnit: String The time unit used by the minorUn... The time unit used by the minorUnit. | TimeAxis
 | snapToUnits: Boolean If true, the labels, ticks, gridl... 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. | TimeAxis
 | type: String The type of axis. The type of axis. | Axis
 | orientation: String The direction in which the axis i... The direction in which the axis is drawn. May be "horizontal" or "vertical". | Axis
 | reverse: Boolean If true, the items on the axis wi... If true, the items on the axis will be drawn in opposite direction. | Axis
 | labelFunction: String A string reference to the globall... A string reference to the globally-accessible function that may be called to determine each of the label values for this axis. | Axis
 | hideOverlappingLabels: Boolean If true, labels that overlap prev... If true, labels that overlap previously drawn labels on the axis will be hidden. | Axis

公共方法

方法 定义者
TimeAxis()
参数项：
  • None.
返回值：
  • void
TimeAxis
Axis()
参数项：
  • None.
返回值：
  • void
Axis

公共事件

这个类没有公告事件。


类Ext.ColorPalette

包： | Ext
定义的文件： | ColorPalette.js
类全称： | Ext.ColorPalette
继承自于： | 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){
    // 用selColor来做此事情 do something with selColor
});

配置项

配置项 定义者
tpl : String
用于渲染该组件的XTemplate字符串。An existing XT...
用于渲染该组件的XTemplate字符串。An existing XTemplate instance to be used in place of the default template for rendering the component.
ColorPalette
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
value : String
初始化时高亮的颜色（必须为不包含 # 符号的6位16进制颜色编码）。注...
初始化时高亮的颜色（必须为不包含 # 符号的6位16进制颜色编码）。注意16进制编码是区分大小写的。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.
ColorPalette
allowReselect : Boolean
如果值为 true，则在触发select事件时重选已经选择的颜色。If...
如果值为 true，则在触发select事件时重选已经选择的颜色。If set to true then reselecting a color that is already selected fires the select event
ColorPalette
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
: Array
一个由6位16进制颜色编码组成的数组(不包含#符号)。此数组可以包含...

一个由6位16进制颜色编码组成的数组(不包含#符号)。此数组可以包含任意个数颜色， 且每个16进制编码必须是唯一的。调色板的宽度可以通过设置样式表中的'x-color-palette'类的width属性来控制（或者指定一个制定的类）， 因此你可以通过调整颜色的个数和调色板的宽度来使调色板保持对称。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"];
ColorPalette
initialConfig: Object
组件初始化配置项。只读的。This Component's init...
组件初始化配置项。只读的。This Component's initial configuration specification. Read-only.
Component
el: Ext.Element
该组件的Ext.Element元素对象。只读的。 用getEl可返回...

该组件的Ext.Element元素对象。只读的。

用getEl可返回该对象。

 Component
ownerCt: Ext.Container
组件自身的Ext.Container（默认是undefined，只有...
组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.
Component
hidden: Boolean
True表示为组件是隐藏的。只读的。True if this com...
True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only.
Component
disabled: Boolean
True表示为组件已被禁止。只读的。True if this com...
True表示为组件已被禁止。只读的。True if this component is disabled. Read-only.
Component
rendered: Boolean
True表示为该组件已经渲染好了。只读的。True if this ...
True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only.
Component

公共方法

方法 定义者
ColorPalette( Object config )
参数项：
  • config : Object
    配置项对象 The config object
返回值：
  • void
ColorPalette
select( String color )
在调色板中选择指定的颜色（触发select事件）。Selects th...
在调色板中选择指定的颜色（触发select事件）。Selects the specified color in the palette (fires the select event)
参数项：
  • color : String
    6位16进制颜色编码（如果含有#符号则自动舍去）。A valid 6-digit color hex code (# will be stripped if included)
返回值：
  • void
ColorPalette
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
select()
颜色被选取时触发。Fires when a color is sele...
颜色被选取时触发。Fires when a color is selected
侦听器会传入以下的参数：
  • None.
 ColorPalette
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.Component

包： | Ext
定义的文件： | Component.js
类全称： | Ext.Component
继承自于： | Ext.util.Observable

全体Ext组件的基类。Component下所有的子类均按照统一的Ext组件生命周期（lifeycle）执行运作， 即创建、渲染和销毁（creation、rendering和destruction），并具有隐藏/显示、启用/禁用的基本行为特性。Component下的子类可被延时渲染（lazy-rendered）成为Ext.Container的一种，同时自动登记到Ext.ComponentMgr，这样便可在后面的代码使用ExtgetCmp获取组件的引用。当需要以盒子模型（box model）的模式管理这些可视的器件（widgets），这些器件就必须从Component（或Ext.BoxComponent）继承。
Base class for all Ext components. All subclasses of Component can automatically participate in the standard Ext component lifecycle of creation, rendering and destruction. They also have automatic support for basic hide/show and enable/disable behavior. Component allows any subclass to be lazy-rendered into any Ext.Container and to be automatically registered with the Ext.ComponentMgr so that it can be referenced at any time via ExtgetCmp. All visual widgets that require rendering into a layout should subclass Component (or Ext.BoxComponent if managed box model handling is required).

可参阅教程Creating new UI controls创建自定义的组件。See the Creating new UI controls tutorial for details on how and to either extend or augment ExtJs base classes to create custom Components.

每种component都有特定的类型，是Ext自身设置的类型。对xtype检查的相关方法如getXType和isXType。这里是所有有效的xtypes列表： Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. This is the list of all valid xtypes:

xtype            类 Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
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
grid             Ext.grid.GridPanel
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

工具条组件 Toolbar components
---------------------------------------
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

表单组件 Form components
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
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
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对象 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

配置项

配置项 定义者
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.ComponentMgr

包： | Ext
定义的文件： | ComponentMgr.js
类全称： | Ext.ComponentMgr
继承自于： | Object

为页面上全体的组件（特指Ext.Component的子类）以便能够可通过组件的id方便地去访问，（参见Ext.getCmp方法）。
Provides a registry of all Components (instances of Ext.Component or any subclass thereof) on a page so that they can be easily accessed by component id (see get, or the convenience method Ext.getCmp).

此对象对组件的类classes提供索引检索的功能，这个索引应是如Ext.Componentxtype般的易记标识码。对于由大量复合配置对象构成的Ext页面，使用xtype能避免不必要子组件实例化。
This object also provides a registry of available Component classes indexed by a mnemonic code known as the Component's xtype. The xtype provides a way to avoid instantiating child Components when creating a full, nested config object for a complete Ext page.

只要xtype正确声明好，就可利用配置项对象（config object）表示一个子组件。这样如遇到组件真是需要显示的时候，与之适合的类型(xtype)就会匹配对应的组件类，达到延时实例化（lazy instantiation）。
A child Component may be specified simply as a config object as long as the correct xtype is specified so that if and when the Component needs rendering, the correct type can be looked up for lazy instantiation.

全部的xtype列表可参阅Ext.Component。
For a list of all available xtypes, see Ext.Component.

@singleton

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | all: MixedCollection 为组件缓存所使用的MixedCollection。可在这个Mixed... 为组件缓存所使用的MixedCollection。可在这个MixedCollection中加入相应的事件，监视增加或移除的情况。只读的。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. | ComponentMgr

公共方法

方法 定义者
register( Ext.Component c )
注册一个组件。Registers a component.
注册一个组件。Registers a component.
参数项：
  • c : Ext.Component
    组件对象。The component
返回值：
  • void
ComponentMgr
unregister( Ext.Component c )
撤消登记一个组件。Unregisters a component.
撤消登记一个组件。Unregisters a component.
参数项：
  • c : Ext.Component
    组件对象。The component
返回值：
  • void
ComponentMgr
get( String id ) : Ext.Component
由id返回组件。Returns a component by id
由id返回组件。Returns a component by id
参数项：
  • id : String
    组件的id。The component id
返回值：
  • Ext.Component
ComponentMgr
onAvailable( String id, Function fn, Object scope )
当指定组件被加入到ComponentMgr时调用的函数。Registe...
当指定组件被加入到ComponentMgr时调用的函数。Registers a function that will be called when a specified component is added to ComponentMgr
参数项：
  • id : String
    组件Id。The component id
  • fn : Function
    回调函数。The callback function
  • scope : Object
    回调的作用域。The scope of the callback
返回值：
  • void
ComponentMgr
registerType( String xtype, Constructor cls )
输入新的Ext.Componentxtype，登记一个新组件的构造器...

输入新的Ext.Componentxtype，登记一个新组件的构造器。Registers a new Component constructor, keyed by a new Ext.Componentxtype.

使用该方法登记Ext.Component的子类以便当指定子组件的xtype时即可延时加载（lazy instantiation）。请参阅Ext.Containeritems。Use this method to register new subclasses of Ext.Component so that lazy instantiation may be used when specifying child Components. see Ext.Containeritems

参数项：
  • xtype : String
    组件类的标识字符串。The mnemonic string by which the Component class may be looked up.
  • cls : Constructor
    新的组件类。The new Component class.
返回值：
  • void
ComponentMgr
create( Object config, Constructor defaultType ) : Ext.Component
告诉需要哪个组建的xtype，添加适合的配置项对象，就创建新的Comp...
告诉需要哪个组建的xtype，添加适合的配置项对象，就创建新的Component，实际上返回这个类的实例。Creates a new Component from the specified config object using the config object's xtype to determine the class to instantiate.
参数项：
  • config : Object
    你打算创建组件的配置项对象。A configuration object for the Component you wish to create.
  • defaultType : Constructor
    如果第一个参数不包含组件的xtype就在第二个参数中指定，作为默认的组件类型。（如果第一个参数已经有的话这个参数就可选吧）。The constructor to provide the default Component type if the config object does not contain an xtype. (Optional if the config contains an xtype).
返回值：
  • Ext.Component
    刚实例化的组件。The newly instantiated Component.
ComponentMgr
reg( String xtype, Constructor cls )
Shorthand for Ext.ComponentMgrregis...
Shorthand for Ext.ComponentMgrregisterType
参数项：
  • xtype : String
    The mnemonic string by which the Component class may be looked up.
  • cls : Constructor
    The new Component class. @member Ext
返回值：
  • void
ComponentMgr

公共事件

这个类没有公告事件。


类Ext.CompositeElement

包： | Ext
定义的文件： | CompositeElement.js
类全称： | Ext.CompositeElement
继承自于： | Object
标准的复合类（composite class）。为集合中每个元素创建一个Ext.Element。

注意：尽管未全部罗列，该类支持全部Ext.Element的set/update方法。集合里面的全部元素都会执行所有的Ext.Element动作。

所有的方法都返回this所以可写成链式的语法。

 var els = Ext.select("#some-el div.some-class", true);
 //或者是从现有的元素直接选择
 var el = Ext.get('some-el');
 el.select('div.some-class', true);

 els.setWidth(100); // 所有的元素变为宽度100
 els.hide(true); // 所有的元素渐隐。// 或
 els.setWidth(100).hide(true);

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
fill( String/Array els ) : CompositeElement
清除该composite，将传入一个选择符的元素加入到composite中。
清除该composite，将传入一个选择符的元素加入到composite中。
参数项：
  • els : String/Array
    CSS选择符，一个或多个元素组成的数组
返回值：
  • CompositeElement
    this
CompositeElement
filter( String selector ) : CompositeElement
传入一个选择符的参数,若匹配成功，则保存到该composite，其它的...
传入一个选择符的参数,若匹配成功，则保存到该composite，其它的就会被过滤
参数项：
  • selector : String
    CSS选择符字符串
返回值：
  • CompositeElement
    this
CompositeElement
add( String/Array els ) : CompositeElement
加入元素到这个composite.
加入元素到这个composite.
参数项：
  • els : String/Array
    CSS选择符，一个或多个元素组成的数组
返回值：
  • CompositeElement
    this
CompositeElement
each( Function fn, Object scope ) : CompositeElement
传入一个Function类型的参数，在这个composite中每个元素...
传入一个Function类型的参数，在这个composite中每个元素中执行Function（带参数el, this, index）。
参数项：
  • fn : Function
    要调用的函数
  • scope : Object
    (可选的) this 指向的对象（默认为element）
返回值：
  • CompositeElement
    this
CompositeElement
item( Number index ) : Ext.Element
根据指定的索引返回元素对象
根据指定的索引返回元素对象
参数项：
  • index : Number
返回值：
  • Ext.Element
CompositeElement
first() : Ext.Element
返回第一个元素
返回第一个元素
参数项：
  • None.
返回值：
  • Ext.Element
CompositeElement
last() : Ext.Element
返回最后的元素
返回最后的元素
参数项：
  • None.
返回值：
  • Ext.Element
CompositeElement
getCount() : Number
返回该composite的元素的总数
返回该composite的元素的总数
参数项：
  • None.
返回值：
  • Number
CompositeElement
contains() : Boolean
传入一个元素的参数，如果该composite里面有的话返回true
传入一个元素的参数，如果该composite里面有的话返回true
参数项：
  • None.
返回值：
  • Boolean
CompositeElement
indexOf() : Boolean
传入一个元素的参数，返回元素第一次出现的位置。
传入一个元素的参数，返回元素第一次出现的位置。
参数项：
  • None.
返回值：
  • Boolean
CompositeElement
removeElement( Mixed el, Boolean removeDom ) : CompositeElement
移除指定的元素。
移除指定的元素。
参数项：
  • el : Mixed
    元素的ID，或是元素本身,也可以是该composite中的元素索引（Number类型），或是以上类型组成的数组。
  • removeDom : Boolean
    （可选的） True表示为DOM文档中的元素一并删除
返回值：
  • CompositeElement
    this
CompositeElement
replaceElement( Mixed el, String/HTMLElement/Element replacement, Boolean removeDom ) : CompositeElement
传入一个元素，替换指定的元素。
传入一个元素，替换指定的元素。
参数项：
  • el : Mixed
    元素的ID，或是元素本身,也可以是该composite中的元素索引（Number类型），或是以上类型组成的数组。
  • replacement : String/HTMLElement/Element
    元素的ID，或是元素本身
  • removeDom : Boolean
    （可选的） True表示为DOM文档中的元素一并删除
返回值：
  • CompositeElement
    this
CompositeElement
clear()
移除所有元素。
移除所有元素。
参数项：
  • None.
返回值：
  • void
CompositeElement

公共事件

这个类没有公告事件。


Class Ext.CompositeElementLite

Package: | Ext
Defined In: | CompositeElementLite-more.js, CompositeElementLite.js
Class: | CompositeElementLite
Subclasses: | CompositeElement
Extends: | Object
Flyweight composite class. Reuses the same Ext.Element for element operations.
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);

NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element actions will be performed on all the elements in this collection.

Public Properties

This class has no public properties.

Public Methods

Method Defined By
clear() : void
Removes all elements.
Removes all elements.
Parameters:
  • None.
Returns:
  • void
CompositeElementLite
contains( el {Mixed} ) : Boolean
Returns true if this composite contains the passed element
Returns true if this composite contains the passed element
Parameters:
  • {Mixed} : el
    The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
Returns:
  • Boolean
CompositeElementLite
each( Function fn, [Object scope] ) : CompositeElement
Calls the passed function passing (el, this, index) for each element in this composite. The element passed is the fl...
Calls the passed function passing (el, this, index) for each element in this composite. The element passed is the flyweight (shared) Ext.Element instance, so if you require a a reference to the dom node, use el.dom.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The this object (defaults to the element)
Returns:
  • CompositeElement
    this
CompositeElementLite
fill( String/Array els ) : CompositeElement
Clears this composite and adds the elements returned by the passed selector.
Clears this composite and adds the elements returned by the passed selector.
Parameters:
  • els : String/Array
    A string CSS selector, an array of elements or an element
Returns:
  • CompositeElement
    this
CompositeElementLite
filter( String selector ) : CompositeElement
Filters this composite to only elements that match the passed selector.
Filters this composite to only elements that match the passed selector.
Parameters:
  • selector : String
    A string CSS selector
Returns:
  • CompositeElement
    this
CompositeElementLite
first() : Ext.Element
Returns the first Element
Returns the first Element
Parameters:
  • None.
Returns:
  • Ext.Element
CompositeElementLite
getCount() : Number
Returns the number of elements in this composite
Returns the number of elements in this composite
Parameters:
  • None.
Returns:
  • Number
CompositeElementLite
handleError( Object/Error e ) : void
Framework-wide error-handler. Developers can override this method to provide custom exception-handling. Framework e...
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.
Parameters:
  • e : Object/Error
    The thrown exception object.
Returns:
  • void
CompositeElementLite
indexOf( el {Mixed} ) : Number
Find the index of the passed element within the composite collection.
Find the index of the passed element within the composite collection.
Parameters:
  • {Mixed} : el
    The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
Returns:
  • Number
    The index of the passed Ext.Element in the composite collection, or -1 if not found.
CompositeElementLite
item( Number index ) : Ext.Element
Returns a flyweight Element of the dom element object at the specified index
Returns a flyweight Element of the dom element object at the specified index
Parameters:
  • index : Number
Returns:
  • Ext.Element
CompositeElementLite
last() : Ext.Element
Returns the last Element
Returns the last Element
Parameters:
  • None.
Returns:
  • Ext.Element
CompositeElementLite
removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement
Removes the specified element(s).
Removes the specified element(s).
Parameters:
  • el : Mixed
    The id of an element, the Element itself, the index of the element in this composite or an array of any of those.
  • removeDom : Boolean
    (optional) True to also remove the element from the document
Returns:
  • CompositeElement
    this
CompositeElementLite
replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement
Replaces the specified element with the passed element.
Replaces the specified element with the passed element.
Parameters:
  • el : Mixed
    The id of an element, the Element itself, the index of the element in this composite to replace.
  • replacement : Mixed
    The id of an element or the Element itself.
  • domReplace : Boolean
    (Optional) True to remove and replace the element in the document too.
Returns:
  • CompositeElement
    this
CompositeElementLite

Public Events

This class has no public events.


类Ext.Container

包： | Ext
定义的文件： | Container.js
类全称： | Ext.Container
继承自于： | Ext.BoxComponent

Ext.BoxComponent的子类，用于承载其它任何组件，容器负责一些基础性的行为，也就是装载子项、添加、插入和移除子项。根据容纳子项的不同，所产生的可视效果，需委托任意布局类layout中的一种来指点特定的布局逻辑（layout logic）。此类被于继承而且一般情况下不应通过关键字new来直接实例化。Base class for any Ext.BoxComponent that can contain other Components. The most commonly used Container classes are Ext.Panel, Ext.Window and Ext.TabPanel, but you can create a lightweight Container to be encapsulated by an HTML element that is created to your specifications at render time by using the autoEl config option which takes the form of a DomHelper specification, or tag name. If you do not need the capabilities offered by the above mentioned classes, for instance when creating embedded column layouts inside FormPanels, then this is a useful technique.

The code below illustrates both how to explicitly create a Container, and how to implicitly create one using the 'container' xtype:

var embeddedColumns = new Ext.Container({
    autoEl: 'div',  // 默认的设置。This is the default
    layout: 'column',
    defaults: {
        xtype: 'container',
        autoEl: 'div', // 默认的设置。This is the default.
        layout: 'form',
        columnWidth: 0.5,
        style: {
            padding: '10px'
        }
    },
// 下面两项都成为Ext.Containers，都是对<DIV>元素的封装。// 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类来完成的。Containers handle the basic behavior of containing items, namely adding, inserting and removing them. The specific layout logic required to visually render contained items is delegated to any one of the different layout classes available.

无论是通过配置项items说明容器的子项，还是动态地加入容器，都要考虑何如安排这些子元素的，并是否处于Ext内建的布局规程下的大小调节控制。When either specifying child items of a Container, or dynamically 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 layout schemes.

默认下，容器使用ContainerLayout规程。该布局规程充其量只会负责渲染子组件，将容器中的内容一个接着一个来渲染，并没有提供任何大小调节的功能。出于该原因，有时在使用GridPanel或TreePanel的时候，误用了某种风格的布局规程便会有不正确的效果。如果容器用着还是ContainerLayout规程，这即意味着调节父容器大小，子容器也是熟视无睹的。By default, Containers use the ContainerLayout scheme. This simply renders child components, appending them one after the other inside the Container, and does not apply any sizing at all. This is a common source of confusion when widgets like GridPanels or TreePanels are added to Containers for which no layout has been specified. If a Container is left to use the ContainerLayout scheme, none of its child components will be resized, or changed in any way when the Container is resized.

A very common example of this is where a developer will attempt to add a GridPanel to a TabPanel by wrapping the GridPanel inside a wrapping Panel and add that wrapping Panel to the TabPanel. This misses the point that Ext's inheritance means that a GridPanel is a Component which can be added unadorned into a Container. If that wrapping Panel has no layout configuration, then the GridPanel will not be sized as expected.

Below is an example of adding a newly created GridPanel to a TabPanel. A TabPanel uses Ext.layout.CardLayout as its layout manager which means all its child items are sized to fit exactly into its client area. The following code requires prior knowledge of how to create GridPanels. See Ext.grid.GridPanel, Ext.data.Store and Ext.data.JsonReader as well as the grid examples in the Ext installation's examples/grid directory.

//  创建一个GridPanel。Create the GridPanel.
myGrid = new Ext.grid.GridPanel({
    store: myStore,
    columns: myColumnModel,
    title: 'Results',
});

myTabPanel.add(myGrid);
myTabPanel.setActiveTab(myGrid);

配置项

配置项 定义者
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.CycleButton

包： | Ext
定义的文件： | CycleButton.js
类全称： | Ext.CycleButton
继承自于： | Ext.SplitButton
一个包含Ext.menu.CheckItem元素的特殊分割按钮。按钮会在点击时自动循环选中每个菜单项，并以该项为活动项触发按钮的change事件（或者调用按钮的changeHandler函数，如果设置过的话）。通过点击箭头区域即可像普通分割按钮那样显示下拉列表。使用示例: A specialized SplitButton that contains a menu of Ext.menu.CheckItem elements. The button automatically cycles through each menu item on click, raising the button's change event (or calling the button's 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);
    }
});

配置项

配置项 定义者
items : Array
一个由Ext.menu.CheckItem config配置项对象组成...
一个由Ext.menu.CheckItem config配置项对象组成的数组，用来创建按钮的菜单项（例如：{text:'Foo', iconCls:'foo-icon'}）。An array of Ext.menu.CheckItem config objects to be used when creating the button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
CycleButton
showText : Boolean
值为 True 时则将活动项的文本显示为按钮的文本（默认为 false...
值为 True 时则将活动项的文本显示为按钮的文本（默认为 false）。True to display the active item's text as the button text (defaults to false)
CycleButton
prependText : String
当没有活动项时按钮显示的文本（仅仅当 showText = true ...
当没有活动项时按钮显示的文本（仅仅当 showText = true 时有效，默认为 ''）。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 '')
CycleButton
changeHandler : Function
每次改变活动项时被调用的函数。如果没有指定该配置项，则分割按钮将触发活...
每次改变活动项时被调用的函数。如果没有指定该配置项，则分割按钮将触发活动项的change事件。调用该函数时将携带下列参数：(SplitButton this, Ext.menu.CheckItem item)。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 change event on active item change. The changeHandler function will be called with the following argument list: (SplitButton this, Ext.menu.CheckItem item)
CycleButton
forceIcon : String
对该按钮设置图标，利用了CSS背景图的方法。无论下拉菜单选择了哪一项都...
对该按钮设置图标，利用了CSS背景图的方法。无论下拉菜单选择了哪一项都会显示这个图标。该项覆盖了原有改变按钮图标原来适应选择项图标的做法。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.
CycleButton
arrowTooltip : String
箭头的title属性。The title attribute of t...
箭头的title属性。The title attribute of the arrow
SplitButton
repeat : Boolean/Object
触发函数是否可以重复触发。默认为false，也可以为Ext.util....
触发函数是否可以重复触发。默认为false，也可以为Ext.util.ClickRepeater的参数对象。while the mouse is down.True to repeat fire the click event while the mouse is down. This can also be
Button
tabIndex : Number
按钮的DOM焦点序号即tab键时候得到焦点的序号（默认为undefin...
按钮的DOM焦点序号即tab键时候得到焦点的序号（默认为undefined）。Set a DOM tabIndex for this button (defaults to undefined)
Button
allowDepress : Boolean
False表示不允许按钮“固定按下的状态”，（默认为undefined...
False表示不允许按钮“固定按下的状态”，（默认为undefined）。当enableToggle激活时，该项才有效。False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when enableToggle is true.
Button
enableToggle : Boolean
True 是否在 pressed/not pressed 这两个状态间...
True 是否在 pressed/not pressed 这两个状态间切换 （默认为false）。True to enable pressed/not pressed toggling (defaults to false)
Button
toggleHandler : Function
当enableToggle激活时，该项才有效。这是点击的处理函数。会送...
当enableToggle激活时，该项才有效。这是点击的处理函数。会送入两个参数： Function called when a Button with enableToggle set to true is clicked. Two arguments are passed:
  • button : Ext.Button
    Button对象。this Button object
  • state : Boolean
    按钮的已发生的状态，true表示按了。The next state if the Button, true means pressed.
 Button
menu : Mixed
标准menu属性 可设置为menu的引用 或者menu的id 或者me...
标准menu属性 可设置为menu的引用 或者menu的id 或者menu的参数对象 （默认为undefined）。Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
Button
menuAlign : String
菜单的对齐方式（参阅Ext.ElementalignTo以了解个中细节...
菜单的对齐方式（参阅Ext.ElementalignTo以了解个中细节，默认为'tl-bl?'）。The position to align the menu to (see Ext.ElementalignTo for more details, defaults to 'tl-bl?').
Button
iconCls : String
用来指定背景图片的样式类。A css class which sets...
用来指定背景图片的样式类。A css class which sets a background image to be used as the icon for this button
Button
type : String
按钮的三种类型（submit、reset、button），默认为'bu...
按钮的三种类型（submit、reset、button），默认为'button'。submit, reset or button - defaults to 'button'
Button
clickEvent : String
handler 处理函数触发事件（默认是单击）。The type of...
handler 处理函数触发事件（默认是单击）。The type of event to map to the button's event handler (defaults to 'click')
Button
handleMouseEvents : Boolean
是否启用mouseover，mouseout与mousedown鼠标事...
是否启用mouseover，mouseout与mousedown鼠标事件（默认为true）。False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
Button
tooltipType : String
tooltip 的显示方式 既可是'qtip'（默认），也可是设置ti...
tooltip 的显示方式 既可是'qtip'（默认），也可是设置title属性的“标题”。The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
Button
buttonSelector : String
（可选的） 分辨DOM结构其中的激活、可点击元素的DomQuery。...

（可选的） 分辨DOM结构其中的激活、可点击元素的DomQuery。(Optional) A DomQuery selector which is used to extract the active, clickable element from the DOM structure created.

当定义了template，你必须保证该选择符的结果限于一个可以获得焦点的元素。When a custom template is used, you must ensure that this selector results in the selection of a focussable element.

默认为"button:first-child"。Defaults to "button:first-child".

 Button
scale : String
（可选的）元素的大小。可允许有这三种的值： (Optional) T...

（可选的）元素的大小。可允许有这三种的值： (Optional) The size of the Button. Three values are allowed:

  • "small"
    按钮元素是16px的高度。Results in the button element being 16px high.
  • "medium"
    按钮元素是24px的高度。Results in the button element being 24px high.
  • "large"
    按钮元素是32px的高度。Results in the button element being 32px high.

默认为"small"。Defaults to "small".

 Button
iconAlign : String
（可选的）渲染图标的按钮方向。可允许有这四种的值： (Optional...

（可选的）渲染图标的按钮方向。可允许有这四种的值： (Optional)The side of the Button box to render the icon. Four values are allowed:

  • "top"
  • "right"
  • "bottom"
  • "left"

默认为"left"。Defaults to "left".

 Button
arrowAlign : String
（可选的）渲染图标的箭头方向，如果有关联menu的话。可允许有这两种的...

（可选的）渲染图标的箭头方向，如果有关联menu的话。可允许有这两种的值： (Optional) The side of the Button box to render the arrow if the button has an associated menu. Two values are allowed:

  • "right"
  • "bottom"

Defaults to "right".

 Button
template : Ext.Template
（可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文...
（可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文本.修改这个属性要主意相关参数不能缺失。(Optional)A 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 getTemplateArgs.
Button
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : Boolean Read-only. 如果按钮是按下状态（仅当enableTogg... Read-only. 如果按钮是按下状态（仅当enableToggle = true时）。True if this button is pressed (only if enableToggle = true) | Button
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | template: Ext.Template @cfg {Ext.Template} template （可选配... @cfg {Ext.Template} template （可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文本.修改这个属性要主意相关参数不能缺失。(Optional)A 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 getTemplateArgs. | Button
 | btnEl: Ext.Element 一个对Button可点击元素的封装。默认下这是<button&... 一个对Button可点击元素的封装。默认下这是<button>元素的引用。只读的。An Element encapsulating the Button's clickable element. By default, this references a <button> element. Read only. | Button
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
CycleButton( Object config )
参数项：
  • config : Object
    配置选项对象。The config object
返回值：
  • void
CycleButton
setActiveItem( Ext.menu.CheckItem item, Boolean suppressEvent )
设置按钮的活动菜单项。Sets the button's active...
设置按钮的活动菜单项。Sets the button's active menu item.
参数项：
  • item : Ext.menu.CheckItem
    被设置的活动项。The item to activate
  • suppressEvent : Boolean
    值为True时阻止触发按钮的change事件（默认为false）。True to prevent the button's change event from firing (defaults to false)
返回值：
  • void
CycleButton
getActiveItem() : Ext.menu.CheckItem
获取当前活动菜单项。Gets the currently active...
获取当前活动菜单项。Gets the currently active menu item.
参数项：
  • None.
返回值：
  • Ext.menu.CheckItem
    活动项。The active item
CycleButton
toggleSelected()
通常情况下该函数仅仅被内部调用，但也可以在外部调用使得按钮将活动项指向...
通常情况下该函数仅仅被内部调用，但也可以在外部调用使得按钮将活动项指向菜单中的下一个选项。如果当前项是菜单中的最后一项，则活动项会被设置为菜单中的第一项。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.
参数项：
  • None.
返回值：
  • void
CycleButton
SplitButton( Object config )
参数项：
  • config : Object
    配置选项对象。The config object
返回值：
  • void
SplitButton
setArrowHandler( Function handler, Object scope )
设置按钮的箭头点击处理函数。Sets this button's ar...
设置按钮的箭头点击处理函数。Sets this button's arrow click handler.
参数项：
  • handler : Function
    点击箭头时调用的函数。The function to call when the arrow is clicked
  • scope : Object
    （可选的）处理函数的作用域。(optional) Scope for the function passed above
返回值：
  • void
SplitButton
Button( Object config )
参数项：
  • config : Object
    参数对象。The config object
返回值：
  • void
Button
getTemplateArgs() : Object
这个方法返回一个提供可替换参数的对象，供Template所使用以创建...

这个方法返回一个提供可替换参数的对象，供Template所使用以创建按钮的DOM结构。TemplateThis method returns an object which provides substitution parameters for the Template used to create this Button's DOM structure.

实例或子类如果在模板上面有变化的话，可提供一个新的该方法之实现，以适应新模板创建不同的DOM结构。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 template returns an Array containing the following items:

  • 按钮的文本text。The Button's text
  • <button>的类型type。The <button>'s type
  • <button> element按钮元素的iconCls。The iconCls applied to the <button> element
  • The cls applied to the Button's main Element
  • 控制Button的scale与icon alignment的CSS样式名称。A CSS class name controlling the Button's scale and icon alignment
  • 若已设menu给Button所设的CSS样式名称。A CSS class name which applies an arrow to the Button if configured with a menu
参数项：
  • None.
返回值：
  • Object
    模板的替换数据。Substitution data for a Template.
Button
setIconClass( String cls ) : Ext.Button
替换按钮针对背景图片的css类。连动替换按钮参数对象中的该属性。Set...
替换按钮针对背景图片的css类。连动替换按钮参数对象中的该属性。Sets the CSS class that provides a background image to use as the button's icon. This method also changes the value of the iconCls config internally.
参数项：
  • cls : String
    图标的CSS样式类。The CSS class providing the icon image
返回值：
  • Ext.Button
    this
Button
setTooltip( String/Object tooltip ) : Ext.Button
设置该按钮的tooltip动态提示。Sets the tooltip ...
设置该按钮的tooltip动态提示。Sets the tooltip for this Button.
参数项：
  • tooltip : String/Object
    . This may be:
    • String : 用于在Tooltip显示的文本，由于分配到innerHTML属性因此可以是HTML标签的。A string to be used as innerHTML (html tags are accepted) to show in a tooltip
    • Object : Ext.QuickTipsregister的配置对象。A configuration object for Ext.QuickTipsregister.
返回值：
  • Ext.Button
    this
Button
setHandler( Function handler, Object scope ) : Ext.Button
增加按钮事件句柄触发函数的方法。Assigns this Button...
增加按钮事件句柄触发函数的方法。Assigns this Button's click handler
参数项：
  • handler : Function
    当按钮按下执行的函数。The function to call when the button is clicked
  • scope : Object
    （可选的）传入参数的作用域。(optional) Scope for the function passed in
返回值：
  • Ext.Button
    this
Button
setText( String text ) : Ext.Button
设置按钮文本。Sets this Button's text
设置按钮文本。Sets this Button's text
参数项：
  • text : String
    按钮的文字。The button text
返回值：
  • Ext.Button
    this
Button
getText() : String
获取按钮的文字。Gets the text for this Button
获取按钮的文字。Gets the text for this Button
参数项：
  • None.
返回值：
  • String
    按钮的文字。The button text
Button
toggle( Boolean state, Boolean supressEvent ) : Ext.Button
如果有传入state的参数，就按照state的参数设置否则当前的sta...
如果有传入state的参数，就按照state的参数设置否则当前的state就会轮换。If a state it passed, it becomes the pressed state otherwise the current state is toggled.
参数项：
  • state : Boolean
    （可选的）指定特定的状态。(optional) Force a particular state
  • supressEvent : Boolean
    （可选的）表示为调用该方法时不触发事件。(optional) True to stop events being fired when calling this method.
返回值：
  • Ext.Button
    this
Button
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
showMenu()
显示按钮附带的菜单（如果有的话）。Show this button's...
显示按钮附带的菜单（如果有的话）。Show this button's menu (if it has one)
参数项：
  • None.
返回值：
  • void
Button
hideMenu()
隐藏按钮附带的菜单（如果有的话）。Hide this button's...
隐藏按钮附带的菜单（如果有的话）。Hide this button's menu (if it has one)
参数项：
  • None.
返回值：
  • void
Button
hasVisibleMenu() : Boolean
若按钮附有菜单并且是显示着的就返回true。eturns true i...
若按钮附有菜单并且是显示着的就返回true。eturns true if the button has a menu and it is visible
参数项：
  • None.
返回值：
  • Boolean
Button
getPressed( String group ) : Button
在已按下的组中返回这些按钮。没有就null。Gets the pres...
在已按下的组中返回这些按钮。没有就null。Gets the pressed button in the passed group or null
参数项：
  • group : String
返回值：
  • Button
Button
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
change()
在按钮的活动项改变之后触发。注意，如果按钮指定了changeHand...
在按钮的活动项改变之后触发。注意，如果按钮指定了changeHandler函数，则会调用该函数而不触发此事件。Fires after the button's active menu item has changed. Note that if a changeHandler function is set on this CycleButton, it will be called instead on active item change and this change event will not be fired.
侦听器会传入以下的参数：
  • None.
 CycleButton
arrowclick()
当点击按钮的箭头时触发。Fires when this button...
当点击按钮的箭头时触发。Fires when this button's arrow is clicked
侦听器会传入以下的参数：
  • None.
 SplitButton
click()
单击触发事件。Fires when this button is cl...
单击触发事件。Fires when this button is clicked
侦听器会传入以下的参数：
  • None.
 Button
toggle()
按钮按下状态切换触发事件（仅当enableToggle = true时...
按钮按下状态切换触发事件（仅当enableToggle = true时）。Fires when the "pressed" state of this button changes (only if enableToggle = true)
侦听器会传入以下的参数：
  • None.
 Button
mouseover()
鼠标居上触发事件。Fires when the mouse hover...
鼠标居上触发事件。Fires when the mouse hovers over the button
侦听器会传入以下的参数：
  • None.
 Button
mouseout()
鼠标离开事件。Fires when the mouse exits t...
鼠标离开事件。Fires when the mouse exits the button
侦听器会传入以下的参数：
  • None.
 Button
menushow()
有menu的时候 menu显示触发事件。If this button ...
有menu的时候 menu显示触发事件。If this button has a menu, this event fires when it is shown
侦听器会传入以下的参数：
  • None.
 Button
menuhide()
有menu的时候 menu隐藏触发事件。If this button ...
有menu的时候 menu隐藏触发事件。If this button has a menu, this event fires when it is hidden
侦听器会传入以下的参数：
  • None.
 Button
menutriggerover()
有menu的时候 menu焦点转移到菜单项时触发事件。If this ...
有menu的时候 menu焦点转移到菜单项时触发事件。If this button has a menu, this event fires when the mouse enters the menu triggering element
侦听器会传入以下的参数：
  • None.
 Button
menutriggerout()
有menu的时候 menu焦点离开菜单项时触发事件。If this b...
有menu的时候 menu焦点离开菜单项时触发事件。If this button has a menu, this event fires when the mouse leaves the menu triggering element
侦听器会传入以下的参数：
  • None.
 Button
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.data.Api.Error

包： | ExtdataApi
定义的文件： | Api.js
类全称： | Ext.data.Api.Error
继承自于： | Ext.Error
Error class for Ext.data.Api errors

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Error()
参数项：
  • None.
返回值：
  • void
Error

公共事件

这个类没有公告事件。


类Ext.data.Api

包： | Extdata
定义的文件： | Api.js
类全称： | Ext.data.Api
继承自于： | Object
为了确保开发者的DataProxy API使用无误，我们定义了Ext.data.Api单例管理这些数据的API。除了创、见、变、灭的这四种CRUD操作进行了定义之外，还分别将这些操作映射到了RESTful的HTTP方法：GET、POST、PUT和DELETE。
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

配置项

这个类没有配置项。

公告属性

属性 定义者
actions: Object
定义远程动作所关联的本地动作： Defined actions co...
定义远程动作所关联的本地动作： 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.
}
Api

公共方法

方法 定义者
Api()
参数项：
  • None.
返回值：
  • void
Api
restActions()
将HTTP方法与关联的动作定义在一起的{CRUD action}:{H...
将HTTP方法与关联的动作定义在一起的{CRUD action}:{HTTP method}的结对，将用于RESTful proxies的时候。默认为： Defined {CRUD action}:{HTTP method} pairs to associate HTTP methods with the corresponding actions for RESTful proxies. Defaults to:

restActions : {
    create  : 'POST',
    read    : 'GET',
    update  : 'PUT',
    destroy : 'DELETE'
},
参数项：
  • None.
返回值：
  • void
Api
isAction( String/String[] action ) : Boolean
若传入的动作名称，在常量actions中已经是有的就返回true. R...
若传入的动作名称，在常量actions中已经是有的就返回true.
Returns true if supplied action-name is a valid API action defined in actions constants
参数项：
  • action : String/String[]
    CRUD操作字符串，也可以是CRUD操作的数组。多次操作的时候传入数组的话会更快。List of available CRUD actions. Pass in list when executing multiple times for efficiency.
返回值：
  • Boolean
Api
getVerb( String name ) : {String||null} returns the action-key, or verb of the user-action or null if invalid. @nodoc
返回实际的CRUD操作键值，根据传入的动作名称辨认出实际的"creat...
返回实际的CRUD操作键值，根据传入的动作名称辨认出实际的"create", "read", "update"或"destroy"操作类型。一般来说该方法是内置使用的，不会直接地调用它。Ext.data.Api.actions的key/value结对是相同无异的，但是也不一定的说。有需要的话，开发者可允许覆盖约定的名称。不过，框架内部依据KEY来调用方法的，因此就需要某种方式取得"create"、"read"、"update"和"destroy" 关键字才可以。如果发现KEYS已被缓存在validActions中，那么该就会直接从缓存中返回。
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.
参数项：
  • name : String
    The runtime name of the action.
返回值：
  • {String||null} returns the action-key, or verb of the user-action or null if invalid. @nodoc
Api
isValid() : {String[]||true}
如果传入的API是有效的，就返回true；这样的话，同时检查到预定义没...
如果传入的API是有效的，就返回true；这样的话，同时检查到预定义没有的动作，就会传入到数组中，最后返回（错误的动作）。
Returns true if the supplied API is valid; that is, check that all keys match defined actions otherwise returns an array of mistakes.
参数项：
  • None.
返回值：
  • {String[]||true}
Api
hasUniqueUrl( Ext.data.DataProxy proxy, String verb ) : Boolean
在传入的proxy在一个原来唯一的proxy地址的时候，并没有其他AP...
在传入的proxy在一个原来唯一的proxy地址的时候，并没有其他API动作染指的时候，返回true。当决定是否插入“xaction”的HTTP参数到某个Ajax请求的时候，这个问题就显得重要了。一般来说该方法是内置使用的，不会直接地调用它。
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.
参数项：
  • proxy : Ext.data.DataProxy
  • verb : String
返回值：
  • Boolean
Api
prepare( Ext.data.DataProxy proxy )
该方法由DataProxy内部使用，一般不宜直接使用。内部定义时，每个...
该方法由DataProxy内部使用，一般不宜直接使用。内部定义时，每个DataProxy API的动作可以是String或者是Object。当定义为Object的时候，就可以为其中的CRUD操作精确指定是哪一种HTTP方法（GET、POST…）。该方法会初始化传入的API，将每一项的操作转换为Object的形式。如果你传入的API没有设定HTTP方法的话，那么“method”所指定的配置项就是默认的方法。如果连method的配置项都没有指定的话，那么就是POST了。
This method is used internally by 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",     // 没有指定时默认的HTTP方法。<-- 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'
    }
});
参数项：
  • proxy : Ext.data.DataProxy
返回值：
  • void
Api
restify( Ext.data.DataProxy proxy )
  初始化Proxy，让其成为RESTful的。可根据restActio...
  初始化Proxy，让其成为RESTful的。可根据restActions的值定义每个API动作的HTTP方法（GET, POST, PUT, DELETE的任意一种）。
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 restActions.
参数项：
  • proxy : Ext.data.DataProxy
返回值：
  • void
Api

公共事件

这个类没有公告事件。


类Ext.data.ArrayReader

包： | Extdata
定义的文件： | ArrayReader.js
类全称： | Ext.data.ArrayReader
继承自于： | Ext.data.JsonReader

Data reader透过一个数组而转化成为Ext.data.Record对象所组成的数组，数组内的每个元素就代表一行数据。字段定义中，通过使用下标来把字段抽取到Record对象，属性mapping用于指定下标，如果不指定就按照定义的先后顺序。
Data reader class to create an Array of 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用于指定下标 // "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({
    id: 0                 // 提供数组的下标位置存放记录的ID（可选的）    // The subscript within row Array that provides an ID for the Record (optional)
}, Employee);

形成这种形式的数组：This would consume an Array like this:

[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]

配置项

配置项 |  | 定义者
 | id : String （可选的）提供数组的下标位置存放记录的ID。(optional)The... （可选的）提供数组的下标位置存放记录的ID。(optional)The subscript within row Array that provides an ID for the Record | ArrayReader
 | idProperty : String 指定每一个行对象中究竟哪一个是记录的ID字段（可选的）。Name of... 指定每一个行对象中究竟哪一个是记录的ID字段（可选的）。Name of the property within a row object that contains a record identifier value. | JsonReader

公告属性

属性 |  | 定义者
 | meta: Mixed 透过构造器参数传入到此DataReader的配置信息。 This... 透过构造器参数传入到此DataReader的配置信息。 This DataReader's configured metadata as passed to the constructor. | DataReader
 | : Object 异步通信完毕后，保留原始JSON数据以便将来有必要的用途。如果没有数... 异步通信完毕后，保留原始JSON数据以便将来有必要的用途。如果没有数据加载，那么会抛出一个load异常，该属性为undefined。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. | JsonReader

公共方法

方法 定义者
ArrayReader( Object meta, Object recordType )
参数项：
  • meta : Object
    元数据配置参数。Metadata configuration options.
  • recordType : Object
    既可以是字段的定义对象组成的数组，如Ext.data.Recordcreate那般，也可以是一个由 Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as specified to Ext.data.Recordcreate, or a Record constructor created using Ext.data.Recordcreate.
返回值：
  • void
ArrayReader
readRecords( Object o ) : Object
由一个JSON对象产生一个包含Ext.data.Records的对象块...
由一个JSON对象产生一个包含Ext.data.Records的对象块。Create a data block containing Ext.data.Records from a JSON object.
参数项：
  • o : Object
    该对象包含以下属性：root指定包含所有行对象的数组；totalProperty制定了记录集的总数的属性名称（可选的）。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.
返回值：
  • Object
    给Ext.data.Store对象用的数据块，Ext.data.Records会用它作为缓存。data A data block which is used by an Ext.data.Store object as a cache of Ext.data.Records.
JsonReader
JsonReader( Object meta, Object recordType )
参数项：
  • meta : Object
    元数据配置参数。Metadata configuration options.
  • recordType : Object
    既可以是字段的定义对象组成的数组，如Ext.data.Recordcreate那般，也可以是一个由Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as passed to Ext.data.Recordcreate, or a Record constructor created using Ext.data.Recordcreate.
返回值：
  • void
JsonReader
read( Object response ) : Object
从远端服务器取得数据后，仅供DataProxy对象所使用的方法。Thi...
从远端服务器取得数据后，仅供DataProxy对象所使用的方法。This method is only used by a DataProxy which has retrieved data from a remote server.
参数项：
  • response : Object
    包含JSON的数据在responseText属性的XHR的对象。The XHR object which contains the JSON data in its responseText.
返回值：
  • Object
    data 给Ext.data.Store对象用的数据块，Ext.data.Records会用它作为缓存。A data block which is used by an Ext.data.Store object as a cache of Ext.data.Records.
JsonReader
DataReader( Object meta, Object recordType )
参数项：
  • meta : Object
    Metadata 配置选项的元数据（由实现指定的）。configuration options (implementation-specific)
  • recordType : Object
    既可以是字段的定义对象组成的数组，可以是一个由Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as specified in Ext.data.Recordcreate, or an Ext.data.Record object created using Ext.data.Recordcreate.
返回值：
  • void
DataReader

公共事件

这个类没有公告事件。


类Ext.data.ArrayStore

包： | Extdata
定义的文件： | ArrayStore.js
类全称： | Ext.data.ArrayStore
继承自于： | Ext.data.Store
小型的辅助类使得数组转化为Store更来得容易。
Small helper class to make creating Stores from Array data easier.

配置项

配置项 定义者
data : Array
表示store初始化后，要加载的内联数据。data Inline da...
表示store初始化后，要加载的内联数据。data Inline data to be loaded when the store is initialized.
Store
storeId : String
如果有值传入，该ID用于在StoreMgr登记时用。storeId I...
如果有值传入，该ID用于在StoreMgr登记时用。storeId If passed, the id to use to register with the StoreMgr
Store
url : String
如果有值传入，会为该URL创建一个HttpProxy对象。url If...
如果有值传入，会为该URL创建一个HttpProxy对象。url If passed, an HttpProxy is created for the passed URL
Store
autoLoad : Boolean/Object
如果有值传入，那么store的load会自动调用，发生在autoLoa...
如果有值传入，那么store的load会自动调用，发生在autoLoaded对象创建之后。autoLoad If passed, this store's load method is automatically called after creation with the autoLoad object
Store
proxy : Ext.data.DataProxy
Proxy对象，用于访问数据对象。proxy The Proxy ob...
Proxy对象，用于访问数据对象。proxy The Proxy object which provides access to a data object.
Store
reader : Ext.data.DataReader
处理数据对象的DataReader会返回一个Ext.data.Reco...
处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id属性会是一个缓冲了的键。reader The DataReader object which processes the data object and returns an Array of Ext.data.Record objects which are cached keyed by their id property.
Store
baseParams : Object
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化...
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化为参数的字符串。baseParams An object containing properties which are to be sent as parameters on any HTTP request
Store
sortInfo : Object
如何排序的对象，格式如下：{field: "fieldName", d...
如何排序的对象，格式如下：{field: "fieldName", direction: "ASC|DESC"}。排序方向的大小写敏感的。sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"} to specify the sort order in the request of a remote Store's load operation. Note that for local sorting, the direction property is case-sensitive.
Store
remoteSort : boolean
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以...
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）。remoteSort True if sorting is to be handled by requesting the 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 remote sorting is specified, then clicking on a column header causes the current page to be requested from the server with the addition of the following two parameters:

  • sort : String

    要排序的字段字符串（即在Record对象内的字段定义） The name (as specified in the Record's Field definition) of the field to sort on.

  • dir : String

    排序的方向，“ASC”或“DESC”（一定要大写） The direction of the sort, "ASC" or "DESC" (case-sensitive).

 Store
pruneModifiedRecords : boolean
True表示为，每次Store加载后，清除所有修改过的记录信息；rec...
True表示为，每次Store加载后，清除所有修改过的记录信息；record被移除时也会这样（默认为false）。pruneModifiedRecords True to clear all modified record information each time the store is loaded or when a record is removed. (defaults to false).
Store
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
baseParams:
每次HTTP请求都会携带的参数，就保存在这个对象身上。An obje...
每次HTTP请求都会携带的参数，就保存在这个对象身上。An object containing properties which are used as parameters on any HTTP request.
Store
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.

绑定在这个Grid的PagingToolbar就使用这些配置来分页。请求中将会使用到。
A PagingToolbar bound to this grid uses this property to determine the parameter names to use in its requests.
Store
lastOptions:
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这...
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这些是什么的参数。加载当前的Record缓存的时候，清楚用了哪些的参数有时是非常有用的。Contains the last options object used as the parameter to the load method. See 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.
Store

公共方法

方法 定义者
ArrayStore( Object config )
参数项：
  • config : Object
返回值：
  • void
ArrayStore
Store( Object config )
参数项：
  • config : Object
    一配置对象，包含了Store用来访问数据，及读数据至Records的对象。A config object containing the objects needed for the Store to access data, and read the data into Records.
返回值：
  • void
Store
add( Ext.data.Record records )
往Store对象添加Records，并触发add事件。Add Reco...
往Store对象添加Records，并触发add事件。Add Records to the Store and fires the add event.
参数项：
  • records : Ext.data.Record
    准备加入到缓存的Ext.data.Record对象数组（Ext.data.Record[]）。An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
addSorted( Ext.data.Record record )
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插...
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插入到Store对象中。(Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.
参数项：
  • record : Ext.data.Record
返回值：
  • void
Store
remove( Ext.data.Record record )
从Store中移除一Record对象，并触发remove移除事件。Re...
从Store中移除一Record对象，并触发remove移除事件。Remove a Record from the Store and fires the remove event.
参数项：
  • record : Ext.data.Record
    被从缓存中移除的Ext.data.Record对象 record The Ext.data.Record object to remove from the cache.
返回值：
  • void
Store
removeAt( Number index )
根据指定的索引移除Store中的某个Record。触发remove事件...
根据指定的索引移除Store中的某个Record。触发remove事件。Remove a Record from the Store at the specified index. Fires the remove event.
参数项：
  • index : Number
    要被移除的Record索引。The index of the record to remove.
返回值：
  • void
Store
removeAll()
从Store中清空所有Record对象，并触发clear事件。Remo...
从Store中清空所有Record对象，并触发clear事件。Remove all Records from the Store and fires the clear event.
参数项：
  • None.
返回值：
  • void
Store
insert( Number index, Ext.data.Record records )
触发添加事件时插入records到指定的store位置 Inserts...
触发添加事件时插入records到指定的store位置 Inserts Records into the Store at the given index and fires the add event.
参数项：
  • index : Number
    传入的Records插入的开始位置 index The start index at which to insert the passed Records.
  • records : Ext.data.Record
    加入到缓存中的Ext.data.Record对象（Ext.data.Record[]）。records An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
indexOf( Ext.data.Record record ) : Number
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get t...
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get the index within the cache of the passed Record.
参数项：
  • record : Ext.data.Record
    要找寻的Ext.data.Record record The Ext.data.Record object to find.
返回值：
  • Number
    被传入的Record的索引，如果未找到返回-1 The index of the passed Record. Returns -1 if not found.
Store
indexOfId( String id ) : Number
传入一个id，根据id查询缓存里的Record，返回其索引。Get t...
传入一个id，根据id查询缓存里的Record，返回其索引。Get the index within the cache of the Record with the passed id.
参数项：
  • id : String
    要找到Record的id id The id of the Record to find.
返回值：
  • Number
    被找到的Record的索引，如果未找到返回-1 The index of the Record. Returns -1 if not found.
Store
getById( String id ) : Ext.data.Record
根据指定的id找到Record。Get the Record with...
根据指定的id找到Record。Get the Record with the specified id.
参数项：
  • id : String
    要找的Record的id The id of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配id的Record，如果未找到则返回undefined The Record with the passed id. Returns undefined if not found.
Store
getAt( Number index ) : Ext.data.Record
根据指定的索引找到Record。Get the Record at t...
根据指定的索引找到Record。Get the Record at the specified index.
参数项：
  • index : Number
    要找的Record的索引 The index of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配索引的Record，如果未找到则返回undefined The Record at the passed index. Returns undefined if not found.
Store
getRange( Number startIndex, Number endIndex ) : {Ext.data.Record[]} 返回一个Record数组 An array of Records
查找指定范围里的Records。Returns a range of ...
查找指定范围里的Records。Returns a range of Records between specified indices.
参数项：
  • startIndex : Number
    （可选项）开始索引 （默认为 0） startIndex (optional) The starting index (defaults to 0)
  • endIndex : Number
    （可选项）结束的索引 （默认是Store中最后一个Record的索引） endIndex (optional) The ending index (defaults to the last Record in the Store)
返回值：
  • {Ext.data.Record[]} 返回一个Record数组 An array of Records
Store
load( Object options ) : Boolean
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配...
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配置好的Proxy对象完成。Loads the Record cache from the configured Proxy using the configured Reader.

如果使用服务器分页，那么必须指定在options.params中start和limit两个参数。start参数表明了从记录集（dataset）的哪一个位置开始读取，limit是读取多少笔的记录。Proxy负责送出参数。If using remote paging, then 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.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    传入以下属性的对象，传入的对象会影响加载的选项：An object containing properties which control loading options:
    • params :Object

      送出的HTTP参数，格式是JS对象。An object containing properties to pass as HTTP parameters to a remote data source.

    • callback : Function

      回调函数，这个函数会有以下的参数传入：A function to be called after the Records have been loaded. The callback is passed the following arguments:

      • r : Ext.data.Record[]
      • options: 加载的配置项对象。Options object from the load call
      • success: 是否成功。Boolean success indicator

    • scope : Object

      回调函数的作用域（默认为Store对象）。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.

返回值：
  • Boolean
    是否执行了load（受beforeload的影响，参见源码）。Whether the load fired (if beforeload failed).
Store
reload( Object options )
依据上一次的load操作的参数的Reader制订的格式，再一次向Pro...

依据上一次的load操作的参数的Reader制订的格式，再一次向Proxy对象要求施以加载（Reload）Record缓存的操作。Reloads the Record cache from the configured Proxy using the configured Reader and the options from the last load operation performed.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    （可选的）该对象包含的属性会覆盖上次load操作的参数。参阅load了解详细内容（默认为null，即就是复用上次的选项参数）。(optional) An object containing loading options which may override the options used in the last load operation. See load for details (defaults to null, in which case the most recently used options are reused).
返回值：
  • void
Store
loadData( Object data, Boolean add )
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Read...
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Reader必须能够读取理解的，Reader是在构造器中配置好的。Loads data from a passed data block and fires the load event. A Reader which understands the format of the data must have been configured in the constructor.
参数项：
  • data : Object
    要被转化为Records的数据块。数据类型会是由这个Reader的配置所决定的，并且符合Reader对象的readRecord参数的要求。The data block from which to read the Records. The format of the data expected is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
  • add : Boolean
    （可选的）True表示为是在缓存中追加新的Records而不是进行替换。(Optional) True to add the new Records rather than replace the existing cache. 切记Store中的Record是按照id记录的，所以新加的Records如果id一样的话就会替换Stroe里面原有的，新的就会追加。Remember that Records in a Store are keyed by their id, so added Records with ids which are already present in the Store will replace existing Records. Records with new, unique ids will be added.
返回值：
  • void
Store
getCount() : Number
获取缓存记录的总数。Gets the number of cached...
获取缓存记录的总数。Gets the number of cached records.

如果使用了分页，那么这就是当前分页的总数，而不是全部记录的总数。要获取记录总数应使用getTotalCount方法，才能从Reader身上获取正确的全部记录数。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 getTotalCount function returns the dataset size.

参数项：
  • None.
返回值：
  • Number
    Store缓存中记录总数 The number of Records in the Store's cache.
Store
getTotalCount() : Number
获取作为服务端返回的数据集中记录的总数。Gets the total ...
获取作为服务端返回的数据集中记录的总数。Gets the total number of records in the dataset as returned by the server.

如果分页，该值必须声明存在才能成功分页。Reader对象处理数据对象该值不能或缺。对于远程数据而言，这是有服务器查询的结果。If using paging, for this to be accurate, the data object used by the Reader must contain the dataset size. For remote data sources, this is provided by a query on the server.

参数项：
  • None.
返回值：
  • Number
    数据对象由Proxy传给Reader对象，这个数据对象包含Record记录的总数 The number of Records as specified in the data object passed to the Reader by the Proxy

    如果是在本地更新Store的内容，那么该值是不会发生变化的。This value is not updated when changing the contents of the Store locally.

 Store
getSortState() : Object
以对象的形式返回当前排序的状态。Returns an object d...
以对象的形式返回当前排序的状态。Returns an object describing the current sort state of this Store.
参数项：
  • None.
返回值：
  • 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

      一个是排序方向，"ASC"或"DESC" The sort order, "ASC" or "DESC" (case-sensitive).

 Store
setDefaultSort( String fieldName, String dir )
设置默认的列排序，以便下次load操作时使用 Sets the def...
设置默认的列排序，以便下次load操作时使用 Sets the default sort column and order to be used by the next load operation.
参数项：
  • fieldName : String
    要排序的字段 The name of the field to sort by.
  • dir : String
    （可选的） 排序顺序，“ASC”或“DESC”（默认为“ASC”） (optional) The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
sort( String fieldName, String 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.
参数项：
  • fieldName : String
    要排序的字段的字符串。The name of the field to sort by.
  • dir : String
    (optional) 排序方向，“ASC”或“DESC”（大小写敏感的，默认为“ASC”）。The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
each( Function fn, Object scope )
对缓存中每个记录调用特点的函数。Calls the specified...
对缓存中每个记录调用特点的函数。Calls the specified function for each of the Records in the cache.
参数项：
  • fn : Function
    要调用的函数。Record对象将是第一个参数。如果返回 The function to call. The Record is passed as the first parameter. Returning false aborts and exits the iteration.
  • scope : Object
    函数的作用域（默认为Record对象）（可选的） (optional) The scope in which to call the function (defaults to the Record).
返回值：
  • void
Store
getModifiedRecords() : {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（loa...
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（load）的操作来持久化这些修改的记录。（例如在分页期间） Gets all records modified since the last commit. Modified records are persisted across load operations (e.g., during paging).
参数项：
  • None.
返回值：
  • {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
Store
sum( String property, Number start, Number end ) : Number
统计每个记录属性值的个数。可设置区间。Sums the value o...
统计每个记录属性值的个数。可设置区间。Sums the value of property for each record between start and end and returns the result.
参数项：
  • property : String
    记录集中要统计的字段名称。A field on your records
  • start : Number
    计算的记录开始索引（默认为0）。start The record index to start at (defaults to 0)
  • end : Number
    计算的记录结尾索引（默认为length - 1，从零开始算）。The last record index to include (defaults to length - 1)
返回值：
  • Number
    总数 The sum
Store
filter( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive )
由指定的属性筛选记录。Filter the records by a ...
由指定的属性筛选记录。Filter the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 value Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • void
Store
filterBy( Function fn, Object scope )
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如...
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中，否则就会被过滤掉。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this）。(optional) The scope of the function (defaults to this)
返回值：
  • void
Store
query( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性查询记录。Query the records by a s...
由指定的属性查询记录。Query the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • MixedCollection
    返回一个Ext.util.MixedCollection实例，包含了匹配的记录 Returns an Ext.util.MixedCollection of the matched records
Store
find( Function fn, Object scope, String property, String/RegExp value, Number startIndex, Boolean anyMatch, Boolean caseSensitive ) : Number
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经...
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this） (optional) The scope of the function (defaults to this)
  • property : String
    你查询对象的属性 A property on your objects
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the property value should begin with, or a RegExp to test against the property.
  • startIndex : Number
    （可选的） 查询的开始索引 (optional) The index to start searching at
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • Number
    匹配的索引或-1 The matched index or -1
Store
findBy( Function fn, Object scope, Number startIndex ) : Number
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回...
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回true的话，就被认为是一个匹配的结果。Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数：The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。The record to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的IDThe ID of the Record passed.

  • scope : Object
    （可选的） 函数作用域（默认为this）(optional) The scope of the function (defaults to this)
  • startIndex : Number
    （可选的） 查询的开始索引(optional) The index to start searching at
返回值：
  • Number
    匹配的索引或-1The matched index or -1
Store
clearFilter( String dataIndex, Boolean allowNull, Boolean bypassFilter, Boolean suppressEvent ) : Array
从这个Store身上收集由dataIndex指定的惟一的值。Colle...
从这个Store身上收集由dataIndex指定的惟一的值。Collects unique values for a particular dataIndex from this store.
参数项：
  • dataIndex : String
    要收集的属性The property to collect
  • allowNull : Boolean
    （可选的） 送入true表示允许null、undefined或空白字符串这些无意义的值(optional) Pass true to allow null, undefined or empty string values
  • bypassFilter : Boolean
    （可选的）送入true表示收集所有记录，哪怕是被经过筛选的记录(optional) Pass true to collect from all records, even ones which are filtered
  • suppressEvent : Boolean
    如果设置为true，该筛选器会低调地清空，而不会通知监听器If true the filter is cleared silently without notifying listeners
返回值：
  • Array
    惟一的值所构成的数组An array of the unique values/
Store
isFiltered() : Boolean
返回true表明这个store当前是在筛选的。Returns true...
返回true表明这个store当前是在筛选的。Returns true if this store is currently filtered
参数项：
  • None.
返回值：
  • Boolean
Store
commitChanges()
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记...
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记Store的“update”事件，事件的处理函数中的第三个参数就是Ext.data.Record.COMMIT，用它来进行更新。Commit all Records with outstanding changes. To handle updates for changes, subscribe to the Store's "update" event, and perform updating when the third parameter is Ext.data.Record.COMMIT.
参数项：
  • None.
返回值：
  • void
Store
rejectChanges()
放弃所有的变更。Cancel outstanding changes ...
放弃所有的变更。Cancel outstanding changes on all changed records.
参数项：
  • None.
返回值：
  • void
Store
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
datachanged()
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的...
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的操作）。使用该Store应该的UI应该有所响应，如刷新其视图。
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.
侦听器会传入以下的参数：
  • None.
 Store
metachange()
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。...
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。当前只对JsonReaders有效。Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders.
侦听器会传入以下的参数：
  • None.
 Store
add()
当有Record添加到Store里面后触发。Fires when Re...
当有Record添加到Store里面后触发。Fires when Records have been added to the Store
侦听器会传入以下的参数：
  • None.
 Store
remove()
当Store中的Record被移除后触发。Fires when a R...
当Store中的Record被移除后触发。Fires when a Record has been removed from the Store
侦听器会传入以下的参数：
  • None.
 Store
update()
当有Record改动时触发。Fires when a Record h...
当有Record改动时触发。Fires when a Record has been updated
侦听器会传入以下的参数：
  • None.
 Store
clear()
当数据缓存被清除的时候触发。Fires when the data c...
当数据缓存被清除的时候触发。Fires when the data cache has been cleared.
侦听器会传入以下的参数：
  • None.
 Store
beforeload()
当请求新的数据对象之前触发。如果beforeload返回false表示...
当请求新的数据对象之前触发。如果beforeload返回false表示load的操作被取消。Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled.
侦听器会传入以下的参数：
  • None.
 Store
load()
当一笔新的Record加载完毕后触发。Fires after a ne...
当一笔新的Record加载完毕后触发。Fires after a new set of Records has been loaded.
侦听器会传入以下的参数：
  • None.
 Store
loadexception()
当Proxy加载过程中有异常时触发。连同Proxy“loadexcep...
当Proxy加载过程中有异常时触发。连同Proxy“loadexception”的事件一起触发。Fires if an exception occurs in the Proxy during loading. Called with the signature of the Proxy's "loadexception" event.
侦听器会传入以下的参数：
  • None.
 Store


类Ext.data.Connection

包： | Extdata
定义的文件： | Connection.js
类全称： | Ext.data.Connection
继承自于： | Ext.util.Observable

此类封装了一个页面到当前域的连接，以响应（来自配置文件中的url或请求时指定的url）请求。
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.

通过该类产生的请求都是异步的，并且会立刻返回，这样紧跟其后的request调用将得不到数据 可以使用在request配置项一个回调函数， 或{@link #requestcomplete 事件侦听器}来处理返回来的数据。
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 request call. To process returned data, use a success callback in the request options object,or an event listener.

response对象是通过iframe的document的innerTHML作为responseText属性，如果存在， 该iframe的xml document作为responseXML属性。

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.

注意:如果你正在上传文件，你将得不到一个正常的响应对象送回到你的回调或事件处理函数中，原因是上传利用iframe来处理的。这意味着一个有效的xml或html document必须被返回，如果需要json数据，这次意味着它将放到。
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.

响应结果取自document对象，这里利用了一个xmlhttpRequest对象的responseText属性来暂时存储响应结果，目的是利用其事件处理器和回调的机制完成所需的任务。
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.

配置项

配置项 |  | 定义者
 | url : String （可选项）被用来向服务发起请求默认的url（默认值为undefined... （可选项）被用来向服务发起请求默认的url（默认值为undefined）。(Optional) The default URL to be used for requests to the server. (defaults to undefined) | Connection
 | extraParams : Object （可选项）一个包含属性值的对象，这些属性在该Connection发起的... （可选项）一个包含属性值的对象，这些属性在该Connection发起的每次请求中作为外部参数（默认值为undefined）。(Optional) An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined) | Connection
 | defaultHeaders : Object （可选项）一个包含请求头信息的对象，此请求头被附加在该Connecti... （可选项）一个包含请求头信息的对象，此请求头被附加在该Connection对象的每次请求中（默认值为undefined）。(Optional) An object containing request headers which are added to each request made by this object. (defaults to undefined) | Connection
 | method : String （可选项）请求时使用的默认的http方法（默认为undefined；如... （可选项）请求时使用的默认的http方法（默认为undefined；如果存在参数但没有设值，则值为post,否则为get）。(Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set, but request params are present, POST will be used; otherwise, GET will be used.) | Connection
 | timeout : Number （可选项）一次请求超时的毫秒数（默认为30秒钟）。(Optional)... （可选项）一次请求超时的毫秒数（默认为30秒钟）。(Optional) The timeout in milliseconds to be used for requests. (defaults to 30000) | Connection
 | autoAbort : Boolean （可选项）该request是否应当中断挂起的请求（默认值为false）... （可选项）该request是否应当中断挂起的请求（默认值为false）。(Optional) Whether this request should abort any pending requests. (defaults to false) | Connection
 | disableCaching : Boolean （可选项）设置为true就会添加一个独一无二的cache-buster... （可选项）设置为true就会添加一个独一无二的cache-buster参数来获取请求（默认值为true）。(Optional) True to add a unique cache-buster param to GET requests. (defaults to true) | Connection
 | disableCachingParam : String （可选项）(Optional) Change the paramete... （可选项）(Optional) Change the parameter which is sent went disabling caching through a cache buster. Defaults to '_dc' | Connection
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | : String @cfg {String} disableCachingParam ... @cfg {String} disableCachingParam （可选项）(Optional) Change the parameter which is sent went disabling caching through a cache buster. Defaults to '_dc' | Connection

公共方法

方法 定义者
Connection( Object config )
参数项：
  • config : Object
    配置对象。a configuration object.
返回值：
  • void
Connection
request( Object options ) : Number
向远程服务器发送一http请求。Sends an HTTP requ...

向远程服务器发送一http请求。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.

要正确指定回调函数的作用域，应适用scope选项。To execute a callback function in the correct scope, use the scope option.

参数项：
  • options : Object
    包含如下属性的一对象：An object which may contain the following properties:
    • url : String/Function (Optional)
      （可选项）发送请求的url，默认为配置的url。若为函数类型那么其作用域将由配置项scope所指定。默认为配置好的URL。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 configured URL.
    • params : Object/String/Function （可选项）(Optional)
      一包含属性的对象（这些属性被用作request的参数）或一个编码后的url字串或一个能调用其中任一一属性的函数。若为函数类型那么其作用域将由配置项scope所指定。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)
      该请求所用的http方面，默认值为配置的方法，或者当没有方法被配置时，如果没有发送参数时用get，有参数时用post。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)
      该方法被调用时附上返回的http response对象。不管成功还是失败，该回调函数都将被调用，该函数中传入了如下参数: 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。True if the request succeeded.
      • response : Object
        包含了返回数据的xhr对象。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
        包含数据的xhr对象。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
        包含数据的xhr对象。The XMLHttpRequest object containing the response data.
      • options : Object
        请求所调用的参数。The parameter to the request call.
    • scope : Object （可选项）(Optional)
      回调函数的作用域：回调函数"this"对象指针。默认值为浏览器窗口。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.
    • form : Element/HTMLElement/String （可选项）(Optional)
      用来压入参数的一个<form>元素或<form>的标识。The <form> Element or the id of the <form> to pull parameters from.
    • isUpload : Boolean （可选项）(Optional)
      如果该form对象是上传form，为true（通常情况下会自动探测）。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。注意:它将会被用来在发送数据中代替参数任务参数将会被追加在url中。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,则添加一个独一无二的cache-buster参数来获取请求。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.

返回值：
  • Number
    transactionId The id of the server transaction. This may be used to cancel the request.
Connection
isLoading( Number transactionId ) : Boolean
确认该对象是否有正在的请求。Determine whether thi...
确认该对象是否有正在的请求。Determine whether this object has a request outstanding.
参数项：
  • transactionId : Number
    （可选项）默认是最后一次通讯。(Optional) defaults to the last transaction
返回值：
  • Boolean
    如果这是个正在的请求的话，返回true。True if there is an outstanding request.
Connection
abort( Number transactionId )
中断任何正在的请求。Aborts any outstanding re...
中断任何正在的请求。Aborts any outstanding request.
参数项：
  • transactionId : Number
    (或选项)默认值为最后一次事务。{(Optional) defaults to the last transaction
返回值：
  • void
Connection
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforerequest()
任何Ajax请求发送之前触发。Fires before a netwo...
任何Ajax请求发送之前触发。Fires before a network request is made to retrieve a data object.
侦听器会传入以下的参数：
  • None.
 Connection
requestcomplete()
任何Ajax成功请求后触发。Fires if the request ...
任何Ajax成功请求后触发。Fires if the request was successfully completed.
侦听器会传入以下的参数：
  • None.
 Connection
requestexception()
服务端返回一个错误的HTTP状态码时触发。Fires if an er...
服务端返回一个错误的HTTP状态码时触发。Fires if an error HTTP status was returned from the server. See HTTP Status Code Definitions for details of HTTP status codes.
侦听器会传入以下的参数：
  • None.
 Connection


Error
    DataProxy.Error

Class Ext.data.DataProxy.Error

Package: | Ext.data
Defined In: | DataProxy.js
Class: | DataProxy.Error
Extends: | Error
DataProxy Error extension. constructor

Public Properties

This class has no public properties.

Public Methods

Method Defined By
getMessage() : String
getMessage
getMessage
Parameters:
  • None.
Returns:
  • String
Error
getName() : String
getName
getName
Parameters:
  • None.
Returns:
  • String
Error
toJson() : String
toJson
toJson
Parameters:
  • None.
Returns:
  • String
Error

Public Events

This class has no public events.


类Ext.data.DataProxy

包： | Extdata
定义的文件： | DataProxy.js
类全称： | Ext.data.DataProxy
继承自于： | Ext.util.Observable

一个抽象的基类，只提供获取未格式化的原始数据。
This class is an abstract base class for implementations which provide retrieval of unformatted data objects.

DataProxy的实现通常用于连接Ext.data.DataReader的实现（以适当的类型去解析数据对象）来一同协作， 向一Ext.data.Store提供Ext.data.Records块。
DataProxy implementations are usually used in conjunction with an implementation of Ext.data.DataReader (of the appropriate type which knows how to parse the data object) to provide a block of Ext.data.Records to an Ext.data.Store.

自定义子类的实现必须符合Ext.data.HttpProxyload方法那般的实现。
Custom implementations must implement the load method as described in Ext.data.HttpProxyload.

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
DataProxy()
参数项：
  • None.
返回值：
  • void
DataProxy
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeload()
当在获取一个数据对象之前，向网络发起请求之前触发。Fires bef...
当在获取一个数据对象之前，向网络发起请求之前触发。Fires before a network request is made to retrieve a data object.
侦听器会传入以下的参数：
  • None.
 DataProxy
load()
当load方法的回调执行后触发。Fires before the l...
当load方法的回调执行后触发。Fires before the load method's callback is called.
侦听器会传入以下的参数：
  • None.
 DataProxy


Error
    DataReader.Error

Class Ext.data.DataReader.Error

Package: | Ext.data
Defined In: | DataReader.js
Class: | DataReader.Error
Extends: | Error
General error class for Ext.data.DataReader

Public Properties

This class has no public properties.

Public Methods

Method Defined By
getMessage() : String
getMessage
getMessage
Parameters:
  • None.
Returns:
  • String
Error
getName() : String
getName
getName
Parameters:
  • None.
Returns:
  • String
Error
toJson() : String
toJson
toJson
Parameters:
  • None.
Returns:
  • String
Error

Public Events

This class has no public events.


类Ext.data.DataReader

包： | Extdata
定义的文件： | DataReader.js
类全称： | Ext.data.DataReader
继承自于： | Object
用于读取结构化数据（来自数据源）然后转换为Ext.data.Record对象集合和元数据Ext.data.Store这二者合成的对象。这个类应用于被扩展而最好不要直接使用。要了解当前的实现，可参阅Ext.data.ArrayReader，Ext.data.JsonReader以及Ext.data.XmlReader。
Abstract base class for reading structured data from a data source and converting it into an object containing Ext.data.Record objects and metadata for use by an Ext.data.Store. This class is intended to be extended and should not be created directly. For existing implementations, see Ext.data.ArrayReader, Ext.data.JsonReader and Ext.data.XmlReader.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | meta: Mixed 透过构造器参数传入到此DataReader的配置信息。 This... 透过构造器参数传入到此DataReader的配置信息。 This DataReader's configured metadata as passed to the constructor. | DataReader

公共方法

方法 定义者
DataReader( Object meta, Object recordType )
参数项：
  • meta : Object
    Metadata 配置选项的元数据（由实现指定的）。configuration options (implementation-specific)
  • recordType : Object
    既可以是字段的定义对象组成的数组，可以是一个由Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as specified in Ext.data.Recordcreate, or an Ext.data.Record object created using Ext.data.Recordcreate.
返回值：
  • void
DataReader

公共事件

这个类没有公告事件。


类Ext.data.DataWriter

包： | Extdata
定义的文件： | DataWriter.js
类全称： | Ext.data.DataWriter
继承自于： | Object

Ext.data.DataWriter提供了增、删、改、查的实现让Ext.data.Store与服务端框架密切通讯。Writer控制了Store了自动管理AJAX的请求，让其成为Store CRUD操作的管道。
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是一个抽象类，一般用于让来被继承。例如Ext.data.JsonWriter。
Ext.data.DataWriter is an abstract base class which is intended to be extended and should not be created directly. For existing implementations, see Ext.data.JsonWriter.

创建一个Writer很简单：Creating a writer is simple:

var writer = new Ext.data.JsonWriter();

通过proxy对象激活Store对象来控制writer，也就是配置一个url：
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'
});

对于更细颗粒的控制，proxy也可配置成为 api： For finer grained control, the proxy may also be configured with an api:

// Use the api specification 用API指定
var proxy = new Ext.data.HttpProxy({
    api: {
        read    : 'app.php/users/read',
        create  : 'app.php/users/create',
        update  : 'app.php/users/update',
        destroy : 'app.php/users/destroy'
    }
});

创建Writer控制的Store的：Creating a Writer enabled store:

var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader,
    writer: writer
});

配置项

配置项 |  | 定义者
 | writeAllFields : Boolean 默认是false。设为true的话，就表示让DataWriter返回所... 默认是false。设为true的话，就表示让DataWriter返回所有那个记录的所有字段，不仅仅是修改的那些字段。 true就是记录那些修改的字段而已。 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. | DataWriter
 | listful : Boolean 默认是false。设为true的话，就表示DataWriter写入HT... 默认是false。设为true的话，就表示DataWriter写入HTTP参数的时候总是一数组，即使单个记录也如是。 false by default. Set true to have the DataWriter always write HTTP params as a list, even when acting upon a single record. | DataWriter
 | saveRecord : Function 抽象的方法，应该由子类提供，如JsonWriter.saveRecor... 抽象的方法，应该由子类提供，如JsonWriter.saveRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.saveRecord | DataWriter
 | createRecord : Function 抽象的方法，应该由子类提供，如JsonWriter.createRec... 抽象的方法，应该由子类提供，如JsonWriter.createRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.createRecord) | DataWriter
 | destroyRecord : Function 抽象的方法，应该由子类提供，如JsonWriter.destroyRe... 抽象的方法，应该由子类提供，如JsonWriter.destroyRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.destroyRecord) | DataWriter

公告属性

属性 |  | 定义者
 | meta: Mixed This DataWriter's configured metad... This DataWriter's configured metadata as passed to the constructor. | DataWriter

公共方法

方法 定义者
DataWriter( Object meta, Object recordType )
参数项：
  • meta : Object
    配置选项的元数据（由实现指定）Metadata configuration options (implementation-specific)
  • recordType : Object
    Ext.data.Recordcreate规定的对象数组，或是用Ext.data.Recordcreate生成的Ext.data.Record对象。Either an Array of field definition objects as specified in Ext.data.Recordcreate, or an Ext.data.Record object created using Ext.data.Recordcreate.
返回值：
  • void
DataWriter
write( String action, Object params, Record/Record[] rs )
服务端写操作的前期写数据。只需要有DataWriter#update、...
服务端写操作的前期写数据。只需要有DataWriter#update、DataWriter#create、DataWriter#destroy的proxy就可以囊括“写”的操作。
Writes data in preparation for server-write action. Simply proxies to DataWriter#update, DataWriter#create DataWriter#destroy.
参数项：
  • action : String
    [CREATE|UPDATE|DESTROY]
  • params : Object
    写入的hash参数。The params-hash to write-to
  • rs : Record/Record[]
    要写的数据。The recordset write.
返回值：
  • void
DataWriter
render( String action, Record[] rs, Object params, Object data )
抽象的方法，应该由DataWriter的子类提供，扩展子类时重写该方法...
抽象的方法，应该由DataWriter的子类提供，扩展子类时重写该方法就可以使用参数“data”和“params”。送抵的数据对象会依据用户在DataReader配置的元数据信息产生真正的渲染数据。
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,
参数项：
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • rs : Record[]
    Store数据集。Store recordset
  • params : Object
    发送到服务器的HTTP参数。Http params to be sent to server.
  • data : Object
    依据DataReader元数据产生的数据对象。data object populated according to DataReader meta-data.
返回值：
  • void
DataWriter

公共事件

这个类没有公告事件。


类Ext.data.DirectProxy

包： | Extdata
定义的文件： | DirectProxy.js
类全称： | Ext.data.DirectProxy
继承自于： | Ext.data.DataProxy

配置项

配置项 定义者
paramOrder : Array/String
默认为undefined。服务端处理执行的参数顺序列表。指定一定的顺序...
默认为undefined。服务端处理执行的参数顺序列表。指定一定的顺序的话服务端将甄别处理，可以(1)字符串的数组，或(2)空格、逗号、分号划分的字符串。例如以下的字符都可被处理：
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:
DirectProxy
paramsAsHash : Boolean
以一个Hash结果发送参数（默认为true）。有了paramOrder...
以一个Hash结果发送参数（默认为true）。有了paramOrder这项那此项无效。
Send parameters as a collection of named arguments (defaults to true). Providing a paramOrder nullifies this configuration.
DirectProxy
directFn : Function
当发起一个请求的时候执行的函数。directFn是另外一个简单的方案，...
当发起一个请求的时候执行的函数。directFn是另外一个简单的方案，适用于在未完整实现CRUD Api的Store的时候，定义一个API的配置参数。
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.
DirectProxy
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
DirectProxy()
参数项：
  • None.
返回值：
  • void
DirectProxy
DataProxy()
参数项：
  • None.
返回值：
  • void
DataProxy
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeload()
当在获取一个数据对象之前，向网络发起请求之前触发。Fires bef...
当在获取一个数据对象之前，向网络发起请求之前触发。Fires before a network request is made to retrieve a data object.
侦听器会传入以下的参数：
  • None.
 DataProxy
load()
当load方法的回调执行后触发。Fires before the l...
当load方法的回调执行后触发。Fires before the load method's callback is called.
侦听器会传入以下的参数：
  • None.
 DataProxy


类Ext.data.DirectStore

包： | Extdata
定义的文件： | DirectStore.js
类全称： | Ext.data.DirectStore
继承自于： | Ext.data.Store

一个小型的辅助类，用来创建配搭了Ext.data.DirectProxy与Ext.data.JsonReader两者的Ext.data.Store更为轻松， 使得沟通Ext.Direct服务端供应器Provider更也来得更为畅顺。要创建另外的proxy/reader组合，就创建一个单纯的Ext.data.Store来配置。
Small helper class to create an Ext.data.Store configured with an Ext.data.DirectProxy and Ext.data.JsonReader to make interacting with an Ext.Direct Server-side Provider easier. To create a different proxy/reader combination create a basic Ext.data.Store configured as needed.

注意：尽管还没有列出，该类继承了以下类所有的配置项：
Note: Although they are not listed, this class inherits all of the config options of:

  • Store
  • JsonReader
    • root
    • idProperty
    • totalProperty
  • DirectProxy
    • directFn
    • paramOrder
    • paramsAsHash
@xtype directstore

配置项

配置项 定义者
storeId : String
如果有值传入，该ID用于在StoreMgr登记时用。storeId I...
如果有值传入，该ID用于在StoreMgr登记时用。storeId If passed, the id to use to register with the StoreMgr
Store
url : String
如果有值传入，会为该URL创建一个HttpProxy对象。url If...
如果有值传入，会为该URL创建一个HttpProxy对象。url If passed, an HttpProxy is created for the passed URL
Store
autoLoad : Boolean/Object
如果有值传入，那么store的load会自动调用，发生在autoLoa...
如果有值传入，那么store的load会自动调用，发生在autoLoaded对象创建之后。autoLoad If passed, this store's load method is automatically called after creation with the autoLoad object
Store
proxy : Ext.data.DataProxy
Proxy对象，用于访问数据对象。proxy The Proxy ob...
Proxy对象，用于访问数据对象。proxy The Proxy object which provides access to a data object.
Store
data : Array
表示store初始化后，要加载的内联数据。data Inline da...
表示store初始化后，要加载的内联数据。data Inline data to be loaded when the store is initialized.
Store
reader : Ext.data.DataReader
处理数据对象的DataReader会返回一个Ext.data.Reco...
处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id属性会是一个缓冲了的键。reader The DataReader object which processes the data object and returns an Array of Ext.data.Record objects which are cached keyed by their id property.
Store
baseParams : Object
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化...
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化为参数的字符串。baseParams An object containing properties which are to be sent as parameters on any HTTP request
Store
sortInfo : Object
如何排序的对象，格式如下：{field: "fieldName", d...
如何排序的对象，格式如下：{field: "fieldName", direction: "ASC|DESC"}。排序方向的大小写敏感的。sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"} to specify the sort order in the request of a remote Store's load operation. Note that for local sorting, the direction property is case-sensitive.
Store
remoteSort : boolean
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以...
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）。remoteSort True if sorting is to be handled by requesting the 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 remote sorting is specified, then clicking on a column header causes the current page to be requested from the server with the addition of the following two parameters:

  • sort : String

    要排序的字段字符串（即在Record对象内的字段定义） The name (as specified in the Record's Field definition) of the field to sort on.

  • dir : String

    排序的方向，“ASC”或“DESC”（一定要大写） The direction of the sort, "ASC" or "DESC" (case-sensitive).

 Store
pruneModifiedRecords : boolean
True表示为，每次Store加载后，清除所有修改过的记录信息；rec...
True表示为，每次Store加载后，清除所有修改过的记录信息；record被移除时也会这样（默认为false）。pruneModifiedRecords True to clear all modified record information each time the store is loaded or when a record is removed. (defaults to false).
Store
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
baseParams:
每次HTTP请求都会携带的参数，就保存在这个对象身上。An obje...
每次HTTP请求都会携带的参数，就保存在这个对象身上。An object containing properties which are used as parameters on any HTTP request.
Store
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.

绑定在这个Grid的PagingToolbar就使用这些配置来分页。请求中将会使用到。
A PagingToolbar bound to this grid uses this property to determine the parameter names to use in its requests.
Store
lastOptions:
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这...
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这些是什么的参数。加载当前的Record缓存的时候，清楚用了哪些的参数有时是非常有用的。Contains the last options object used as the parameter to the load method. See 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.
Store

公共方法

方法 定义者
DirectStore( Object config )
参数项：
  • config : Object
返回值：
  • void
DirectStore
Store( Object config )
参数项：
  • config : Object
    一配置对象，包含了Store用来访问数据，及读数据至Records的对象。A config object containing the objects needed for the Store to access data, and read the data into Records.
返回值：
  • void
Store
add( Ext.data.Record records )
往Store对象添加Records，并触发add事件。Add Reco...
往Store对象添加Records，并触发add事件。Add Records to the Store and fires the add event.
参数项：
  • records : Ext.data.Record
    准备加入到缓存的Ext.data.Record对象数组（Ext.data.Record[]）。An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
addSorted( Ext.data.Record record )
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插...
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插入到Store对象中。(Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.
参数项：
  • record : Ext.data.Record
返回值：
  • void
Store
remove( Ext.data.Record record )
从Store中移除一Record对象，并触发remove移除事件。Re...
从Store中移除一Record对象，并触发remove移除事件。Remove a Record from the Store and fires the remove event.
参数项：
  • record : Ext.data.Record
    被从缓存中移除的Ext.data.Record对象 record The Ext.data.Record object to remove from the cache.
返回值：
  • void
Store
removeAt( Number index )
根据指定的索引移除Store中的某个Record。触发remove事件...
根据指定的索引移除Store中的某个Record。触发remove事件。Remove a Record from the Store at the specified index. Fires the remove event.
参数项：
  • index : Number
    要被移除的Record索引。The index of the record to remove.
返回值：
  • void
Store
removeAll()
从Store中清空所有Record对象，并触发clear事件。Remo...
从Store中清空所有Record对象，并触发clear事件。Remove all Records from the Store and fires the clear event.
参数项：
  • None.
返回值：
  • void
Store
insert( Number index, Ext.data.Record records )
触发添加事件时插入records到指定的store位置 Inserts...
触发添加事件时插入records到指定的store位置 Inserts Records into the Store at the given index and fires the add event.
参数项：
  • index : Number
    传入的Records插入的开始位置 index The start index at which to insert the passed Records.
  • records : Ext.data.Record
    加入到缓存中的Ext.data.Record对象（Ext.data.Record[]）。records An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
indexOf( Ext.data.Record record ) : Number
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get t...
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get the index within the cache of the passed Record.
参数项：
  • record : Ext.data.Record
    要找寻的Ext.data.Record record The Ext.data.Record object to find.
返回值：
  • Number
    被传入的Record的索引，如果未找到返回-1 The index of the passed Record. Returns -1 if not found.
Store
indexOfId( String id ) : Number
传入一个id，根据id查询缓存里的Record，返回其索引。Get t...
传入一个id，根据id查询缓存里的Record，返回其索引。Get the index within the cache of the Record with the passed id.
参数项：
  • id : String
    要找到Record的id id The id of the Record to find.
返回值：
  • Number
    被找到的Record的索引，如果未找到返回-1 The index of the Record. Returns -1 if not found.
Store
getById( String id ) : Ext.data.Record
根据指定的id找到Record。Get the Record with...
根据指定的id找到Record。Get the Record with the specified id.
参数项：
  • id : String
    要找的Record的id The id of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配id的Record，如果未找到则返回undefined The Record with the passed id. Returns undefined if not found.
Store
getAt( Number index ) : Ext.data.Record
根据指定的索引找到Record。Get the Record at t...
根据指定的索引找到Record。Get the Record at the specified index.
参数项：
  • index : Number
    要找的Record的索引 The index of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配索引的Record，如果未找到则返回undefined The Record at the passed index. Returns undefined if not found.
Store
getRange( Number startIndex, Number endIndex ) : {Ext.data.Record[]} 返回一个Record数组 An array of Records
查找指定范围里的Records。Returns a range of ...
查找指定范围里的Records。Returns a range of Records between specified indices.
参数项：
  • startIndex : Number
    （可选项）开始索引 （默认为 0） startIndex (optional) The starting index (defaults to 0)
  • endIndex : Number
    （可选项）结束的索引 （默认是Store中最后一个Record的索引） endIndex (optional) The ending index (defaults to the last Record in the Store)
返回值：
  • {Ext.data.Record[]} 返回一个Record数组 An array of Records
Store
load( Object options ) : Boolean
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配...
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配置好的Proxy对象完成。Loads the Record cache from the configured Proxy using the configured Reader.

如果使用服务器分页，那么必须指定在options.params中start和limit两个参数。start参数表明了从记录集（dataset）的哪一个位置开始读取，limit是读取多少笔的记录。Proxy负责送出参数。If using remote paging, then 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.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    传入以下属性的对象，传入的对象会影响加载的选项：An object containing properties which control loading options:
    • params :Object

      送出的HTTP参数，格式是JS对象。An object containing properties to pass as HTTP parameters to a remote data source.

    • callback : Function

      回调函数，这个函数会有以下的参数传入：A function to be called after the Records have been loaded. The callback is passed the following arguments:

      • r : Ext.data.Record[]
      • options: 加载的配置项对象。Options object from the load call
      • success: 是否成功。Boolean success indicator

    • scope : Object

      回调函数的作用域（默认为Store对象）。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.

返回值：
  • Boolean
    是否执行了load（受beforeload的影响，参见源码）。Whether the load fired (if beforeload failed).
Store
reload( Object options )
依据上一次的load操作的参数的Reader制订的格式，再一次向Pro...

依据上一次的load操作的参数的Reader制订的格式，再一次向Proxy对象要求施以加载（Reload）Record缓存的操作。Reloads the Record cache from the configured Proxy using the configured Reader and the options from the last load operation performed.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    （可选的）该对象包含的属性会覆盖上次load操作的参数。参阅load了解详细内容（默认为null，即就是复用上次的选项参数）。(optional) An object containing loading options which may override the options used in the last load operation. See load for details (defaults to null, in which case the most recently used options are reused).
返回值：
  • void
Store
loadData( Object data, Boolean add )
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Read...
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Reader必须能够读取理解的，Reader是在构造器中配置好的。Loads data from a passed data block and fires the load event. A Reader which understands the format of the data must have been configured in the constructor.
参数项：
  • data : Object
    要被转化为Records的数据块。数据类型会是由这个Reader的配置所决定的，并且符合Reader对象的readRecord参数的要求。The data block from which to read the Records. The format of the data expected is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
  • add : Boolean
    （可选的）True表示为是在缓存中追加新的Records而不是进行替换。(Optional) True to add the new Records rather than replace the existing cache. 切记Store中的Record是按照id记录的，所以新加的Records如果id一样的话就会替换Stroe里面原有的，新的就会追加。Remember that Records in a Store are keyed by their id, so added Records with ids which are already present in the Store will replace existing Records. Records with new, unique ids will be added.
返回值：
  • void
Store
getCount() : Number
获取缓存记录的总数。Gets the number of cached...
获取缓存记录的总数。Gets the number of cached records.

如果使用了分页，那么这就是当前分页的总数，而不是全部记录的总数。要获取记录总数应使用getTotalCount方法，才能从Reader身上获取正确的全部记录数。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 getTotalCount function returns the dataset size.

参数项：
  • None.
返回值：
  • Number
    Store缓存中记录总数 The number of Records in the Store's cache.
Store
getTotalCount() : Number
获取作为服务端返回的数据集中记录的总数。Gets the total ...
获取作为服务端返回的数据集中记录的总数。Gets the total number of records in the dataset as returned by the server.

如果分页，该值必须声明存在才能成功分页。Reader对象处理数据对象该值不能或缺。对于远程数据而言，这是有服务器查询的结果。If using paging, for this to be accurate, the data object used by the Reader must contain the dataset size. For remote data sources, this is provided by a query on the server.

参数项：
  • None.
返回值：
  • Number
    数据对象由Proxy传给Reader对象，这个数据对象包含Record记录的总数 The number of Records as specified in the data object passed to the Reader by the Proxy

    如果是在本地更新Store的内容，那么该值是不会发生变化的。This value is not updated when changing the contents of the Store locally.

 Store
getSortState() : Object
以对象的形式返回当前排序的状态。Returns an object d...
以对象的形式返回当前排序的状态。Returns an object describing the current sort state of this Store.
参数项：
  • None.
返回值：
  • 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

      一个是排序方向，"ASC"或"DESC" The sort order, "ASC" or "DESC" (case-sensitive).

 Store
setDefaultSort( String fieldName, String dir )
设置默认的列排序，以便下次load操作时使用 Sets the def...
设置默认的列排序，以便下次load操作时使用 Sets the default sort column and order to be used by the next load operation.
参数项：
  • fieldName : String
    要排序的字段 The name of the field to sort by.
  • dir : String
    （可选的） 排序顺序，“ASC”或“DESC”（默认为“ASC”） (optional) The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
sort( String fieldName, String 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.
参数项：
  • fieldName : String
    要排序的字段的字符串。The name of the field to sort by.
  • dir : String
    (optional) 排序方向，“ASC”或“DESC”（大小写敏感的，默认为“ASC”）。The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
each( Function fn, Object scope )
对缓存中每个记录调用特点的函数。Calls the specified...
对缓存中每个记录调用特点的函数。Calls the specified function for each of the Records in the cache.
参数项：
  • fn : Function
    要调用的函数。Record对象将是第一个参数。如果返回 The function to call. The Record is passed as the first parameter. Returning false aborts and exits the iteration.
  • scope : Object
    函数的作用域（默认为Record对象）（可选的） (optional) The scope in which to call the function (defaults to the Record).
返回值：
  • void
Store
getModifiedRecords() : {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（loa...
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（load）的操作来持久化这些修改的记录。（例如在分页期间） Gets all records modified since the last commit. Modified records are persisted across load operations (e.g., during paging).
参数项：
  • None.
返回值：
  • {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
Store
sum( String property, Number start, Number end ) : Number
统计每个记录属性值的个数。可设置区间。Sums the value o...
统计每个记录属性值的个数。可设置区间。Sums the value of property for each record between start and end and returns the result.
参数项：
  • property : String
    记录集中要统计的字段名称。A field on your records
  • start : Number
    计算的记录开始索引（默认为0）。start The record index to start at (defaults to 0)
  • end : Number
    计算的记录结尾索引（默认为length - 1，从零开始算）。The last record index to include (defaults to length - 1)
返回值：
  • Number
    总数 The sum
Store
filter( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive )
由指定的属性筛选记录。Filter the records by a ...
由指定的属性筛选记录。Filter the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 value Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • void
Store
filterBy( Function fn, Object scope )
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如...
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中，否则就会被过滤掉。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this）。(optional) The scope of the function (defaults to this)
返回值：
  • void
Store
query( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性查询记录。Query the records by a s...
由指定的属性查询记录。Query the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • MixedCollection
    返回一个Ext.util.MixedCollection实例，包含了匹配的记录 Returns an Ext.util.MixedCollection of the matched records
Store
find( Function fn, Object scope, String property, String/RegExp value, Number startIndex, Boolean anyMatch, Boolean caseSensitive ) : Number
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经...
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this） (optional) The scope of the function (defaults to this)
  • property : String
    你查询对象的属性 A property on your objects
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the property value should begin with, or a RegExp to test against the property.
  • startIndex : Number
    （可选的） 查询的开始索引 (optional) The index to start searching at
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • Number
    匹配的索引或-1 The matched index or -1
Store
findBy( Function fn, Object scope, Number startIndex ) : Number
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回...
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回true的话，就被认为是一个匹配的结果。Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数：The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。The record to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的IDThe ID of the Record passed.

  • scope : Object
    （可选的） 函数作用域（默认为this）(optional) The scope of the function (defaults to this)
  • startIndex : Number
    （可选的） 查询的开始索引(optional) The index to start searching at
返回值：
  • Number
    匹配的索引或-1The matched index or -1
Store
clearFilter( String dataIndex, Boolean allowNull, Boolean bypassFilter, Boolean suppressEvent ) : Array
从这个Store身上收集由dataIndex指定的惟一的值。Colle...
从这个Store身上收集由dataIndex指定的惟一的值。Collects unique values for a particular dataIndex from this store.
参数项：
  • dataIndex : String
    要收集的属性The property to collect
  • allowNull : Boolean
    （可选的） 送入true表示允许null、undefined或空白字符串这些无意义的值(optional) Pass true to allow null, undefined or empty string values
  • bypassFilter : Boolean
    （可选的）送入true表示收集所有记录，哪怕是被经过筛选的记录(optional) Pass true to collect from all records, even ones which are filtered
  • suppressEvent : Boolean
    如果设置为true，该筛选器会低调地清空，而不会通知监听器If true the filter is cleared silently without notifying listeners
返回值：
  • Array
    惟一的值所构成的数组An array of the unique values/
Store
isFiltered() : Boolean
返回true表明这个store当前是在筛选的。Returns true...
返回true表明这个store当前是在筛选的。Returns true if this store is currently filtered
参数项：
  • None.
返回值：
  • Boolean
Store
commitChanges()
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记...
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记Store的“update”事件，事件的处理函数中的第三个参数就是Ext.data.Record.COMMIT，用它来进行更新。Commit all Records with outstanding changes. To handle updates for changes, subscribe to the Store's "update" event, and perform updating when the third parameter is Ext.data.Record.COMMIT.
参数项：
  • None.
返回值：
  • void
Store
rejectChanges()
放弃所有的变更。Cancel outstanding changes ...
放弃所有的变更。Cancel outstanding changes on all changed records.
参数项：
  • None.
返回值：
  • void
Store
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
datachanged()
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的...
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的操作）。使用该Store应该的UI应该有所响应，如刷新其视图。
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.
侦听器会传入以下的参数：
  • None.
 Store
metachange()
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。...
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。当前只对JsonReaders有效。Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders.
侦听器会传入以下的参数：
  • None.
 Store
add()
当有Record添加到Store里面后触发。Fires when Re...
当有Record添加到Store里面后触发。Fires when Records have been added to the Store
侦听器会传入以下的参数：
  • None.
 Store
remove()
当Store中的Record被移除后触发。Fires when a R...
当Store中的Record被移除后触发。Fires when a Record has been removed from the Store
侦听器会传入以下的参数：
  • None.
 Store
update()
当有Record改动时触发。Fires when a Record h...
当有Record改动时触发。Fires when a Record has been updated
侦听器会传入以下的参数：
  • None.
 Store
clear()
当数据缓存被清除的时候触发。Fires when the data c...
当数据缓存被清除的时候触发。Fires when the data cache has been cleared.
侦听器会传入以下的参数：
  • None.
 Store
beforeload()
当请求新的数据对象之前触发。如果beforeload返回false表示...
当请求新的数据对象之前触发。如果beforeload返回false表示load的操作被取消。Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled.
侦听器会传入以下的参数：
  • None.
 Store
load()
当一笔新的Record加载完毕后触发。Fires after a ne...
当一笔新的Record加载完毕后触发。Fires after a new set of Records has been loaded.
侦听器会传入以下的参数：
  • None.
 Store
loadexception()
当Proxy加载过程中有异常时触发。连同Proxy“loadexcep...
当Proxy加载过程中有异常时触发。连同Proxy“loadexception”的事件一起触发。Fires if an exception occurs in the Proxy during loading. Called with the signature of the Proxy's "loadexception" event.
侦听器会传入以下的参数：
  • None.
 Store


类Ext.data.Field

包： | Extdata
定义的文件： | DataField.js
类全称： | Ext.data.Field
继承自于： | Object

该类封装了Ext.data.Recordcreate所传入字段定义对象的信息。
This class encpasulates the field definition information specified in the field definition objects passed to Ext.data.Recordcreate.

开发者一般不需要实例化该类。方法执行过程中创建该实例，并且在Record构造器的原型prototype中的fields属性就是该实例。
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.

配置项

配置项 定义者
name : String
The name by which the field is refe...
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
Field
type : String
(Optional) The data type for conver...
(Optional) The data type for conversion to displayable value. Possible values are
  • auto (Default, implies no conversion)
  • string
  • int
  • float
  • boolean
  • date
 Field
convert : Function
(Optional) A function which 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.
  • rec : Mixed
    The data object containing the row as read by the Reader. Depending on Reader type, this could be an Array, an object, or an XML element.
 Field
dateFormat : String
(Optional) A format string for the ...
(Optional) 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.
Field
defaultValue : Mixed
(Optional) The default value used w...
(Optional) 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
(Optional) A path specification for...
(Optional) A path specification for use by the Ext.data.Reader implementation that is creating the Record to access the data value from the data object. If an Ext.data.JsonReader is being used, then this is a string containing the javascript expression to reference the data relative to the Record item's root. If an Ext.data.XmlReader is being used, this is an Ext.DomQuery path to the data item relative to the Record element. If the mapping expression is the same as the field name, this may be omitted.
Field
sortType : Function
(Optional) A function which convert...
(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 Ext.data.SortTypes
Field
sortDir : String
(Optional) Initial direction to sor...
(Optional) Initial direction to sort. "ASC" or "DESC"
Field

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.data.GroupingStore

包： | Extdata
定义的文件： | GroupingStore.js
类全称： | Ext.data.GroupingStore
继承自于： | Ext.data.Store
一个特殊的Store实现，提供由字段中提取某一个来划分记录的功能。GroupingStore通常和Ext.grid.GroupingView一起用，来证明为分组GridPanel划分data model。
A specialized store implementation that provides for grouping records by one of the available fields. This is usually used in conjunction with an Ext.grid.GroupingView to proved the data model for a grouped GridPanel.

配置项

配置项 定义者
groupField : String
Store中哪一个字段的数据是要排序的（默认为""）。The fiel...
Store中哪一个字段的数据是要排序的（默认为""）。The field name by which to sort the store's data (defaults to '').
GroupingStore
remoteGroup : Boolean
True表示让服务端进行排序，false就表示本地排序（默认为fals...
True表示让服务端进行排序，false就表示本地排序（默认为false） 如果是本地的排序，那么数据会立即发生变化。如果是远程的， 那么这仅仅是一个辅助类，它会向服务器发出“groupBy”的参数。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.
GroupingStore
groupOnSort : Boolean
True表示为当分组操作发起时，在分组字段上进行数据排序，false表...
True表示为当分组操作发起时，在分组字段上进行数据排序，false表示为只根据当前排序的信息来排序（默认为false）。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).
GroupingStore
storeId : String
如果有值传入，该ID用于在StoreMgr登记时用。storeId I...
如果有值传入，该ID用于在StoreMgr登记时用。storeId If passed, the id to use to register with the StoreMgr
Store
url : String
如果有值传入，会为该URL创建一个HttpProxy对象。url If...
如果有值传入，会为该URL创建一个HttpProxy对象。url If passed, an HttpProxy is created for the passed URL
Store
autoLoad : Boolean/Object
如果有值传入，那么store的load会自动调用，发生在autoLoa...
如果有值传入，那么store的load会自动调用，发生在autoLoaded对象创建之后。autoLoad If passed, this store's load method is automatically called after creation with the autoLoad object
Store
proxy : Ext.data.DataProxy
Proxy对象，用于访问数据对象。proxy The Proxy ob...
Proxy对象，用于访问数据对象。proxy The Proxy object which provides access to a data object.
Store
data : Array
表示store初始化后，要加载的内联数据。data Inline da...
表示store初始化后，要加载的内联数据。data Inline data to be loaded when the store is initialized.
Store
reader : Ext.data.DataReader
处理数据对象的DataReader会返回一个Ext.data.Reco...
处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id属性会是一个缓冲了的键。reader The DataReader object which processes the data object and returns an Array of Ext.data.Record objects which are cached keyed by their id property.
Store
baseParams : Object
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化...
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化为参数的字符串。baseParams An object containing properties which are to be sent as parameters on any HTTP request
Store
sortInfo : Object
如何排序的对象，格式如下：{field: "fieldName", d...
如何排序的对象，格式如下：{field: "fieldName", direction: "ASC|DESC"}。排序方向的大小写敏感的。sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"} to specify the sort order in the request of a remote Store's load operation. Note that for local sorting, the direction property is case-sensitive.
Store
remoteSort : boolean
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以...
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）。remoteSort True if sorting is to be handled by requesting the 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 remote sorting is specified, then clicking on a column header causes the current page to be requested from the server with the addition of the following two parameters:

  • sort : String

    要排序的字段字符串（即在Record对象内的字段定义） The name (as specified in the Record's Field definition) of the field to sort on.

  • dir : String

    排序的方向，“ASC”或“DESC”（一定要大写） The direction of the sort, "ASC" or "DESC" (case-sensitive).

 Store
pruneModifiedRecords : boolean
True表示为，每次Store加载后，清除所有修改过的记录信息；rec...
True表示为，每次Store加载后，清除所有修改过的记录信息；record被移除时也会这样（默认为false）。pruneModifiedRecords True to clear all modified record information each time the store is loaded or when a record is removed. (defaults to false).
Store
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
baseParams:
每次HTTP请求都会携带的参数，就保存在这个对象身上。An obje...
每次HTTP请求都会携带的参数，就保存在这个对象身上。An object containing properties which are used as parameters on any HTTP request.
Store
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.

绑定在这个Grid的PagingToolbar就使用这些配置来分页。请求中将会使用到。
A PagingToolbar bound to this grid uses this property to determine the parameter names to use in its requests.
Store
lastOptions:
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这...
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这些是什么的参数。加载当前的Record缓存的时候，清楚用了哪些的参数有时是非常有用的。Contains the last options object used as the parameter to the load method. See 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.
Store

公共方法

方法 定义者
GroupingStore( Object config )
参数项：
  • config : Object
    一配置对象，包含了Store用来访问数据，及读数据至Records的对象。A config object containing the objects needed for the Store to access data, and read the data into Records.
返回值：
  • void
GroupingStore
clearGrouping()
清除当前的组，并使用默认排序来刷新数据。Clears any exis...
清除当前的组，并使用默认排序来刷新数据。Clears any existing grouping and refreshes the data using the default sort.
参数项：
  • None.
返回值：
  • void
GroupingStore
groupBy( String field, Boolean forceRegroup )
对特定的字段进行分组。Groups the data by the s...
对特定的字段进行分组。Groups the data by the specified field.
参数项：
  • field : String
    field中哪一个字段的数据是要排序的名称。The field name by which to sort the store's data
  • forceRegroup : Boolean
    （可选的）True表示为强制必须刷新组，即使传入的组与当前在分组的字段同名；false表示跳过同名字段的分组（默认为false）。(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)
返回值：
  • void
GroupingStore
Store( Object config )
参数项：
  • config : Object
    一配置对象，包含了Store用来访问数据，及读数据至Records的对象。A config object containing the objects needed for the Store to access data, and read the data into Records.
返回值：
  • void
Store
add( Ext.data.Record records )
往Store对象添加Records，并触发add事件。Add Reco...
往Store对象添加Records，并触发add事件。Add Records to the Store and fires the add event.
参数项：
  • records : Ext.data.Record
    准备加入到缓存的Ext.data.Record对象数组（Ext.data.Record[]）。An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
addSorted( Ext.data.Record record )
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插...
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插入到Store对象中。(Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.
参数项：
  • record : Ext.data.Record
返回值：
  • void
Store
remove( Ext.data.Record record )
从Store中移除一Record对象，并触发remove移除事件。Re...
从Store中移除一Record对象，并触发remove移除事件。Remove a Record from the Store and fires the remove event.
参数项：
  • record : Ext.data.Record
    被从缓存中移除的Ext.data.Record对象 record The Ext.data.Record object to remove from the cache.
返回值：
  • void
Store
removeAt( Number index )
根据指定的索引移除Store中的某个Record。触发remove事件...
根据指定的索引移除Store中的某个Record。触发remove事件。Remove a Record from the Store at the specified index. Fires the remove event.
参数项：
  • index : Number
    要被移除的Record索引。The index of the record to remove.
返回值：
  • void
Store
removeAll()
从Store中清空所有Record对象，并触发clear事件。Remo...
从Store中清空所有Record对象，并触发clear事件。Remove all Records from the Store and fires the clear event.
参数项：
  • None.
返回值：
  • void
Store
insert( Number index, Ext.data.Record records )
触发添加事件时插入records到指定的store位置 Inserts...
触发添加事件时插入records到指定的store位置 Inserts Records into the Store at the given index and fires the add event.
参数项：
  • index : Number
    传入的Records插入的开始位置 index The start index at which to insert the passed Records.
  • records : Ext.data.Record
    加入到缓存中的Ext.data.Record对象（Ext.data.Record[]）。records An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
indexOf( Ext.data.Record record ) : Number
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get t...
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get the index within the cache of the passed Record.
参数项：
  • record : Ext.data.Record
    要找寻的Ext.data.Record record The Ext.data.Record object to find.
返回值：
  • Number
    被传入的Record的索引，如果未找到返回-1 The index of the passed Record. Returns -1 if not found.
Store
indexOfId( String id ) : Number
传入一个id，根据id查询缓存里的Record，返回其索引。Get t...
传入一个id，根据id查询缓存里的Record，返回其索引。Get the index within the cache of the Record with the passed id.
参数项：
  • id : String
    要找到Record的id id The id of the Record to find.
返回值：
  • Number
    被找到的Record的索引，如果未找到返回-1 The index of the Record. Returns -1 if not found.
Store
getById( String id ) : Ext.data.Record
根据指定的id找到Record。Get the Record with...
根据指定的id找到Record。Get the Record with the specified id.
参数项：
  • id : String
    要找的Record的id The id of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配id的Record，如果未找到则返回undefined The Record with the passed id. Returns undefined if not found.
Store
getAt( Number index ) : Ext.data.Record
根据指定的索引找到Record。Get the Record at t...
根据指定的索引找到Record。Get the Record at the specified index.
参数项：
  • index : Number
    要找的Record的索引 The index of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配索引的Record，如果未找到则返回undefined The Record at the passed index. Returns undefined if not found.
Store
getRange( Number startIndex, Number endIndex ) : {Ext.data.Record[]} 返回一个Record数组 An array of Records
查找指定范围里的Records。Returns a range of ...
查找指定范围里的Records。Returns a range of Records between specified indices.
参数项：
  • startIndex : Number
    （可选项）开始索引 （默认为 0） startIndex (optional) The starting index (defaults to 0)
  • endIndex : Number
    （可选项）结束的索引 （默认是Store中最后一个Record的索引） endIndex (optional) The ending index (defaults to the last Record in the Store)
返回值：
  • {Ext.data.Record[]} 返回一个Record数组 An array of Records
Store
load( Object options ) : Boolean
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配...
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配置好的Proxy对象完成。Loads the Record cache from the configured Proxy using the configured Reader.

如果使用服务器分页，那么必须指定在options.params中start和limit两个参数。start参数表明了从记录集（dataset）的哪一个位置开始读取，limit是读取多少笔的记录。Proxy负责送出参数。If using remote paging, then 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.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    传入以下属性的对象，传入的对象会影响加载的选项：An object containing properties which control loading options:
    • params :Object

      送出的HTTP参数，格式是JS对象。An object containing properties to pass as HTTP parameters to a remote data source.

    • callback : Function

      回调函数，这个函数会有以下的参数传入：A function to be called after the Records have been loaded. The callback is passed the following arguments:

      • r : Ext.data.Record[]
      • options: 加载的配置项对象。Options object from the load call
      • success: 是否成功。Boolean success indicator

    • scope : Object

      回调函数的作用域（默认为Store对象）。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.

返回值：
  • Boolean
    是否执行了load（受beforeload的影响，参见源码）。Whether the load fired (if beforeload failed).
Store
reload( Object options )
依据上一次的load操作的参数的Reader制订的格式，再一次向Pro...

依据上一次的load操作的参数的Reader制订的格式，再一次向Proxy对象要求施以加载（Reload）Record缓存的操作。Reloads the Record cache from the configured Proxy using the configured Reader and the options from the last load operation performed.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    （可选的）该对象包含的属性会覆盖上次load操作的参数。参阅load了解详细内容（默认为null，即就是复用上次的选项参数）。(optional) An object containing loading options which may override the options used in the last load operation. See load for details (defaults to null, in which case the most recently used options are reused).
返回值：
  • void
Store
loadData( Object data, Boolean add )
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Read...
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Reader必须能够读取理解的，Reader是在构造器中配置好的。Loads data from a passed data block and fires the load event. A Reader which understands the format of the data must have been configured in the constructor.
参数项：
  • data : Object
    要被转化为Records的数据块。数据类型会是由这个Reader的配置所决定的，并且符合Reader对象的readRecord参数的要求。The data block from which to read the Records. The format of the data expected is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
  • add : Boolean
    （可选的）True表示为是在缓存中追加新的Records而不是进行替换。(Optional) True to add the new Records rather than replace the existing cache. 切记Store中的Record是按照id记录的，所以新加的Records如果id一样的话就会替换Stroe里面原有的，新的就会追加。Remember that Records in a Store are keyed by their id, so added Records with ids which are already present in the Store will replace existing Records. Records with new, unique ids will be added.
返回值：
  • void
Store
getCount() : Number
获取缓存记录的总数。Gets the number of cached...
获取缓存记录的总数。Gets the number of cached records.

如果使用了分页，那么这就是当前分页的总数，而不是全部记录的总数。要获取记录总数应使用getTotalCount方法，才能从Reader身上获取正确的全部记录数。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 getTotalCount function returns the dataset size.

参数项：
  • None.
返回值：
  • Number
    Store缓存中记录总数 The number of Records in the Store's cache.
Store
getTotalCount() : Number
获取作为服务端返回的数据集中记录的总数。Gets the total ...
获取作为服务端返回的数据集中记录的总数。Gets the total number of records in the dataset as returned by the server.

如果分页，该值必须声明存在才能成功分页。Reader对象处理数据对象该值不能或缺。对于远程数据而言，这是有服务器查询的结果。If using paging, for this to be accurate, the data object used by the Reader must contain the dataset size. For remote data sources, this is provided by a query on the server.

参数项：
  • None.
返回值：
  • Number
    数据对象由Proxy传给Reader对象，这个数据对象包含Record记录的总数 The number of Records as specified in the data object passed to the Reader by the Proxy

    如果是在本地更新Store的内容，那么该值是不会发生变化的。This value is not updated when changing the contents of the Store locally.

 Store
getSortState() : Object
以对象的形式返回当前排序的状态。Returns an object d...
以对象的形式返回当前排序的状态。Returns an object describing the current sort state of this Store.
参数项：
  • None.
返回值：
  • 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

      一个是排序方向，"ASC"或"DESC" The sort order, "ASC" or "DESC" (case-sensitive).

 Store
setDefaultSort( String fieldName, String dir )
设置默认的列排序，以便下次load操作时使用 Sets the def...
设置默认的列排序，以便下次load操作时使用 Sets the default sort column and order to be used by the next load operation.
参数项：
  • fieldName : String
    要排序的字段 The name of the field to sort by.
  • dir : String
    （可选的） 排序顺序，“ASC”或“DESC”（默认为“ASC”） (optional) The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
sort( String fieldName, String 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.
参数项：
  • fieldName : String
    要排序的字段的字符串。The name of the field to sort by.
  • dir : String
    (optional) 排序方向，“ASC”或“DESC”（大小写敏感的，默认为“ASC”）。The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
each( Function fn, Object scope )
对缓存中每个记录调用特点的函数。Calls the specified...
对缓存中每个记录调用特点的函数。Calls the specified function for each of the Records in the cache.
参数项：
  • fn : Function
    要调用的函数。Record对象将是第一个参数。如果返回 The function to call. The Record is passed as the first parameter. Returning false aborts and exits the iteration.
  • scope : Object
    函数的作用域（默认为Record对象）（可选的） (optional) The scope in which to call the function (defaults to the Record).
返回值：
  • void
Store
getModifiedRecords() : {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（loa...
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（load）的操作来持久化这些修改的记录。（例如在分页期间） Gets all records modified since the last commit. Modified records are persisted across load operations (e.g., during paging).
参数项：
  • None.
返回值：
  • {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
Store
sum( String property, Number start, Number end ) : Number
统计每个记录属性值的个数。可设置区间。Sums the value o...
统计每个记录属性值的个数。可设置区间。Sums the value of property for each record between start and end and returns the result.
参数项：
  • property : String
    记录集中要统计的字段名称。A field on your records
  • start : Number
    计算的记录开始索引（默认为0）。start The record index to start at (defaults to 0)
  • end : Number
    计算的记录结尾索引（默认为length - 1，从零开始算）。The last record index to include (defaults to length - 1)
返回值：
  • Number
    总数 The sum
Store
filter( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive )
由指定的属性筛选记录。Filter the records by a ...
由指定的属性筛选记录。Filter the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 value Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • void
Store
filterBy( Function fn, Object scope )
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如...
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中，否则就会被过滤掉。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this）。(optional) The scope of the function (defaults to this)
返回值：
  • void
Store
query( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性查询记录。Query the records by a s...
由指定的属性查询记录。Query the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • MixedCollection
    返回一个Ext.util.MixedCollection实例，包含了匹配的记录 Returns an Ext.util.MixedCollection of the matched records
Store
find( Function fn, Object scope, String property, String/RegExp value, Number startIndex, Boolean anyMatch, Boolean caseSensitive ) : Number
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经...
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this） (optional) The scope of the function (defaults to this)
  • property : String
    你查询对象的属性 A property on your objects
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the property value should begin with, or a RegExp to test against the property.
  • startIndex : Number
    （可选的） 查询的开始索引 (optional) The index to start searching at
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • Number
    匹配的索引或-1 The matched index or -1
Store
findBy( Function fn, Object scope, Number startIndex ) : Number
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回...
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回true的话，就被认为是一个匹配的结果。Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数：The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。The record to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的IDThe ID of the Record passed.

  • scope : Object
    （可选的） 函数作用域（默认为this）(optional) The scope of the function (defaults to this)
  • startIndex : Number
    （可选的） 查询的开始索引(optional) The index to start searching at
返回值：
  • Number
    匹配的索引或-1The matched index or -1
Store
clearFilter( String dataIndex, Boolean allowNull, Boolean bypassFilter, Boolean suppressEvent ) : Array
从这个Store身上收集由dataIndex指定的惟一的值。Colle...
从这个Store身上收集由dataIndex指定的惟一的值。Collects unique values for a particular dataIndex from this store.
参数项：
  • dataIndex : String
    要收集的属性The property to collect
  • allowNull : Boolean
    （可选的） 送入true表示允许null、undefined或空白字符串这些无意义的值(optional) Pass true to allow null, undefined or empty string values
  • bypassFilter : Boolean
    （可选的）送入true表示收集所有记录，哪怕是被经过筛选的记录(optional) Pass true to collect from all records, even ones which are filtered
  • suppressEvent : Boolean
    如果设置为true，该筛选器会低调地清空，而不会通知监听器If true the filter is cleared silently without notifying listeners
返回值：
  • Array
    惟一的值所构成的数组An array of the unique values/
Store
isFiltered() : Boolean
返回true表明这个store当前是在筛选的。Returns true...
返回true表明这个store当前是在筛选的。Returns true if this store is currently filtered
参数项：
  • None.
返回值：
  • Boolean
Store
commitChanges()
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记...
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记Store的“update”事件，事件的处理函数中的第三个参数就是Ext.data.Record.COMMIT，用它来进行更新。Commit all Records with outstanding changes. To handle updates for changes, subscribe to the Store's "update" event, and perform updating when the third parameter is Ext.data.Record.COMMIT.
参数项：
  • None.
返回值：
  • void
Store
rejectChanges()
放弃所有的变更。Cancel outstanding changes ...
放弃所有的变更。Cancel outstanding changes on all changed records.
参数项：
  • None.
返回值：
  • void
Store
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
datachanged()
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的...
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的操作）。使用该Store应该的UI应该有所响应，如刷新其视图。
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.
侦听器会传入以下的参数：
  • None.
 Store
metachange()
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。...
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。当前只对JsonReaders有效。Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders.
侦听器会传入以下的参数：
  • None.
 Store
add()
当有Record添加到Store里面后触发。Fires when Re...
当有Record添加到Store里面后触发。Fires when Records have been added to the Store
侦听器会传入以下的参数：
  • None.
 Store
remove()
当Store中的Record被移除后触发。Fires when a R...
当Store中的Record被移除后触发。Fires when a Record has been removed from the Store
侦听器会传入以下的参数：
  • None.
 Store
update()
当有Record改动时触发。Fires when a Record h...
当有Record改动时触发。Fires when a Record has been updated
侦听器会传入以下的参数：
  • None.
 Store
clear()
当数据缓存被清除的时候触发。Fires when the data c...
当数据缓存被清除的时候触发。Fires when the data cache has been cleared.
侦听器会传入以下的参数：
  • None.
 Store
beforeload()
当请求新的数据对象之前触发。如果beforeload返回false表示...
当请求新的数据对象之前触发。如果beforeload返回false表示load的操作被取消。Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled.
侦听器会传入以下的参数：
  • None.
 Store
load()
当一笔新的Record加载完毕后触发。Fires after a ne...
当一笔新的Record加载完毕后触发。Fires after a new set of Records has been loaded.
侦听器会传入以下的参数：
  • None.
 Store
loadexception()
当Proxy加载过程中有异常时触发。连同Proxy“loadexcep...
当Proxy加载过程中有异常时触发。连同Proxy“loadexception”的事件一起触发。Fires if an exception occurs in the Proxy during loading. Called with the signature of the Proxy's "loadexception" event.
侦听器会传入以下的参数：
  • None.
 Store


类Ext.data.HttpProxy

包： | Extdata
定义的文件： | HttpProxy.js
类全称： | Ext.data.HttpProxy
继承自于： | Ext.data.DataProxy
一个Ext.data.DataProxy所实现的子类，能从Connection（针对某个URL地址）对象读取数据。
An implementation of Ext.data.DataProxy that reads a data object from a Connection object configured to reference a certain URL.

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | conn: 向服务器端方面负责发起请求的Connection对象（或者是Ext... 向服务器端方面负责发起请求的Connection对象（或者是Ext.Ajaxrequest参数对象）。当请求数据的方式改变时该对象的这个属性也会应因应改变。The Connection object (Or options parameter to Ext.Ajaxrequest) 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. | HttpProxy

公共方法

方法 定义者
HttpProxy( Object conn, Object conn )
参数项：
  • conn : Object
    一个Ext.data.Connection对象，或像Ext.Ajaxrequest那样的配置项。如果是配置项，那么就会创建一个为这次请求服务的Ext.Ajax单件对象。An implementation of Ext.data.DataProxy that reads a data object from a Connection object configured to reference a certain URL.
    注意这个类不能脱离本页面的范围进行跨域（Cross Domain）获取数据。Note that this class cannot be used to retrieve data from a domain other than the domain from which the running page was served.
    要进行跨域获取数据，请使用ScriptTagProxy。For cross-domain access to remote data, use a ScriptTagProxy.
    为了浏览器能成功解析返回来的XML document对象，HTTP Response的content-type 头必须被设成为text/xml。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".
  • conn : Object
    一个Ext.data.Connection对象，或者Ext.Ajaxrequest选项参数。
    an Ext.data.Connection object, or options parameter to Ext.Ajaxrequest.

    注意如果该HttpProxy正在使用的是Store，那么Store的load调用将会覆盖全部指定的callback与params选项。这样，在Store的events那里就可以改变参数，或处理加载事件。在实例化的时候就会使用了Store的baseParams。
    Note that if this HttpProxy is being used by a Store, then the Store's call to load will override any specified callback and params options. In this case, use the Store's events to modify parameters, or react to loading events. The Store's baseParams may also be used to pass parameters known at instantiation time.

    如果传入一个选项参数，那么就即会使用Ext.Ajax这个单例对象进行网络通讯。If an options parameter is passed, the singleton Ext.Ajax object will be used to make the request.

返回值：
  • void
HttpProxy
getConnection() : Connection
返回这个Proxy所调用的Ext.data.Connection。Re...
返回这个Proxy所调用的Ext.data.Connection。Return the Ext.data.Connection object being used by this Proxy.
参数项：
  • None.
返回值：
  • Connection
    {Connection} Connection对象。该对象可以被用来订阅事件，而且比DataProxy事件更细微的颗粒度。The Connection object. This object may be used to subscribe to events on a finer-grained basis than the DataProxy events.
HttpProxy
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg )
根据指定的URL位置加载数据（透过一个配置好的Ext.data.Con...
根据指定的URL位置加载数据（透过一个配置好的Ext.data.Connection）。由指定的Ext.data.DataReader实例来解析这个Ext.data.Records块，并由指定的回调来处理这个块。Load data from the configured Ext.data.Connection, read the data object into a block of Ext.data.Records using the passed Ext.data.DataReader implementation, and process that block using the passed callback.
参数项：
  • params : Object
    一个对象，其属性用于向远端服务器作HTTP请求时所用的参数。An object containing properties which are to be used as HTTP parameters for the request to the remote server.
  • reader : Ext.data.DataReader
    能转换数据为Ext.data.Records块的Reader对象。The Reader object which converts the data object into a block of Ext.data.Records.
  • callback : Function
    会送入Ext.data.records块的函数。函数一定会传入：The function into which to pass the block of Ext.data.Records. The function must be passed
    • Record对象。The Record block object
    • 从load函数那里来的参数"arg"。The "arg" argument from the load function
    • 是否成功的标识符。A boolean success indicator
  • scope : Object
    回调函数的作用域。The scope in which to call the callback
  • arg : Object
    送入到回调函数的参数，在参数第二个位置中出现（可选的）。An optional argument which is passed to the callback as its second parameter.
返回值：
  • void
HttpProxy
DataProxy()
参数项：
  • None.
返回值：
  • void
DataProxy
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
loadexception()
当数据加载的时候如有错误发生触发该事件。发生该事件归咎于两种原因： ...
当数据加载的时候如有错误发生触发该事件。发生该事件归咎于两种原因： Fires if an exception occurs in the Proxy during data loading. This event can be fired for one of two reasons:
  • load方法返回success: false。The load call returned success: false. 这表示服务端逻辑返回错误的状态信号，没有可用的数据。这样该事件将会触发而第四个参数（读错误）将是null。This means the server logic returned a failure status and there is no data to read. In this case, this event will be raised and the fourth parameter (read error) will be null.
  • 虽然load方法成功了，但reader不能够读取响应的数据。The load succeeded but the reader could not read the response. 这表示服务端是返回了数据，但解析数据时有问题，已配置好的Reader就抛出异常。这样会触发该事件并将捕获的异常放在该事件的第四个参数中。注意该事件依赖了Ext.data.Store，所以你也可以直接在任意一个Store实例上侦听事件。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 Ext.data.Store, so you can listen for it directly on any Store instance.
侦听器会传入以下的参数：
  • None.
 HttpProxy
beforeload()
当在获取一个数据对象之前，向网络发起请求之前触发。Fires bef...
当在获取一个数据对象之前，向网络发起请求之前触发。Fires before a network request is made to retrieve a data object.
侦听器会传入以下的参数：
  • None.
 DataProxy
load()
当load方法的回调执行后触发。Fires before the l...
当load方法的回调执行后触发。Fires before the load method's callback is called.
侦听器会传入以下的参数：
  • None.
 DataProxy


Class Ext.data.JsonReader.Error

Package: | Ext.data
Defined In: | JsonReader.js
Class: | JsonReader.Error
Extends: | Object
Error class for JsonReader

Public Properties

This class has no public properties.

Public Methods

This class has no public methods.

Public Events

This class has no public events.


类Ext.data.JsonReader

包： | Extdata
定义的文件： | JsonReader.js
类全称： | Ext.data.JsonReader
继承自于： | Ext.data.DataReader
Data reader类接受一个JSON响应结果后，创建一个由Ext.data.Record对象组成的数组，数组内的每个对象都是Ext.data.Record构造器负责映射（mappings）的结果。
Data reader class to create an Array of Ext.data.Record objects from a JSON response based on mappings in a provided Ext.data.Record constructor.

示例代码：Example code:

var Employee = Ext.data.Record.create([
    {name: 'firstname'},                  // 映射了Record的"firstname" 字段为行对象的同名键名称 map the Record's "firstname" field to the row object's key of the same name
    {name: 'job', mapping: 'occupation'}  // 映射了"job"字段为行对象的"occupation"键 map the Record's "job" field to the row object's "occupation" key
]);
var myReader = new Ext.data.JsonReader(
    {                             // metadata元数据属性，有以下的属性：The metadata property, with configuration options:
        totalProperty: "results", //   该属性是指定记录集的总数（可选的）the property which contains the total dataset size (optional)
        root: "rows",             //   该属性是指定包含所有行对象的数组the property which contains an Array of row objects
        idProperty: "id"          //   该属性是指定每一个行对象中究竟哪一个是记录的ID字段（可选的）the property within each row object that provides an ID for the record (optional)
    },
    Employee  // Ext.data.Record构造器是提供JSON对象的映射。Ext.data.Record constructor that provides mapping for JSON object
);

形成这种形式的JSON对象：
This would consume a JSON data object of the form:

{
    results: 2,  // 对应Reader对象total属性。的Reader's configured totalProperty
    rows: [      // 对应Reader对象root属性。Reader's configured root
        { id: 1, firstname: 'Bill', occupation: 'Gardener' },         // 一行对象 a row object
        { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' }  // 另外的行对象 another row object
    ]
}

使用metaData自动配置。
Automatic configuration using metaData

随时都可以改变JsonReader的元数据，只要在数据对象中放置一个metaData的属性。一旦将该属性对象检测出来，就会触发Reader所使用的Store对象身上的metachange事件。Metachange事件的处理函数在重新进行配置之时会处理metaData属性。注意重新配置Store有可能会引发不存在的Fields或Records变为无效。
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 Store object using this Reader will reconfigure itself to use the newly provided field definition and fire its 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.

JSON数据对象其中包含的metaData属性有： The metaData property in the JSON data object may contain:

  • 任何为该类服务的配置选项。
    any of the configuration options for this class
  • fields的属性，会给JsonReader用作{@link Ext.data.Record#create data 产生Record方法}的参数，以便配置所产生的Records布局。
    a fields property which the JsonReader will use as an argument to the data Record create method in order to configure the layout of the Records it will produce.
  • JsonReader设置Ext.data.Store的sortInfo属性所使用的b>sortInfo。a sortInfo property which the JsonReader will use to set the Ext.data.Store's sortInfo property
  • 任何需要的用户自定义属性。
    any user-defined properties needed

要创建无须好像上一例那样配置的Record构造器的JsonReader对象，你可以采取这样的机制：
To use this facility to send the same data as the example above (without having to code the creation of the Record constructor), you would create the JsonReader like this:

var myReader = new Ext.data.JsonReader();

可由数据库返回reader所需的配置信息，叫做metaData属性，只需要在第一次请求的时候返回便可，而且metaData属性可以实际数据并列放在一起：
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: {
        idProperty: 'id',
        root: 'rows',
        totalProperty: 'results',
        fields: [
            {name: 'name'},
            {name: 'job', mapping: 'occupation'}
        ],
        sortInfo: {field: 'name', direction:'ASC'}, // used by store to set its sortInfo
        foo: 'bar' // custom property
    },
    results: 2,
    rows: [
        { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
        { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
    ]
}

配置项

配置项 |  | 定义者
 | idProperty : String 指定每一个行对象中究竟哪一个是记录的ID字段（可选的）。Name of... 指定每一个行对象中究竟哪一个是记录的ID字段（可选的）。Name of the property within a row object that contains a record identifier value. | JsonReader

公告属性

属性 |  | 定义者
 | meta: Mixed 透过构造器参数传入到此DataReader的配置信息。 This... 透过构造器参数传入到此DataReader的配置信息。 This DataReader's configured metadata as passed to the constructor. | DataReader
 | : Object 异步通信完毕后，保留原始JSON数据以便将来有必要的用途。如果没有数... 异步通信完毕后，保留原始JSON数据以便将来有必要的用途。如果没有数据加载，那么会抛出一个load异常，该属性为undefined。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. | JsonReader

公共方法

方法 定义者
JsonReader( Object meta, Object recordType )
参数项：
  • meta : Object
    元数据配置参数。Metadata configuration options.
  • recordType : Object
    既可以是字段的定义对象组成的数组，如Ext.data.Recordcreate那般，也可以是一个由Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as passed to Ext.data.Recordcreate, or a Record constructor created using Ext.data.Recordcreate.
返回值：
  • void
JsonReader
read( Object response ) : Object
从远端服务器取得数据后，仅供DataProxy对象所使用的方法。Thi...
从远端服务器取得数据后，仅供DataProxy对象所使用的方法。This method is only used by a DataProxy which has retrieved data from a remote server.
参数项：
  • response : Object
    包含JSON的数据在responseText属性的XHR的对象。The XHR object which contains the JSON data in its responseText.
返回值：
  • Object
    data 给Ext.data.Store对象用的数据块，Ext.data.Records会用它作为缓存。A data block which is used by an Ext.data.Store object as a cache of Ext.data.Records.
JsonReader
readRecords( Object o ) : Object
由一个JSON对象产生一个包含Ext.data.Records的对象块...
由一个JSON对象产生一个包含Ext.data.Records的对象块。Create a data block containing Ext.data.Records from a JSON object.
参数项：
  • o : Object
    该对象包含以下属性：root指定包含所有行对象的数组；totalProperty制定了记录集的总数的属性名称（可选的）。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.
返回值：
  • Object
    给Ext.data.Store对象用的数据块，Ext.data.Records会用它作为缓存。data A data block which is used by an Ext.data.Store object as a cache of Ext.data.Records.
JsonReader
DataReader( Object meta, Object recordType )
参数项：
  • meta : Object
    Metadata 配置选项的元数据（由实现指定的）。configuration options (implementation-specific)
  • recordType : Object
    既可以是字段的定义对象组成的数组，可以是一个由Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as specified in Ext.data.Recordcreate, or an Ext.data.Record object created using Ext.data.Recordcreate.
返回值：
  • void
DataReader

公共事件

这个类没有公告事件。


类Ext.data.JsonStore

包： | Extdata
定义的文件： | JsonStore.js
类全称： | Ext.data.JsonStore
继承自于： | Ext.data.Store
使得从远程JSON数据创建stores更为方便的简单辅助类。JsonStore合成了Ext.data.HttpProxy与Ext.data.JsonReader两者。如果你需要其他类型的proxy或reader组合，那么你要创建以Ext.data.Store为基类的配置。
Small helper class to make creating Stores for remotely-loaded JSON data easier. JsonStore is pre-configured with a built-in Ext.data.HttpProxy and Ext.data.JsonReader. If you require some other proxy/reader combination then you'll have to create a basic Ext.data.Store configured as needed.

var store = new Ext.data.JsonStore({
    url: 'get-images.php',
    root: 'images',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});
形成这种形式的对象： This would 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)}
    ]
}

配置项

配置项 定义者
fields : Array
既可以是字段的定义对象组成的数组，会作为Ext.data.Record...
既可以是字段的定义对象组成的数组，会作为Ext.data.Recordcreate方法的参数用途，也可以是一个Record构造器，来给Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as passed to Ext.data.Recordcreate, or a Record constructor created using Ext.data.Recordcreate.

这个配置项是用于创建JsonReader构造器中的recordType，它是隐式调用，还创建了供Store使用的Record definition。This config is used to create the recordType parameter to the JsonReader constructor that is implicitly called, and creates the Record definition used by the Store.

JsonStore
storeId : String
如果有值传入，该ID用于在StoreMgr登记时用。storeId I...
如果有值传入，该ID用于在StoreMgr登记时用。storeId If passed, the id to use to register with the StoreMgr
Store
url : String
如果有值传入，会为该URL创建一个HttpProxy对象。url If...
如果有值传入，会为该URL创建一个HttpProxy对象。url If passed, an HttpProxy is created for the passed URL
Store
autoLoad : Boolean/Object
如果有值传入，那么store的load会自动调用，发生在autoLoa...
如果有值传入，那么store的load会自动调用，发生在autoLoaded对象创建之后。autoLoad If passed, this store's load method is automatically called after creation with the autoLoad object
Store
proxy : Ext.data.DataProxy
Proxy对象，用于访问数据对象。proxy The Proxy ob...
Proxy对象，用于访问数据对象。proxy The Proxy object which provides access to a data object.
Store
data : Array
表示store初始化后，要加载的内联数据。data Inline da...
表示store初始化后，要加载的内联数据。data Inline data to be loaded when the store is initialized.
Store
reader : Ext.data.DataReader
处理数据对象的DataReader会返回一个Ext.data.Reco...
处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id属性会是一个缓冲了的键。reader The DataReader object which processes the data object and returns an Array of Ext.data.Record objects which are cached keyed by their id property.
Store
baseParams : Object
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化...
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化为参数的字符串。baseParams An object containing properties which are to be sent as parameters on any HTTP request
Store
sortInfo : Object
如何排序的对象，格式如下：{field: "fieldName", d...
如何排序的对象，格式如下：{field: "fieldName", direction: "ASC|DESC"}。排序方向的大小写敏感的。sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"} to specify the sort order in the request of a remote Store's load operation. Note that for local sorting, the direction property is case-sensitive.
Store
remoteSort : boolean
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以...
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）。remoteSort True if sorting is to be handled by requesting the 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 remote sorting is specified, then clicking on a column header causes the current page to be requested from the server with the addition of the following two parameters:

  • sort : String

    要排序的字段字符串（即在Record对象内的字段定义） The name (as specified in the Record's Field definition) of the field to sort on.

  • dir : String

    排序的方向，“ASC”或“DESC”（一定要大写） The direction of the sort, "ASC" or "DESC" (case-sensitive).

 Store
pruneModifiedRecords : boolean
True表示为，每次Store加载后，清除所有修改过的记录信息；rec...
True表示为，每次Store加载后，清除所有修改过的记录信息；record被移除时也会这样（默认为false）。pruneModifiedRecords True to clear all modified record information each time the store is loaded or when a record is removed. (defaults to false).
Store
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
baseParams:
每次HTTP请求都会携带的参数，就保存在这个对象身上。An obje...
每次HTTP请求都会携带的参数，就保存在这个对象身上。An object containing properties which are used as parameters on any HTTP request.
Store
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.

绑定在这个Grid的PagingToolbar就使用这些配置来分页。请求中将会使用到。
A PagingToolbar bound to this grid uses this property to determine the parameter names to use in its requests.
Store
lastOptions:
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这...
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这些是什么的参数。加载当前的Record缓存的时候，清楚用了哪些的参数有时是非常有用的。Contains the last options object used as the parameter to the load method. See 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.
Store

公共方法

方法 定义者
JsonStore( Object config )
参数项：
  • config : Object
返回值：
  • void
JsonStore
Store( Object config )
参数项：
  • config : Object
    一配置对象，包含了Store用来访问数据，及读数据至Records的对象。A config object containing the objects needed for the Store to access data, and read the data into Records.
返回值：
  • void
Store
add( Ext.data.Record records )
往Store对象添加Records，并触发add事件。Add Reco...
往Store对象添加Records，并触发add事件。Add Records to the Store and fires the add event.
参数项：
  • records : Ext.data.Record
    准备加入到缓存的Ext.data.Record对象数组（Ext.data.Record[]）。An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
addSorted( Ext.data.Record record )
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插...
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插入到Store对象中。(Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.
参数项：
  • record : Ext.data.Record
返回值：
  • void
Store
remove( Ext.data.Record record )
从Store中移除一Record对象，并触发remove移除事件。Re...
从Store中移除一Record对象，并触发remove移除事件。Remove a Record from the Store and fires the remove event.
参数项：
  • record : Ext.data.Record
    被从缓存中移除的Ext.data.Record对象 record The Ext.data.Record object to remove from the cache.
返回值：
  • void
Store
removeAt( Number index )
根据指定的索引移除Store中的某个Record。触发remove事件...
根据指定的索引移除Store中的某个Record。触发remove事件。Remove a Record from the Store at the specified index. Fires the remove event.
参数项：
  • index : Number
    要被移除的Record索引。The index of the record to remove.
返回值：
  • void
Store
removeAll()
从Store中清空所有Record对象，并触发clear事件。Remo...
从Store中清空所有Record对象，并触发clear事件。Remove all Records from the Store and fires the clear event.
参数项：
  • None.
返回值：
  • void
Store
insert( Number index, Ext.data.Record records )
触发添加事件时插入records到指定的store位置 Inserts...
触发添加事件时插入records到指定的store位置 Inserts Records into the Store at the given index and fires the add event.
参数项：
  • index : Number
    传入的Records插入的开始位置 index The start index at which to insert the passed Records.
  • records : Ext.data.Record
    加入到缓存中的Ext.data.Record对象（Ext.data.Record[]）。records An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
indexOf( Ext.data.Record record ) : Number
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get t...
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get the index within the cache of the passed Record.
参数项：
  • record : Ext.data.Record
    要找寻的Ext.data.Record record The Ext.data.Record object to find.
返回值：
  • Number
    被传入的Record的索引，如果未找到返回-1 The index of the passed Record. Returns -1 if not found.
Store
indexOfId( String id ) : Number
传入一个id，根据id查询缓存里的Record，返回其索引。Get t...
传入一个id，根据id查询缓存里的Record，返回其索引。Get the index within the cache of the Record with the passed id.
参数项：
  • id : String
    要找到Record的id id The id of the Record to find.
返回值：
  • Number
    被找到的Record的索引，如果未找到返回-1 The index of the Record. Returns -1 if not found.
Store
getById( String id ) : Ext.data.Record
根据指定的id找到Record。Get the Record with...
根据指定的id找到Record。Get the Record with the specified id.
参数项：
  • id : String
    要找的Record的id The id of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配id的Record，如果未找到则返回undefined The Record with the passed id. Returns undefined if not found.
Store
getAt( Number index ) : Ext.data.Record
根据指定的索引找到Record。Get the Record at t...
根据指定的索引找到Record。Get the Record at the specified index.
参数项：
  • index : Number
    要找的Record的索引 The index of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配索引的Record，如果未找到则返回undefined The Record at the passed index. Returns undefined if not found.
Store
getRange( Number startIndex, Number endIndex ) : {Ext.data.Record[]} 返回一个Record数组 An array of Records
查找指定范围里的Records。Returns a range of ...
查找指定范围里的Records。Returns a range of Records between specified indices.
参数项：
  • startIndex : Number
    （可选项）开始索引 （默认为 0） startIndex (optional) The starting index (defaults to 0)
  • endIndex : Number
    （可选项）结束的索引 （默认是Store中最后一个Record的索引） endIndex (optional) The ending index (defaults to the last Record in the Store)
返回值：
  • {Ext.data.Record[]} 返回一个Record数组 An array of Records
Store
load( Object options ) : Boolean
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配...
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配置好的Proxy对象完成。Loads the Record cache from the configured Proxy using the configured Reader.

如果使用服务器分页，那么必须指定在options.params中start和limit两个参数。start参数表明了从记录集（dataset）的哪一个位置开始读取，limit是读取多少笔的记录。Proxy负责送出参数。If using remote paging, then 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.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    传入以下属性的对象，传入的对象会影响加载的选项：An object containing properties which control loading options:
    • params :Object

      送出的HTTP参数，格式是JS对象。An object containing properties to pass as HTTP parameters to a remote data source.

    • callback : Function

      回调函数，这个函数会有以下的参数传入：A function to be called after the Records have been loaded. The callback is passed the following arguments:

      • r : Ext.data.Record[]
      • options: 加载的配置项对象。Options object from the load call
      • success: 是否成功。Boolean success indicator

    • scope : Object

      回调函数的作用域（默认为Store对象）。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.

返回值：
  • Boolean
    是否执行了load（受beforeload的影响，参见源码）。Whether the load fired (if beforeload failed).
Store
reload( Object options )
依据上一次的load操作的参数的Reader制订的格式，再一次向Pro...

依据上一次的load操作的参数的Reader制订的格式，再一次向Proxy对象要求施以加载（Reload）Record缓存的操作。Reloads the Record cache from the configured Proxy using the configured Reader and the options from the last load operation performed.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    （可选的）该对象包含的属性会覆盖上次load操作的参数。参阅load了解详细内容（默认为null，即就是复用上次的选项参数）。(optional) An object containing loading options which may override the options used in the last load operation. See load for details (defaults to null, in which case the most recently used options are reused).
返回值：
  • void
Store
loadData( Object data, Boolean add )
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Read...
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Reader必须能够读取理解的，Reader是在构造器中配置好的。Loads data from a passed data block and fires the load event. A Reader which understands the format of the data must have been configured in the constructor.
参数项：
  • data : Object
    要被转化为Records的数据块。数据类型会是由这个Reader的配置所决定的，并且符合Reader对象的readRecord参数的要求。The data block from which to read the Records. The format of the data expected is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
  • add : Boolean
    （可选的）True表示为是在缓存中追加新的Records而不是进行替换。(Optional) True to add the new Records rather than replace the existing cache. 切记Store中的Record是按照id记录的，所以新加的Records如果id一样的话就会替换Stroe里面原有的，新的就会追加。Remember that Records in a Store are keyed by their id, so added Records with ids which are already present in the Store will replace existing Records. Records with new, unique ids will be added.
返回值：
  • void
Store
getCount() : Number
获取缓存记录的总数。Gets the number of cached...
获取缓存记录的总数。Gets the number of cached records.

如果使用了分页，那么这就是当前分页的总数，而不是全部记录的总数。要获取记录总数应使用getTotalCount方法，才能从Reader身上获取正确的全部记录数。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 getTotalCount function returns the dataset size.

参数项：
  • None.
返回值：
  • Number
    Store缓存中记录总数 The number of Records in the Store's cache.
Store
getTotalCount() : Number
获取作为服务端返回的数据集中记录的总数。Gets the total ...
获取作为服务端返回的数据集中记录的总数。Gets the total number of records in the dataset as returned by the server.

如果分页，该值必须声明存在才能成功分页。Reader对象处理数据对象该值不能或缺。对于远程数据而言，这是有服务器查询的结果。If using paging, for this to be accurate, the data object used by the Reader must contain the dataset size. For remote data sources, this is provided by a query on the server.

参数项：
  • None.
返回值：
  • Number
    数据对象由Proxy传给Reader对象，这个数据对象包含Record记录的总数 The number of Records as specified in the data object passed to the Reader by the Proxy

    如果是在本地更新Store的内容，那么该值是不会发生变化的。This value is not updated when changing the contents of the Store locally.

 Store
getSortState() : Object
以对象的形式返回当前排序的状态。Returns an object d...
以对象的形式返回当前排序的状态。Returns an object describing the current sort state of this Store.
参数项：
  • None.
返回值：
  • 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

      一个是排序方向，"ASC"或"DESC" The sort order, "ASC" or "DESC" (case-sensitive).

 Store
setDefaultSort( String fieldName, String dir )
设置默认的列排序，以便下次load操作时使用 Sets the def...
设置默认的列排序，以便下次load操作时使用 Sets the default sort column and order to be used by the next load operation.
参数项：
  • fieldName : String
    要排序的字段 The name of the field to sort by.
  • dir : String
    （可选的） 排序顺序，“ASC”或“DESC”（默认为“ASC”） (optional) The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
sort( String fieldName, String 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.
参数项：
  • fieldName : String
    要排序的字段的字符串。The name of the field to sort by.
  • dir : String
    (optional) 排序方向，“ASC”或“DESC”（大小写敏感的，默认为“ASC”）。The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
each( Function fn, Object scope )
对缓存中每个记录调用特点的函数。Calls the specified...
对缓存中每个记录调用特点的函数。Calls the specified function for each of the Records in the cache.
参数项：
  • fn : Function
    要调用的函数。Record对象将是第一个参数。如果返回 The function to call. The Record is passed as the first parameter. Returning false aborts and exits the iteration.
  • scope : Object
    函数的作用域（默认为Record对象）（可选的） (optional) The scope in which to call the function (defaults to the Record).
返回值：
  • void
Store
getModifiedRecords() : {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（loa...
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（load）的操作来持久化这些修改的记录。（例如在分页期间） Gets all records modified since the last commit. Modified records are persisted across load operations (e.g., during paging).
参数项：
  • None.
返回值：
  • {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
Store
sum( String property, Number start, Number end ) : Number
统计每个记录属性值的个数。可设置区间。Sums the value o...
统计每个记录属性值的个数。可设置区间。Sums the value of property for each record between start and end and returns the result.
参数项：
  • property : String
    记录集中要统计的字段名称。A field on your records
  • start : Number
    计算的记录开始索引（默认为0）。start The record index to start at (defaults to 0)
  • end : Number
    计算的记录结尾索引（默认为length - 1，从零开始算）。The last record index to include (defaults to length - 1)
返回值：
  • Number
    总数 The sum
Store
filter( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive )
由指定的属性筛选记录。Filter the records by a ...
由指定的属性筛选记录。Filter the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 value Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • void
Store
filterBy( Function fn, Object scope )
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如...
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中，否则就会被过滤掉。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this）。(optional) The scope of the function (defaults to this)
返回值：
  • void
Store
query( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性查询记录。Query the records by a s...
由指定的属性查询记录。Query the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • MixedCollection
    返回一个Ext.util.MixedCollection实例，包含了匹配的记录 Returns an Ext.util.MixedCollection of the matched records
Store
find( Function fn, Object scope, String property, String/RegExp value, Number startIndex, Boolean anyMatch, Boolean caseSensitive ) : Number
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经...
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this） (optional) The scope of the function (defaults to this)
  • property : String
    你查询对象的属性 A property on your objects
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the property value should begin with, or a RegExp to test against the property.
  • startIndex : Number
    （可选的） 查询的开始索引 (optional) The index to start searching at
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • Number
    匹配的索引或-1 The matched index or -1
Store
findBy( Function fn, Object scope, Number startIndex ) : Number
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回...
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回true的话，就被认为是一个匹配的结果。Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数：The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。The record to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的IDThe ID of the Record passed.

  • scope : Object
    （可选的） 函数作用域（默认为this）(optional) The scope of the function (defaults to this)
  • startIndex : Number
    （可选的） 查询的开始索引(optional) The index to start searching at
返回值：
  • Number
    匹配的索引或-1The matched index or -1
Store
clearFilter( String dataIndex, Boolean allowNull, Boolean bypassFilter, Boolean suppressEvent ) : Array
从这个Store身上收集由dataIndex指定的惟一的值。Colle...
从这个Store身上收集由dataIndex指定的惟一的值。Collects unique values for a particular dataIndex from this store.
参数项：
  • dataIndex : String
    要收集的属性The property to collect
  • allowNull : Boolean
    （可选的） 送入true表示允许null、undefined或空白字符串这些无意义的值(optional) Pass true to allow null, undefined or empty string values
  • bypassFilter : Boolean
    （可选的）送入true表示收集所有记录，哪怕是被经过筛选的记录(optional) Pass true to collect from all records, even ones which are filtered
  • suppressEvent : Boolean
    如果设置为true，该筛选器会低调地清空，而不会通知监听器If true the filter is cleared silently without notifying listeners
返回值：
  • Array
    惟一的值所构成的数组An array of the unique values/
Store
isFiltered() : Boolean
返回true表明这个store当前是在筛选的。Returns true...
返回true表明这个store当前是在筛选的。Returns true if this store is currently filtered
参数项：
  • None.
返回值：
  • Boolean
Store
commitChanges()
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记...
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记Store的“update”事件，事件的处理函数中的第三个参数就是Ext.data.Record.COMMIT，用它来进行更新。Commit all Records with outstanding changes. To handle updates for changes, subscribe to the Store's "update" event, and perform updating when the third parameter is Ext.data.Record.COMMIT.
参数项：
  • None.
返回值：
  • void
Store
rejectChanges()
放弃所有的变更。Cancel outstanding changes ...
放弃所有的变更。Cancel outstanding changes on all changed records.
参数项：
  • None.
返回值：
  • void
Store
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
datachanged()
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的...
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的操作）。使用该Store应该的UI应该有所响应，如刷新其视图。
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.
侦听器会传入以下的参数：
  • None.
 Store
metachange()
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。...
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。当前只对JsonReaders有效。Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders.
侦听器会传入以下的参数：
  • None.
 Store
add()
当有Record添加到Store里面后触发。Fires when Re...
当有Record添加到Store里面后触发。Fires when Records have been added to the Store
侦听器会传入以下的参数：
  • None.
 Store
remove()
当Store中的Record被移除后触发。Fires when a R...
当Store中的Record被移除后触发。Fires when a Record has been removed from the Store
侦听器会传入以下的参数：
  • None.
 Store
update()
当有Record改动时触发。Fires when a Record h...
当有Record改动时触发。Fires when a Record has been updated
侦听器会传入以下的参数：
  • None.
 Store
clear()
当数据缓存被清除的时候触发。Fires when the data c...
当数据缓存被清除的时候触发。Fires when the data cache has been cleared.
侦听器会传入以下的参数：
  • None.
 Store
beforeload()
当请求新的数据对象之前触发。如果beforeload返回false表示...
当请求新的数据对象之前触发。如果beforeload返回false表示load的操作被取消。Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled.
侦听器会传入以下的参数：
  • None.
 Store
load()
当一笔新的Record加载完毕后触发。Fires after a ne...
当一笔新的Record加载完毕后触发。Fires after a new set of Records has been loaded.
侦听器会传入以下的参数：
  • None.
 Store
loadexception()
当Proxy加载过程中有异常时触发。连同Proxy“loadexcep...
当Proxy加载过程中有异常时触发。连同Proxy“loadexception”的事件一起触发。Fires if an exception occurs in the Proxy during loading. Called with the signature of the Proxy's "loadexception" event.
侦听器会传入以下的参数：
  • None.
 Store


类Ext.data.JsonWriter

包： | Extdata
定义的文件： | JsonWriter.js
类全称： | Ext.data.JsonWriter
继承自于： | Ext.data.DataWriter
这个DataWriter的子类相对于远程CRUD操作而言，这是一个在前端的初始化部分，负责写入单个或多个的Ext.data.Record对象。
DataWriter extension for writing an array or single Ext.data.Record object(s) in preparation for executing a remote CRUD action.

配置项

配置项 定义者
returnJson : Boolean
Deprecated, will be removed in Ext-...
Deprecated, will be removed in Ext-3.0.1. Use Ext.data.JsonWriterencode instead.
JsonWriter
encode : Boolean
true表示对{@link Ext.data.DataWriter#t...
true表示对{@link Ext.data.DataWriter#toHash 哈希数据}进行{@link Ext.util.JSON#encode 编码}。默认为true。当使用Ext.data.DirectProxy的时候，不同于Ext.Direct.JsonProvider有自己的JSON编码，所以该配置项要设置为false。此外，如果你使用的是Ext.data.HttpProxy，设置该项为false就会使得HttpProxy采用 Ext.Ajaxrequest配置参数的jsonData传输数据，而非params。当使用Ext.data.Storerestful的Store，一些服务端框架就会认为数据从jsonData的通道经过。如果采用这样的机制的话，应该让底层的连接对象完成编码的工作（如Ext.Ajax），把encode: 设为false。
true to encode the hashed data. Defaults to true. When using Ext.data.DirectProxy, set this to false since Ext.Direct.JsonProvider will perform its own json-encoding. In addition, if you're using Ext.data.HttpProxy, setting to false will cause HttpProxy to transmit data using the jsonData configuration-params of Ext.Ajaxrequest instead of params. When using a Ext.data.Storerestful 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.
JsonWriter
writeAllFields : Boolean
默认是false。设为true的话，就表示让DataWriter返回所...
默认是false。设为true的话，就表示让DataWriter返回所有那个记录的所有字段，不仅仅是修改的那些字段。
true就是记录那些修改的字段而已。
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.
DataWriter
listful : Boolean
默认是false。设为true的话，就表示DataWriter写入HT...
默认是false。设为true的话，就表示DataWriter写入HTTP参数的时候总是一数组，即使单个记录也如是。
false by default. Set true to have the DataWriter always write HTTP params as a list, even when acting upon a single record.
DataWriter
saveRecord : Function
抽象的方法，应该由子类提供，如JsonWriter.saveRecor...
抽象的方法，应该由子类提供，如JsonWriter.saveRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.saveRecord
DataWriter
createRecord : Function
抽象的方法，应该由子类提供，如JsonWriter.createRec...
抽象的方法，应该由子类提供，如JsonWriter.createRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.createRecord)
DataWriter
destroyRecord : Function
抽象的方法，应该由子类提供，如JsonWriter.destroyRe...
抽象的方法，应该由子类提供，如JsonWriter.destroyRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.destroyRecord)
DataWriter

公告属性

属性 |  | 定义者
 | meta: Mixed This DataWriter's configured metad... This DataWriter's configured metadata as passed to the constructor. | DataWriter

公共方法

方法 定义者
JsonWriter()
参数项：
  • None.
返回值：
  • void
JsonWriter
render( String action, Record[] rs, Object params, Object data )
抽象的方法，应该由DataWriter的子类提供，扩展子类时重写该方法...
抽象的方法，应该由DataWriter的子类提供，扩展子类时重写该方法就可以使用参数“data”和“params”。送抵的数据对象会依据用户在DataReader配置的元数据信息产生真正的渲染数据。
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,
参数项：
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • rs : Record[]
    Store数据集。Store recordset
  • params : Object
    发送到服务器的HTTP参数。Http params to be sent to server.
  • data : Object
    依据DataReader元数据产生的数据对象。data object populated according to DataReader meta-data.
返回值：
  • void
DataWriter
DataWriter( Object meta, Object recordType )
参数项：
  • meta : Object
    配置选项的元数据（由实现指定）Metadata configuration options (implementation-specific)
  • recordType : Object
    Ext.data.Recordcreate规定的对象数组，或是用Ext.data.Recordcreate生成的Ext.data.Record对象。Either an Array of field definition objects as specified in Ext.data.Recordcreate, or an Ext.data.Record object created using Ext.data.Recordcreate.
返回值：
  • void
DataWriter
write( String action, Object params, Record/Record[] rs )
服务端写操作的前期写数据。只需要有DataWriter#update、...
服务端写操作的前期写数据。只需要有DataWriter#update、DataWriter#create、DataWriter#destroy的proxy就可以囊括“写”的操作。
Writes data in preparation for server-write action. Simply proxies to DataWriter#update, DataWriter#create DataWriter#destroy.
参数项：
  • action : String
    [CREATE|UPDATE|DESTROY]
  • params : Object
    写入的hash参数。The params-hash to write-to
  • rs : Record/Record[]
    要写的数据。The recordset write.
返回值：
  • void
DataWriter

公共事件

这个类没有公告事件。


类Ext.data.MemoryProxy

包： | Extdata
定义的文件： | MemoryProxy.js
类全称： | Ext.data.MemoryProxy
继承自于： | Ext.data.DataProxy
一个Ext.data.DataProxy的实现类，当其load方法调用时就是用送入Reader来读取那个在构造器中传入的数据。
An implementation of Ext.data.DataProxy that simply passes the data specified in its constructor to the Reader when its load method is called.

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
MemoryProxy( Object data )
参数项：
  • data : Object
    用这个数据对象来构造Ext.data.Records块。
    The data object which the Reader uses to construct a block of Ext.data.Records.
返回值：
  • void
MemoryProxy
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg )
根据数据源加载数据（本例中是客户端内存中的数据对象，透过构造器传入的）...
根据数据源加载数据（本例中是客户端内存中的数据对象，透过构造器传入的），由指定的Ext.data.DataReader实例来解析这个Ext.data.Records块，并由指定的回调来处理这个块。Load data from the requested source (in this case an in-memory data object passed to the constructor), read the data object into a block of Ext.data.Records using the passed Ext.data.DataReader implementation, and process that block using the passed callback.
参数项：
  • params : Object
    这个参数对MemoryProxy类不起作用。This parameter is not used by the MemoryProxy class.
  • reader : Ext.data.DataReader
    能转换数据为Ext.data.Records块的Reader对象。The Reader object which converts the data object into a block of Ext.data.Records.
  • callback : Function
    会送入Ext.data.records块的函数。函数一定会传入：The function into which to pass the block of Ext.data.records. The function must be passed
    • Record对象。The Record block object
    • 从load函数那里来的参数"arg"。The "arg" argument from the load function
    • 是否成功的标识符。A boolean success indicator
  • scope : Object
    回调函数的作用域。The scope in which to call the callback
  • arg : Object
    送入到回调函数的参数，在参数第二个位置中出现（可选的）。An optional argument which is passed to the callback as its second parameter.
返回值：
  • void
MemoryProxy
DataProxy()
参数项：
  • None.
返回值：
  • void
DataProxy
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
loadexception()
在加载数据期间有异常发生时触发该事件。注意该事件是与Ext.data...
在加载数据期间有异常发生时触发该事件。注意该事件是与Ext.data.Store对象联动的，所以你只监听其中一个事件就可以的了。Fires if an exception occurs in the Proxy during data loading. Note that this event is also relayed through Ext.data.Store, so you can listen for it directly on any Store instance.
侦听器会传入以下的参数：
  • None.
 MemoryProxy
beforeload()
当在获取一个数据对象之前，向网络发起请求之前触发。Fires bef...
当在获取一个数据对象之前，向网络发起请求之前触发。Fires before a network request is made to retrieve a data object.
侦听器会传入以下的参数：
  • None.
 DataProxy
load()
当load方法的回调执行后触发。Fires before the l...
当load方法的回调执行后触发。Fires before the load method's callback is called.
侦听器会传入以下的参数：
  • None.
 DataProxy


类Ext.data.Node

包： | Extdata
定义的文件： | Tree.js
类全称： | Ext.data.Node
继承自于： | Ext.util.Observable

配置项

配置项 |  | 定义者
 | id : String 该节点的Id。如不指定一个，会生成一个。The id for this... 该节点的Id。如不指定一个，会生成一个。The id for this node. If one is not specified, one is generated. | Node
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | attributes: Object 节点属性。你可以在此添加任意的自定义的属性。The attribu... 节点属性。你可以在此添加任意的自定义的属性。The attributes supplied for the node. You can use this property to access any custom attributes you supplied. | Node
 | id: String 节点ID。The node id. 节点ID。The node id. | Node
 | childNodes: Array 此节点的所有子节点。All child nodes of this... 此节点的所有子节点。All child nodes of this node. | Node
 | parentNode: Node 此节点的父节点。The parent node for this ... 此节点的父节点。The parent node for this node. | Node
 | firstChild: Node 该节点下面最前一个子节点（直属的），null的话就表示这是没有子节... 该节点下面最前一个子节点（直属的），null的话就表示这是没有子节点的。The first direct child node of this node, or null if this node has no child nodes. | Node
 | lastChild: Node 该节点下面最后一个子节点（直属的），null的话就表示这是没有子节... 该节点下面最后一个子节点（直属的），null的话就表示这是没有子节点的。The last direct child node of this node, or null if this node has no child nodes. | Node
 | previousSibling: Node 该节点前面一个节点，同级的，null的话就表示这没有侧边节点。Th... 该节点前面一个节点，同级的，null的话就表示这没有侧边节点。The node immediately preceding this node in the tree, or null if there is no sibling node. | Node
 | nextSibling: Node 该节点后面一个节点，同级的，null的话就表示这没有侧边节点。Th... 该节点后面一个节点，同级的，null的话就表示这没有侧边节点。The node immediately following this node in the tree, or null if there is no sibling node. | Node

公共方法

方法 定义者
Node( Object attributes )
参数项：
  • attributes : Object
    节点的属性/配置项。The attributes/config for the node
返回值：
  • void
Node
isLeaf() : Boolean
若节点是叶子节点的话返回true。Returns true if th...
若节点是叶子节点的话返回true。Returns true if this node is a leaf
参数项：
  • None.
返回值：
  • Boolean
Node
isLast() : Boolean
如果这个节点是其父节点下面的最后一个节点的话返回true。Return...
如果这个节点是其父节点下面的最后一个节点的话返回true。Returns true if this node is the last child of its parent
参数项：
  • None.
返回值：
  • Boolean
Node
isFirst() : Boolean
如果这个节点是其父节点下面的第一个节点的话返回true。Returns...
如果这个节点是其父节点下面的第一个节点的话返回true。Returns true if this node is the first child of its parent
参数项：
  • None.
返回值：
  • Boolean
Node
hasChildNodes() : Boolean
如果有子节点返回true。Returns true if this n...
如果有子节点返回true。Returns true if this node has one or more child nodes, else false.
参数项：
  • None.
返回值：
  • Boolean
Node
isExpandable() : Boolean
如果该节点有一个或多个的子节点，或其节点可展开的属性是明确制定为tru...
如果该节点有一个或多个的子节点，或其节点可展开的属性是明确制定为true的话返回true。Returns true if this node has one or more child nodes, or if the expandable node attribute is explicitly specified as true (see attributes), otherwise returns false.
参数项：
  • None.
返回值：
  • Boolean
Node
appendChild( Node/Array node ) : Node
在该节点里面最后的位置上插入节点，可以多个。Insert node(s...
在该节点里面最后的位置上插入节点，可以多个。Insert node(s) as the last child node of this node.
参数项：
  • node : Node/Array
    要加入的节点或节点数组。The node or Array of nodes to append
返回值：
  • Node
    如果是单个节点，加入后返回true，如果是数组返回null。The appended node if single append, or null if an array was passed
Node
removeChild( Node node ) : Node
从该节点中移除一个子节点。Removes a child node f...
从该节点中移除一个子节点。Removes a child node from this node.
参数项：
  • node : Node
    要移除的节点。The node to remove
返回值：
  • Node
    移除后的节点。The removed node
Node
insertBefore( Node node, Node refNode ) : Node
在当前节点的子节点的集合中，位于第二个节点之前插入节点（第一个参数）。...
在当前节点的子节点的集合中，位于第二个节点之前插入节点（第一个参数）。Inserts the first node before the second node in this nodes childNodes collection.
参数项：
  • node : Node
    要插入的节点。he node to insert
  • refNode : Node
    前面插入的节点（如果为null表示节点是追加的）。The node to insert before (if null the node is appended)
返回值：
  • Node
    插入的节点。The inserted node
Node
remove() : Node
从父节点上移除子节点。Removes this node from i...
从父节点上移除子节点。Removes this node from its parent
参数项：
  • None.
返回值：
  • Node
    this
Node
item( Number index ) : Node
指定索引，在自节点中查找匹配索引的节点。Returns the chi...
指定索引，在自节点中查找匹配索引的节点。Returns the child node at the specified index.
参数项：
  • index : Number
返回值：
  • Node
Node
replaceChild( Node newChild, Node oldChild ) : Node
把下面的某个子节点替换为其他节点。Replaces one child...
把下面的某个子节点替换为其他节点。Replaces one child node in this node with another.
参数项：
  • newChild : Node
    进来的节点。The replacement node
  • oldChild : Node
    去掉的节点。The node to replace
返回值：
  • Node
    去掉的节点。The replaced node
Node
indexOf( Node node ) : Number
返回某个子节点的索引。Returns the index of a c...
返回某个子节点的索引。Returns the index of a child node
参数项：
  • node : Node
    节点
返回值：
  • Number
    节点的索引或是-1表示找不到。The index of the node or -1 if it was not found
Node
getOwnerTree() : Tree
返回节点所在的树对象。Returns the tree this no...
返回节点所在的树对象。Returns the tree this node is in.
参数项：
  • None.
返回值：
  • Tree
Node
getDepth() : Number
返回该节点的深度（根节点的深度是0）。Returns depth of...
返回该节点的深度（根节点的深度是0）。Returns depth of this node (the root node has a depth of 0)
参数项：
  • None.
返回值：
  • Number
Node
setId( String id )
改变该节点的id Changes the id of this node.
改变该节点的id Changes the id of this node.
参数项：
  • id : String
    节点的新id。The new id for the node.
返回值：
  • void
Node
getPath( String attr ) : String
返回该节点的路径，以方便控制这个节点展开或选择。Returns the...
返回该节点的路径，以方便控制这个节点展开或选择。Returns the path for this node. The path can be used to expand or select this node programmatically.
参数项：
  • attr : String
    （可选的）路径采用的属性（默认为节点的id）。(optional) The attr to use for the path (defaults to the node's id)
返回值：
  • String
    路径。The path
Node
bubble( Function fn, Object scope, Array args )
从该节点开始逐层上报(Bubbles up)节点，上报过程中对每个节点...
从该节点开始逐层上报(Bubbles up)节点，上报过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数在某一个层次上返回false，上升将会停止。Bubbles up the tree from this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认为当前节点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional)The args to call the function with (default to passing the current node)
返回值：
  • void
Node
cascade( Function fn, Object scope, Array args )
从该节点开始逐层下报(Bubbles up)节点，上报过程中对每个节点...
从该节点开始逐层下报(Bubbles up)节点，上报过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数在某一个层次上返回false，下升到那个分支的位置将会停止。Cascades down the tree from this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的） 函数的作用域（默认为当前节点）。(optional) The scope of the function (defaults to current node)
  • args : Array
    （可选的） 调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional) The args to call the function with (default to passing the current node)
返回值：
  • void
Node
eachChild( Function fn, Object scope, Array args )
遍历该节点下的子节点，枚举过程中对每个节点执行指定的函数。函数的作用域...
遍历该节点下的子节点，枚举过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数走到某处地方返回false，遍历将会停止。Interates the child nodes of this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的） 函数的作用域（默认为当前节点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的） 调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional)The args to call the function with (default to passing the current node)
返回值：
  • void
Node
findChild( String attribute, Mixed value ) : Node
根据送入的值，如果子节点身上指定属性的值是送入的值，就返回那个节点。F...
根据送入的值，如果子节点身上指定属性的值是送入的值，就返回那个节点。Finds the first child that has the attribute with the specified value.
参数项：
  • attribute : String
    属性名称。The attribute name
  • value : Mixed
    要查找的值。The value to search for
返回值：
  • Node
    已找到的子节点或null表示找不到。The found child or null if none was found
Node
findChildBy( Function fn, Object scope ) : Node
通过自定义的函数查找子节点，找到第一个合适的就返回。要求的条件是函数返...
通过自定义的函数查找子节点，找到第一个合适的就返回。要求的条件是函数返回true。Finds the first child by a custom function. The child matches if the function passed returns true.
参数项：
  • fn : Function
    函数
  • scope : Object
    函数作用域（可选的）。(optional)
返回值：
  • Node
    找到的子元素或null就代表没找到。The found child or null if none was found
Node
sort( Function fn, Object scope )
用自定义的排序函数对节点的子函数进行排序。Sorts this nod...
用自定义的排序函数对节点的子函数进行排序。Sorts this nodes children using the supplied sort function
参数项：
  • fn : Function
    函数
  • scope : Object
    函数（可选的）。(optional)
返回值：
  • void
Node
contains( Node node ) : Boolean
返回true表示为该节点是送入节点的祖先节点（无论在哪那一级的）。Re...
返回true表示为该节点是送入节点的祖先节点（无论在哪那一级的）。Returns true if this node is an ancestor (at any point) of the passed node.
参数项：
  • node : Node
    节点
返回值：
  • Boolean
Node
isAncestor( Node node ) : Boolean
返回true表示为送入的节点是该的祖先节点（无论在哪那一级的）。Ret...
返回true表示为送入的节点是该的祖先节点（无论在哪那一级的）。Returns true if the passed node is an ancestor (at any point) of this node.
参数项：
  • node : Node
    节点
返回值：
  • Boolean
Node
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
append()
当有新的子节点添加时触发。Fires when a new chil...
当有新的子节点添加时触发。Fires when a new child node is appended
侦听器会传入以下的参数：
  • None.
 Node
remove()
当有子节点被移出的时候触发。Fires when a child n...
当有子节点被移出的时候触发。Fires when a child node is removed
侦听器会传入以下的参数：
  • None.
 Node
move()
当该节点移动到树中的新位置触发。Fires when this no...
当该节点移动到树中的新位置触发。Fires when this node is moved to a new location in the tree
侦听器会传入以下的参数：
  • None.
 Node
insert()
当有子节点被插入的触发。Fires when a new child...
当有子节点被插入的触发。Fires when a new child node is inserted.
侦听器会传入以下的参数：
  • None.
 Node
beforeappend()
当有新的子节点被添加时触发，返回false就取消添加。Fires b...
当有新的子节点被添加时触发，返回false就取消添加。Fires before a new child is appended, return false to cancel the append.
侦听器会传入以下的参数：
  • None.
 Node
beforeremove()
当有子节点被移出的时候触发，返回false就取消移出。Fires b...
当有子节点被移出的时候触发，返回false就取消移出。Fires before a child is removed, return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Node
beforemove()
当该节点移动到树下面的另外一个新位置的时候触发。返回false就取消...
当该节点移动到树下面的另外一个新位置的时候触发。返回false就取消移动。Fires before this node is moved to a new location in the tree. Return false to cancel the move.
侦听器会传入以下的参数：
  • None.
 Node
beforeinsert()
当有新的节点插入时触发，返回false就取消插入。Fires bef...
当有新的节点插入时触发，返回false就取消插入。Fires before a new child is inserted, return false to cancel the insert.
侦听器会传入以下的参数：
  • None.
 Node


类Ext.data.Record

包： | Extdata
定义的文件： | Record.js
类全称： | Ext.data.Record
继承自于： | Object

Record类不但封装了Record的相关定义信息，还封装了Ext.data.Store里面所使用的Recrod对象的值信息， 并且方便任何透过Ext.data.Store来访问Records缓存之信息的代码 Instances of this class encapsulate both Record definition information, and Record value information for use in Ext.data.Store objects, or any code which needs to access Records cached in an Ext.data.Store object.

Constructors for this class are generated by passing an Array of field definition objects to create. Instances are usually only created by Ext.data.Reader implementations when processing unformatted data objects.

Note that an instance of a Record class may only belong to one Store at a time. In order to copy data from one Store to another, use the 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 Ext.util.JSON.encode. Instead, use the data and id properties.

Record对象经构造器产生后，拥有Ext.data.Record的一切方法，如下列。Record objects generated by this constructor inherit all the methods of Ext.data.Record listed below.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | fields: Ext.util.MixedCollection Record定义的prototype保存了该属性。This pro... Record定义的prototype保存了该属性。This property is stored in the Record definition's prototype 为该Record服务的Field，存储在一个MixedCollection对象中。只读的。A MixedCollection containing the defined Fields for this Record. Read-only. | Record
 | data: {Object} Record的数据对象。Record定义中的所有字段名就表示该对象属... Record的数据对象。Record定义中的所有字段名就表示该对象属性身上的名称。注意除非你指定了一个字段的名称为"id"在Record定义中，否则这不会包含一个id属性。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 name "id" in the Record definition, this will not contain an id property. | Record
 | id: {Object} 惟一的ID，在Record创建时分派此值。The unique ID... 惟一的ID，在Record创建时分派此值。The unique ID of the Record as specified at construction time. | Record
 | : Boolean 只读。true表示为Record有修改。Readonly flag ... 只读。true表示为Record有修改。Readonly flag - true if this Record has been modified. | Record
 | modified: {Object} 该对象保存了所有修改过的字段的原始值数据（键和值key and Va... 该对象保存了所有修改过的字段的原始值数据（键和值key and Value）。如果没有字段被修改的话，该值是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. | Record
 | store: {Ext.data.Store} 该Record所属的Ext.data.Store对象。The Ext... 该Record所属的Ext.data.Store对象。The Ext.data.Store to which this Record belongs. | Record

公共方法

方法 定义者
Record( Array data, Object id )
参数项：
  • data : Array
    对象数组，提供了每一个Record实例所需的字段属性定义。An object, the properties of which provide values for the new Record's fields.
  • id : Object
    （可选的）记录的id，它应当是独一无二的。Ext.data.Store会用这个id表示来标识记录里面的Record对象，如不指定就生成一个。(Optional) The id of the Record. This id should be unique, and is used by the Ext.data.Store object which owns the Record to index its collection of Records. If not specified an integer id is generated.
返回值：
  • void
Record
create( Array o ) : function
生成一个构造函数，该函数能产生符合规定的Record对象。Genera...
生成一个构造函数，该函数能产生符合规定的Record对象。Generate a constructor for a specific Record layout.
参数项：
  • o : Array
    数组。各个字段的定义，包括字段名、数据类型（可选的）、映射项（用于在Ext.data.Reader的数据对象中提取真实的数据）。每一个字段的定义对象可包含以下的属性： An Array of field definition objects which specify field names, and optionally, data types, and a mapping for an Ext.data.Reader to extract the field's value from a data object. Each field definition object may contain the following properties:
    • name : String
      Record对象所引用的字段名称。通常是一标识作它者引用， 例如，在列定义中，该值会作为Ext.grid.ColumnModel的dataIndex属性。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
    • mapping : String
      （可选的） 如果使用的是Ext.data.Reader，这是一个Reader能够获取数据对象的数组值创建到Record对象下面的对应的映射项； 如果使用的是Ext.data.JsonReader，那么这是一个javascript表达式的字符串， 能够获取数据的引用到Record对象的下面； 如果使用的是Ext.data.XmlReader，这是一个Ext.DomQuery路径， 能够获取数据元素的引用到Record对象的下面； 如果映射名与字段名都是相同的，那么映射名可以省略。(Optional) A path specification for use by the Ext.data.Reader implementation that is creating the Record to access the data value from the data object. If an Ext.data.JsonReader is being used, then this is a string containing the javascript expression to reference the data relative to the Record item's root. If an Ext.data.XmlReader is being used, this is an Ext.DomQuery path to the data item relative to the Record element. If the mapping expression is the same as the field name, this may be omitted.
    • type : String
      （可选的） 指明数据类型，转化为可显示的值。有效值是： (Optional) The data type for conversion to displayable value. Possible values are
      • auto （auto是默认的，不声明就用auto。不作转换）(Default, implies no conversion)
      • string
      • int
      • float
      • boolean
      • date
    • dateFormat : String
    • defaultValue : Mixed
      （可选的）默认值。 当经过Reader创建Record时会使用该值； 当mapping的引用项不存在的时候，典型的情况为undefined时候会使用该值（默认为''）
    • sortType : Function
      （可选的） Ext.data.SortTypes的成语。(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 Ext.data.SortTypes.
    • sortDir : String
      （可选的） 初始化的排序方向，“ASC”或“DESC”。(Optional) Initial direction to sort. "ASC" or "DESC"
    • convert : Function
      （可选的） 由Reader提供的用于转换值的函数，将值变为Record下面的对象。它会送入以下的参数： (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
        数据值，和Reader读取的一样。The data value as read by the Reader.
      • rec : Mixed
        包含行的数据对象，和Reader读取的一样。这可以是数组，对象，XML元素对象，这取决于Reader对象的类型。The data object containing the row as read by the Reader. Depending on Reader type, this could be an Array, an object, or an XML element.
    • dateFormat : String
      （可选的） 字符串格式的Date.parseDate函数， 或“timestamp”表示Reader读取UNIX格式的timestamp，或“time”是Reader读取的是javascript毫秒的timestamp。(Optional) 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.
    • defaultValue : Mixed
      （可选的）默认值。当经过Reader创建Record时会使用该值； 当mapping的引用项不存在的时候，典型的情况为undefined时候会使用该值（默认为''）。(Optional) 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 "")
    透过create方法会返回一个构造器的函数，这样就可以用来创建一个一个Record对象了。数据对象（在第一个参数上）一定要有一个属性，是名为names的属性，以说明是什么字段。The constructor generated by this method may be used to create new Record instances. The data object must contain properties named after the field names.
    用法：usage:
返回值：
  • function
    根据定义创建新Records的构造器。A constructor which is used to create new Records according to the definition. @static
Record
set( String name, Object value )
根据字段设置值。Set the named field to the ...
根据字段设置值。Set the named field to the specified value.
参数项：
  • name : String
    字段名称的字符串。The name of the field to set.
  • value : Object
    值。The value to set the field to.
返回值：
  • void
Record
get( String name ) : Object
根据字段返回值。Get the value of the named ...
根据字段返回值。Get the value of the named field.
参数项：
  • name : String
    字段名称的字符串。The name of the field to get the value of.
返回值：
  • Object
    字段的值。The value of the field.
Record
beginEdit()
开始进入编辑。编辑期间，没有与所在的store任何关联的事件。Begi...
开始进入编辑。编辑期间，没有与所在的store任何关联的事件。Begin an edit. While in edit mode, no events are relayed to the containing store.
参数项：
  • None.
返回值：
  • void
Record
cancelEdit()
取消所有已修改过的数据。Cancels all changes mad...
取消所有已修改过的数据。Cancels all changes made in the current edit operation.
参数项：
  • None.
返回值：
  • void
Record
endEdit()
结束编辑。如数据有变动，则会通知所在的store。End an edi...
结束编辑。如数据有变动，则会通知所在的store。End an edit. If any data was modified, the containing store is notified.
参数项：
  • None.
返回值：
  • void
Record
reject( Boolean silent, Boolean silent )
参数项：
  • silent : Boolean
    这个方法通常给Record对象所在的那个Ext.data.Store对象调用。创建Record、或上一次提交的操作都会使得Record对象执行reject撤销方法。原始值会变化为已修改的值。Usually called by the 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.

    要根据提交（commit）操作而传达的通知，开发人员应该登记Ext.data.Storeupdate事件来编码来执行特定的撤销操作 Developers should subscribe to the Ext.data.Storeupdate event to have their code notified of reject operations.

  • silent : Boolean
    （可选的）True表示不通知自身的store对象有所改变（默认为false）。(optional) True to skip notification of the owning store of the change (defaults to false)
返回值：
  • void
Record
commit( Boolean silent )
这个方法通常给Record对象所在的那个Ext.data.Store对...
这个方法通常给Record对象所在的那个Ext.data.Store对象调用。创建Record、或上一次提交的操作都会使得Record对象执行commit提交方法。Usually called by the Ext.data.Store which owns the Record. Commits all changes made to the Record since either creation, or the last commit operation.

要根据提交（commit）操作而传达的通知，开发人员应该登记Ext.data.Storeupdate事件来编码来执行特定的更新操作。

Developers should subscribe to the Ext.data.Storeupdate event to have their code notified of commit operations.

参数项：
  • silent : Boolean
    （可选的）True表示不通知自身的store对象有所改变（默认为false）。(optional) True to skip notification of the owning store of the change (defaults to false)
返回值：
  • void
Record
getChanges() : Object
该对象被创建或提交之后，用来获取字段的哈希值（hash）。Gets a...
该对象被创建或提交之后，用来获取字段的哈希值（hash）。Gets a hash of only the fields that have been modified since this Record was created or commited.
参数项：
  • None.
返回值：
  • Object
Record
copy( String id ) : Record
创建记录的副本。Creates a copy of this Record.
创建记录的副本。Creates a copy of this Record.
参数项：
  • id : String
    （可选的）创建新的ID如果你不想在ID上也雷同。(optional) A new Record id if you don't want to use this Record's id
返回值：
  • Record
Record
isModified( String fieldName ) : Boolean
如果传入的字段是修改过的（load或上一次提交）就返回true。Ret...
如果传入的字段是修改过的（load或上一次提交）就返回true。Returns true if the field passed has been modified since the load or last commit.
参数项：
  • fieldName : String
返回值：
  • Boolean
Record

公共事件

这个类没有公告事件。


类Ext.data.Response

包： | Extdata
定义的文件： | Response.js
类全称： | Ext.data.Response
继承自于： | Object
框架内使用的通用类，用于规范一般的响应处理。
A generic response class to normalize response-handling internally to the framework.

配置项

配置项 |  | 定义者
 | action : String Ext.data.Apiactions Ext.data.Apiactions | Response
 | success : Boolean | Response
 | message : String | Response
 | data : Array/Object | Response
 | raw : Object 由服务端代码生成的最原始响应内容。The raw response r... 由服务端代码生成的最原始响应内容。The raw response returned from server-code | Response
 | records : Ext.data.Record/Ext.data.Record[] 相关的请求动作。related to the Request action 相关的请求动作。related to the Request action | Response

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.data.ScriptTagProxy

包： | Extdata
定义的文件： | ScriptTagProxy.js
类全称： | Ext.data.ScriptTagProxy
继承自于： | Ext.data.DataProxy
一个Ext.data.DataProxy所实现的子类，能从一个与本页不同的域的URL地址上读取数据对象。
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.

注意如果你从与一个本页所在域不同的地方获取数据的话，应该使用这个类，而非HttpProxy。
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.

服务端返回的必须是JSON格式的数据，这是因为ScriptTagProxy是把返回的数据放在一个<script>标签中保存的。
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.

为了浏览器能够自动处理返回的数据，服务器应该在打包数据对象的同时，指定一个回调函数的函数名称，这个名称从ScriptTagProxy发出的参数送出。下面是一个Java中的Servlet例子，可适应ScriptTagProxy或者HttpProxy的情况，取决于是否有callback的参数送入:
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(");");
}

配置项

配置项 |  | 定义者
 | url : String 请求数据对象的URL地址。The URL from which to ... 请求数据对象的URL地址。The URL from which to request the data object. | ScriptTagProxy
 | timeout : Number (optional) 响应的超时限制。默认为30秒。The numbe... (optional) 响应的超时限制。默认为30秒。The number of milliseconds to wait for a response. Defaults to 30 seconds. | ScriptTagProxy
 | callbackParam : String (Optional) （可选的）这个值会作为参数传到服务端方面。默认是... (Optional) （可选的）这个值会作为参数传到服务端方面。默认是“callback”。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". 得到返回的数据后，客户端方面会执行callbackParam指定名称的函数，因此这个值必须要让服务端进行处理。这个函数将有一个唯一的参数，就是数据对象本身。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. | ScriptTagProxy
 | nocache : Boolean (optional) （可选的）默认值为true，在请求中添加一个独一... (optional) （可选的）默认值为true，在请求中添加一个独一无二的参数来禁用缓存。Defaults to true. Disable caching by adding a unique parameter name to the request. | ScriptTagProxy
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
ScriptTagProxy( Object config )
参数项：
  • config : Object
    配置项对象 A configuration object.
返回值：
  • void
ScriptTagProxy
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg )
根据指定的URL位置加载数据。由指定的Ext.data.DataRea...
根据指定的URL位置加载数据。由指定的Ext.data.DataReader实例来解析这个Ext.data.Records块，并由指定的回调来处理这个块。Load data from the configured URL, read the data object into a block of Ext.data. Records using the passed Ext.data.DataReader implementation, and process that block using the passed callback.
参数项：
  • params : Object
    一个对象，其属性用于向远端服务器作HTTP请求时所用的参数。An object containing properties which are to be used as HTTP parameters for the request to the remote server.
  • reader : Ext.data.DataReader
    能转换数据为Ext.data.Records块的Reader对象。The Reader object which converts the data object into a block of Ext.data.Records.
  • callback : Function
    会送入Ext.data.records块的函数。函数一定会传入这些参数： The function into which to pass the block of Ext.data.Records. The function must be passed
    • Record对象 The Record block object
    • 从load函数那里来的参数"arg"。The "arg" argument from the load function
    • 是否成功的标识符。A boolean success indicator
  • scope : Object
    回调函数的作用域。The scope in which to call the callback
  • arg : Object
    送入到回调函数的参数，在参数第二个位置中出现（可选的）。An optional argument which is passed to the callback as its second parameter.
返回值：
  • void
ScriptTagProxy
abort()
Abort the current server request.
Abort the current server request.
参数项：
  • None.
返回值：
  • void
ScriptTagProxy
DataProxy()
参数项：
  • None.
返回值：
  • void
DataProxy
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
loadexception()
当数据加载的时候如有错误发生触发该事件。发生该事件归咎于两种原因： ...
当数据加载的时候如有错误发生触发该事件。发生该事件归咎于两种原因： Fires if an exception occurs in the Proxy during data loading. This event can be fired for one of two reasons:
  • load方法返回success: false。The load call returned success: false. 这表示服务端逻辑返回错误的状态信号，没有可用的数据。这样该事件将会触发而第四个参数（读错误）将是null。This means the server logic returned a failure status and there is no data to read. In this case, this event will be raised and the fourth parameter (read error) will be null.
  • 虽然load方法成功了，但reader不能够读取响应的数据。The load succeeded but the reader could not read the response. 这表示服务端是返回了数据，但解析数据时有问题，已配置好的Reader就抛出异常。这样会触发该事件并将捕获的异常放在该事件的第四个参数中。注意该事件依赖了Ext.data.Store，所以你也可以直接在任意一个Store实例上侦听事件。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 Ext.data.Store, so you can listen for it directly on any Store instance.
侦听器会传入以下的参数：
  • None.
 ScriptTagProxy
beforeload()
当在获取一个数据对象之前，向网络发起请求之前触发。Fires bef...
当在获取一个数据对象之前，向网络发起请求之前触发。Fires before a network request is made to retrieve a data object.
侦听器会传入以下的参数：
  • None.
 DataProxy
load()
当load方法的回调执行后触发。Fires before the l...
当load方法的回调执行后触发。Fires before the load method's callback is called.
侦听器会传入以下的参数：
  • None.
 DataProxy


类Ext.data.SortTypes

包： | Extdata
定义的文件： | SortTypes.js
类全称： | Ext.data.SortTypes
继承自于： | Object
@singleton 定义一些缺省的比较函数，供排序时使用。
Defines the default sorting (casting?) comparison functions used when sorting data.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | stripTagsRE: {RegExp} 用来去掉标签的规则表达式。The regular expressi... 用来去掉标签的规则表达式。The regular expression used to strip tags | SortTypes

公共方法

方法 定义者
none( Mixed s ) : Mixed
默认的排序即什么也不做。Default sort that does ...
默认的排序即什么也不做。Default sort that does nothing
参数项：
  • s : Mixed
    将被转换的值将被转换的值。The value being converted
返回值：
  • Mixed
    用来比较的值所比较的值。The comparison value
SortTypes
asText( Mixed s ) : String
去掉所有html标签来基于纯文本排序。Strips all HTML ...
去掉所有html标签来基于纯文本排序。Strips all HTML tags to sort on text only
参数项：
  • s : Mixed
    将被转换的值将被转换的值。The value being converted
返回值：
  • String
    用来比较的值所比较的值。The comparison value
SortTypes
asUCText( Mixed s ) : String
去掉所有html标签来基于无大小写区别的文本的排序。Strips al...
去掉所有html标签来基于无大小写区别的文本的排序。Strips all HTML tags to sort on text only - Case insensitive
参数项：
  • s : Mixed
    将被转换的值。The value being converted
返回值：
  • String
    所比较的值所比较的值。The comparison value
SortTypes
asUCString( Mixed s ) : String
无分大小写的字符串。Case insensitive string
无分大小写的字符串。Case insensitive string
参数项：
  • s : Mixed
    将被转换的值。The value being converted
返回值：
  • String
    所比较的值。The comparison value
SortTypes
asDate( Mixed s ) : Number
对日期排序。Date sorting
对日期排序。Date sorting
参数项：
  • s : Mixed
    将被转换的值。The value being converted
返回值：
  • Number
    所比较的值。The comparison value
SortTypes
asFloat( Mixed s ) : Float
浮点数的排序。Float sorting
浮点数的排序。Float sorting
参数项：
  • s : Mixed
    将被转换的值。The value being converted
返回值：
  • Float
    所比较的值。The comparison value
SortTypes
asInt( Mixed s ) : Number
整数的排序。Integer sorting
整数的排序。Integer sorting
参数项：
  • s : Mixed
    将被转换的值。The value being converted
返回值：
  • Number
    所比较的值。The comparison value
SortTypes

公共事件

这个类没有公告事件。


Error
    Store.Error

Class Ext.data.Store.Error

Package: | Ext.data
Defined In: | Store.js
Class: | Store.Error
Extends: | Error
Store Error extension.

Public Properties

This class has no public properties.

Public Methods

Method Defined By
getMessage() : String
getMessage
getMessage
Parameters:
  • None.
Returns:
  • String
Error
getName() : String
getName
getName
Parameters:
  • None.
Returns:
  • String
Error
toJson() : String
toJson
toJson
Parameters:
  • None.
Returns:
  • String
Error

Public Events

This class has no public events.


类Ext.data.Store

包： | Extdata
定义的文件： | Store.js
类全称： | Ext.data.Store
继承自于： | Ext.util.Observable
Store类封装了一个客户端的Record对象的缓存， 为诸如GridPanel、ComboBox和DataView等的小部件提供了数据的入口。
The Store class encapsulates a client side cache of Record objects which provide input data for Components such as the GridPanel, the ComboBox, or the DataView

Store对象使用一个DataProxy的实现来访问数据对象，该Proxy对象在configured定义。不过你可以调用loadData直接地把数据对象传入你的数据。
A Store object uses its configured implementation of DataProxy to access a data object unless you call loadData directly and pass in your data.

Store没有储存关于Proxy返回数据格式的信息。
A Store object has no knowledge of the format of the data returned by the Proxy.

在DataReader实现的帮助下，从该类提供的数据对象来创建Record实例。你可在configured指定这个DataReader对象。这些records都被缓存的并且通过访问器函数可利用到。
A Store object uses its configured implementation of DataReader to create Record instances from the data object. These Records are cached and made available through accessor functions.

配置项

配置项 定义者
storeId : String
如果有值传入，该ID用于在StoreMgr登记时用。storeId I...
如果有值传入，该ID用于在StoreMgr登记时用。storeId If passed, the id to use to register with the StoreMgr
Store
url : String
如果有值传入，会为该URL创建一个HttpProxy对象。url If...
如果有值传入，会为该URL创建一个HttpProxy对象。url If passed, an HttpProxy is created for the passed URL
Store
autoLoad : Boolean/Object
如果有值传入，那么store的load会自动调用，发生在autoLoa...
如果有值传入，那么store的load会自动调用，发生在autoLoaded对象创建之后。autoLoad If passed, this store's load method is automatically called after creation with the autoLoad object
Store
proxy : Ext.data.DataProxy
Proxy对象，用于访问数据对象。proxy The Proxy ob...
Proxy对象，用于访问数据对象。proxy The Proxy object which provides access to a data object.
Store
data : Array
表示store初始化后，要加载的内联数据。data Inline da...
表示store初始化后，要加载的内联数据。data Inline data to be loaded when the store is initialized.
Store
reader : Ext.data.DataReader
处理数据对象的DataReader会返回一个Ext.data.Reco...
处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id属性会是一个缓冲了的键。reader The DataReader object which processes the data object and returns an Array of Ext.data.Record objects which are cached keyed by their id property.
Store
baseParams : Object
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化...
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化为参数的字符串。baseParams An object containing properties which are to be sent as parameters on any HTTP request
Store
sortInfo : Object
如何排序的对象，格式如下：{field: "fieldName", d...
如何排序的对象，格式如下：{field: "fieldName", direction: "ASC|DESC"}。排序方向的大小写敏感的。sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"} to specify the sort order in the request of a remote Store's load operation. Note that for local sorting, the direction property is case-sensitive.
Store
remoteSort : boolean
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以...
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）。remoteSort True if sorting is to be handled by requesting the 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 remote sorting is specified, then clicking on a column header causes the current page to be requested from the server with the addition of the following two parameters:

  • sort : String

    要排序的字段字符串（即在Record对象内的字段定义） The name (as specified in the Record's Field definition) of the field to sort on.

  • dir : String

    排序的方向，“ASC”或“DESC”（一定要大写） The direction of the sort, "ASC" or "DESC" (case-sensitive).

 Store
pruneModifiedRecords : boolean
True表示为，每次Store加载后，清除所有修改过的记录信息；rec...
True表示为，每次Store加载后，清除所有修改过的记录信息；record被移除时也会这样（默认为false）。pruneModifiedRecords True to clear all modified record information each time the store is loaded or when a record is removed. (defaults to false).
Store
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
baseParams:
每次HTTP请求都会携带的参数，就保存在这个对象身上。An obje...
每次HTTP请求都会携带的参数，就保存在这个对象身上。An object containing properties which are used as parameters on any HTTP request.
Store
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.

绑定在这个Grid的PagingToolbar就使用这些配置来分页。请求中将会使用到。
A PagingToolbar bound to this grid uses this property to determine the parameter names to use in its requests.
Store
lastOptions:
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这...
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这些是什么的参数。加载当前的Record缓存的时候，清楚用了哪些的参数有时是非常有用的。Contains the last options object used as the parameter to the load method. See 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.
Store

公共方法

方法 定义者
Store( Object config )
参数项：
  • config : Object
    一配置对象，包含了Store用来访问数据，及读数据至Records的对象。A config object containing the objects needed for the Store to access data, and read the data into Records.
返回值：
  • void
Store
add( Ext.data.Record records )
往Store对象添加Records，并触发add事件。Add Reco...
往Store对象添加Records，并触发add事件。Add Records to the Store and fires the add event.
参数项：
  • records : Ext.data.Record
    准备加入到缓存的Ext.data.Record对象数组（Ext.data.Record[]）。An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
addSorted( Ext.data.Record record )
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插...
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插入到Store对象中。(Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.
参数项：
  • record : Ext.data.Record
返回值：
  • void
Store
remove( Ext.data.Record record )
从Store中移除一Record对象，并触发remove移除事件。Re...
从Store中移除一Record对象，并触发remove移除事件。Remove a Record from the Store and fires the remove event.
参数项：
  • record : Ext.data.Record
    被从缓存中移除的Ext.data.Record对象 record The Ext.data.Record object to remove from the cache.
返回值：
  • void
Store
removeAt( Number index )
根据指定的索引移除Store中的某个Record。触发remove事件...
根据指定的索引移除Store中的某个Record。触发remove事件。Remove a Record from the Store at the specified index. Fires the remove event.
参数项：
  • index : Number
    要被移除的Record索引。The index of the record to remove.
返回值：
  • void
Store
removeAll()
从Store中清空所有Record对象，并触发clear事件。Remo...
从Store中清空所有Record对象，并触发clear事件。Remove all Records from the Store and fires the clear event.
参数项：
  • None.
返回值：
  • void
Store
insert( Number index, Ext.data.Record records )
触发添加事件时插入records到指定的store位置 Inserts...
触发添加事件时插入records到指定的store位置 Inserts Records into the Store at the given index and fires the add event.
参数项：
  • index : Number
    传入的Records插入的开始位置 index The start index at which to insert the passed Records.
  • records : Ext.data.Record
    加入到缓存中的Ext.data.Record对象（Ext.data.Record[]）。records An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
indexOf( Ext.data.Record record ) : Number
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get t...
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get the index within the cache of the passed Record.
参数项：
  • record : Ext.data.Record
    要找寻的Ext.data.Record record The Ext.data.Record object to find.
返回值：
  • Number
    被传入的Record的索引，如果未找到返回-1 The index of the passed Record. Returns -1 if not found.
Store
indexOfId( String id ) : Number
传入一个id，根据id查询缓存里的Record，返回其索引。Get t...
传入一个id，根据id查询缓存里的Record，返回其索引。Get the index within the cache of the Record with the passed id.
参数项：
  • id : String
    要找到Record的id id The id of the Record to find.
返回值：
  • Number
    被找到的Record的索引，如果未找到返回-1 The index of the Record. Returns -1 if not found.
Store
getById( String id ) : Ext.data.Record
根据指定的id找到Record。Get the Record with...
根据指定的id找到Record。Get the Record with the specified id.
参数项：
  • id : String
    要找的Record的id The id of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配id的Record，如果未找到则返回undefined The Record with the passed id. Returns undefined if not found.
Store
getAt( Number index ) : Ext.data.Record
根据指定的索引找到Record。Get the Record at t...
根据指定的索引找到Record。Get the Record at the specified index.
参数项：
  • index : Number
    要找的Record的索引 The index of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配索引的Record，如果未找到则返回undefined The Record at the passed index. Returns undefined if not found.
Store
getRange( Number startIndex, Number endIndex ) : {Ext.data.Record[]} 返回一个Record数组 An array of Records
查找指定范围里的Records。Returns a range of ...
查找指定范围里的Records。Returns a range of Records between specified indices.
参数项：
  • startIndex : Number
    （可选项）开始索引 （默认为 0） startIndex (optional) The starting index (defaults to 0)
  • endIndex : Number
    （可选项）结束的索引 （默认是Store中最后一个Record的索引） endIndex (optional) The ending index (defaults to the last Record in the Store)
返回值：
  • {Ext.data.Record[]} 返回一个Record数组 An array of Records
Store
load( Object options ) : Boolean
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配...
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配置好的Proxy对象完成。Loads the Record cache from the configured Proxy using the configured Reader.

如果使用服务器分页，那么必须指定在options.params中start和limit两个参数。start参数表明了从记录集（dataset）的哪一个位置开始读取，limit是读取多少笔的记录。Proxy负责送出参数。If using remote paging, then 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.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    传入以下属性的对象，传入的对象会影响加载的选项：An object containing properties which control loading options:
    • params :Object

      送出的HTTP参数，格式是JS对象。An object containing properties to pass as HTTP parameters to a remote data source.

    • callback : Function

      回调函数，这个函数会有以下的参数传入：A function to be called after the Records have been loaded. The callback is passed the following arguments:

      • r : Ext.data.Record[]
      • options: 加载的配置项对象。Options object from the load call
      • success: 是否成功。Boolean success indicator

    • scope : Object

      回调函数的作用域（默认为Store对象）。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.

返回值：
  • Boolean
    是否执行了load（受beforeload的影响，参见源码）。Whether the load fired (if beforeload failed).
Store
reload( Object options )
依据上一次的load操作的参数的Reader制订的格式，再一次向Pro...

依据上一次的load操作的参数的Reader制订的格式，再一次向Proxy对象要求施以加载（Reload）Record缓存的操作。Reloads the Record cache from the configured Proxy using the configured Reader and the options from the last load operation performed.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    （可选的）该对象包含的属性会覆盖上次load操作的参数。参阅load了解详细内容（默认为null，即就是复用上次的选项参数）。(optional) An object containing loading options which may override the options used in the last load operation. See load for details (defaults to null, in which case the most recently used options are reused).
返回值：
  • void
Store
loadData( Object data, Boolean add )
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Read...
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Reader必须能够读取理解的，Reader是在构造器中配置好的。Loads data from a passed data block and fires the load event. A Reader which understands the format of the data must have been configured in the constructor.
参数项：
  • data : Object
    要被转化为Records的数据块。数据类型会是由这个Reader的配置所决定的，并且符合Reader对象的readRecord参数的要求。The data block from which to read the Records. The format of the data expected is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
  • add : Boolean
    （可选的）True表示为是在缓存中追加新的Records而不是进行替换。(Optional) True to add the new Records rather than replace the existing cache. 切记Store中的Record是按照id记录的，所以新加的Records如果id一样的话就会替换Stroe里面原有的，新的就会追加。Remember that Records in a Store are keyed by their id, so added Records with ids which are already present in the Store will replace existing Records. Records with new, unique ids will be added.
返回值：
  • void
Store
getCount() : Number
获取缓存记录的总数。Gets the number of cached...
获取缓存记录的总数。Gets the number of cached records.

如果使用了分页，那么这就是当前分页的总数，而不是全部记录的总数。要获取记录总数应使用getTotalCount方法，才能从Reader身上获取正确的全部记录数。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 getTotalCount function returns the dataset size.

参数项：
  • None.
返回值：
  • Number
    Store缓存中记录总数 The number of Records in the Store's cache.
Store
getTotalCount() : Number
获取作为服务端返回的数据集中记录的总数。Gets the total ...
获取作为服务端返回的数据集中记录的总数。Gets the total number of records in the dataset as returned by the server.

如果分页，该值必须声明存在才能成功分页。Reader对象处理数据对象该值不能或缺。对于远程数据而言，这是有服务器查询的结果。If using paging, for this to be accurate, the data object used by the Reader must contain the dataset size. For remote data sources, this is provided by a query on the server.

参数项：
  • None.
返回值：
  • Number
    数据对象由Proxy传给Reader对象，这个数据对象包含Record记录的总数 The number of Records as specified in the data object passed to the Reader by the Proxy

    如果是在本地更新Store的内容，那么该值是不会发生变化的。This value is not updated when changing the contents of the Store locally.

 Store
getSortState() : Object
以对象的形式返回当前排序的状态。Returns an object d...
以对象的形式返回当前排序的状态。Returns an object describing the current sort state of this Store.
参数项：
  • None.
返回值：
  • 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

      一个是排序方向，"ASC"或"DESC" The sort order, "ASC" or "DESC" (case-sensitive).

 Store
setDefaultSort( String fieldName, String dir )
设置默认的列排序，以便下次load操作时使用 Sets the def...
设置默认的列排序，以便下次load操作时使用 Sets the default sort column and order to be used by the next load operation.
参数项：
  • fieldName : String
    要排序的字段 The name of the field to sort by.
  • dir : String
    （可选的） 排序顺序，“ASC”或“DESC”（默认为“ASC”） (optional) The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
sort( String fieldName, String 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.
参数项：
  • fieldName : String
    要排序的字段的字符串。The name of the field to sort by.
  • dir : String
    (optional) 排序方向，“ASC”或“DESC”（大小写敏感的，默认为“ASC”）。The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
each( Function fn, Object scope )
对缓存中每个记录调用特点的函数。Calls the specified...
对缓存中每个记录调用特点的函数。Calls the specified function for each of the Records in the cache.
参数项：
  • fn : Function
    要调用的函数。Record对象将是第一个参数。如果返回 The function to call. The Record is passed as the first parameter. Returning false aborts and exits the iteration.
  • scope : Object
    函数的作用域（默认为Record对象）（可选的） (optional) The scope in which to call the function (defaults to the Record).
返回值：
  • void
Store
getModifiedRecords() : {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（loa...
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（load）的操作来持久化这些修改的记录。（例如在分页期间） Gets all records modified since the last commit. Modified records are persisted across load operations (e.g., during paging).
参数项：
  • None.
返回值：
  • {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
Store
sum( String property, Number start, Number end ) : Number
统计每个记录属性值的个数。可设置区间。Sums the value o...
统计每个记录属性值的个数。可设置区间。Sums the value of property for each record between start and end and returns the result.
参数项：
  • property : String
    记录集中要统计的字段名称。A field on your records
  • start : Number
    计算的记录开始索引（默认为0）。start The record index to start at (defaults to 0)
  • end : Number
    计算的记录结尾索引（默认为length - 1，从零开始算）。The last record index to include (defaults to length - 1)
返回值：
  • Number
    总数 The sum
Store
filter( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive )
由指定的属性筛选记录。Filter the records by a ...
由指定的属性筛选记录。Filter the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 value Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • void
Store
filterBy( Function fn, Object scope )
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如...
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中，否则就会被过滤掉。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this）。(optional) The scope of the function (defaults to this)
返回值：
  • void
Store
query( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性查询记录。Query the records by a s...
由指定的属性查询记录。Query the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • MixedCollection
    返回一个Ext.util.MixedCollection实例，包含了匹配的记录 Returns an Ext.util.MixedCollection of the matched records
Store
find( Function fn, Object scope, String property, String/RegExp value, Number startIndex, Boolean anyMatch, Boolean caseSensitive ) : Number
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经...
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this） (optional) The scope of the function (defaults to this)
  • property : String
    你查询对象的属性 A property on your objects
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the property value should begin with, or a RegExp to test against the property.
  • startIndex : Number
    （可选的） 查询的开始索引 (optional) The index to start searching at
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • Number
    匹配的索引或-1 The matched index or -1
Store
findBy( Function fn, Object scope, Number startIndex ) : Number
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回...
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回true的话，就被认为是一个匹配的结果。Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数：The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。The record to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的IDThe ID of the Record passed.

  • scope : Object
    （可选的） 函数作用域（默认为this）(optional) The scope of the function (defaults to this)
  • startIndex : Number
    （可选的） 查询的开始索引(optional) The index to start searching at
返回值：
  • Number
    匹配的索引或-1The matched index or -1
Store
clearFilter( String dataIndex, Boolean allowNull, Boolean bypassFilter, Boolean suppressEvent ) : Array
从这个Store身上收集由dataIndex指定的惟一的值。Colle...
从这个Store身上收集由dataIndex指定的惟一的值。Collects unique values for a particular dataIndex from this store.
参数项：
  • dataIndex : String
    要收集的属性The property to collect
  • allowNull : Boolean
    （可选的） 送入true表示允许null、undefined或空白字符串这些无意义的值(optional) Pass true to allow null, undefined or empty string values
  • bypassFilter : Boolean
    （可选的）送入true表示收集所有记录，哪怕是被经过筛选的记录(optional) Pass true to collect from all records, even ones which are filtered
  • suppressEvent : Boolean
    如果设置为true，该筛选器会低调地清空，而不会通知监听器If true the filter is cleared silently without notifying listeners
返回值：
  • Array
    惟一的值所构成的数组An array of the unique values/
Store
isFiltered() : Boolean
返回true表明这个store当前是在筛选的。Returns true...
返回true表明这个store当前是在筛选的。Returns true if this store is currently filtered
参数项：
  • None.
返回值：
  • Boolean
Store
commitChanges()
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记...
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记Store的“update”事件，事件的处理函数中的第三个参数就是Ext.data.Record.COMMIT，用它来进行更新。Commit all Records with outstanding changes. To handle updates for changes, subscribe to the Store's "update" event, and perform updating when the third parameter is Ext.data.Record.COMMIT.
参数项：
  • None.
返回值：
  • void
Store
rejectChanges()
放弃所有的变更。Cancel outstanding changes ...
放弃所有的变更。Cancel outstanding changes on all changed records.
参数项：
  • None.
返回值：
  • void
Store
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
datachanged()
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的...
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的操作）。使用该Store应该的UI应该有所响应，如刷新其视图。
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.
侦听器会传入以下的参数：
  • None.
 Store
metachange()
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。...
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。当前只对JsonReaders有效。Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders.
侦听器会传入以下的参数：
  • None.
 Store
add()
当有Record添加到Store里面后触发。Fires when Re...
当有Record添加到Store里面后触发。Fires when Records have been added to the Store
侦听器会传入以下的参数：
  • None.
 Store
remove()
当Store中的Record被移除后触发。Fires when a R...
当Store中的Record被移除后触发。Fires when a Record has been removed from the Store
侦听器会传入以下的参数：
  • None.
 Store
update()
当有Record改动时触发。Fires when a Record h...
当有Record改动时触发。Fires when a Record has been updated
侦听器会传入以下的参数：
  • None.
 Store
clear()
当数据缓存被清除的时候触发。Fires when the data c...
当数据缓存被清除的时候触发。Fires when the data cache has been cleared.
侦听器会传入以下的参数：
  • None.
 Store
beforeload()
当请求新的数据对象之前触发。如果beforeload返回false表示...
当请求新的数据对象之前触发。如果beforeload返回false表示load的操作被取消。Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled.
侦听器会传入以下的参数：
  • None.
 Store
load()
当一笔新的Record加载完毕后触发。Fires after a ne...
当一笔新的Record加载完毕后触发。Fires after a new set of Records has been loaded.
侦听器会传入以下的参数：
  • None.
 Store
loadexception()
当Proxy加载过程中有异常时触发。连同Proxy“loadexcep...
当Proxy加载过程中有异常时触发。连同Proxy“loadexception”的事件一起触发。Fires if an exception occurs in the Proxy during loading. Called with the signature of the Proxy's "loadexception" event.
侦听器会传入以下的参数：
  • None.
 Store


类Ext.data.Tree

包： | Extdata
定义的文件： | Tree.js
类全称： | Ext.data.Tree
继承自于： | Ext.util.Observable
该对象抽象了一棵树的结构和树节点的事件上报。树包含的节点拥有大部分的DOM功能。
Represents a tree data structure and bubbles all the events for its nodes. The nodes in the tree have most standard DOM functionality.

配置项

配置项 |  | 定义者
 | pathSeparator : String 分割节点Id的标识符（默认为"/"）。The token used t... 分割节点Id的标识符（默认为"/"）。The token used to separate paths in node ids (defaults to '/'). | Tree
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | root: Node 该树的根节点。The root node for this tre... 该树的根节点。The root node for this tree | Tree

公共方法

方法 定义者
Tree( Node root )
参数项：
  • root : Node
    （可选的）根节点。(optional) The root node
返回值：
  • void
Tree
getRootNode() : Node
为这棵树返回根节点。Returns the root node for...
为这棵树返回根节点。Returns the root node for this tree.
参数项：
  • None.
返回值：
  • Node
Tree
setRootNode( Node node ) : Node
设置这棵树的根节点。Sets the root node for th...
设置这棵树的根节点。Sets the root node for this tree.
参数项：
  • node : Node
    节点
返回值：
  • Node
Tree
getNodeById( String id ) : Node
根据ID查找节点。Gets a node in this tree b...
根据ID查找节点。Gets a node in this tree by its id.
参数项：
  • id : String
返回值：
  • Node
Tree
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
append()
当有新的节点添加到这棵树的时候触发。Fires when a new...
当有新的节点添加到这棵树的时候触发。Fires when a new child node is appended to a node in this tree.
侦听器会传入以下的参数：
  • None.
 Tree
remove()
当树中有子节点从一个节点那里移动开来的时候触发。Fires when...
当树中有子节点从一个节点那里移动开来的时候触发。Fires when a child node is removed from a node in this tree.
侦听器会传入以下的参数：
  • None.
 Tree
move()
当树中有节点被移动到新的地方时触发。Fires when a nod...
当树中有节点被移动到新的地方时触发。Fires when a node is moved to a new location in the tree
侦听器会传入以下的参数：
  • None.
 Tree
insert()
当树中有一个新的节点添加到某个节点上的时候触发。Fires when...
当树中有一个新的节点添加到某个节点上的时候触发。Fires when a new child node is inserted in a node in this tree.
侦听器会传入以下的参数：
  • None.
 Tree
beforeappend()
当树中有新的子节点添加到某个节点上之前触发，返回false表示取消这...
当树中有新的子节点添加到某个节点上之前触发，返回false表示取消这个添加行动。Fires before a new child is appended to a node in this tree, return false to cancel the append.
侦听器会传入以下的参数：
  • None.
 Tree
beforeremove()
当树中有节点移动到新的地方之前触发，返回false表示取消这个移动行...
当树中有节点移动到新的地方之前触发，返回false表示取消这个移动行动。Fires before a child is removed from a node in this tree, return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Tree
beforemove()
当树中有新的子节点移除到某个节点上之前触发，返回false表示取消这...
当树中有新的子节点移除到某个节点上之前触发，返回false表示取消这个移除行动。Fires before a node is moved to a new location in the tree. Return false to cancel the move.
侦听器会传入以下的参数：
  • None.
 Tree
beforeinsert()
当树中有新的子节点插入某个节点之前触发，返回false表示取消这个插...
当树中有新的子节点插入某个节点之前触发，返回false表示取消这个插入行动。Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
侦听器会传入以下的参数：
  • None.
 Tree


类Ext.data.XmlReader

包： | Extdata
定义的文件： | XmlReader.js
类全称： | Ext.data.XmlReader
继承自于： | Ext.data.DataReader
Data reader类接受一个XML文档响应后，创建一个由Ext.data.Record对象组成的数组，数组内的每个对象都是Ext.data.Record构造器负责映射（mappings）的结果。
Data reader class to create an Array of Ext.data.Record objects from an XML document based on mappings in a provided Ext.data.Record constructor.

注意:为了浏览器能成功解析返回来的XML document对象，HHTP Response的content-type头必须被设成text/xml。
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"属性的啦"mapping" property not needed if it's the same as "name"
   {name: 'occupation'}                 // This field will use "occupation" as the mapping.
]);
var myReader = new Ext.data.XmlReader({
   totalRecords: "results", // 该属性是指定记录集的总数（可选的）。The element which contains the total dataset size (optional)
   record: "row",           // 该属性是指定包含所有行对象的数组。The repeated element which contains row information
   id: "id"                 // 该属性是指定每一个行对象中究竟哪一个是记录的ID字段（可选的）。The element within the row that provides an ID for the record (optional)
}, Employee);

将形成这种形式的XML文件： 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>

配置项

配置项 |  | 定义者
 | idPath : String 指明一个DomQuery查询路径，用于获取每一个行对象中究竟哪一个是记... 指明一个DomQuery查询路径，用于获取每一个行对象中究竟哪一个是记录的ID字段。The DomQuery path relative from the record element to the element that contains a record identifier value. | XmlReader

公告属性

属性 |  | 定义者
 | : XMLDocument 异步通信完毕和读取之后，保留原始XML文档数据以便将来由必要的用途。... 异步通信完毕和读取之后，保留原始XML文档数据以便将来由必要的用途。After any data loads/reads, the raw XML Document is available for further custom processing. | XmlReader
 | meta: Mixed 透过构造器参数传入到此DataReader的配置信息。 This... 透过构造器参数传入到此DataReader的配置信息。 This DataReader's configured metadata as passed to the constructor. | DataReader

公共方法

方法 定义者
XmlReader( Object meta, Object recordType )
参数项：
  • meta : Object
    元数据配置参数。Metadata configuration options
  • recordType : Object
    既可以是字段的定义对象组成的数组，如Ext.data.Recordcreate那般，也可以是一个由 Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as passed to Ext.data.Recordcreate, or a Record constructor object created using Ext.data.Recordcreate.
返回值：
  • void
XmlReader
read( Object response ) : Object
从远端服务器取得数据后，仅供DataProxy对象所使用的方法。Thi...
从远端服务器取得数据后，仅供DataProxy对象所使用的方法。This method is only used by a DataProxy which has retrieved data from a remote server.
参数项：
  • response : Object
    包含可被解析的XML文档数据在responseXML属性中的XHR的对象。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.
返回值：
  • Object
    records 给Ext.data.Store对象用的数据块，Ext.data.Records会用它作为缓存块。A data block which is used by an Ext.data.Store as a cache of Ext.data.Records.
XmlReader
readRecords( Object doc ) : Object
由一个XML文档产生一个包含Ext.data.Records的对象块。...
由一个XML文档产生一个包含Ext.data.Records的对象块。Create a data block containing Ext.data.Records from an XML document.
参数项：
  • doc : Object
    一个可被解析的XML文档。A parsed XML document.
返回值：
  • Object
    records 给Ext.data.Store对象用的数据块，Ext.data.Records会用它作为缓存块。A data block which is used by an Ext.data.Store as a cache of Ext.data.Records.
XmlReader
DataReader( Object meta, Object recordType )
参数项：
  • meta : Object
    Metadata 配置选项的元数据（由实现指定的）。configuration options (implementation-specific)
  • recordType : Object
    既可以是字段的定义对象组成的数组，可以是一个由Ext.data.Recordcreate创建的Ext.data.Record对象。Either an Array of field definition objects as specified in Ext.data.Recordcreate, or an Ext.data.Record object created using Ext.data.Recordcreate.
返回值：
  • void
DataReader

公共事件

这个类没有公告事件。


类Ext.data.XmlStore

包： | Extdata
定义的文件： | XmlStore.js
类全称： | Ext.data.XmlStore
继承自于： | Ext.data.Store

一个轻型的辅助类，好让处理XML类型的Ext.data.Store起来更加轻松 。XmlStore可由Ext.data.XmlReader自动配置。
Small helper class to make creating Ext.data.Stores from XML data easier. A XmlStore will be automatically configured with a Ext.data.XmlReader.

如是这样地配置一个Store：
A store configuration would be something like:

var store = new Ext.data.XmlStore({
    // store configs
    autoDestroy: true,
    storeId: 'myStore',
    url: 'sheldon.xml', // 会自动转为HttpProxy的代理。automatically configures a HttpProxy
    // reader configs
    record: 'Item', // 每条记录都有Item标签。records will have an "Item" tag
    idPath: 'ASIN',
    totalRecords: '@TotalResults'
    fields: [
        // 设置与xml文档映射的字段。最紧要的事mapping项，其他的就次要。// 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'
    ]
});

经过配置后，这样的xml会演变成为store对象：
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>
“对象字面化”的形式也可以用于data的配置项。
An object literal of this form could also be used as the data config option.

注意：尽管还没有列出，该类可接收来自XmlReader所有的配置项。
Note: Although not listed here, this class accepts all of the configuration options of XmlReader.

配置项

配置项 定义者
storeId : String
如果有值传入，该ID用于在StoreMgr登记时用。storeId I...
如果有值传入，该ID用于在StoreMgr登记时用。storeId If passed, the id to use to register with the StoreMgr
Store
url : String
如果有值传入，会为该URL创建一个HttpProxy对象。url If...
如果有值传入，会为该URL创建一个HttpProxy对象。url If passed, an HttpProxy is created for the passed URL
Store
autoLoad : Boolean/Object
如果有值传入，那么store的load会自动调用，发生在autoLoa...
如果有值传入，那么store的load会自动调用，发生在autoLoaded对象创建之后。autoLoad If passed, this store's load method is automatically called after creation with the autoLoad object
Store
proxy : Ext.data.DataProxy
Proxy对象，用于访问数据对象。proxy The Proxy ob...
Proxy对象，用于访问数据对象。proxy The Proxy object which provides access to a data object.
Store
data : Array
表示store初始化后，要加载的内联数据。data Inline da...
表示store初始化后，要加载的内联数据。data Inline data to be loaded when the store is initialized.
Store
reader : Ext.data.DataReader
处理数据对象的DataReader会返回一个Ext.data.Reco...
处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id属性会是一个缓冲了的键。reader The DataReader object which processes the data object and returns an Array of Ext.data.Record objects which are cached keyed by their id property.
Store
baseParams : Object
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化...
每次HTTP请求都会带上这个参数，本来它是一个对象的形式，请求时会转化为参数的字符串。baseParams An object containing properties which are to be sent as parameters on any HTTP request
Store
sortInfo : Object
如何排序的对象，格式如下：{field: "fieldName", d...
如何排序的对象，格式如下：{field: "fieldName", direction: "ASC|DESC"}。排序方向的大小写敏感的。sortInfo A config object in the format: {field: "fieldName", direction: "ASC|DESC"} to specify the sort order in the request of a remote Store's load operation. Note that for local sorting, the direction property is case-sensitive.
Store
remoteSort : boolean
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以...
True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）。remoteSort True if sorting is to be handled by requesting the 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 remote sorting is specified, then clicking on a column header causes the current page to be requested from the server with the addition of the following two parameters:

  • sort : String

    要排序的字段字符串（即在Record对象内的字段定义） The name (as specified in the Record's Field definition) of the field to sort on.

  • dir : String

    排序的方向，“ASC”或“DESC”（一定要大写） The direction of the sort, "ASC" or "DESC" (case-sensitive).

 Store
pruneModifiedRecords : boolean
True表示为，每次Store加载后，清除所有修改过的记录信息；rec...
True表示为，每次Store加载后，清除所有修改过的记录信息；record被移除时也会这样（默认为false）。pruneModifiedRecords True to clear all modified record information each time the store is loaded or when a record is removed. (defaults to false).
Store
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
baseParams:
每次HTTP请求都会携带的参数，就保存在这个对象身上。An obje...
每次HTTP请求都会携带的参数，就保存在这个对象身上。An object containing properties which are used as parameters on any HTTP request.
Store
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.

绑定在这个Grid的PagingToolbar就使用这些配置来分页。请求中将会使用到。
A PagingToolbar bound to this grid uses this property to determine the parameter names to use in its requests.
Store
lastOptions:
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这...
保存了上次load方法执行时，发出去的参数是什么。参阅load了解这些是什么的参数。加载当前的Record缓存的时候，清楚用了哪些的参数有时是非常有用的。Contains the last options object used as the parameter to the load method. See 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.
Store

公共方法

方法 定义者
XmlStore( Object config )
参数项：
  • config : Object
    @xtype xmlstore
返回值：
  • void
XmlStore
Store( Object config )
参数项：
  • config : Object
    一配置对象，包含了Store用来访问数据，及读数据至Records的对象。A config object containing the objects needed for the Store to access data, and read the data into Records.
返回值：
  • void
Store
add( Ext.data.Record records )
往Store对象添加Records，并触发add事件。Add Reco...
往Store对象添加Records，并触发add事件。Add Records to the Store and fires the add event.
参数项：
  • records : Ext.data.Record
    准备加入到缓存的Ext.data.Record对象数组（Ext.data.Record[]）。An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
addSorted( Ext.data.Record record )
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插...
（只限本地排序） 传入一个Record，按照队列（以固定的排序顺序）插入到Store对象中。(Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information.
参数项：
  • record : Ext.data.Record
返回值：
  • void
Store
remove( Ext.data.Record record )
从Store中移除一Record对象，并触发remove移除事件。Re...
从Store中移除一Record对象，并触发remove移除事件。Remove a Record from the Store and fires the remove event.
参数项：
  • record : Ext.data.Record
    被从缓存中移除的Ext.data.Record对象 record The Ext.data.Record object to remove from the cache.
返回值：
  • void
Store
removeAt( Number index )
根据指定的索引移除Store中的某个Record。触发remove事件...
根据指定的索引移除Store中的某个Record。触发remove事件。Remove a Record from the Store at the specified index. Fires the remove event.
参数项：
  • index : Number
    要被移除的Record索引。The index of the record to remove.
返回值：
  • void
Store
removeAll()
从Store中清空所有Record对象，并触发clear事件。Remo...
从Store中清空所有Record对象，并触发clear事件。Remove all Records from the Store and fires the clear event.
参数项：
  • None.
返回值：
  • void
Store
insert( Number index, Ext.data.Record records )
触发添加事件时插入records到指定的store位置 Inserts...
触发添加事件时插入records到指定的store位置 Inserts Records into the Store at the given index and fires the add event.
参数项：
  • index : Number
    传入的Records插入的开始位置 index The start index at which to insert the passed Records.
  • records : Ext.data.Record
    加入到缓存中的Ext.data.Record对象（Ext.data.Record[]）。records An Array of Ext.data.Record objects to add to the cache.
返回值：
  • void
Store
indexOf( Ext.data.Record record ) : Number
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get t...
传入一个记录，根据记录在缓存里查询的匹配的记录，返回其索引。Get the index within the cache of the passed Record.
参数项：
  • record : Ext.data.Record
    要找寻的Ext.data.Record record The Ext.data.Record object to find.
返回值：
  • Number
    被传入的Record的索引，如果未找到返回-1 The index of the passed Record. Returns -1 if not found.
Store
indexOfId( String id ) : Number
传入一个id，根据id查询缓存里的Record，返回其索引。Get t...
传入一个id，根据id查询缓存里的Record，返回其索引。Get the index within the cache of the Record with the passed id.
参数项：
  • id : String
    要找到Record的id id The id of the Record to find.
返回值：
  • Number
    被找到的Record的索引，如果未找到返回-1 The index of the Record. Returns -1 if not found.
Store
getById( String id ) : Ext.data.Record
根据指定的id找到Record。Get the Record with...
根据指定的id找到Record。Get the Record with the specified id.
参数项：
  • id : String
    要找的Record的id The id of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配id的Record，如果未找到则返回undefined The Record with the passed id. Returns undefined if not found.
Store
getAt( Number index ) : Ext.data.Record
根据指定的索引找到Record。Get the Record at t...
根据指定的索引找到Record。Get the Record at the specified index.
参数项：
  • index : Number
    要找的Record的索引 The index of the Record to find.
返回值：
  • Ext.data.Record
    返回匹配索引的Record，如果未找到则返回undefined The Record at the passed index. Returns undefined if not found.
Store
getRange( Number startIndex, Number endIndex ) : {Ext.data.Record[]} 返回一个Record数组 An array of Records
查找指定范围里的Records。Returns a range of ...
查找指定范围里的Records。Returns a range of Records between specified indices.
参数项：
  • startIndex : Number
    （可选项）开始索引 （默认为 0） startIndex (optional) The starting index (defaults to 0)
  • endIndex : Number
    （可选项）结束的索引 （默认是Store中最后一个Record的索引） endIndex (optional) The ending index (defaults to the last Record in the Store)
返回值：
  • {Ext.data.Record[]} 返回一个Record数组 An array of Records
Store
load( Object options ) : Boolean
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配...
采用配置好的Reader格式去加载Record缓存，具体请求的任务由配置好的Proxy对象完成。Loads the Record cache from the configured Proxy using the configured Reader.

如果使用服务器分页，那么必须指定在options.params中start和limit两个参数。start参数表明了从记录集（dataset）的哪一个位置开始读取，limit是读取多少笔的记录。Proxy负责送出参数。If using remote paging, then 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.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    传入以下属性的对象，传入的对象会影响加载的选项：An object containing properties which control loading options:
    • params :Object

      送出的HTTP参数，格式是JS对象。An object containing properties to pass as HTTP parameters to a remote data source.

    • callback : Function

      回调函数，这个函数会有以下的参数传入：A function to be called after the Records have been loaded. The callback is passed the following arguments:

      • r : Ext.data.Record[]
      • options: 加载的配置项对象。Options object from the load call
      • success: 是否成功。Boolean success indicator

    • scope : Object

      回调函数的作用域（默认为Store对象）。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.

返回值：
  • Boolean
    是否执行了load（受beforeload的影响，参见源码）。Whether the load fired (if beforeload failed).
Store
reload( Object options )
依据上一次的load操作的参数的Reader制订的格式，再一次向Pro...

依据上一次的load操作的参数的Reader制订的格式，再一次向Proxy对象要求施以加载（Reload）Record缓存的操作。Reloads the Record cache from the configured Proxy using the configured Reader and the options from the last load operation performed.

由于采用了异步加载，因此该方法执行完毕后，数据不是按照load()方法下一个语句的顺序可以获取得到的。应该登记一个回调函数，或者“load”的事件，登记一个处理函数。It is important to note that for remote data sources, loading is asynchronous, and this call will return before the new data has been loaded. Perform any post-processing in a callback function, or in a "load" event handler.

参数项：
  • options : Object
    （可选的）该对象包含的属性会覆盖上次load操作的参数。参阅load了解详细内容（默认为null，即就是复用上次的选项参数）。(optional) An object containing loading options which may override the options used in the last load operation. See load for details (defaults to null, in which case the most recently used options are reused).
返回值：
  • void
Store
loadData( Object data, Boolean add )
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Read...
从传入的数据块中装载数据，并触发load事件。传入的数据格式是Reader必须能够读取理解的，Reader是在构造器中配置好的。Loads data from a passed data block and fires the load event. A Reader which understands the format of the data must have been configured in the constructor.
参数项：
  • data : Object
    要被转化为Records的数据块。数据类型会是由这个Reader的配置所决定的，并且符合Reader对象的readRecord参数的要求。The data block from which to read the Records. The format of the data expected is dependent on the type of Reader that is configured and should correspond to that Reader's readRecords parameter.
  • add : Boolean
    （可选的）True表示为是在缓存中追加新的Records而不是进行替换。(Optional) True to add the new Records rather than replace the existing cache. 切记Store中的Record是按照id记录的，所以新加的Records如果id一样的话就会替换Stroe里面原有的，新的就会追加。Remember that Records in a Store are keyed by their id, so added Records with ids which are already present in the Store will replace existing Records. Records with new, unique ids will be added.
返回值：
  • void
Store
getCount() : Number
获取缓存记录的总数。Gets the number of cached...
获取缓存记录的总数。Gets the number of cached records.

如果使用了分页，那么这就是当前分页的总数，而不是全部记录的总数。要获取记录总数应使用getTotalCount方法，才能从Reader身上获取正确的全部记录数。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 getTotalCount function returns the dataset size.

参数项：
  • None.
返回值：
  • Number
    Store缓存中记录总数 The number of Records in the Store's cache.
Store
getTotalCount() : Number
获取作为服务端返回的数据集中记录的总数。Gets the total ...
获取作为服务端返回的数据集中记录的总数。Gets the total number of records in the dataset as returned by the server.

如果分页，该值必须声明存在才能成功分页。Reader对象处理数据对象该值不能或缺。对于远程数据而言，这是有服务器查询的结果。If using paging, for this to be accurate, the data object used by the Reader must contain the dataset size. For remote data sources, this is provided by a query on the server.

参数项：
  • None.
返回值：
  • Number
    数据对象由Proxy传给Reader对象，这个数据对象包含Record记录的总数 The number of Records as specified in the data object passed to the Reader by the Proxy

    如果是在本地更新Store的内容，那么该值是不会发生变化的。This value is not updated when changing the contents of the Store locally.

 Store
getSortState() : Object
以对象的形式返回当前排序的状态。Returns an object d...
以对象的形式返回当前排序的状态。Returns an object describing the current sort state of this Store.
参数项：
  • None.
返回值：
  • 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

      一个是排序方向，"ASC"或"DESC" The sort order, "ASC" or "DESC" (case-sensitive).

 Store
setDefaultSort( String fieldName, String dir )
设置默认的列排序，以便下次load操作时使用 Sets the def...
设置默认的列排序，以便下次load操作时使用 Sets the default sort column and order to be used by the next load operation.
参数项：
  • fieldName : String
    要排序的字段 The name of the field to sort by.
  • dir : String
    （可选的） 排序顺序，“ASC”或“DESC”（默认为“ASC”） (optional) The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
sort( String fieldName, String 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.
参数项：
  • fieldName : String
    要排序的字段的字符串。The name of the field to sort by.
  • dir : String
    (optional) 排序方向，“ASC”或“DESC”（大小写敏感的，默认为“ASC”）。The sort order, "ASC" or "DESC" (case-sensitive, defaults to "ASC")
返回值：
  • void
Store
each( Function fn, Object scope )
对缓存中每个记录调用特点的函数。Calls the specified...
对缓存中每个记录调用特点的函数。Calls the specified function for each of the Records in the cache.
参数项：
  • fn : Function
    要调用的函数。Record对象将是第一个参数。如果返回 The function to call. The Record is passed as the first parameter. Returning false aborts and exits the iteration.
  • scope : Object
    函数的作用域（默认为Record对象）（可选的） (optional) The scope in which to call the function (defaults to the Record).
返回值：
  • void
Store
getModifiedRecords() : {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（loa...
距离上次提交之后，把所有修改过的、变化的记录收集起来。通过加载（load）的操作来持久化这些修改的记录。（例如在分页期间） Gets all records modified since the last commit. Modified records are persisted across load operations (e.g., during paging).
参数项：
  • None.
返回值：
  • {Ext.data.Record[]} 包含了显注修改的Record数组. An array of Records containing outstanding modifications.
Store
sum( String property, Number start, Number end ) : Number
统计每个记录属性值的个数。可设置区间。Sums the value o...
统计每个记录属性值的个数。可设置区间。Sums the value of property for each record between start and end and returns the result.
参数项：
  • property : String
    记录集中要统计的字段名称。A field on your records
  • start : Number
    计算的记录开始索引（默认为0）。start The record index to start at (defaults to 0)
  • end : Number
    计算的记录结尾索引（默认为length - 1，从零开始算）。The last record index to include (defaults to length - 1)
返回值：
  • Number
    总数 The sum
Store
filter( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive )
由指定的属性筛选记录。Filter the records by a ...
由指定的属性筛选记录。Filter the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 value Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • void
Store
filterBy( Function fn, Object scope )
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如...
由外部函数进行筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中，否则就会被过滤掉。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this）。(optional) The scope of the function (defaults to this)
返回值：
  • void
Store
query( String field, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性查询记录。Query the records by a s...
由指定的属性查询记录。Query the records by a specified property.
参数项：
  • field : String
    要查询的字段。A field on your records
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the field should begin with, or a RegExp to test against the field.
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • MixedCollection
    返回一个Ext.util.MixedCollection实例，包含了匹配的记录 Returns an Ext.util.MixedCollection of the matched records
Store
find( Function fn, Object scope, String property, String/RegExp value, Number startIndex, Boolean anyMatch, Boolean caseSensitive ) : Number
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经...
由外部函数进行该Store缓存记录的筛选。Store里面的每个记录都经过这个函数内部使用。如果函数返回true的话，就引入（included）到匹配的结果集中。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.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数： The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      The record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的ID The ID of the Record passed.

  • scope : Object
    （可选的）函数作用域（默认为this） (optional) The scope of the function (defaults to this)
  • property : String
    你查询对象的属性 A property on your objects
  • value : String/RegExp
    既可以是字段开头的字符串，也可以是针对该字段的正则表达式 Either a string that the property value should begin with, or a RegExp to test against the property.
  • startIndex : Number
    （可选的） 查询的开始索引 (optional) The index to start searching at
  • anyMatch : Boolean
    （可选的）True表示不一定要开头的，当中包含的亦可 (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    （可选的）True表示大小写敏感 (optional) True for case sensitive comparison
返回值：
  • Number
    匹配的索引或-1 The matched index or -1
Store
findBy( Function fn, Object scope, Number startIndex ) : Number
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回...
由外部函数从某个索引开始进行筛选。只考虑第一次匹配的结果。如果函数返回true的话，就被认为是一个匹配的结果。Find the index of the first matching Record in this Store by a function. If the function returns true it is considered a match.
参数项：
  • fn : Function
    要执行的函数。它会被传入以下的参数：The function to be called. It will be passed the following parameters:
    • record : Ext.data.Record

      record 对象用来测试过滤结果的。访问字段值就用Ext.data.Recordget方法。The record to test for filtering. Access field values using Ext.data.Recordget.

    • id : Object

      所传入的Record的IDThe ID of the Record passed.

  • scope : Object
    （可选的） 函数作用域（默认为this）(optional) The scope of the function (defaults to this)
  • startIndex : Number
    （可选的） 查询的开始索引(optional) The index to start searching at
返回值：
  • Number
    匹配的索引或-1The matched index or -1
Store
clearFilter( String dataIndex, Boolean allowNull, Boolean bypassFilter, Boolean suppressEvent ) : Array
从这个Store身上收集由dataIndex指定的惟一的值。Colle...
从这个Store身上收集由dataIndex指定的惟一的值。Collects unique values for a particular dataIndex from this store.
参数项：
  • dataIndex : String
    要收集的属性The property to collect
  • allowNull : Boolean
    （可选的） 送入true表示允许null、undefined或空白字符串这些无意义的值(optional) Pass true to allow null, undefined or empty string values
  • bypassFilter : Boolean
    （可选的）送入true表示收集所有记录，哪怕是被经过筛选的记录(optional) Pass true to collect from all records, even ones which are filtered
  • suppressEvent : Boolean
    如果设置为true，该筛选器会低调地清空，而不会通知监听器If true the filter is cleared silently without notifying listeners
返回值：
  • Array
    惟一的值所构成的数组An array of the unique values/
Store
isFiltered() : Boolean
返回true表明这个store当前是在筛选的。Returns true...
返回true表明这个store当前是在筛选的。Returns true if this store is currently filtered
参数项：
  • None.
返回值：
  • Boolean
Store
commitChanges()
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记...
提交全部有变化的Record集。在实际处理这些更新的编码中， 应该登记Store的“update”事件，事件的处理函数中的第三个参数就是Ext.data.Record.COMMIT，用它来进行更新。Commit all Records with outstanding changes. To handle updates for changes, subscribe to the Store's "update" event, and perform updating when the third parameter is Ext.data.Record.COMMIT.
参数项：
  • None.
返回值：
  • void
Store
rejectChanges()
放弃所有的变更。Cancel outstanding changes ...
放弃所有的变更。Cancel outstanding changes on all changed records.
参数项：
  • None.
返回值：
  • void
Store
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
datachanged()
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的...
当有批量操作的时候，也就是数据发生改动的时候触发（如进行了排序、过滤的操作）。使用该Store应该的UI应该有所响应，如刷新其视图。
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.
侦听器会传入以下的参数：
  • None.
 Store
metachange()
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。...
当Store的Reader对象有提供新的元数据（也就是新字段）时触发。当前只对JsonReaders有效。Fires when this store's reader provides new metadata (fields). This is currently only supported for JsonReaders.
侦听器会传入以下的参数：
  • None.
 Store
add()
当有Record添加到Store里面后触发。Fires when Re...
当有Record添加到Store里面后触发。Fires when Records have been added to the Store
侦听器会传入以下的参数：
  • None.
 Store
remove()
当Store中的Record被移除后触发。Fires when a R...
当Store中的Record被移除后触发。Fires when a Record has been removed from the Store
侦听器会传入以下的参数：
  • None.
 Store
update()
当有Record改动时触发。Fires when a Record h...
当有Record改动时触发。Fires when a Record has been updated
侦听器会传入以下的参数：
  • None.
 Store
clear()
当数据缓存被清除的时候触发。Fires when the data c...
当数据缓存被清除的时候触发。Fires when the data cache has been cleared.
侦听器会传入以下的参数：
  • None.
 Store
beforeload()
当请求新的数据对象之前触发。如果beforeload返回false表示...
当请求新的数据对象之前触发。如果beforeload返回false表示load的操作被取消。Fires before a request is made for a new data object. If the beforeload handler returns false the load action will be canceled.
侦听器会传入以下的参数：
  • None.
 Store
load()
当一笔新的Record加载完毕后触发。Fires after a ne...
当一笔新的Record加载完毕后触发。Fires after a new set of Records has been loaded.
侦听器会传入以下的参数：
  • None.
 Store
loadexception()
当Proxy加载过程中有异常时触发。连同Proxy“loadexcep...
当Proxy加载过程中有异常时触发。连同Proxy“loadexception”的事件一起触发。Fires if an exception occurs in the Proxy during loading. Called with the signature of the Proxy's "loadexception" event.
侦听器会传入以下的参数：
  • None.
 Store


类Ext.data.XmlWriter

包： | Extdata
定义的文件： | XmlWriter.js
类全称： | Ext.data.XmlWriter
继承自于： | Ext.data.DataWriter
DataWriter的子类相对于远程CRUD操作而言，这是一个在前端的初始化部分，负责写入单个或多个的Ext.data.Record对象。通过XML的格式。如果默认的XML Scheam不太合适，可让XmlWriter采用Ext.XTemplate的实例制作一份XML文档的模版，使得你自己可定义XML Scheam，灵活性较大。请参阅tpl配置项。
DataWriter extension for writing an array or single Ext.data.Record object(s) in preparation for executing a remote CRUD action via XML. XmlWriter uses an instance of Ext.XTemplate for maximum flexibility in defining your own custom XML schema if the default schema is not appropriate for your needs. See the tpl configuration-property.

配置项

配置项 |  | 定义者
 | documentRoot : String [xrequest] (Optional) The name of t... [xrequest] (Optional) The name of the XML document root-node. Note: this parameter is required only when sending extra baseParams to the server during a write-request -- if no baseParams are set, the Ext.data.XmlReaderrecord 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 Ext.data.XmlWriterroot property can act as the XML document root. | XmlWriter
 | forceDocumentRoot : Boolean [false] Set to true to force XML do... [false] Set to true to force XML documents having a root-node as defined by documentRoot, even with no baseParams defined. | XmlWriter
 | root : String [records] The name of the containin... [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 Ext.data.XmlReaderrecord property. eg: | XmlWriter
 | xmlVersion : String [1.0] The version written to header... [1.0] The version written to header of xml documents. | XmlWriter
 | xmlEncoding : String [ISO-8859-15] The encoding written ... [ISO-8859-15] The encoding written to header of xml documents. | XmlWriter
 | tpl : String/Ext.XTemplate The XML template used to render {@l... 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: | XmlWriter
 | writeAllFields : Boolean 默认是false。设为true的话，就表示让DataWriter返回所... 默认是false。设为true的话，就表示让DataWriter返回所有那个记录的所有字段，不仅仅是修改的那些字段。 true就是记录那些修改的字段而已。 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. | DataWriter
 | listful : Boolean 默认是false。设为true的话，就表示DataWriter写入HT... 默认是false。设为true的话，就表示DataWriter写入HTTP参数的时候总是一数组，即使单个记录也如是。 false by default. Set true to have the DataWriter always write HTTP params as a list, even when acting upon a single record. | DataWriter
 | saveRecord : Function 抽象的方法，应该由子类提供，如JsonWriter.saveRecor... 抽象的方法，应该由子类提供，如JsonWriter.saveRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.saveRecord | DataWriter
 | createRecord : Function 抽象的方法，应该由子类提供，如JsonWriter.createRec... 抽象的方法，应该由子类提供，如JsonWriter.createRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.createRecord) | DataWriter
 | destroyRecord : Function 抽象的方法，应该由子类提供，如JsonWriter.destroyRe... 抽象的方法，应该由子类提供，如JsonWriter.destroyRecord。Abstract method that should be implemented in all subclasses (e.g.: JsonWriter.destroyRecord) | DataWriter

公告属性

属性 |  | 定义者
 | meta: Mixed This DataWriter's configured metad... This DataWriter's configured metadata as passed to the constructor. | DataWriter

公共方法

方法 定义者
XmlWriter()
参数项：
  • None.
返回值：
  • void
XmlWriter
render( String action, Record[] rs, Object params, Object data )
抽象的方法，应该由DataWriter的子类提供，扩展子类时重写该方法...
抽象的方法，应该由DataWriter的子类提供，扩展子类时重写该方法就可以使用参数“data”和“params”。送抵的数据对象会依据用户在DataReader配置的元数据信息产生真正的渲染数据。
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,
参数项：
  • action : String
    [Ext.data.Api.actions.create|read|update|destroy]
  • rs : Record[]
    Store数据集。Store recordset
  • params : Object
    发送到服务器的HTTP参数。Http params to be sent to server.
  • data : Object
    依据DataReader元数据产生的数据对象。data object populated according to DataReader meta-data.
返回值：
  • void
DataWriter
DataWriter( Object meta, Object recordType )
参数项：
  • meta : Object
    配置选项的元数据（由实现指定）Metadata configuration options (implementation-specific)
  • recordType : Object
    Ext.data.Recordcreate规定的对象数组，或是用Ext.data.Recordcreate生成的Ext.data.Record对象。Either an Array of field definition objects as specified in Ext.data.Recordcreate, or an Ext.data.Record object created using Ext.data.Recordcreate.
返回值：
  • void
DataWriter
write( String action, Object params, Record/Record[] rs )
服务端写操作的前期写数据。只需要有DataWriter#update、...
服务端写操作的前期写数据。只需要有DataWriter#update、DataWriter#create、DataWriter#destroy的proxy就可以囊括“写”的操作。
Writes data in preparation for server-write action. Simply proxies to DataWriter#update, DataWriter#create DataWriter#destroy.
参数项：
  • action : String
    [CREATE|UPDATE|DESTROY]
  • params : Object
    写入的hash参数。The params-hash to write-to
  • rs : Record/Record[]
    要写的数据。The recordset write.
返回值：
  • void
DataWriter

公共事件

这个类没有公告事件。


类Ext.DataView

包： | Ext
定义的文件： | DataView.js
类全称： | Ext.DataView
继承自于： | Ext.BoxComponent
能够为自己设计模板和特定格式而提供的一种数据显示机制。DataView采用Ext.XTemplate为其模板处理的机制，并依靠Ext.data.Store来绑定数据，这样的话store中数据发生变化时便会自动更新前台。DataView亦提供许多针对对象项（item）的内建事件，如单击、双击、mouseover、mouseout等等，还包括一个内建的选区模型（selection model）。要实现以上这些功能，必须要为DataView对象设置一个itemSelector协同工作。 A mechanism for displaying data using custom layout templates and formatting. DataView uses an Ext.XTemplate as its internal templating mechanism, and is bound to an 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 itemSelector config must be provided for the DataView to determine what nodes it will be working with.

下面给出的例子是已将DataView绑定到一个Ext.data.Store对象并在一个上Ext.Panel渲染。The example below binds a DataView to a Ext.data.Store and renders it into an 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);

配置项

配置项 定义者
tpl : String/Array
构成这个DataView的HTML片断，或片断的数组，其格式应如Ext...
构成这个DataView的HTML片断，或片断的数组，其格式应如Ext.XTemplate构造器的一样。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 Ext.XTemplate.
DataView
store : Ext.data.Store
此DataView所绑定的Ext.data.Store。The Ext...
此DataView所绑定的Ext.data.Store。The Ext.data.Store to bind this DataView to.
DataView
itemSelector : String
此项是必须的设置。任何符号Ext.DomQuery格式的CSS选择符（...
此项是必须的设置。任何符号Ext.DomQuery格式的CSS选择符（如div.some-class or span:first-child），以确定DataView所使用的节点是哪一种元素。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.
DataView
multiSelect : Boolean
True表示为允许同时可以选取多个对象项，false表示只能同时选择单...
True表示为允许同时可以选取多个对象项，false表示只能同时选择单个对象项或根本没有选区，取决于singleSelect的值（默认为false）。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 singleSelect (defaults to false).
DataView
singleSelect : Boolean
True表示为同一时间只允许选取一个对象项，false表示没有选区也是...
True表示为同一时间只允许选取一个对象项，false表示没有选区也是可以的（默认为false）。注意当multiSelect = true时，该项的设置会被忽略。True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false). Note that if multiSelect = true, this value will be ignored.
DataView
simpleSelect : Boolean
True表示为不需要用户按下Shift或Ctrl键就可以实现多选，fa...
True表示为不需要用户按下Shift或Ctrl键就可以实现多选，false表示用户一定要用户按下Shift或Ctrl键才可以多选对象项（默认为false）。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).
DataView
overClass : String
视图中每一项mouseover事件触发时所应用到的CSS样式类（默认为...
视图中每一项mouseover事件触发时所应用到的CSS样式类（默认为undefined）。A CSS class to apply to each item in the view on mouseover (defaults to undefined).
DataView
loadingText : String
当数据加载进行时显示的字符串（默认为undefined）。A stri...
当数据加载进行时显示的字符串（默认为undefined）。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.
DataView
selectedClass : String
视图中每个选中项所应用到的CSS样式类（默认为'x-view-sele...
视图中每个选中项所应用到的CSS样式类（默认为'x-view-selected'）。A CSS class to apply to each selected item in the view (defaults to 'x-view-selected').
DataView
emptyText : String
没有数据显示时，向用户提示的信息（默认为''）。The text to...
没有数据显示时，向用户提示的信息（默认为''）。The text to display in the view when there is no data to display (defaults to '').
DataView
deferEmptyText : Boolean
True表示为emptyText推迟到Store首次加载后才生效。Tr...
True表示为emptyText推迟到Store首次加载后才生效。True to defer emptyText being applied until the store's first load
DataView
trackOver : Boolean
True表示为激活mouseenter与mouseleave事件。Tr...
True表示为激活mouseenter与mouseleave事件。True to enable mouseenter and mouseleave events
DataView
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
DataView( Object config )
参数项：
  • config : Object
    配置对象。The config object
返回值：
  • void
DataView
refresh()
刷新视图。重新加载store的数据并重新渲染模板。Refreshes ...
刷新视图。重新加载store的数据并重新渲染模板。Refreshes the view by reloading the data from the store and re-rendering the template.
参数项：
  • None.
返回值：
  • void
DataView
prepareData( Array/Object data, Number recordIndex, Record record ) : Array/Object
重写该函数，可对每个节点的数据进行格式化,再交给DataView的te...
重写该函数，可对每个节点的数据进行格式化,再交给DataView的template模板进一步处理。Function which can be overridden to provide custom formatting for each Record that is used by this DataView's template to render each node.
参数项：
  • data : Array/Object
    原始数据，是Data Model所绑定的视图的colData数组，或Updater数据对象绑定的JSON对象。The raw data object that was used to create the Record.
  • recordIndex : Number
    将要参与进行渲染Record对象的索引，是数字。the index number of the Record being prepared for rendering.
  • record : Record
    将要参与进行渲染Record对象。The Record being prepared for rendering.
返回值：
  • Array/Object
    已格式化的数据，供template的overwrite()方法内置使用。既可以是数字式标记的数组（如{0}）或是一个对象（如{foo: 'bar'}）。The formatted data in a format expected by the internal template's overwrite() method. (either an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}))
DataView
collectData( Array records ) : Array
返回数据对象的函数，配合DataView的template来渲染整个...

返回数据对象的函数，配合DataView的template来渲染整个DataView。你也可以重写这个函数。Function which can be overridden which returns the data object passed to this DataView's template to render the whole DataView.

这应该是由数据对象所组成的数组， 所谓数据对象，就是利用这些数据，让其送入XTemplate模板中迭代， 解析其中的'<tpl for=".">'产生HTML片断。其中，可加入named的属性以表示不重复的数据，例如头部、总数等的地方。This is usually an Array of data objects, each element of which is processed by an 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.

参数项：
  • records : Array
    渲染到DataView的Ext.data.Record数组。An Array of Ext.data.Records to be rendered into the DataView.
返回值：
  • Array
    数据对象数组，将由XTemplate循化处理。也可以携带named的属性。An Array of data objects to be processed by a repeating XTemplate. May also contain named properties.
DataView
refreshNode( Number index )
刷新store里面各个节点的数据。Refreshes an indiv...
刷新store里面各个节点的数据。Refreshes an individual node's data from the store.
参数项：
  • index : Number
    store里面的数据索引。The item's data index in the store
返回值：
  • void
DataView
getStore() : Ext.data.Store
刷新不同的节点的数据（来自store）。Returns the sto...
刷新不同的节点的数据（来自store）。Returns the store associated with this DataView.
参数项：
  • None.
返回值：
  • Ext.data.Store
    store中的数据的索引。
DataView
setStore( Store store )
改变在使用的Data Store并刷新view。Changes the...
改变在使用的Data Store并刷新view。Changes the data store bound to this view and refreshes it.
参数项：
  • store : Store
    绑定这个view的store对象。The store to bind to this view
返回值：
  • void
DataView
findItemFromChild( HTMLElement node ) : HTMLElement
传入一个节点(node)的参数，返回该属于模板的节点，返回null则代...
传入一个节点(node)的参数，返回该属于模板的节点，返回null则代表它不属于模板的任何一个节点。Returns the template node the passed child belongs to, or null if it doesn't belong to one.
参数项：
  • node : HTMLElement
返回值：
  • HTMLElement
    模板节点。The template node
DataView
getSelectionCount() : Number
返回选中节点的数量。Gets the number of select...
返回选中节点的数量。Gets the number of selected nodes.
参数项：
  • None.
返回值：
  • Number
    节点数量。The node count
DataView
getSelectedNodes() : Array
返回当前选中的节点。Gets the currently select...
返回当前选中的节点。Gets the currently selected nodes.
参数项：
  • None.
返回值：
  • Array
    数组。An array of HTMLElements
DataView
getSelectedIndexes() : Array
返回选中的节点的索引。Gets the indexes of the ...
返回选中的节点的索引。Gets the indexes of the selected nodes.
参数项：
  • None.
返回值：
  • Array
    数字索引的数组。An array of numeric indexes
DataView
getSelectedRecords() : Array
返回所选记录组成的数组。Gets an array of the se...
返回所选记录组成的数组。Gets an array of the selected records
参数项：
  • None.
返回值：
  • Array
    Ext.data.Record对象数组。An array of Ext.data.Record objects
DataView
getRecords( Array nodes ) : Array
从一个节点数组中返回记录节点。Gets an array of the...
从一个节点数组中返回记录节点。Gets an array of the records from an array of nodes
参数项：
  • nodes : Array
    参与运算的节点。The nodes to evaluate
返回值：
  • Array
    Ext.data.Record记录对象的数组。The Ext.data.Record objects
DataView
getRecord( HTMLElement node ) : Record
返回节点的记录。Gets a record from a node
返回节点的记录。Gets a record from a node
参数项：
  • node : HTMLElement
    涉及的节点。The node to evaluate
返回值：
  • Record
    Ext.data.Record记录对象的数组。The Ext.data.Record object
DataView
clearSelections( Boolean suppressEvent )
清除所有选区。Clears all selections.
清除所有选区。Clears all selections.
参数项：
  • suppressEvent : Boolean
    （可选的）True跃过触发selectionchange的事件。(optional)True to skip firing of the selectionchange event
返回值：
  • void
DataView
isSelected( HTMLElement/Number node ) : Boolean
传入一个节点的参数，如果是属于已选取的话便返回true否则返回fals...
传入一个节点的参数，如果是属于已选取的话便返回true否则返回false。Returns true if the passed node is selected, else false.
参数项：
  • node : HTMLElement/Number
    节点或节点索引。The node or node index to check
返回值：
  • Boolean
    true表示选中否则返回false。True if selected, else false
DataView
deselect( HTMLElement/Number node )
反选节点 Deselects a node。
反选节点 Deselects a node。
参数项：
  • node : HTMLElement/Number
    反选的节点。The node to deselect
返回值：
  • void
DataView
select( Array/HTMLElement/String/Number nodeInfo, Boolean keepExisting, Boolean suppressEvent )
选取节点。Selects a set of nodes.
选取节点。Selects a set of nodes.
参数项：
  • nodeInfo : Array/HTMLElement/String/Number
    HTMLElement类型的模板节点，模板节点的索引或是模板节点的ID。An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
  • keepExisting : Boolean
    (可选项)true 代表保留当前选区 (optional)true to keep existing selections
  • suppressEvent : Boolean
    (可选项)true表示为跳过所有selectionchange事件。(optional)true to skip firing of the selectionchange vent
返回值：
  • void
DataView
selectRange( Number start, Number end, Boolean keepExisting )
选取某段范围的节点。在start与end之间范围内的节点都会被选取。S...
选取某段范围的节点。在start与end之间范围内的节点都会被选取。Selects a range of nodes. All nodes between start and end are selected.
参数项：
  • start : Number
    索引头，在范围中第一个节点的索引。The index of the first node in the range
  • end : Number
    索引尾，在范围中最后一个节点的索引。The index of the last node in the range
  • keepExisting : Boolean
    （可选项）true代表保留当前选区。(optional) True to retain existing selections
返回值：
  • void
DataView
getNode( HTMLElement/String/Number nodeInfo ) : HTMLElement
获取多个模板节点。Gets a template node.
获取多个模板节点。Gets a template node.
参数项：
  • nodeInfo : HTMLElement/String/Number
    HTMLElement类型的模板节点，模板节点的索引或是模板节点的ID。An HTMLElement template node, index of a template node or the id of a template node
返回值：
  • HTMLElement
    若找不到返回null。The node or null if it wasn't found
DataView
getNodes( Number start, Number end ) : Array
获取某个范围的模板节点。Gets a range nodes.
获取某个范围的模板节点。Gets a range nodes.
参数项：
  • start : Number
    （可选的）索引头，在范围中第一个节点的索引。(optional) The index of the first node in the range
  • end : Number
    （可选的）索引尾，在范围中最后一个节点的索引。(optional) The index of the last node in the range
返回值：
  • Array
    节点数组。An array of nodes
DataView
indexOf( HTMLElement/String/Number nodeInfo ) : Number
传入一个node作为参数，找到它的索引。Finds the index...
传入一个node作为参数，找到它的索引。Finds the index of the passed node.
参数项：
  • nodeInfo : HTMLElement/String/Number
    HTMLElement类型的模板节点，模板节点的索引或是模板节点的ID。An HTMLElement template node, index of a template node or the id of a template node
返回值：
  • Number
    节点索引或-1。The index of the node or -1
DataView
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeclick()
单击执行之前触发，返回 false 则取消默认的动作。Fires be...
单击执行之前触发，返回 false 则取消默认的动作。Fires before a click is processed. Returns false to cancel the default action.
侦听器会传入以下的参数：
  • None.
 DataView
click()
当模板节点单击时触发事件，如返回 false 则取消默认的动作。Fir...
当模板节点单击时触发事件，如返回 false 则取消默认的动作。Fires when a template node is clicked.
侦听器会传入以下的参数：
  • None.
 DataView
mouseenter()
当鼠标进入模板节点上触发。必须设置好trackOver:true或ov...
当鼠标进入模板节点上触发。必须设置好trackOver:true或overCls中的一项。Fires when the mouse enters a template node. trackOver:true or an overCls must be set to enable this event.
侦听器会传入以下的参数：
  • None.
 DataView
mouseleave()
当鼠标离开模板节点上触发。必须设置好trackOver:true或ov...
当鼠标离开模板节点上触发。必须设置好trackOver:true或overCls中的一项。Fires when the mouse leaves a template node. trackOver:true or an overCls must be set to enable this event.
侦听器会传入以下的参数：
  • None.
 DataView
containerclick()
当点击发生时但又不在模板节点上发生时触发。Fires when a c...
当点击发生时但又不在模板节点上发生时触发。Fires when a click occurs and it is not on a template node.
侦听器会传入以下的参数：
  • None.
 DataView
dblclick()
当模板节点双击时触发事件。Fires when a template ...
当模板节点双击时触发事件。Fires when a template node is double clicked.
侦听器会传入以下的参数：
  • None.
 DataView
contextmenu()
当模板节右击时触发事件。Fires when a template n...
当模板节右击时触发事件。Fires when a template node is right clicked.
侦听器会传入以下的参数：
  • None.
 DataView
containercontextmenu()
在一个非模板节点区域上右键按下时触发。Fires when a rig...
在一个非模板节点区域上右键按下时触发。Fires when a right click occurs that is not on a template node.
侦听器会传入以下的参数：
  • None.
 DataView
selectionchange()
当选取改变时触发。Fires when the selected no...
当选取改变时触发。Fires when the selected nodes change.
侦听器会传入以下的参数：
  • None.
 DataView
beforeselect()
选取生成之前触发,如返回false,则选区不会生成。Fires bef...
选取生成之前触发,如返回false,则选区不会生成。Fires before a selection is made. If any handlers return false, the selection is cancelled.
侦听器会传入以下的参数：
  • None.
 DataView
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


Observable
    Component
      Editor
        DataView.LabelEditor

Class Ext.DataView.LabelEditor

Package: | Ext
Defined In: | DataView-more.js
Class: | DataView.LabelEditor
Extends: | Editor

Config Options

Config Options Defined By
alignment : String
The position to align to (see Ext.Element.alignTo for more details, defaults to "c-c?").
Editor
allowBlur : Boolean
True to complete the editing process if in edit mode when the field is blurred. Defaults to false.
Editor
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoSize : Boolean/String
True for the editor to automatically adopt the size of the element being edited, "width" to adopt the width only, or ...
True for the editor to automatically adopt the size of the element being edited, "width" to adopt the width only, or "height" to adopt the height only (defaults to false)
Editor
cancelOnEsc : Boolean
True to cancel the edit when the escape key is pressed (defaults to false)
Editor
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
completeOnEnter : Boolean
True to complete the edit when the enter key is pressed (defaults to false)
Editor
constrain : Boolean
True to constrain the editor to the viewport
Editor
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
field : Ext.form.Field
The Field object (or descendant) or config object for field
Editor
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideEl : Boolean
False to keep the bound element visible while the editor is displayed (defaults to true)
Editor
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
ignoreNoChange : Boolean
True to skip the edit completion process (no save, no events fired) if the user completes an edit and the value has n...
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.
Editor
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
revertInvalid : Boolean
True to automatically revert the field value and cancel the edit when the user completes an edit and the field valida...
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)
Editor
shadow : Boolean/String
"sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "frame")
Editor
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
Handle the keydown/keypress events so they don't propagate (defaults to true)
Editor
updateEl : Boolean
True to update the innerHTML of the bound element when the update completes (defaults to false)
Editor
value : Mixed
The data value of the underlying field (defaults to "")
Editor
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
cancelEdit( Boolean remainVisible ) : void
Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to...
Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to the original starting value.
Parameters:
  • remainVisible : Boolean
    Override the default behavior and keep the editor visible after cancel (defaults to false)
Returns:
  • void
Editor
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
completeEdit( Boolean remainVisible ) : void
Ends the editing process, persists the changed value to the underlying field, and hides the editor.
Ends the editing process, persists the changed value to the underlying field, and hides the editor.
Parameters:
  • remainVisible : Boolean
    Override the default behavior and keep the editor visible after edit (defaults to false)
Returns:
  • void
Editor
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getValue() : Mixed
Gets the data value of the editor
Gets the data value of the editor
Parameters:
  • None.
Returns:
  • Mixed
    The data value
Editor
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
realign() : void
Realigns the editor to the bound field based on the current alignment config value.
Realigns the editor to the bound field based on the current alignment config value.
Parameters:
  • None.
Returns:
  • void
Editor
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setSize( Number width, Number height ) : void
Sets the height and width of this editor.
Sets the height and width of this editor.
Parameters:
  • width : Number
    The new width
  • height : Number
    The new height
Returns:
  • void
Editor
setValue( Mixed value ) : void
Sets the data value of the editor
Sets the data value of the editor
Parameters:
  • value : Mixed
    Any valid value supported by the underlying field
Returns:
  • void
Editor
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
startEdit( Mixed el, [String value] ) : void
Starts the editing process and shows the editor.
Starts the editing process and shows the editor.
Parameters:
  • el : Mixed
    The element to edit
  • value : String
    (optional) A value to initialize the editor with. If a value is not provided, it defaults to the innerHTML of el.
Returns:
  • void
Editor
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforecomplete : ( Editor this, Mixed value, Mixed startValue )
Fires after a change has been made to the field, but before the change is reflected in the underlying field. Saving ...
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.
Listeners will be called with the following arguments:
  • this : Editor
  • value : Mixed
    The current field value
  • startValue : Mixed
    The original field value
Editor
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestartedit : ( Editor this, Ext.Element boundEl, Mixed value )
Fires when editing is initiated, but before the value changes. Editing can be canceled by returning false from the h...
Fires when editing is initiated, but before the value changes. Editing can be canceled by returning false from the handler of this event.
Listeners will be called with the following arguments:
  • this : Editor
  • boundEl : Ext.Element
    The underlying element bound to this editor
  • value : Mixed
    The field value being set
Editor
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
canceledit : ( Editor this, Mixed value, Mixed startValue )
Fires after editing has been canceled and the editor's value has been reset.
Fires after editing has been canceled and the editor's value has been reset.
Listeners will be called with the following arguments:
  • this : Editor
  • value : Mixed
    The user-entered field value that was discarded
  • startValue : Mixed
    The original field value that was set back into the editor after cancel
Editor
complete : ( Editor this, Mixed value, Mixed startValue )
Fires after editing is complete and any changed value has been written to the underlying field.
Fires after editing is complete and any changed value has been written to the underlying field.
Listeners will be called with the following arguments:
  • this : Editor
  • value : Mixed
    The current field value
  • startValue : Mixed
    The original field value
Editor
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObject.g...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObject.getKey to determine which key was pressed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Editor
startedit : ( Ext.Element boundEl, Mixed value )
Fires when this editor is displayed
Fires when this editor is displayed
Listeners will be called with the following arguments:
  • boundEl : Ext.Element
    The underlying element bound to this editor
  • value : Mixed
    The starting field value
Editor
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


类Ext.DatePicker

包： | Ext
定义的文件： | DatePicker.js
类全称： | Ext.DatePicker
继承自于： | Ext.Component
简单的日期选择类。Simple date picker class.

配置项

配置项 定义者
todayText : String
显示在选择当前日期的按钮上的文本（默认为 "Today"）。The t...
显示在选择当前日期的按钮上的文本（默认为 "Today"）。The text to display on the button that selects the current date (defaults to "Today")
DatePicker
okText : String
显示在 ok 按钮上的文本。The text to display o...
显示在 ok 按钮上的文本。The text to display on the ok button
DatePicker
cancelText : String
显示在 cancel 按钮上的文本。The text to displ...
显示在 cancel 按钮上的文本。The text to display on the cancel button
DatePicker
todayTip : String
选择当前日期的按钮的快捷提示（默认为"{current date} (...
选择当前日期的按钮的快捷提示（默认为"{current date} (Spacebar)"）。The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
DatePicker
minText : String
minDate 效验失败时显示的错误文本（默认为"This date ...
minDate 效验失败时显示的错误文本（默认为"This date is before the minimum date"）。The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
DatePicker
maxText : String
maxDate 效验失败时显示的错误文本（默认为"This date ...
maxDate 效验失败时显示的错误文本（默认为"This date is after the maximum date"）。The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
DatePicker
format : String
默认的日期格式化字串，可以被覆写以实现本地化支持。格式化字串必须为Da...
默认的日期格式化字串，可以被覆写以实现本地化支持。格式化字串必须为DateparseDate中记载的有效格式（默认为 'm/d/y'）。The default date format string which can be overriden for localization support. The format must be valid according to DateparseDate (defaults to 'm/d/y').
DatePicker
disabledDaysText : String
当选中禁用星期时显示的错误文本（默认为""）。The tooltip ...
当选中禁用星期时显示的错误文本（默认为""）。The tooltip to display when the date falls on a disabled day (defaults to "Disabled")
DatePicker
disabledDatesText : String
当选中禁用日期时显示的错误文本（默认为 ""）。The tooltip...
当选中禁用日期时显示的错误文本（默认为 ""）。The tooltip text to display when the date falls on a disabled date (defaults to "Disabled")
DatePicker
monthNames : Array
出于本地化的支持，决定那些可被覆盖的，这是由月份字符串组成的数组（默认...
出于本地化的支持，决定那些可被覆盖的，这是由月份字符串组成的数组（默认为Date.monthNames）。An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
DatePicker
dayNames : Array
星期名称数组，可以被覆写以实现本地化支持（默认为 Date.dayNa...
星期名称数组，可以被覆写以实现本地化支持（默认为 Date.dayNames）。An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
DatePicker
nextText : String
下个月按钮的快捷提示（默认为 'Next Month (Control...
下个月按钮的快捷提示（默认为 'Next Month (Control+Right)'）。The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
DatePicker
prevText : String
上个月按钮的快捷提示（默认为 'Previous Month (Con...
上个月按钮的快捷提示（默认为 'Previous Month (Control+Left)'）。The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
DatePicker
monthYearText : String
月份选择器的快捷提示（默认为 'Choose a month (Con...
月份选择器的快捷提示（默认为 'Choose a month (Control+Up/Down to move years)'）。The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
DatePicker
startDay : Number
每周第一天的索引数，以 0 起始。（默认为 0，表示每周的第一天为周日...
每周第一天的索引数，以 0 起始。（默认为 0，表示每周的第一天为周日）。Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
DatePicker
showToday : Boolean
False表示隐藏在底部区域的Today按钮，也禁止键盘选取当日的日期...
False表示隐藏在底部区域的Today按钮，也禁止键盘选取当日的日期（默认为true）。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).
DatePicker
minDate : Date
允许的最小日期（JavaScript 日期对象，默认为 null）。M...
允许的最小日期（JavaScript 日期对象，默认为 null）。Minimum allowable date (JavaScript date object, defaults to null)
DatePicker
maxDate : Date
允许的最大日期（JavaScript 日期对象，默认为 null）。M...
允许的最大日期（JavaScript 日期对象，默认为 null）。Maximum allowable date (JavaScript date object, defaults to null)
DatePicker
disabledDays : Array
一个禁用星期数组，以 0 起始。例如：[0, 6] 表示禁用周日和周六...
一个禁用星期数组，以 0 起始。例如：[0, 6] 表示禁用周日和周六（默认为 null）。An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
DatePicker
disabledDatesRE : RegExp
一个用来表示禁用日期的 JavaScript 正则表达式（默认为 nu...
一个用来表示禁用日期的 JavaScript 正则表达式（默认为 null）。JavaScript regular expression used to disable a pattern of dates (defaults to null). The disabledDates config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the disabledDates value.
DatePicker
disabledDates : Array
不能选取的日期列表，用字符串表示。这些字符串可以是正则表达式的字符串，...
不能选取的日期列表，用字符串表示。这些字符串可以是正则表达式的字符串，因此是非常强大的。若干例子： 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"]就是声明禁用这些日期。
  • ["03/08", "09/16"] 这样会每年的这些日子都被禁用。would disable those days for every year
  • ["^03/08"] 自该日子开始（使用短year格式时有用）.would only match the beginning (useful if you are using short years)
  • ["03/../2006"]2006年的三月内每一日都禁用。would disable every day in March 2006
  • ["^03"]每逢三月都禁止。would disable every day in every March
注意数组内的每一个日期的格式，都必须符合format格式的要求。如遇到日期格式有“.”的，就要转义以符合正则的要求，如["03\\.08\\.03"]。Note that the format of the dates included in the array should exactly match the 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"].
DatePicker
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
DatePicker( Object config )
参数项：
  • config : Object
    配置选项对象。The config object
返回值：
  • void
DatePicker
setDisabledDates( Array/RegExp disabledDates )
替换现有的不可选取日期，并刷新DatePicker。Replaces ...
替换现有的不可选取日期，并刷新DatePicker。Replaces any existing disabled dates with new values and refreshes the DatePicker.
参数项：
  • disabledDates : Array/RegExp
    日期的字符串组成的数组，或禁止日期的JavaScript正则表达式。参阅disabledDays配置项。An array of date strings (see the disabledDates config for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
返回值：
  • void
DatePicker
setDisabledDays( Array disabledDays )
替换现有的不可选取日子（index式，0-6），并刷新DatePick...
替换现有的不可选取日子（index式，0-6），并刷新DatePicker。Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
参数项：
  • disabledDays : Array
    禁止日期的数组。参阅disabledDays配置项。An array of disabled day indexes. See the disabledDays config for details on supported values.
返回值：
  • void
DatePicker
setMinDate( Date value )
替换现有的minDate值，并刷新DatePicker。Replace...
替换现有的minDate值，并刷新DatePicker。Replaces any existing minDate with the new value and refreshes the DatePicker.
参数项：
  • value : Date
    允许选择的最早日期。The minimum date that can be selected
返回值：
  • void
DatePicker
setMaxDate( Date value )
替换现有的maxDate值，并刷新DatePicker。Replace...
替换现有的maxDate值，并刷新DatePicker。Replaces any existing maxDate with the new value and refreshes the DatePicker.
参数项：
  • value : Date
    允许选择的最迟日期。The maximum date that can be selected
返回值：
  • void
DatePicker
setValue( Date value )
获取当前日期字段中选中的值。Sets the value of the...
获取当前日期字段中选中的值。Sets the value of the date field
参数项：
  • value : Date
    选中的日期。The date to set
返回值：
  • void
DatePicker
getValue() : Date
获取当前已选中的日期值。Gets the current select...
获取当前已选中的日期值。Gets the current selected value of the date field
参数项：
  • None.
返回值：
  • Date
    日期。The selected date
DatePicker
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
select()
选中日期时触发。Fires when a date is selected
选中日期时触发。Fires when a date is selected
侦听器会传入以下的参数：
  • None.
 DatePicker
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


DragDrop
    DD

Class Ext.dd.DD

Package: | Ext.dd
Defined In: | DDCore.js
Class: | DD
Subclasses: | DDProxy
Extends: | DragDrop
A DragDrop implementation where the linked element follows the mouse cursor during a drag.

Public Properties

Property Defined By
Only : Object
The drag and drop utility provides a framework for building drag and drop applications. In addition to enabling drag...
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.
DragDrop
available : boolean
The availabe property is false until the linked dom element is accessible.
DragDrop
config : object
Configuration attributes passed into the constructor
DragDrop
defaultPadding : Object
Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
The group defines a logical collection of DragDrop objects that are related. Instances only get events when interact...
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.
DragDrop
hasOuterHandles : boolean
By default, drags can only be initiated if the mousedown occurs in the region the linked element is. This is done in...
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.
DragDrop
id : String
The id of the element associated with this object. This is what we refer to as the "linked element" because the size...
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.
DragDrop
ignoreSelf : Boolean
Set to false to enable a DragDrop object to fire drag events while dragging over its own Element. Defaults to true - ...
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.
DragDrop
invalidHandleClasses : Array
An Array of CSS class names for elements to be considered in valid as drag handles.
DragDrop
invalidHandleIds : Object
An object who's property names identify the IDs of elements to be considered invalid as drag handles. A non-null prop...
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
}
DragDrop
invalidHandleTypes : Object
An object who's property names identify HTML tags to be considered invalid as drag handles. A non-null property value...
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"
}
DragDrop
isTarget : boolean
By default, all instances can be a drop target. This can be disabled by setting isTarget to false.
DragDrop
maintainOffset : boolean
Maintain offsets when we resetconstraints. Set to true when you want the position of the element relative to its par...
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
DragDrop
moveOnly : boolean
When set to true, other DD objects in cooperating DDGroups do not receive notification events when this DD object is ...
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.
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
The padding configured for this drag and drop object for calculating the drop zone intersection with this object.
DragDrop
primaryButtonOnly : boolean
By default the drag and drop instance will only respond to the primary button click (left button for a right-handed m...
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
DragDrop
scroll : boolean
When set to true, the utility automatically tries to scroll the browser window when a drag and drop element is dragge...
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.
DD
xTicks : int[]
Array of pixel locations the element will snap to if we specified a horizontal graduation/interval. This array is ge...
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.
DragDrop
yTicks : int[]
Array of pixel locations the element will snap to if we specified a vertical graduation/interval. This array is gene...
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.
DragDrop

Public Methods

Method Defined By
DD( String id, String sGroup, object config )
Parameters:
  • id : String
    the id of the linked element
  • sGroup : String
    the group of related DragDrop items
  • config : object
    an object containing configurable attributes Valid properties for DD: scroll
Returns:
  • void
DD
addInvalidHandleClass( string cssClass ) : void
Lets you specify a css class of elements that will not initiate a drag
Lets you specify a css class of elements that will not initiate a drag
Parameters:
  • cssClass : string
    the class of the elements you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleId( string id ) : void
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Parameters:
  • id : string
    the element id of the element you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleType( string tagName ) : void
Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate...
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.
Parameters:
  • tagName : string
    the type of element to exclude
Returns:
  • void
DragDrop
addToGroup( sGroup {string} ) : void
Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belon...
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.
Parameters:
  • {string} : sGroup
    the name of the group
Returns:
  • void
DragDrop
alignElWithMouse( HTMLElement el, int iPageX, int iPageY ) : void
Sets the element to the location of the mousedown or click event, maintaining the cursor location relative to the loc...
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.
Parameters:
  • el : HTMLElement
    the element to move
  • iPageX : int
    the X coordinate of the mousedown or drag event
  • iPageY : int
    the Y coordinate of the mousedown or drag event
Returns:
  • void
DD
applyConfig() : void
Sets up config options specific to this class. Overrides Ext.dd.DragDrop, but all versions of this method through the...
Sets up config options specific to this class. Overrides Ext.dd.DragDrop, but all versions of this method through the inheritance chain are called
Parameters:
  • None.
Returns:
  • void
DD
autoOffset( int iPageX, int iPageY ) : void
Sets the pointer offset to the distance between the linked element's top left corner and the location the element was...
Sets the pointer offset to the distance between the linked element's top left corner and the location the element was clicked
Parameters:
  • iPageX : int
    the X coordinate of the click
  • iPageY : int
    the Y coordinate of the click
Returns:
  • void
DD
b4Drag() : void
Event that fires prior to the onDrag event. Overrides Ext.dd.DragDrop.
Event that fires prior to the onDrag event. Overrides Ext.dd.DragDrop.
Parameters:
  • None.
Returns:
  • void
DD
b4MouseDown() : void
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
Parameters:
  • None.
Returns:
  • void
DD
cachePosition( iPageX the, iPageY the ) : void
Saves the most recent position so that we can reset the constraints and tick marks on-demand. We need to know this s...
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.
Parameters:
  • the : iPageX
    current x position (optional, this just makes it so we don't have to look it up again)
  • the : iPageY
    current y position (optional, this just makes it so we don't have to look it up again)
Returns:
  • void
DD
clearConstraints() : void
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constrain...
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constraint at this time.
Parameters:
  • None.
Returns:
  • void
DragDrop
clearTicks() : void
Clears any tick interval defined for this instance
Clears any tick interval defined for this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
constrainTo( Mixed constrainTo, [Object/Number pad], [Boolean inContent] ) : void
Initializes the drag drop object's constraints to restrict movement to a certain element. Usage: var dd = new Ext.dd...
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 Ext.Element object:
Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
Parameters:
  • constrainTo : Mixed
    The element to constrain to.
  • pad : Object/Number
    (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}
  • inContent : Boolean
    (optional) Constrain the draggable in the content box of the element (inside padding and borders)
Returns:
  • void
DragDrop
endDrag( Event e ) : void
Fired when we are done dragging the object
Fired when we are done dragging the object
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
getDragEl() : HTMLElement
Returns a reference to the actual element to drag. By default this is the same as the html element, but it can be as...
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
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
getEl() : HTMLElement
Returns a reference to the linked element
Returns a reference to the linked element
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
init( id the, String sGroup, object config ) : void
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • 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.
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • void
DragDrop
isLocked() : boolean
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on th...
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on the page.)
Parameters:
  • None.
Returns:
  • boolean
    true if this obj or all drag/drop is locked, else false
DragDrop
isValidHandleChild( HTMLElement node ) : boolean
Checks the tag exclusion list to see if this click should be ignored
Checks the tag exclusion list to see if this click should be ignored
Parameters:
  • node : HTMLElement
    the HTMLElement to evaluate
Returns:
  • boolean
    true if this is a valid tag type, false if not
DragDrop
lock() : void
Lock this instance
Lock this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
onAvailable() : void
Override the onAvailable method to do what is needed after the initial position was determined.
Override the onAvailable method to do what is needed after the initial position was determined.
Parameters:
  • None.
Returns:
  • void
DragDrop
onDrag( Event e ) : void
Abstract method called during the onMouseMove event while dragging an object.
Abstract method called during the onMouseMove event while dragging an object.
Parameters:
  • e : Event
    the mousemove event
Returns:
  • void
DragDrop
onDragDrop( Event e, String|DragDrop[] id ) : void
Abstract method called when this item is dropped on another DragDrop obj
Abstract method called when this item is dropped on another DragDrop obj
Parameters:
  • e : Event
    the mouseup event
  • id : String|DragDrop[]
    In POINT mode, the element id this was dropped on. In INTERSECT mode, an array of dd items this was dropped on.
Returns:
  • void
DragDrop
onDragEnter( Event e, String|DragDrop[] id ) : void
Abstract method called when this element fist begins hovering over another DragDrop obj
Abstract method called when this element fist begins hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of one or more dragdrop items being hovered over.
Returns:
  • void
DragDrop
onDragOut( Event e, String|DragDrop[] id ) : void
Abstract method called when we are no longer hovering over an element
Abstract method called when we are no longer hovering over an element
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    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.
Returns:
  • void
DragDrop
onDragOver( Event e, String|DragDrop[] id ) : void
Abstract method called when this element is hovering over another DragDrop obj
Abstract method called when this element is hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of dd items being hovered over.
Returns:
  • void
DragDrop
onInvalidDrop( Event e ) : void
Abstract method called when this item is dropped on an area with no drop target
Abstract method called when this item is dropped on an area with no drop target
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
onMouseDown( Event e ) : void
Event handler that fires when a drag/drop obj gets a mousedown
Event handler that fires when a drag/drop obj gets a mousedown
Parameters:
  • e : Event
    the mousedown event
Returns:
  • void
DragDrop
onMouseUp( Event e ) : void
Event handler that fires when a drag/drop obj gets a mouseup
Event handler that fires when a drag/drop obj gets a mouseup
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
removeFromGroup( string sGroup ) : void
Remove's this instance from the supplied interaction group
Remove's this instance from the supplied interaction group
Parameters:
  • sGroup : string
    The group to drop
Returns:
  • void
DragDrop
removeInvalidHandleClass( string cssClass ) : void
Unsets an invalid css class
Unsets an invalid css class
Parameters:
  • cssClass : string
    the class of the element(s) you wish to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleId( string id ) : void
Unsets an invalid handle id
Unsets an invalid handle id
Parameters:
  • id : string
    the id of the element to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleType( string tagName ) : void
Unsets an excluded tag name set by addInvalidHandleType
Unsets an excluded tag name set by addInvalidHandleType
Parameters:
  • tagName : string
    the type of element to unexclude
Returns:
  • void
DragDrop
resetConstraints( boolean maintainOffset ) : void
resetConstraints must be called if you manually reposition a dd element.
resetConstraints must be called if you manually reposition a dd element.
Parameters:
  • maintainOffset : boolean
Returns:
  • void
DragDrop
setDelta( int iDeltaX, int iDeltaY ) : void
Sets the pointer offset. You can call this directly to force the offset to be in a particular location (e.g., pass i...
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)
Parameters:
  • iDeltaX : int
    the distance from the left
  • iDeltaY : int
    the distance from the top
Returns:
  • void
DD
setDragElId( id {string} ) : void
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setDragElPos( int iPageX, int iPageY ) : void
Sets the drag element to the location of the mousedown or click event, maintaining the cursor location relative to th...
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.
Parameters:
  • iPageX : int
    the X coordinate of the mousedown or drag event
  • iPageY : int
    the Y coordinate of the mousedown or drag event
Returns:
  • void
DD
setHandleElId( id {string} ) : void
Allows you to specify a child of the linked element that should be used to initiate the drag operation. An example o...
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.
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag.
Returns:
  • void
DragDrop
setInitPosition( int diffX, int diffY ) : void
Stores the initial placement of the linked element.
Stores the initial placement of the linked element.
Parameters:
  • diffX : int
    the X offset, default 0
  • diffY : int
    the Y offset, default 0
Returns:
  • void
DragDrop
setOuterHandleElId( id the ) : void
Allows you to set an element outside of the linked element as a drag handle
Allows you to set an element outside of the linked element as a drag handle
Parameters:
  • the : id
    id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setPadding( int iTop, int iRight, int iBot, int iLeft ) : void
Configures the padding for the target zone in px. Effectively expands (or reduces) the virtual object size for targe...
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.
Parameters:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
Returns:
  • void
DragDrop
setXConstraint( int iLeft, int iRight, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Use this method to limit the horizontal travel of th...
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.
Parameters:
  • iLeft : int
    the number of pixels the element can move to the left
  • iRight : int
    the number of pixels the element can move to the right
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
setYConstraint( int iUp, int iDown, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Set this to limit the vertical travel of the element...
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.
Parameters:
  • iUp : int
    the number of pixels the element can move up
  • iDown : int
    the number of pixels the element can move down
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
startDrag( int X, int Y ) : void
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Parameters:
  • X : int
    click location
  • Y : int
    click location
Returns:
  • void
DragDrop
toString() : string
toString method
toString method
Parameters:
  • None.
Returns:
  • string
    string representation of the dd obj
DragDrop
unlock() : void
Unlock this instace
Unlock this instace
Parameters:
  • None.
Returns:
  • void
DragDrop
unreg() : void
Remove all drag and drop hooks for this element
Remove all drag and drop hooks for this element
Parameters:
  • None.
Returns:
  • void
DragDrop

Public Events

This class has no public events.


DragDrop
    DD
      DDProxy

Class Ext.dd.DDProxy

Package: | Ext.dd
Defined In: | DDCore.js
Class: | DDProxy
Subclasses: | DragSource
Extends: | DD
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.

Public Properties

Property Defined By
Ext.dd.DDProxy.dragElId : String
The default drag frame div id
DDProxy
Only : Object
The drag and drop utility provides a framework for building drag and drop applications. In addition to enabling drag...
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.
DragDrop
available : boolean
The availabe property is false until the linked dom element is accessible.
DragDrop
centerFrame : boolean
By default the frame is positioned exactly where the drag element is, so we use the cursor offset provided by Ext.dd....
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.
DDProxy
config : object
Configuration attributes passed into the constructor
DragDrop
defaultPadding : Object
Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
The group defines a logical collection of DragDrop objects that are related. Instances only get events when interact...
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.
DragDrop
hasOuterHandles : boolean
By default, drags can only be initiated if the mousedown occurs in the region the linked element is. This is done in...
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.
DragDrop
id : String
The id of the element associated with this object. This is what we refer to as the "linked element" because the size...
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.
DragDrop
ignoreSelf : Boolean
Set to false to enable a DragDrop object to fire drag events while dragging over its own Element. Defaults to true - ...
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.
DragDrop
invalidHandleClasses : Array
An Array of CSS class names for elements to be considered in valid as drag handles.
DragDrop
invalidHandleIds : Object
An object who's property names identify the IDs of elements to be considered invalid as drag handles. A non-null prop...
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
}
DragDrop
invalidHandleTypes : Object
An object who's property names identify HTML tags to be considered invalid as drag handles. A non-null property value...
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"
}
DragDrop
isTarget : boolean
By default, all instances can be a drop target. This can be disabled by setting isTarget to false.
DragDrop
maintainOffset : boolean
Maintain offsets when we resetconstraints. Set to true when you want the position of the element relative to its par...
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
DragDrop
moveOnly : boolean
When set to true, other DD objects in cooperating DDGroups do not receive notification events when this DD object is ...
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.
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
The padding configured for this drag and drop object for calculating the drop zone intersection with this object.
DragDrop
primaryButtonOnly : boolean
By default the drag and drop instance will only respond to the primary button click (left button for a right-handed m...
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
DragDrop
resizeFrame : boolean
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 effe...
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.
DDProxy
scroll : boolean
When set to true, the utility automatically tries to scroll the browser window when a drag and drop element is dragge...
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.
DD
xTicks : int[]
Array of pixel locations the element will snap to if we specified a horizontal graduation/interval. This array is ge...
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.
DragDrop
yTicks : int[]
Array of pixel locations the element will snap to if we specified a vertical graduation/interval. This array is gene...
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.
DragDrop

Public Methods

Method Defined By
DDProxy( String id, String sGroup, object config )
Parameters:
  • id : String
    the id of the linked html element
  • sGroup : String
    the group of related DragDrop objects
  • config : object
    an object containing configurable attributes Valid properties for DDProxy in addition to those in DragDrop: resizeFrame, centerFrame, dragElId
Returns:
  • void
DDProxy
addInvalidHandleClass( string cssClass ) : void
Lets you specify a css class of elements that will not initiate a drag
Lets you specify a css class of elements that will not initiate a drag
Parameters:
  • cssClass : string
    the class of the elements you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleId( string id ) : void
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Parameters:
  • id : string
    the element id of the element you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleType( string tagName ) : void
Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate...
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.
Parameters:
  • tagName : string
    the type of element to exclude
Returns:
  • void
DragDrop
addToGroup( sGroup {string} ) : void
Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belon...
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.
Parameters:
  • {string} : sGroup
    the name of the group
Returns:
  • void
DragDrop
alignElWithMouse( HTMLElement el, int iPageX, int iPageY ) : void
Sets the element to the location of the mousedown or click event, maintaining the cursor location relative to the loc...
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.
Parameters:
  • el : HTMLElement
    the element to move
  • iPageX : int
    the X coordinate of the mousedown or drag event
  • iPageY : int
    the Y coordinate of the mousedown or drag event
Returns:
  • void
DD
applyConfig() : void
Sets up config options specific to this class. Overrides Ext.dd.DragDrop, but all versions of this method through the...
Sets up config options specific to this class. Overrides Ext.dd.DragDrop, but all versions of this method through the inheritance chain are called
Parameters:
  • None.
Returns:
  • void
DD
autoOffset( int iPageX, int iPageY ) : void
Sets the pointer offset to the distance between the linked element's top left corner and the location the element was...
Sets the pointer offset to the distance between the linked element's top left corner and the location the element was clicked
Parameters:
  • iPageX : int
    the X coordinate of the click
  • iPageY : int
    the Y coordinate of the click
Returns:
  • void
DD
b4Drag() : void
Event that fires prior to the onDrag event. Overrides Ext.dd.DragDrop.
Event that fires prior to the onDrag event. Overrides Ext.dd.DragDrop.
Parameters:
  • None.
Returns:
  • void
DD
b4MouseDown() : void
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.
Parameters:
  • None.
Returns:
  • void
DD
cachePosition( iPageX the, iPageY the ) : void
Saves the most recent position so that we can reset the constraints and tick marks on-demand. We need to know this s...
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.
Parameters:
  • the : iPageX
    current x position (optional, this just makes it so we don't have to look it up again)
  • the : iPageY
    current y position (optional, this just makes it so we don't have to look it up again)
Returns:
  • void
DD
clearConstraints() : void
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constrain...
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constraint at this time.
Parameters:
  • None.
Returns:
  • void
DragDrop
clearTicks() : void
Clears any tick interval defined for this instance
Clears any tick interval defined for this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
constrainTo( Mixed constrainTo, [Object/Number pad], [Boolean inContent] ) : void
Initializes the drag drop object's constraints to restrict movement to a certain element. Usage: var dd = new Ext.dd...
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 Ext.Element object:
Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
Parameters:
  • constrainTo : Mixed
    The element to constrain to.
  • pad : Object/Number
    (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}
  • inContent : Boolean
    (optional) Constrain the draggable in the content box of the element (inside padding and borders)
Returns:
  • void
DragDrop
createFrame() : void
Creates the proxy element if it does not yet exist
Creates the proxy element if it does not yet exist
Parameters:
  • None.
Returns:
  • void
DDProxy
endDrag( Event e ) : void
Fired when we are done dragging the object
Fired when we are done dragging the object
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
getDragEl() : HTMLElement
Returns a reference to the actual element to drag. By default this is the same as the html element, but it can be as...
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
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
getEl() : HTMLElement
Returns a reference to the linked element
Returns a reference to the linked element
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
init( id the, String sGroup, object config ) : void
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • void
DragDrop
initFrame() : void
Initialization for the drag frame element. Must be called in the constructor of all subclasses
Initialization for the drag frame element. Must be called in the constructor of all subclasses
Parameters:
  • None.
Returns:
  • 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.
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • void
DragDrop
isLocked() : boolean
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on th...
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on the page.)
Parameters:
  • None.
Returns:
  • boolean
    true if this obj or all drag/drop is locked, else false
DragDrop
isValidHandleChild( HTMLElement node ) : boolean
Checks the tag exclusion list to see if this click should be ignored
Checks the tag exclusion list to see if this click should be ignored
Parameters:
  • node : HTMLElement
    the HTMLElement to evaluate
Returns:
  • boolean
    true if this is a valid tag type, false if not
DragDrop
lock() : void
Lock this instance
Lock this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
onAvailable() : void
Override the onAvailable method to do what is needed after the initial position was determined.
Override the onAvailable method to do what is needed after the initial position was determined.
Parameters:
  • None.
Returns:
  • void
DragDrop
onDrag( Event e ) : void
Abstract method called during the onMouseMove event while dragging an object.
Abstract method called during the onMouseMove event while dragging an object.
Parameters:
  • e : Event
    the mousemove event
Returns:
  • void
DragDrop
onDragDrop( Event e, String|DragDrop[] id ) : void
Abstract method called when this item is dropped on another DragDrop obj
Abstract method called when this item is dropped on another DragDrop obj
Parameters:
  • e : Event
    the mouseup event
  • id : String|DragDrop[]
    In POINT mode, the element id this was dropped on. In INTERSECT mode, an array of dd items this was dropped on.
Returns:
  • void
DragDrop
onDragEnter( Event e, String|DragDrop[] id ) : void
Abstract method called when this element fist begins hovering over another DragDrop obj
Abstract method called when this element fist begins hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of one or more dragdrop items being hovered over.
Returns:
  • void
DragDrop
onDragOut( Event e, String|DragDrop[] id ) : void
Abstract method called when we are no longer hovering over an element
Abstract method called when we are no longer hovering over an element
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    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.
Returns:
  • void
DragDrop
onDragOver( Event e, String|DragDrop[] id ) : void
Abstract method called when this element is hovering over another DragDrop obj
Abstract method called when this element is hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of dd items being hovered over.
Returns:
  • void
DragDrop
onInvalidDrop( Event e ) : void
Abstract method called when this item is dropped on an area with no drop target
Abstract method called when this item is dropped on an area with no drop target
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
onMouseDown( Event e ) : void
Event handler that fires when a drag/drop obj gets a mousedown
Event handler that fires when a drag/drop obj gets a mousedown
Parameters:
  • e : Event
    the mousedown event
Returns:
  • void
DragDrop
onMouseUp( Event e ) : void
Event handler that fires when a drag/drop obj gets a mouseup
Event handler that fires when a drag/drop obj gets a mouseup
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
removeFromGroup( string sGroup ) : void
Remove's this instance from the supplied interaction group
Remove's this instance from the supplied interaction group
Parameters:
  • sGroup : string
    The group to drop
Returns:
  • void
DragDrop
removeInvalidHandleClass( string cssClass ) : void
Unsets an invalid css class
Unsets an invalid css class
Parameters:
  • cssClass : string
    the class of the element(s) you wish to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleId( string id ) : void
Unsets an invalid handle id
Unsets an invalid handle id
Parameters:
  • id : string
    the id of the element to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleType( string tagName ) : void
Unsets an excluded tag name set by addInvalidHandleType
Unsets an excluded tag name set by addInvalidHandleType
Parameters:
  • tagName : string
    the type of element to unexclude
Returns:
  • void
DragDrop
resetConstraints( boolean maintainOffset ) : void
resetConstraints must be called if you manually reposition a dd element.
resetConstraints must be called if you manually reposition a dd element.
Parameters:
  • maintainOffset : boolean
Returns:
  • void
DragDrop
setDelta( int iDeltaX, int iDeltaY ) : void
Sets the pointer offset. You can call this directly to force the offset to be in a particular location (e.g., pass i...
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)
Parameters:
  • iDeltaX : int
    the distance from the left
  • iDeltaY : int
    the distance from the top
Returns:
  • void
DD
setDragElId( id {string} ) : void
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setDragElPos( int iPageX, int iPageY ) : void
Sets the drag element to the location of the mousedown or click event, maintaining the cursor location relative to th...
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.
Parameters:
  • iPageX : int
    the X coordinate of the mousedown or drag event
  • iPageY : int
    the Y coordinate of the mousedown or drag event
Returns:
  • void
DD
setHandleElId( id {string} ) : void
Allows you to specify a child of the linked element that should be used to initiate the drag operation. An example o...
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.
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag.
Returns:
  • void
DragDrop
setInitPosition( int diffX, int diffY ) : void
Stores the initial placement of the linked element.
Stores the initial placement of the linked element.
Parameters:
  • diffX : int
    the X offset, default 0
  • diffY : int
    the Y offset, default 0
Returns:
  • void
DragDrop
setOuterHandleElId( id the ) : void
Allows you to set an element outside of the linked element as a drag handle
Allows you to set an element outside of the linked element as a drag handle
Parameters:
  • the : id
    id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setPadding( int iTop, int iRight, int iBot, int iLeft ) : void
Configures the padding for the target zone in px. Effectively expands (or reduces) the virtual object size for targe...
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.
Parameters:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
Returns:
  • void
DragDrop
setXConstraint( int iLeft, int iRight, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Use this method to limit the horizontal travel of th...
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.
Parameters:
  • iLeft : int
    the number of pixels the element can move to the left
  • iRight : int
    the number of pixels the element can move to the right
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
setYConstraint( int iUp, int iDown, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Set this to limit the vertical travel of the element...
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.
Parameters:
  • iUp : int
    the number of pixels the element can move up
  • iDown : int
    the number of pixels the element can move down
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
startDrag( int X, int Y ) : void
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Parameters:
  • X : int
    click location
  • Y : int
    click location
Returns:
  • void
DragDrop
toString() : string
toString method
toString method
Parameters:
  • None.
Returns:
  • string
    string representation of the dd obj
DragDrop
unlock() : void
Unlock this instace
Unlock this instace
Parameters:
  • None.
Returns:
  • void
DragDrop
unreg() : void
Remove all drag and drop hooks for this element
Remove all drag and drop hooks for this element
Parameters:
  • None.
Returns:
  • void
DragDrop

Public Events

This class has no public events.


DragDrop
    DDTarget

Class Ext.dd.DDTarget

Package: | Ext.dd
Defined In: | DDCore.js
Class: | DDTarget
Subclasses: | DropTarget
Extends: | DragDrop
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.

Public Properties

Property Defined By
Only : Object
The drag and drop utility provides a framework for building drag and drop applications. In addition to enabling drag...
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.
DragDrop
available : boolean
The availabe property is false until the linked dom element is accessible.
DragDrop
config : object
Configuration attributes passed into the constructor
DragDrop
defaultPadding : Object
Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
The group defines a logical collection of DragDrop objects that are related. Instances only get events when interact...
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.
DragDrop
hasOuterHandles : boolean
By default, drags can only be initiated if the mousedown occurs in the region the linked element is. This is done in...
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.
DragDrop
id : String
The id of the element associated with this object. This is what we refer to as the "linked element" because the size...
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.
DragDrop
ignoreSelf : Boolean
Set to false to enable a DragDrop object to fire drag events while dragging over its own Element. Defaults to true - ...
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.
DragDrop
invalidHandleClasses : Array
An Array of CSS class names for elements to be considered in valid as drag handles.
DragDrop
invalidHandleIds : Object
An object who's property names identify the IDs of elements to be considered invalid as drag handles. A non-null prop...
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
}
DragDrop
invalidHandleTypes : Object
An object who's property names identify HTML tags to be considered invalid as drag handles. A non-null property value...
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"
}
DragDrop
isTarget : boolean
By default, all instances can be a drop target. This can be disabled by setting isTarget to false.
DragDrop
maintainOffset : boolean
Maintain offsets when we resetconstraints. Set to true when you want the position of the element relative to its par...
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
DragDrop
moveOnly : boolean
When set to true, other DD objects in cooperating DDGroups do not receive notification events when this DD object is ...
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.
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
The padding configured for this drag and drop object for calculating the drop zone intersection with this object.
DragDrop
primaryButtonOnly : boolean
By default the drag and drop instance will only respond to the primary button click (left button for a right-handed m...
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
DragDrop
xTicks : int[]
Array of pixel locations the element will snap to if we specified a horizontal graduation/interval. This array is ge...
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.
DragDrop
yTicks : int[]
Array of pixel locations the element will snap to if we specified a vertical graduation/interval. This array is gene...
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.
DragDrop

Public Methods

Method Defined By
DDTarget( String id, String sGroup, object config )
Parameters:
  • id : String
    the id of the element that is a drop target
  • sGroup : String
    the group of related DragDrop objects
  • config : object
    an object containing configurable attributes Valid properties for DDTarget in addition to those in DragDrop: none
Returns:
  • void
DDTarget
addInvalidHandleClass( string cssClass ) : void
Lets you specify a css class of elements that will not initiate a drag
Lets you specify a css class of elements that will not initiate a drag
Parameters:
  • cssClass : string
    the class of the elements you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleId( string id ) : void
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Parameters:
  • id : string
    the element id of the element you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleType( string tagName ) : void
Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate...
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.
Parameters:
  • tagName : string
    the type of element to exclude
Returns:
  • void
DragDrop
addToGroup( sGroup {string} ) : void
Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belon...
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.
Parameters:
  • {string} : sGroup
    the name of the group
Returns:
  • void
DragDrop
applyConfig() : void
Applies the configuration parameters that were passed into the constructor. This is supposed to happen at each level ...
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.
Parameters:
  • None.
Returns:
  • void
DragDrop
clearConstraints() : void
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constrain...
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constraint at this time.
Parameters:
  • None.
Returns:
  • void
DragDrop
clearTicks() : void
Clears any tick interval defined for this instance
Clears any tick interval defined for this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
constrainTo( Mixed constrainTo, [Object/Number pad], [Boolean inContent] ) : void
Initializes the drag drop object's constraints to restrict movement to a certain element. Usage: var dd = new Ext.dd...
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 Ext.Element object:
Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
Parameters:
  • constrainTo : Mixed
    The element to constrain to.
  • pad : Object/Number
    (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}
  • inContent : Boolean
    (optional) Constrain the draggable in the content box of the element (inside padding and borders)
Returns:
  • void
DragDrop
endDrag( Event e ) : void
Fired when we are done dragging the object
Fired when we are done dragging the object
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
getDragEl() : HTMLElement
Returns a reference to the actual element to drag. By default this is the same as the html element, but it can be as...
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
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
getEl() : HTMLElement
Returns a reference to the linked element
Returns a reference to the linked element
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
init( id the, String sGroup, object config ) : void
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • 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.
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • void
DragDrop
isLocked() : boolean
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on th...
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on the page.)
Parameters:
  • None.
Returns:
  • boolean
    true if this obj or all drag/drop is locked, else false
DragDrop
isValidHandleChild( HTMLElement node ) : boolean
Checks the tag exclusion list to see if this click should be ignored
Checks the tag exclusion list to see if this click should be ignored
Parameters:
  • node : HTMLElement
    the HTMLElement to evaluate
Returns:
  • boolean
    true if this is a valid tag type, false if not
DragDrop
lock() : void
Lock this instance
Lock this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
onAvailable() : void
Override the onAvailable method to do what is needed after the initial position was determined.
Override the onAvailable method to do what is needed after the initial position was determined.
Parameters:
  • None.
Returns:
  • void
DragDrop
onDrag( Event e ) : void
Abstract method called during the onMouseMove event while dragging an object.
Abstract method called during the onMouseMove event while dragging an object.
Parameters:
  • e : Event
    the mousemove event
Returns:
  • void
DragDrop
onDragDrop( Event e, String|DragDrop[] id ) : void
Abstract method called when this item is dropped on another DragDrop obj
Abstract method called when this item is dropped on another DragDrop obj
Parameters:
  • e : Event
    the mouseup event
  • id : String|DragDrop[]
    In POINT mode, the element id this was dropped on. In INTERSECT mode, an array of dd items this was dropped on.
Returns:
  • void
DragDrop
onDragEnter( Event e, String|DragDrop[] id ) : void
Abstract method called when this element fist begins hovering over another DragDrop obj
Abstract method called when this element fist begins hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of one or more dragdrop items being hovered over.
Returns:
  • void
DragDrop
onDragOut( Event e, String|DragDrop[] id ) : void
Abstract method called when we are no longer hovering over an element
Abstract method called when we are no longer hovering over an element
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    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.
Returns:
  • void
DragDrop
onDragOver( Event e, String|DragDrop[] id ) : void
Abstract method called when this element is hovering over another DragDrop obj
Abstract method called when this element is hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of dd items being hovered over.
Returns:
  • void
DragDrop
onInvalidDrop( Event e ) : void
Abstract method called when this item is dropped on an area with no drop target
Abstract method called when this item is dropped on an area with no drop target
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
onMouseDown( Event e ) : void
Event handler that fires when a drag/drop obj gets a mousedown
Event handler that fires when a drag/drop obj gets a mousedown
Parameters:
  • e : Event
    the mousedown event
Returns:
  • void
DragDrop
onMouseUp( Event e ) : void
Event handler that fires when a drag/drop obj gets a mouseup
Event handler that fires when a drag/drop obj gets a mouseup
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
removeFromGroup( string sGroup ) : void
Remove's this instance from the supplied interaction group
Remove's this instance from the supplied interaction group
Parameters:
  • sGroup : string
    The group to drop
Returns:
  • void
DragDrop
removeInvalidHandleClass( string cssClass ) : void
Unsets an invalid css class
Unsets an invalid css class
Parameters:
  • cssClass : string
    the class of the element(s) you wish to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleId( string id ) : void
Unsets an invalid handle id
Unsets an invalid handle id
Parameters:
  • id : string
    the id of the element to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleType( string tagName ) : void
Unsets an excluded tag name set by addInvalidHandleType
Unsets an excluded tag name set by addInvalidHandleType
Parameters:
  • tagName : string
    the type of element to unexclude
Returns:
  • void
DragDrop
resetConstraints( boolean maintainOffset ) : void
resetConstraints must be called if you manually reposition a dd element.
resetConstraints must be called if you manually reposition a dd element.
Parameters:
  • maintainOffset : boolean
Returns:
  • void
DragDrop
setDragElId( id {string} ) : void
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setHandleElId( id {string} ) : void
Allows you to specify a child of the linked element that should be used to initiate the drag operation. An example o...
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.
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag.
Returns:
  • void
DragDrop
setInitPosition( int diffX, int diffY ) : void
Stores the initial placement of the linked element.
Stores the initial placement of the linked element.
Parameters:
  • diffX : int
    the X offset, default 0
  • diffY : int
    the Y offset, default 0
Returns:
  • void
DragDrop
setOuterHandleElId( id the ) : void
Allows you to set an element outside of the linked element as a drag handle
Allows you to set an element outside of the linked element as a drag handle
Parameters:
  • the : id
    id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setPadding( int iTop, int iRight, int iBot, int iLeft ) : void
Configures the padding for the target zone in px. Effectively expands (or reduces) the virtual object size for targe...
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.
Parameters:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
Returns:
  • void
DragDrop
setXConstraint( int iLeft, int iRight, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Use this method to limit the horizontal travel of th...
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.
Parameters:
  • iLeft : int
    the number of pixels the element can move to the left
  • iRight : int
    the number of pixels the element can move to the right
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
setYConstraint( int iUp, int iDown, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Set this to limit the vertical travel of the element...
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.
Parameters:
  • iUp : int
    the number of pixels the element can move up
  • iDown : int
    the number of pixels the element can move down
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
startDrag( int X, int Y ) : void
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Parameters:
  • X : int
    click location
  • Y : int
    click location
Returns:
  • void
DragDrop
toString() : string
toString method
toString method
Parameters:
  • None.
Returns:
  • string
    string representation of the dd obj
DragDrop
unlock() : void
Unlock this instace
Unlock this instace
Parameters:
  • None.
Returns:
  • void
DragDrop
unreg() : void
Remove all drag and drop hooks for this element
Remove all drag and drop hooks for this element
Parameters:
  • None.
Returns:
  • void
DragDrop

Public Events

This class has no public events.


Class Ext.dd.DragDrop

Package: | Ext.dd
Defined In: | DDCore.js
Class: | DragDrop
Subclasses: | DD, DDTarget
Extends: | Object
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 Ext.dd.DD. setDragElId() lets you define a separate element that would be moved, as in 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);
}

Public Properties

Property Defined By
Only : Object
The drag and drop utility provides a framework for building drag and drop applications. In addition to enabling drag...
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.
DragDrop
available : boolean
The availabe property is false until the linked dom element is accessible.
DragDrop
config : object
Configuration attributes passed into the constructor
DragDrop
defaultPadding : Object
Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
DragDrop
groups : object An object in the format {'group1':true, 'group2':true
The group defines a logical collection of DragDrop objects that are related. Instances only get events when interact...
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.
DragDrop
hasOuterHandles : boolean
By default, drags can only be initiated if the mousedown occurs in the region the linked element is. This is done in...
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.
DragDrop
id : String
The id of the element associated with this object. This is what we refer to as the "linked element" because the size...
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.
DragDrop
ignoreSelf : Boolean
Set to false to enable a DragDrop object to fire drag events while dragging over its own Element. Defaults to true - ...
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.
DragDrop
invalidHandleClasses : Array
An Array of CSS class names for elements to be considered in valid as drag handles.
DragDrop
invalidHandleIds : Object
An object who's property names identify the IDs of elements to be considered invalid as drag handles. A non-null prop...
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
}
DragDrop
invalidHandleTypes : Object
An object who's property names identify HTML tags to be considered invalid as drag handles. A non-null property value...
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"
}
DragDrop
isTarget : boolean
By default, all instances can be a drop target. This can be disabled by setting isTarget to false.
DragDrop
maintainOffset : boolean
Maintain offsets when we resetconstraints. Set to true when you want the position of the element relative to its par...
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
DragDrop
moveOnly : boolean
When set to true, other DD objects in cooperating DDGroups do not receive notification events when this DD object is ...
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.
DragDrop
padding : int[] An array containing the 4 padding values: [top, right, bottom, left]
The padding configured for this drag and drop object for calculating the drop zone intersection with this object.
DragDrop
primaryButtonOnly : boolean
By default the drag and drop instance will only respond to the primary button click (left button for a right-handed m...
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
DragDrop
xTicks : int[]
Array of pixel locations the element will snap to if we specified a horizontal graduation/interval. This array is ge...
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.
DragDrop
yTicks : int[]
Array of pixel locations the element will snap to if we specified a vertical graduation/interval. This array is gene...
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.
DragDrop

Public Methods

Method Defined By
DragDrop( String id, String sGroup, object config )
Parameters:
  • id : String
    of the element that is linked to this instance
  • sGroup : String
    the group of related DragDrop objects
  • config : object
    an object containing configurable attributes Valid properties for DragDrop: padding, isTarget, maintainOffset, primaryButtonOnly
Returns:
  • void
DragDrop
addInvalidHandleClass( string cssClass ) : void
Lets you specify a css class of elements that will not initiate a drag
Lets you specify a css class of elements that will not initiate a drag
Parameters:
  • cssClass : string
    the class of the elements you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleId( string id ) : void
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Lets you to specify an element id for a child of a drag handle that should not initiate a drag
Parameters:
  • id : string
    the element id of the element you wish to ignore
Returns:
  • void
DragDrop
addInvalidHandleType( string tagName ) : void
Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate...
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.
Parameters:
  • tagName : string
    the type of element to exclude
Returns:
  • void
DragDrop
addToGroup( sGroup {string} ) : void
Add this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belon...
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.
Parameters:
  • {string} : sGroup
    the name of the group
Returns:
  • void
DragDrop
applyConfig() : void
Applies the configuration parameters that were passed into the constructor. This is supposed to happen at each level ...
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.
Parameters:
  • None.
Returns:
  • void
DragDrop
clearConstraints() : void
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constrain...
Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constraint at this time.
Parameters:
  • None.
Returns:
  • void
DragDrop
clearTicks() : void
Clears any tick interval defined for this instance
Clears any tick interval defined for this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
constrainTo( Mixed constrainTo, [Object/Number pad], [Boolean inContent] ) : void
Initializes the drag drop object's constraints to restrict movement to a certain element. Usage: var dd = new Ext.dd...
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 Ext.Element object:
Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
     startDrag : function(){
         this.constrainTo("parent-id");
     }
 });
Parameters:
  • constrainTo : Mixed
    The element to constrain to.
  • pad : Object/Number
    (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}
  • inContent : Boolean
    (optional) Constrain the draggable in the content box of the element (inside padding and borders)
Returns:
  • void
DragDrop
endDrag( Event e ) : void
Fired when we are done dragging the object
Fired when we are done dragging the object
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
getDragEl() : HTMLElement
Returns a reference to the actual element to drag. By default this is the same as the html element, but it can be as...
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
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
getEl() : HTMLElement
Returns a reference to the linked element
Returns a reference to the linked element
Parameters:
  • None.
Returns:
  • HTMLElement
    the html element
DragDrop
init( id the, String sGroup, object config ) : void
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • 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.
Parameters:
  • the : id
    id of the linked element
  • sGroup : String
    the group of related items
  • config : object
    configuration attributes
Returns:
  • void
DragDrop
isLocked() : boolean
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on th...
Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on the page.)
Parameters:
  • None.
Returns:
  • boolean
    true if this obj or all drag/drop is locked, else false
DragDrop
isValidHandleChild( HTMLElement node ) : boolean
Checks the tag exclusion list to see if this click should be ignored
Checks the tag exclusion list to see if this click should be ignored
Parameters:
  • node : HTMLElement
    the HTMLElement to evaluate
Returns:
  • boolean
    true if this is a valid tag type, false if not
DragDrop
lock() : void
Lock this instance
Lock this instance
Parameters:
  • None.
Returns:
  • void
DragDrop
onAvailable() : void
Override the onAvailable method to do what is needed after the initial position was determined.
Override the onAvailable method to do what is needed after the initial position was determined.
Parameters:
  • None.
Returns:
  • void
DragDrop
onDrag( Event e ) : void
Abstract method called during the onMouseMove event while dragging an object.
Abstract method called during the onMouseMove event while dragging an object.
Parameters:
  • e : Event
    the mousemove event
Returns:
  • void
DragDrop
onDragDrop( Event e, String|DragDrop[] id ) : void
Abstract method called when this item is dropped on another DragDrop obj
Abstract method called when this item is dropped on another DragDrop obj
Parameters:
  • e : Event
    the mouseup event
  • id : String|DragDrop[]
    In POINT mode, the element id this was dropped on. In INTERSECT mode, an array of dd items this was dropped on.
Returns:
  • void
DragDrop
onDragEnter( Event e, String|DragDrop[] id ) : void
Abstract method called when this element fist begins hovering over another DragDrop obj
Abstract method called when this element fist begins hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of one or more dragdrop items being hovered over.
Returns:
  • void
DragDrop
onDragOut( Event e, String|DragDrop[] id ) : void
Abstract method called when we are no longer hovering over an element
Abstract method called when we are no longer hovering over an element
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    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.
Returns:
  • void
DragDrop
onDragOver( Event e, String|DragDrop[] id ) : void
Abstract method called when this element is hovering over another DragDrop obj
Abstract method called when this element is hovering over another DragDrop obj
Parameters:
  • e : Event
    the mousemove event
  • id : String|DragDrop[]
    In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of dd items being hovered over.
Returns:
  • void
DragDrop
onInvalidDrop( Event e ) : void
Abstract method called when this item is dropped on an area with no drop target
Abstract method called when this item is dropped on an area with no drop target
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
onMouseDown( Event e ) : void
Event handler that fires when a drag/drop obj gets a mousedown
Event handler that fires when a drag/drop obj gets a mousedown
Parameters:
  • e : Event
    the mousedown event
Returns:
  • void
DragDrop
onMouseUp( Event e ) : void
Event handler that fires when a drag/drop obj gets a mouseup
Event handler that fires when a drag/drop obj gets a mouseup
Parameters:
  • e : Event
    the mouseup event
Returns:
  • void
DragDrop
removeFromGroup( string sGroup ) : void
Remove's this instance from the supplied interaction group
Remove's this instance from the supplied interaction group
Parameters:
  • sGroup : string
    The group to drop
Returns:
  • void
DragDrop
removeInvalidHandleClass( string cssClass ) : void
Unsets an invalid css class
Unsets an invalid css class
Parameters:
  • cssClass : string
    the class of the element(s) you wish to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleId( string id ) : void
Unsets an invalid handle id
Unsets an invalid handle id
Parameters:
  • id : string
    the id of the element to re-enable
Returns:
  • void
DragDrop
removeInvalidHandleType( string tagName ) : void
Unsets an excluded tag name set by addInvalidHandleType
Unsets an excluded tag name set by addInvalidHandleType
Parameters:
  • tagName : string
    the type of element to unexclude
Returns:
  • void
DragDrop
resetConstraints( boolean maintainOffset ) : void
resetConstraints must be called if you manually reposition a dd element.
resetConstraints must be called if you manually reposition a dd element.
Parameters:
  • maintainOffset : boolean
Returns:
  • void
DragDrop
setDragElId( id {string} ) : void
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Allows you to specify that an element other than the linked element will be moved with the cursor during a drag
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setHandleElId( id {string} ) : void
Allows you to specify a child of the linked element that should be used to initiate the drag operation. An example o...
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.
Parameters:
  • {string} : id
    the id of the element that will be used to initiate the drag.
Returns:
  • void
DragDrop
setInitPosition( int diffX, int diffY ) : void
Stores the initial placement of the linked element.
Stores the initial placement of the linked element.
Parameters:
  • diffX : int
    the X offset, default 0
  • diffY : int
    the Y offset, default 0
Returns:
  • void
DragDrop
setOuterHandleElId( id the ) : void
Allows you to set an element outside of the linked element as a drag handle
Allows you to set an element outside of the linked element as a drag handle
Parameters:
  • the : id
    id of the element that will be used to initiate the drag
Returns:
  • void
DragDrop
setPadding( int iTop, int iRight, int iBot, int iLeft ) : void
Configures the padding for the target zone in px. Effectively expands (or reduces) the virtual object size for targe...
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.
Parameters:
  • iTop : int
    Top pad
  • iRight : int
    Right pad
  • iBot : int
    Bot pad
  • iLeft : int
    Left pad
Returns:
  • void
DragDrop
setXConstraint( int iLeft, int iRight, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Use this method to limit the horizontal travel of th...
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.
Parameters:
  • iLeft : int
    the number of pixels the element can move to the left
  • iRight : int
    the number of pixels the element can move to the right
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
setYConstraint( int iUp, int iDown, int iTickSize ) : void
By default, the element can be dragged any place on the screen. Set this to limit the vertical travel of the element...
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.
Parameters:
  • iUp : int
    the number of pixels the element can move up
  • iDown : int
    the number of pixels the element can move down
  • iTickSize : int
    optional parameter for specifying that the element should move iTickSize pixels at a time.
Returns:
  • void
DragDrop
startDrag( int X, int Y ) : void
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.
Parameters:
  • X : int
    click location
  • Y : int
    click location
Returns:
  • void
DragDrop
toString() : string
toString method
toString method
Parameters:
  • None.
Returns:
  • string
    string representation of the dd obj
DragDrop
unlock() : void
Unlock this instace
Unlock this instace
Parameters:
  • None.
Returns:
  • void
DragDrop
unreg() : void
Remove all drag and drop hooks for this element
Remove all drag and drop hooks for this element
Parameters:
  • None.
Returns:
  • void
DragDrop

Public Events

This class has no public events.


Class Ext.dd.DragDropMgr

Package: | Ext.dd
Defined In: | DDCore.js
Class: | DragDropMgr
Extends: | Object
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.

This class is a singleton and cannot be created directly.

Public Properties

Property |  | Defined By
 | INTERSECT : int In intersect mode, drag and drop interaction is defined by the overlap of two or more drag and drop objects. | DragDropMgr
 | POINT : int In point mode, drag and drop interaction is defined by the location of the cursor during the drag/drop | DragDropMgr
 | clickPixelThresh : int The number of pixels that the mouse needs to move after the mousedown before the drag is initiated. Default=3; | DragDropMgr
 | clickTimeThresh : int The number of milliseconds after the mousedown event to initiate the drag if we don't get a mouseup event. Default=10... The number of milliseconds after the mousedown event to initiate the drag if we don't get a mouseup event. Default=1000 | DragDropMgr
 | mode : int The current drag and drop mode. Default: POINT | DragDropMgr
 | preventDefault : boolean Flag to determine if we should prevent the default behavior of the events we define. By default this is true, but thi... 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) | DragDropMgr
 | stopPropagation : boolean Flag to determine if we should stop the propagation of the events we generate. This is true by default but you may wa... 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. | DragDropMgr
 | useCache : boolean Set useCache to false if you want to force object the lookup of each drag and drop linked element constantly during a... Set useCache to false if you want to force object the lookup of each drag and drop linked element constantly during a drag. | DragDropMgr

Public Methods

Method Defined By
getBestMatch( DragDrop[] dds ) : DragDrop
<static> Helper function for getting the best match from the list of drag and drop objects returned by the drag and drop event...
<static> 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.
Parameters:
  • dds : DragDrop[]
    The array of drag and drop objects targeted
Returns:
  • DragDrop
    The best single match
DragDropMgr
getCss( String id ) : Object
<static> Returns the style property for the DOM element (i.e., document.getElById(id).style)
<static> Returns the style property for the DOM element (i.e., document.getElById(id).style)
Parameters:
  • id : String
    the id of the elment to get
Returns:
  • Object
    The style property of the element
DragDropMgr
getDDById( String id ) : DragDrop
<static> Returns the DragDrop instance for a given id
<static> Returns the DragDrop instance for a given id
Parameters:
  • id : String
    the id of the DragDrop object
Returns:
  • DragDrop
    the drag drop object, null if it is not found
DragDropMgr
getElement( String id ) : Object
<static> Returns the actual DOM element
<static> Returns the actual DOM element
Parameters:
  • id : String
    the id of the elment to get
Returns:
  • Object
    The element
DragDropMgr
getLocation( DragDrop oDD ) : Ext.lib.Region
<static> Returns a Region object containing the drag and drop element's position and size, including the padding configured fo...
<static> Returns a Region object containing the drag and drop element's position and size, including the padding configured for it
Parameters:
  • oDD : DragDrop
    the drag and drop object to get the location for
Returns:
  • Ext.lib.Region
    a Region object representing the total area the element occupies, including any padding the instance is configured for.
DragDropMgr
getRelated( DragDrop p_oDD, boolean bTargetsOnly ) : DragDrop[]
<static> Returns the drag and drop instances that are in all groups the passed in instance belongs to.
<static> Returns the drag and drop instances that are in all groups the passed in instance belongs to.
Parameters:
  • p_oDD : DragDrop
    the obj to get related data for
  • bTargetsOnly : boolean
    if true, only return targetable objs
Returns:
  • DragDrop[]
    the related instances
DragDropMgr
isDragDrop( String id ) : boolean
<static> Utility function to determine if a given element has been registered as a drag drop item.
<static> Utility function to determine if a given element has been registered as a drag drop item.
Parameters:
  • id : String
    the element id to check
Returns:
  • boolean
    true if this element is a DragDrop item, false otherwise
DragDropMgr
isHandle( String id ) : boolean
<static> Utility function to determine if a given element has been registered as a drag drop handle for the given Drag Drop ob...
<static> Utility function to determine if a given element has been registered as a drag drop handle for the given Drag Drop object.
Parameters:
  • id : String
    the element id to check
Returns:
  • boolean
    true if this element is a DragDrop handle, false otherwise
DragDropMgr
isLegalTarget( DragDrop the, DragDrop the ) : boolean
<static> Returns true if the specified dd target is a legal target for the specifice drag obj
<static> Returns true if the specified dd target is a legal target for the specifice drag obj
Parameters:
  • the : DragDrop
    drag obj
  • the : DragDrop
    target
Returns:
  • boolean
    true if the target is a legal target for the dd obj
DragDropMgr
isLocked() : boolean
<static> Is drag and drop locked?
<static> Is drag and drop locked?
Parameters:
  • None.
Returns:
  • boolean
    True if drag and drop is locked, false otherwise.
DragDropMgr
isTypeOfDD( Object the ) : boolean
<static> My goal is to be able to transparently determine if an object is typeof DragDrop, and the exact subclass of DragDrop....
<static> 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.
Parameters:
  • the : Object
    object to evaluate
Returns:
  • boolean
    true if typeof oDD = DragDrop
DragDropMgr
lock() : void
<static> Lock all drag and drop functionality
<static> Lock all drag and drop functionality
Parameters:
  • None.
Returns:
  • void
DragDropMgr
refreshCache( Object groups ) : void
<static> Refreshes the cache of the top-left and bottom-right points of the drag and drop objects in the specified group(s). ...
<static> 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});
Parameters:
  • groups : Object
    an associative array of groups to refresh
Returns:
  • void
DragDropMgr
regDragDrop( DragDrop oDD, String sGroup ) : void
<static> Each DragDrop instance must be registered with the DragDropMgr. This is executed in DragDrop.init()
<static> Each DragDrop instance must be registered with the DragDropMgr. This is executed in DragDrop.init()
Parameters:
  • oDD : DragDrop
    the DragDrop object to register
  • sGroup : String
    the name of the group this element belongs to
Returns:
  • void
DragDropMgr
regHandle( String sDDId, String sHandleId ) : void
<static> Each DragDrop handle element must be registered. This is done automatically when executing DragDrop.setHandleElId()
<static> Each DragDrop handle element must be registered. This is done automatically when executing DragDrop.setHandleElId()
Parameters:
  • sDDId : String
    the DragDrop id this element is a handle for
  • sHandleId : String
    the id of the element that is the drag handle
Returns:
  • void
DragDropMgr
startDrag( x {int}, y {int} ) : void
<static> Fired when either the drag pixel threshol or the mousedown hold time threshold has been met.
<static> Fired when either the drag pixel threshol or the mousedown hold time threshold has been met.
Parameters:
  • {int} : x
    the X position of the original mousedown
  • {int} : y
    the Y position of the original mousedown
Returns:
  • void
DragDropMgr
stopEvent( Event e ) : void
<static> Utility to stop event propagation and event default, if these features are turned on.
<static> Utility to stop event propagation and event default, if these features are turned on.
Parameters:
  • e : Event
    the event as returned by this.getEvent()
Returns:
  • void
DragDropMgr
unlock() : void
<static> Unlock all drag and drop functionality
<static> Unlock all drag and drop functionality
Parameters:
  • None.
Returns:
  • void
DragDropMgr
verifyEl( HTMLElement el ) : boolean
<static> This checks to make sure an element exists and is in the DOM. The main purpose is to handle cases where innerHTML is...
<static> 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
Parameters:
  • el : HTMLElement
    the element to check
Returns:
  • boolean
    true if the element looks usable
DragDropMgr

Public Events

This class has no public events.


类Ext.dd.DragSource

包： | Extdd
定义的文件： | DragSource.js
类全称： | Ext.dd.DragSource
继承自于： | Ext.dd.DDProxy
一个简单的基础类,该实现使得任何元素变成为拖动,以便让拖动的元素放到其身上。

配置项

配置项 |  | 定义者
 | dropAllowed : String 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 | DragSource
 | dropNotAllowed : String 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-no... 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-nodrop"）。 | DragSource

公告属性

这个类没有公告属性。

公共方法

方法 定义者
DragSource( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DragSource
getDragData() : Object
返回与拖动源关联的数据对象
返回与拖动源关联的数据对象
参数项：
  • None.
返回值：
  • Object
    data 包含自定义数据的对象
DragSource
beforeDragEnter( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。...
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。该动作可被取消onDragEnter。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragOver( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动...
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
cachedTarget( Ext.dd.DragDrop target, Event e, String id )
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • void
DragSource
beforeDragOut( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作...
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
getRepairXY( Object target, Event e, String id )
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Object
    DD目标
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
afterRepair( Event e, String id )
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
beforeInvalidDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    拖动元素的id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
onBeforeDrag( Object data, Event e ) : Boolean
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该...
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • data : Object
    与落下目标共享的自定义数据对象
  • e : Event
    事件对象
返回值：
  • Boolean
    isValid True的话拖动事件有效，否则false取消
DragSource
onStartDrag( Number x, Number y )
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在...
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在该函数中取消拖动。
参数项：
  • x : Number
    在拖动对象身上单击点的x值
  • y : Number
    在拖动对象身上单击点的y值
返回值：
  • void
DragSource
getProxy() : Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • Ext.dd.StatusProxy
    proxy StatusProxy对象
DragSource
hideProxy()
隐藏拖动源的Ext.dd.StatusProxy
隐藏拖动源的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • void
DragSource

公共事件

这个类没有公告事件。


类Ext.dd.DragTracker

包： | Extdd
定义的文件： | DragTracker.js
类全称： | Ext.dd.DragTracker
继承自于： | Object
Ext.dd.DragTracker类

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.dd.DragZone

包： | Extdd
定义的文件： | DragZone.js
类全称： | Ext.dd.DragZone
继承自于： | Ext.dd.DragSource

该类继承了Ext.dd.DragSource，对于多节点的源，该类提供了一个DD实理容器来代理。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 getDragData, or by registered draggables registered with 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 DataView) then use of this class is the most efficient way to "activate" those nodes.

默认情况下，该类要求可拖动的子节点已在Ext.dd.Registry类中全部注册。By default, this class requires that draggable child nodes are registered with 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 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 getTarget method to identify a node based on a 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() {
    myDataView.dragZone = new Ext.dd.DragZone(myDataView.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(myDataView.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: myDataView.store,
                    draggedRecord: v.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 DropZone documentation for details about building a DropZone which cooperates with this DragZone.

配置项

配置项 |  | 定义者
 | containerScroll : Boolean 设为True 用来将此容器在Scrollmanager上注册,使得在拖... 设为True 用来将此容器在Scrollmanager上注册,使得在拖动操作发生时可以自动卷动。True to register this container with the Scrollmanager for auto scrolling during drag operations. | DragZone
 | hlColor : String 第二个参数:hlColor 用于在一次失败的拖动操作后调用afterR... 第二个参数:hlColor 用于在一次失败的拖动操作后调用afterRepair方法会用在此设定的颜色(默认颜色为亮蓝"c3daf9")来标识可见的拽源 The color to use when visually highlighting the drag source in the afterRepair method after a failed drop (defaults to "c3daf9" - light blue) | DragZone
 | dropAllowed : String 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 | DragSource
 | dropNotAllowed : String 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-no... 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-nodrop"）。 | DragSource

公告属性

属性 |  | 定义者
 | dragData: Object This property contains the data r... This property contains the data representing the dragged object. This data is set up by the implementation of the getDragData method. It must contain a ddel property, but can contain any other data according to the application's needs. | DragZone

公共方法

方法 定义者
DragZone( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DragZone
getDragData() : Object
返回与拖动源关联的数据对象
返回与拖动源关联的数据对象
参数项：
  • None.
返回值：
  • Object
    data 包含自定义数据的对象
DragSource
onInitDrag( Number x, Number y ) : Boolean
该方法在拖拽动作开始，初始化代理元素时调用，默认情况下，它克隆了thi...
该方法在拖拽动作开始，初始化代理元素时调用，默认情况下，它克隆了this.dragData.ddel。Called once drag threshold has been reached to initialize the proxy element. By default, it clones the this.dragData.ddel.
参数项：
  • x : Number
    被点击的拖拽对象的X坐标The x position of the click on the dragged object
  • y : Number
    被点击的拖拽对象的y坐标The y position of the click on the dragged object
返回值：
  • Boolean
    该方法返回一个布尔常量,当返回true时,表示继续(保持)拖拽,返回false时,表示取消拖拽true to continue the drag, false to cancel
DragZone
afterRepair( Event e, String id )
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
getRepairXY( Object target, Event e, String id )
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Object
    DD目标
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
DragSource( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DragSource
beforeDragEnter( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。...
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。该动作可被取消onDragEnter。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragOver( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动...
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
cachedTarget( Ext.dd.DragDrop target, Event e, String id )
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • void
DragSource
beforeDragOut( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作...
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeInvalidDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    拖动元素的id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
onBeforeDrag( Object data, Event e ) : Boolean
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该...
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • data : Object
    与落下目标共享的自定义数据对象
  • e : Event
    事件对象
返回值：
  • Boolean
    isValid True的话拖动事件有效，否则false取消
DragSource
onStartDrag( Number x, Number y )
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在...
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在该函数中取消拖动。
参数项：
  • x : Number
    在拖动对象身上单击点的x值
  • y : Number
    在拖动对象身上单击点的y值
返回值：
  • void
DragSource
getProxy() : Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • Ext.dd.StatusProxy
    proxy StatusProxy对象
DragSource
hideProxy()
隐藏拖动源的Ext.dd.StatusProxy
隐藏拖动源的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • void
DragSource

公共事件

这个类没有公告事件。


类Ext.dd.DropTarget

包： | Extdd
定义的文件： | DropTarget.js
类全称： | Ext.dd.DropTarget
继承自于： | Ext.dd.DDTarget.
一个简单的基础类，该实现使得任何元素变成为可落下的目标，以便让拖动的元素放到其身上。落下（drop）过程没有特别效果，除非提供了notifyDrop的实现。

配置项

配置项 |  | 定义者
 | overClass : String 当拖动源到达落下目标上方时的CSS class。 当拖动源到达落下目标上方时的CSS class。 | DropTarget
 | dropAllowed : String 当可以被落下时拖动源的样式（默认为"x-dd-drop-ok"）。 当可以被落下时拖动源的样式（默认为"x-dd-drop-ok"）。 | DropTarget
 | dropNotAllowed : String 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 | DropTarget

公告属性

这个类没有公告属性。

公共方法

方法 定义者
DropTarget( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DropTarget
notifyEnter( Ext.dd.DragSource source, Event e, Object data ) : String
当源Ext.dd.DragSource进入到目标的范围内，它执行通知落...
当源Ext.dd.DragSource进入到目标的范围内，它执行通知落下目标的那个函数。默认的实现是，如存在overClass（或其它）的样式,将其加入到落下元素（drop element），并返回dropAllowed配置的值。如需对落下验证（drop validation）的话可重写该方法。
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。
DropTarget
notifyOver( Ext.dd.DragSource source, Event e, Object data ) : String
当源Ext.dd.DragSource进入到目标的范围内，每一下移动鼠...
当源Ext.dd.DragSource进入到目标的范围内，每一下移动鼠标，它不断执行通知落下目标的那个函数。默认的实现是返回dropAllowed配置值而已
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。
DropTarget
notifyOut( Ext.dd.DragSource dd, Event e, Object data )
. 当源Ext.dd.DragSource移出落下目标的范围后，...
. 当源Ext.dd.DragSource移出落下目标的范围后，它执行通知落下目标的那个函数。默认的实现仅是移除由overClass（或其它）指定的CSS class。
参数项：
  • dd : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • void
DropTarget
notifyDrop( Ext.dd.DragSource source, Event e, Object data ) : Boolean
当源Ext.dd.DragSource在落下目标身上完成落下动作后，它...
当源Ext.dd.DragSource在落下目标身上完成落下动作后，它执行通知落下目标的那个函数。该方法没有默认的实现并返回false，所以你必须提供处理落下事件的实现并返回true，才能修复拖动源没有运行的动作。
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源。
  • e : Event
    事件对象。
  • data : Object
    由拖动源规定格式的数据对象。
返回值：
  • Boolean
    True 有效的落下返回true否则为false。
DropTarget

公共事件

这个类没有公告事件。


类Ext.dd.DropZone

包： | Extdd
定义的文件： | DropZone.js
类全称： | Ext.dd.DropZone
继承自于： | Ext.dd.DropTarget

对于多个子节点的目标，该类提供一个DD实例的容器（扮演代理角色）。This class provides a container DD instance that allows dropping on multiple child target nodes.

默认地，该类需要一个可拖动的子节点，并且需在Ext.dd.Registry登记好的。By default, this class requires that child nodes accepting drop are registered with 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 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 getTarget method to identify a node based on a 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 onNodeEnter, onNodeOver, onNodeOut, 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 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 DragZone documentation for details about building a DragZone which cooperates with this DropZone.

配置项

配置项 |  | 定义者
 | overClass : String 当拖动源到达落下目标上方时的CSS class。 当拖动源到达落下目标上方时的CSS class。 | DropTarget
 | dropAllowed : String 当可以被落下时拖动源的样式（默认为"x-dd-drop-ok"）。 当可以被落下时拖动源的样式（默认为"x-dd-drop-ok"）。 | DropTarget
 | dropNotAllowed : String 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 | DropTarget

公告属性

这个类没有公告属性。

公共方法

方法 定义者
DropZone( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DropZone
getTargetFromEvent( Event e ) : Object
返回一个自定义数据对象，与事件对象的那个DOM节点关联。默认地，该方法...
返回一个自定义数据对象，与事件对象的那个DOM节点关联。默认地，该方法会在事件目标Ext.dd.Registry中查找对象，但是你亦可以根据自身的需求，重写该方法。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 Ext.dd.Registry, although you can override this method to provide your own custom lookup.
参数项：
  • e : Event
    事件对象The event
返回值：
  • Object
    data 自定义数据The custom data
DropZone
onNodeEnter( Object nodeData, Ext.dd.DragSource source, Event e, Object data )
当DropZone确定有一个Ext.dd.DragSource，已经进...
当DropZone确定有一个Ext.dd.DragSource，已经进入一个已登记的落下节点（drop node）的范围内，就会调用。该方法没有默认的实现。如需为某些指定的节点处理，则要重写该方法。Called when the DropZone determines that a Ext.dd.DragSource has entered a drop node that has either been registered or detected by a configured implementation of getTargetFromEvent. This method has no default implementation and should be overridden to provide node-specific processing if necessary.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • void
DropZone
onNodeOver( Object nodeData, Ext.dd.DragSource source, Event e, Object data ) : String
当DropZone确定有一个Ext.dd.DragSource，已经位...
当DropZone确定有一个Ext.dd.DragSource，已经位于一个已登记的落下节点（drop node）的上方时，就会调用。默认的实现是返回this.dropAllowed。因此应该重写它以便提供合适的反馈。Called while the DropZone determines that a Ext.dd.DragSource is over a drop node that has either been registered or detected by a configured implementation of getTargetFromEvent. The default implementation returns this.dropNotAllowed, so it should be overridden to provide the proper feedback.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。The CSS class that communicates the drop status back to the source so that the underlying Ext.dd.StatusProxy can be updated
DropZone
onNodeOut( Object nodeData, Ext.dd.DragSource source, Event e, Object data )
当DropZone确定有一个Ext.dd.DragSource， 已...
当DropZone确定有一个Ext.dd.DragSource， 已经离开一个已登记的落下节点（drop node）的范围内，就会调用。该方法没有默认的实现。如需为某些指定的节点处理，则要重写该方法。Called when the DropZone determines that a 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.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • void
DropZone
onNodeDrop( Object nodeData, Ext.dd.DragSource source, Event e, Object data ) : Boolean
当DropZone确定有一个Ext.dd.DragSource， 已...
当DropZone确定有一个Ext.dd.DragSource， 已经在一个已登记的落下节点（drop node）落下的时候，就会调用。默认的方法返回false，应提供一个合适的实现来处理落下的事件，重写该方法， 并返回true值，说明拖放行为有效，拖动源的修复动作便不会进行。Called when the DropZone determines that a 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.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • Boolean
    有效的落下返回true否则为falseTrue if the drop was valid, else false
DropZone
onContainerOver( Ext.dd.DragSource source, Event e, Object data ) : String
当DrapZone发现有一个Ext.dd.DragSource正处于其...
当DrapZone发现有一个Ext.dd.DragSource正处于其上方时，但是没有放下任何落下的节点时调用。默认的实现是返回this.dropNotAllowed，如需提供一些合适的反馈，应重写该函数。Called while the DropZone determines that a 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.
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • String
    status 由落下状态反馈到源的CSS class，使得所在的Ext.dd.StatusProxy可被更新。The CSS class that communicates the drop status back to the source so that the underlying Ext.dd.StatusProxy can be updated
DropZone
onContainerDrop( Ext.dd.DragSource source, Event e, Object data ) : Boolean
当DrapZone确定Ext.dd.DragSource落下的动作已经...
当DrapZone确定Ext.dd.DragSource落下的动作已经执行，但是没有放下任何落下的节点时调用。欲将DropZone本身也可接收落下的行为，应提供一个合适的实现来处理落下的事件，重写该方法，并返回true值， 说明拖放行为有效，拖动源的修复动作便不会进行。默认的实现返回false。Called when the DropZone determines that a 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.
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • Boolean
    有效的落下返回true否则为falseTrue if the drop was valid, else false
DropZone
notifyEnter( Ext.dd.DragSource source, Event e, Object data ) : String
当源Ext.dd.DragSource进入到目标的范围内，它执行通知落...
当源Ext.dd.DragSource进入到目标的范围内，它执行通知落下目标的那个函数。默认的实现是，如存在overClass（或其它）的样式,将其加入到落下元素（drop element），并返回dropAllowed配置的值。如需对落下验证（drop validation）的话可重写该方法。
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。
DropTarget
notifyOver( Ext.dd.DragSource source, Event e, Object data ) : String
当源Ext.dd.DragSource进入到目标的范围内，每一下移动鼠...
当源Ext.dd.DragSource进入到目标的范围内，每一下移动鼠标，它不断执行通知落下目标的那个函数。默认的实现是返回dropAllowed配置值而已
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。
DropTarget
notifyOut( Ext.dd.DragSource dd, Event e, Object data )
. 当源Ext.dd.DragSource移出落下目标的范围后，...
. 当源Ext.dd.DragSource移出落下目标的范围后，它执行通知落下目标的那个函数。默认的实现仅是移除由overClass（或其它）指定的CSS class。
参数项：
  • dd : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • void
DropTarget
notifyDrop( Ext.dd.DragSource source, Event e, Object data ) : Boolean
当源Ext.dd.DragSource在落下目标身上完成落下动作后，它...
当源Ext.dd.DragSource在落下目标身上完成落下动作后，它执行通知落下目标的那个函数。该方法没有默认的实现并返回false，所以你必须提供处理落下事件的实现并返回true，才能修复拖动源没有运行的动作。
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源。
  • e : Event
    事件对象。
  • data : Object
    由拖动源规定格式的数据对象。
返回值：
  • Boolean
    True 有效的落下返回true否则为false。
DropTarget
DropTarget( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DropTarget

公共事件

这个类没有公告事件。


类Ext.dd.PanelProxy

包： | Extdd
定义的文件： | PanelDD.js
类全称： | Ext.dd.PanelProxy
继承自于： | Object
为Ext.Panel对象定制的拖拽代理的实现。该主要被Panel对象在内部调用以实现拖拽，因此不需要直接创建。A custom drag proxy implementation specific to Ext.Panels. This class is primarily used internally for the Panel's drag drop implementation, and should never need to be created directly.

配置项

配置项 |  | 定义者
 | insertProxy : Boolean 如果值为 true 则在拖拽Panel时插入一个代理占位元素，值为 f... 如果值为 true 则在拖拽Panel时插入一个代理占位元素，值为 false 则在拖拽时没有代理（默认为 true）。True to insert a placeholder proxy element while dragging the panel, false to drag with no proxy (defaults to true). | PanelProxy

公告属性

这个类没有公告属性。

公共方法

方法 定义者
PanelProxy( Ext.Panel panel, Object config )
// Internal developer documentation...
// Internal developer documentation -- will not show up in API docs
参数项：
  • panel : Ext.Panel
    要代理的Ext.Panel对象。The Ext.Panel to proxy for
  • config : Object
    配置选项对象。Configuration options
返回值：
  • void
PanelProxy
getEl() : Element
获取代理元素。Gets the proxy's element
获取代理元素。Gets the proxy's element
参数项：
  • None.
返回值：
  • Element
    代理元素。The proxy's element
PanelProxy
getGhost() : Element
获取代理的影子元素。Gets the proxy's ghost el...
获取代理的影子元素。Gets the proxy's ghost element
参数项：
  • None.
返回值：
  • Element
    代理的影子元素。The proxy's ghost element
PanelProxy
getProxy() : Element
获取代理元素。Gets the proxy's element
获取代理元素。Gets the proxy's element
参数项：
  • None.
返回值：
  • Element
    代理元素。The proxy's element
PanelProxy
hide()
隐藏代理。Hides the proxy
隐藏代理。Hides the proxy
参数项：
  • None.
返回值：
  • void
PanelProxy
show()
显示代理。Shows the proxy
显示代理。Shows the proxy
参数项：
  • None.
返回值：
  • void
PanelProxy
moveProxy( HTMLElement parentNode, HTMLElement before )
将代理元素移动到 DOM 中不同的位置。通常该方法被用来当拖拽Pane...
将代理元素移动到 DOM 中不同的位置。通常该方法被用来当拖拽Panel对象时保持两者位置的同步。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.
参数项：
  • parentNode : HTMLElement
    代理元素的父级DOM节点。The proxy's parent DOM node
  • before : HTMLElement
    （可选的）代理被插入的位置的前一个侧边节点（如果不指定则默认为父节点的最后一个子节点） (optional)The sibling node before which the proxy should be inserted (defaults to the parent's last child if not specified)
返回值：
  • void
PanelProxy

公共事件

这个类没有公告事件。


类Ext.dd.Registry

包： | Extdd
定义的文件： | Registry.js
类全称： | Ext.dd.Registry
继承自于： | Object
为在页面上已登记好的拖放组件提供简易的访问。可按照DOM节点的id的方式直接提取组件，或者是按照传入的拖放事件，事件触发后，在事件目标（event target）里查找。@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
register( String/HTMLElement element, Object data )
登记一个拖放元素。
登记一个拖放元素。
参数项：
  • element : String/HTMLElement
    要登记的id或DOM节点
  • data : Object
    (optional) 在拖放过程中，用于在各元素传递的这么一个自定义数据对象 你可以按自身需求定义这个对象，另外有些特定的属性是便于与Registry交互的（如可以的话）：
返回值：
  • void
Registry
unregister( String/HTMLElement element )
注销一个拖放元素。
注销一个拖放元素。
参数项：
  • element : String/HTMLElement
    要注销的id或DOM节点
返回值：
  • void
Registry
getHandle( String/HTMLElement id ) : Object
按id返回已登记的DOM节点处理。
按id返回已登记的DOM节点处理。
参数项：
  • id : String/HTMLElement
    要查找的id或DOM节点
返回值：
  • Object
    handle 自定义处理数据
Registry
getHandleFromEvent( Event e ) : Object
按事件目标返回已登记的DOM节点处理。
按事件目标返回已登记的DOM节点处理。
参数项：
  • e : Event
    事件对象
返回值：
  • Object
    handle 自定义处理数据
Registry
getTarget( String/HTMLElement id ) : Object
按id返回已登记的自定义处理对象。
按id返回已登记的自定义处理对象。
参数项：
  • id : String/HTMLElement
    要查找的id或DOM节点
返回值：
  • Object
    handle 自定义处理数据
Registry
getTargetFromEvent( Event e ) : Object
按事件目标返回已登记的自定义处理对象。
按事件目标返回已登记的自定义处理对象。
参数项：
  • e : Event
    事件对象
返回值：
  • Object
    handle 自定义处理数据
Registry

公共事件

这个类没有公告事件。


类Ext.dd.ScrollManager

包： | Extdd
定义的文件： | ScrollManager.js
类全称： | Ext.dd.ScrollManager
继承自于： | Object
执行拖动操作时，自动在页面溢出的区域滚动 注：该类使用的是”Point模式”，而"Interest模式"未经测试。 @singleton

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Number 动画持续时间，单位：秒 改值勿少于Ext.dd.ScrollMa... 动画持续时间，单位：秒 改值勿少于Ext.dd.ScrollManager.frequency！（默认为.4） | ScrollManager

公共方法

方法 定义者
register( Mixed el )
登记新溢出元素，以准备自动滚动
登记新溢出元素，以准备自动滚动
参数项：
  • el : Mixed
    要被滚动的元素id或是数组
返回值：
  • void
ScrollManager
unregister( Mixed el )
注销溢出元素，不可再被滚动
注销溢出元素，不可再被滚动
参数项：
  • el : Mixed
    要被滚动的元素id或是数组
返回值：
  • void
ScrollManager
refreshCache()
手动切换刷新缓冲。
手动切换刷新缓冲。
参数项：
  • None.
返回值：
  • void
ScrollManager

公共事件

这个类没有公告事件。


类Ext.dd.StatusProxy

包： | Extdd
定义的文件： | StatusProxy.js
类全称： | Ext.dd.StatusProxy
继承自于： | Object
一个特殊的拖动代理，可支持落下状态时的图标，Ext.Layer 样式和自动修复。Ext.dd components缺省下使用这个代理

配置项

配置项 |  | 定义者
 | dropAllowed : String 当拖动源到达落下目标上方时的CSS样式类 当拖动源到达落下目标上方时的CSS样式类 | StatusProxy
 | dropNotAllowed : String 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 | StatusProxy

公告属性

这个类没有公告属性。

公共方法

方法 定义者
StatusProxy( Object config )
参数项：
  • config : Object
返回值：
  • void
StatusProxy
setStatus( String cssClass )
更新代理的可见元素，用来指明在当前元素上可否落下的状态。
更新代理的可见元素，用来指明在当前元素上可否落下的状态。
参数项：
  • cssClass : String
    对指示器图象的新CSS样式
返回值：
  • void
StatusProxy
reset( Boolean clearGhost )
对默认dropNotAllowed值的状态提示器进行复位
对默认dropNotAllowed值的状态提示器进行复位
参数项：
  • clearGhost : Boolean
    true的话移除所有ghost的内容,false的话保留
返回值：
  • void
StatusProxy
update( String html )
更新ghost元素的内容
更新ghost元素的内容
参数项：
  • html : String
    替换当前ghost元素的innerHTML的那个html
返回值：
  • void
StatusProxy
getEl() : Ext.Layer
返回所在的代理Ext.Layer
返回所在的代理Ext.Layer
参数项：
  • None.
返回值：
  • Ext.Layer
    el
StatusProxy
getGhost() : Ext.Element
返回ghost元素
返回ghost元素
参数项：
  • None.
返回值：
  • Ext.Element
    el
StatusProxy
hide( Boolean clear )
隐藏代理
隐藏代理
参数项：
  • clear : Boolean
    True的话复位状态和清除ghost内容,false的话就保留
返回值：
  • void
StatusProxy
stop()
如果运行中就停止修复动画
如果运行中就停止修复动画
参数项：
  • None.
返回值：
  • void
StatusProxy
show()
显示代理
显示代理
参数项：
  • None.
返回值：
  • void
StatusProxy
sync()
迫使层同步阴影和闪烁元素的位置
迫使层同步阴影和闪烁元素的位置
参数项：
  • None.
返回值：
  • void
StatusProxy
repair( Array xy, Function callback, Object scope )
通过动画让代理返回到原来位置。应由拖动项在完成一次无效的落下动作之后调用.
通过动画让代理返回到原来位置。应由拖动项在完成一次无效的落下动作之后调用.
参数项：
  • xy : Array
    元素的XY位置([x, y])
  • callback : Function
    完成修复之后的回调函数
  • scope : Object
    执行回调函数的作用域
返回值：
  • void
StatusProxy

公共事件

这个类没有公告事件。


类Ext.Direct

包： | Ext
定义的文件： | Direct.js
类全称： | Ext.Direct
继承自于： | Ext.util.Observable

概述 Overview

Ext.Direct的目的在于提供一个无缝的通讯流（streamline）介乎于客户端和服务端之间，形成一种单一的接口，从而使得我们减少一些乏味的编码，例如数据的验证和出来返回的数据包（读数据、错误条件等等）。
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).

Ext.direct命名空间下有若干的类是为了与服务端更密切地整合。Ext.Direct的一些方法产生出来的数据经过Ext.data另外的一些类，就可以转给Ext.data.Stores处理。
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的架构属于“供应器（provider）”的架构，一个或多个的供应器负责将数据传输到服务器上。当前有几种关键的供应器：
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:

  • JsonProvider for simple JSON operations 简易的JSON操作
  • PollingProvider for repeated requests 重复的请求
  • RemotingProvider exposes server side on the client.向客户端暴露了服务端

供应器本身不能直接的使用，应该通过Ext.Direct.add加入。
A provider does not need to be invoked directly, providers are added via Ext.Direct.add.

路由器 Router

在客户端与服务端部分方法之间，Ext.Direct使用了服务端“路由器（router）”的概念来直接请求。由于Ext.Direct是真正平台无关性的，所以你完全可以在以Java为解决方案的服务端，立刻替换成为C#的服务端，过程中你不需要对JavaScript作任何的变动或修改。
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"}

// 对应服务端“message”的事件的处理函数。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

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 定义者
eventTypes: Object
每个事件类型实现一个getData()方法。缺省的事件类型是： ...
每个事件类型实现一个getData()方法。缺省的事件类型是：
Each event type implements a getData() method. The default event types are:
  • event : Ext.Direct.Event
  • exception : Ext.Direct.ExceptionEvent
  • rpc : Ext.Direct.RemotingEvent
 Direct
exceptions: Object
对于可能出现的异常的四种类型有： Four types of p...
对于可能出现的异常的四种类型有：
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'
 Direct

公共方法

方法 定义者
Direct()
参数项：
  • None.
返回值：
  • void
Direct
addProvider( Object/Array provider )
加入一个Ext.Direct供应器并创建代理，或者对服务端执行的方法进...
加入一个Ext.Direct供应器并创建代理，或者对服务端执行的方法进行一个快照。如果供应器还没有链接，那么就会自动链接。下面的例子创建了两个provider。
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 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如何创建客户端快照的方法。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.
返回值：
  • void
Direct
getProvider( String id )
通过{@link #addProvider 已经加入}的{@link ...
通过{@link #addProvider 已经加入}的{@link Ext.direct.Provider 供应器}，可以指定一个id执行该方法返回。
Retrieve a provider by the id specified when the provider is added.
参数项：
  • id : String
    执行addProvider的时候，都会分配一个ID表示供应器。Unique identifier assigned to the provider when calling addProvider
返回值：
  • void
Direct
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
event()
一个事件之后触发。Fires after an event.
一个事件之后触发。Fires after an event.
侦听器会传入以下的参数：
  • None.
 Direct
exception()
一个异常事件之后触发。Fires after an event ex...
一个异常事件之后触发。Fires after an event exception.
侦听器会传入以下的参数：
  • None.
 Direct


类Ext.direct.JsonProvider

包： | Extdirect
定义的文件： | JsonProvider.js
类全称： | Ext.direct.JsonProvider
继承自于： | Ext.direct.Provider

配置项

配置项 定义者
id : String
供应器的id（默认的由{@link Ext#id auto-assig...
供应器的id（默认的由{@link Ext#id auto-assigned id}方法产生）。如果你没有用全局变量保存着这个供应器，那么你就应该分配一个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:
Provider
priority : Number
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双...
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双工的”（总是打开）。所有的供应器默认为1，但PollingProvider就除外，默认为3。
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.
Provider
type : String
这是Ext.Direct的类型，这是必须的，默认是undefined。...
这是Ext.Direct的类型，这是必须的，默认是undefined。执行addProvider创建新的供应器的时候就会用到这个类型。默认可识别的类型如下规格：
Required, undefined by default. The type of provider specified to Ext.Direct.addProvider to create a new Provider. Acceptable values by default are:
  • polling : PollingProvider
  • remoting : RemotingProvider
 Provider
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
JsonProvider()
参数项：
  • None.
返回值：
  • void
JsonProvider
Provider()
参数项：
  • None.
返回值：
  • void
Provider
isConnected()
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whe...
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whether or not the server-side is currently connected. Abstract method for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
connect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
disconnect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
connect()
当连接服务端之后触发。Fires when the Provider...
当连接服务端之后触发。Fires when the Provider connects to the server-side
侦听器会传入以下的参数：
  • None.
 Provider
disconnect()
当与服务端断开之后触发。Fires when the Provide...
当与服务端断开之后触发。Fires when the Provider disconnects from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
data()
当接收到来自服务端的数据的时候触发。Fires when the P...
当接收到来自服务端的数据的时候触发。Fires when the Provider receives data from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
exception()
当供应器接收一个服务端的异常后触发。Fires when the P...
当供应器接收一个服务端的异常后触发。Fires when the Provider receives an exception from the server-side
侦听器会传入以下的参数：
  • None.
 Provider


类Ext.direct.PollingProvider

包： | Extdirect
定义的文件： | PollingProvider.js
类全称： | Ext.direct.PollingProvider
继承自于： | Ext.direct.JsonProvider

按一定的{@link #interval 周期}不断轮询服务端。最开始的数据由客户端发出，然后由服务端响应。
Provides for repetitive polling of the server at distinct intervals. The initial request for data originates from the client, and then is responded to by the server.

应该由运行在服务端其余部分的Ext.Direct包来生成PollingProvider的所有配置内容。
All configurations for the PollingProvider should be generated by the server-side API portion of the Ext.Direct stack.

创建一个PollingProvider实例可以通过new关键字实现，或者只是指定type = 'polling'就可以，例如：
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');

配置项

配置项 定义者
priority : Number
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双...
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双工的”（总是打开）。所有的供应器默认为1，但PollingProvider就除外，默认为3。
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.
Provider
interval : Number
隔多久的时候轮询服务端，单位是毫秒（默认是3000，三秒钟） How...
隔多久的时候轮询服务端，单位是毫秒（默认是3000，三秒钟） How often to poll the server-side in milliseconds (defaults to 3000 - every 3 seconds).
PollingProvider
baseParams : Object
每一次轮询所发出的请求当中所包含的参数对象。An object con...
每一次轮询所发出的请求当中所包含的参数对象。An object containing properties which are to be sent as parameters on every polling request
PollingProvider
url : String/Function
每次请求PollingProvider连接url的地址。这配置项也可以...
每次请求PollingProvider连接url的地址。这配置项也可以是一个Ext.Direct方法，参数就是baseParams这一个。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.
PollingProvider
id : String
供应器的id（默认的由{@link Ext#id auto-assig...
供应器的id（默认的由{@link Ext#id auto-assigned id}方法产生）。如果你没有用全局变量保存着这个供应器，那么你就应该分配一个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:
Provider
type : String
这是Ext.Direct的类型，这是必须的，默认是undefined。...
这是Ext.Direct的类型，这是必须的，默认是undefined。执行addProvider创建新的供应器的时候就会用到这个类型。默认可识别的类型如下规格：
Required, undefined by default. The type of provider specified to Ext.Direct.addProvider to create a new Provider. Acceptable values by default are:
  • polling : PollingProvider
  • remoting : RemotingProvider
 Provider
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
PollingProvider()
参数项：
  • None.
返回值：
  • void
PollingProvider
connect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
disconnect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
JsonProvider()
参数项：
  • None.
返回值：
  • void
JsonProvider
Provider()
参数项：
  • None.
返回值：
  • void
Provider
isConnected()
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whe...
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whether or not the server-side is currently connected. Abstract method for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforepoll()
在轮询发生之前的时候触发，过程中任一次返回false都会中止整个轮询...
在轮询发生之前的时候触发，过程中任一次返回false都会中止整个轮询。Fired immediately before a poll takes place, an event handler can return false in order to cancel the poll.
侦听器会传入以下的参数：
  • None.
 PollingProvider
poll()
This event has not yet been implem...
This event has not yet been implemented.
侦听器会传入以下的参数：
  • None.
 PollingProvider
connect()
当连接服务端之后触发。Fires when the Provider...
当连接服务端之后触发。Fires when the Provider connects to the server-side
侦听器会传入以下的参数：
  • None.
 Provider
disconnect()
当与服务端断开之后触发。Fires when the Provide...
当与服务端断开之后触发。Fires when the Provider disconnects from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
data()
当接收到来自服务端的数据的时候触发。Fires when the P...
当接收到来自服务端的数据的时候触发。Fires when the Provider receives data from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
exception()
当供应器接收一个服务端的异常后触发。Fires when the P...
当供应器接收一个服务端的异常后触发。Fires when the Provider receives an exception from the server-side
侦听器会传入以下的参数：
  • None.
 Provider


类Ext.direct.Provider

包： | Extdirect
定义的文件： | Provider.js
类全称： | Ext.direct.Provider
继承自于： | Ext.util.Observable

Ext.direct.Provider是一个抽象类，用来扩展的。Ext.direct.Provider is an abstract class meant to be extended.

例如ExtJS现在就实现了以下的子类了： For example ExtJs implements the following subclasses:

Provider
|
+---JsonProvider
    |
    +---PollingProvider
    |
    +---RemotingProvider
@abstract

配置项

配置项 定义者
id : String
供应器的id（默认的由{@link Ext#id auto-assig...
供应器的id（默认的由{@link Ext#id auto-assigned id}方法产生）。如果你没有用全局变量保存着这个供应器，那么你就应该分配一个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:
Provider
priority : Number
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双...
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双工的”（总是打开）。所有的供应器默认为1，但PollingProvider就除外，默认为3。
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.
Provider
type : String
这是Ext.Direct的类型，这是必须的，默认是undefined。...
这是Ext.Direct的类型，这是必须的，默认是undefined。执行addProvider创建新的供应器的时候就会用到这个类型。默认可识别的类型如下规格：
Required, undefined by default. The type of provider specified to Ext.Direct.addProvider to create a new Provider. Acceptable values by default are:
  • polling : PollingProvider
  • remoting : RemotingProvider
 Provider
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Provider()
参数项：
  • None.
返回值：
  • void
Provider
isConnected()
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whe...
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whether or not the server-side is currently connected. Abstract method for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
connect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
disconnect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
connect()
当连接服务端之后触发。Fires when the Provider...
当连接服务端之后触发。Fires when the Provider connects to the server-side
侦听器会传入以下的参数：
  • None.
 Provider
disconnect()
当与服务端断开之后触发。Fires when the Provide...
当与服务端断开之后触发。Fires when the Provider disconnects from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
data()
当接收到来自服务端的数据的时候触发。Fires when the P...
当接收到来自服务端的数据的时候触发。Fires when the Provider receives data from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
exception()
当供应器接收一个服务端的异常后触发。Fires when the P...
当供应器接收一个服务端的异常后触发。Fires when the Provider receives an exception from the server-side
侦听器会传入以下的参数：
  • None.
 Provider


类Ext.direct.RemotingProvider

包： | Extdirect
定义的文件： | RemotingProvider.js
类全称： | Ext.direct.RemotingProvider
继承自于： | Ext.direct.JsonProvider

RemotingProvider暴露了在客户端上访问服务端方法的方式方法。这是一种RPC（remote procedure call，远程过程调录）的连接类型，即客户端可以初始化服务端上的进程。
The 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).

这样的话，组织代码的时候会更具可维护性，客户端与服务端之间的道路怎么走也会越加地清晰。如果单使用URL的话这点是不容易做到的。
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.

完成上述功能，服务端必须将有关类和方法的信息告诉给客户端知道。一般这些配置的信息由服务端的Ext.Direct包完成，构建一系列的API信息输出。
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.

配置项

配置项 定义者
actions : Object
用对象字面化（Object literal）确定服务端的动作或方法。例...
用对象字面化（Object literal）确定服务端的动作或方法。例如，如果供应器（Provider）是如下配置的： Object literal defining the server side actions and methods. For example, if the Provider is configured with:
RemotingProvider
namespace : String/Object
远程供应器的命名空间（默认为浏览器的全局空间window）。完全命名这...
远程供应器的命名空间（默认为浏览器的全局空间window）。完全命名这个空间，或者指定一个String执行namespace created隐式命名。
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 namespace created implicitly.
RemotingProvider
url : String
该项是必须的。连接到Ext.Direct所在的服务端路由器（route...
该项是必须的。连接到Ext.Direct所在的服务端路由器（router）。Required. The url to connect to the Ext.Direct server-side router.
RemotingProvider
enableUrlEncode : String
指定哪个param会保存方法的参数。默认是'data'。Specify...
指定哪个param会保存方法的参数。默认是'data'。Specify which param will hold the arguments for the method. Defaults to 'data'.
RemotingProvider
enableBuffer : Number/Boolean
设置为true或false决定是否捆绑多个方法调用在一起。如果指定...

设置为true或false决定是否捆绑多个方法调用在一起。如果指定一个数字表示就等待形成一次批调用的机会（默认为10毫秒）。
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.

 RemotingProvider
maxRetries : Number
当failure后，尝试再连接的次数。默认为一次。Number of ...
当failure后，尝试再连接的次数。默认为一次。Number of times to re-attempt delivery on failure of a call. Defaults to 1.
RemotingProvider
timeout : Number
每次请求的超时时限。默认为undefined。The timeout ...
每次请求的超时时限。默认为undefined。The timeout to use for each request. Defaults to undefined.
RemotingProvider
id : String
供应器的id（默认的由{@link Ext#id auto-assig...
供应器的id（默认的由{@link Ext#id auto-assigned id}方法产生）。如果你没有用全局变量保存着这个供应器，那么你就应该分配一个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:
Provider
priority : Number
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双...
请求的优先权（priority）,数值愈低表示优先权愈高，0就表示“双工的”（总是打开）。所有的供应器默认为1，但PollingProvider就除外，默认为3。
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.
Provider
type : String
这是Ext.Direct的类型，这是必须的，默认是undefined。...
这是Ext.Direct的类型，这是必须的，默认是undefined。执行addProvider创建新的供应器的时候就会用到这个类型。默认可识别的类型如下规格：
Required, undefined by default. The type of provider specified to Ext.Direct.addProvider to create a new Provider. Acceptable values by default are:
  • polling : PollingProvider
  • remoting : RemotingProvider
 Provider
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
RemotingProvider()
参数项：
  • None.
返回值：
  • void
RemotingProvider
JsonProvider()
参数项：
  • None.
返回值：
  • void
JsonProvider
Provider()
参数项：
  • None.
返回值：
  • void
Provider
isConnected()
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whe...
返回是否与服务端链接者的。由子类实现的抽象方法。Returns whether or not the server-side is currently connected. Abstract method for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
connect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
disconnect()
由子类实现的抽象方法。Abstract methods for sub...
由子类实现的抽象方法。Abstract methods for subclasses to implement.
参数项：
  • None.
返回值：
  • void
Provider
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforecall()
在客户端发送PRC请求之前触发。事件处理器中返回false的话表示阻...
在客户端发送PRC请求之前触发。事件处理器中返回false的话表示阻止这次远程调用。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.
侦听器会传入以下的参数：
  • None.
 RemotingProvider
call()
当送往服务端的请求发送后触发。有响应的时候不会触发该事件。Fires...
当送往服务端的请求发送后触发。有响应的时候不会触发该事件。Fires immediately after the request to the server-side is sent. This does NOT fire after the response has come back from the call.
侦听器会传入以下的参数：
  • None.
 RemotingProvider
connect()
当连接服务端之后触发。Fires when the Provider...
当连接服务端之后触发。Fires when the Provider connects to the server-side
侦听器会传入以下的参数：
  • None.
 Provider
disconnect()
当与服务端断开之后触发。Fires when the Provide...
当与服务端断开之后触发。Fires when the Provider disconnects from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
data()
当接收到来自服务端的数据的时候触发。Fires when the P...
当接收到来自服务端的数据的时候触发。Fires when the Provider receives data from the server-side
侦听器会传入以下的参数：
  • None.
 Provider
exception()
当供应器接收一个服务端的异常后触发。Fires when the P...
当供应器接收一个服务端的异常后触发。Fires when the Provider receives an exception from the server-side
侦听器会传入以下的参数：
  • None.
 Provider


类Ext.Direct.Transaction

包： | ExtDirect
定义的文件： | Transaction.js
类全称： | Ext.Direct.Transaction
继承自于： | Object

Supporting Class for Ext.Direct (not intended to be used directly).

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Transaction( Object config )
参数项：
  • config : Object
返回值：
  • void
Transaction

公共事件

这个类没有公告事件。


类Ext.DomHelper

包： | Ext
定义的文件： | DomHelper.js
类全称： | Ext.DomHelper
继承自于： | Object
处理DOM或模板（Templates）的实用类。能以JavaScript较清晰地编写HTML片段（HTML fragments）或DOM。这是一个范例，产生五个子元素的无须列表，追加到当前元素'my-div'：

var list = dh.append('my-div', {
    tag: 'ul', cls: 'my-list', 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'},
        {tag: 'li', id: 'item3', html: 'List Item 3'},
        {tag: 'li', id: 'item4', html: 'List Item 4'}
    ]
});
更多资讯，请参阅 BLOG和一些例子. @singleton

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Boolean True表示为强制使用DOM而非html片断 True表示为强制使用DOM而非html片断 | DomHelper

公共方法

方法 定义者
markup( Object o ) : String
返回元素的装饰（markup）
返回元素的装饰（markup）
参数项：
  • o : Object
    DOM对象（包含子孙）
返回值：
  • String
DomHelper
applyStyles( String/HTMLElement el, String/Object/Function styles )
把指定的样式应用到元素
把指定的样式应用到元素
参数项：
  • el : String/HTMLElement
    样式所应用的元素
  • styles : String/Object/Function
    表示样式的特定格式字符串，如“width:100px”，或是对象的形式如{width:"100px"}，或是能返回这些格式的函数
返回值：
  • void
DomHelper
insertHtml( String where, HTMLElement el, String html ) : HTMLElement
插入HTML片断到Dom
插入HTML片断到Dom
参数项：
  • where : String
    插入的html要放在元素的哪里 - beforeBegin, afterBegin, beforeEnd, afterEnd.
  • el : HTMLElement
    元素内容
  • html : String
    HTML片断
返回值：
  • HTMLElement
    新节点
DomHelper
insertBefore( String/HTMLElement/Element el, Object/String o, Boolean returnElement ) : HTMLElement/Ext.Element
创建新的Dom元素并插入到el之前
创建新的Dom元素并插入到el之前
参数项：
  • el : String/HTMLElement/Element
    元素内容
  • o : Object/String
    指定的Dom对象（和子孙）或是裸HTML部分
  • returnElement : Boolean
    （可选的） true表示返回一个Ext.Element
返回值：
  • HTMLElement/Ext.Element
    新节点
DomHelper
insertAfter( String/HTMLElement/Element el, Object/String o, Boolean returnElement ) : HTMLElement/Ext.Element
创建新的Dom元素并插入到el之后
创建新的Dom元素并插入到el之后
参数项：
  • el : String/HTMLElement/Element
    元素内容
  • o : Object/String
    指定的Dom对象（和子孙）
  • returnElement : Boolean
    （可选的） true表示返回一个Ext.Element
返回值：
  • HTMLElement/Ext.Element
    新节点
DomHelper
insertFirst( String/HTMLElement/Element el, Object/String o, Boolean returnElement ) : HTMLElement/Ext.Element
创建新的Dom元素并插入到el中，元素是第一个孩子。
创建新的Dom元素并插入到el中，元素是第一个孩子。
参数项：
  • el : String/HTMLElement/Element
    元素内容
  • o : Object/String
    指定的Dom对象（和子孙）或是原始的HTML部分
  • returnElement : Boolean
    （可选的） true表示返回一个Ext.Element
返回值：
  • HTMLElement/Ext.Element
    新节点
DomHelper
append( String/HTMLElement/Element el, Object/String o, Boolean returnElement ) : HTMLElement/Ext.Element
创建新的Dom元素并加入到el中
创建新的Dom元素并加入到el中
参数项：
  • el : String/HTMLElement/Element
    元素内容
  • o : Object/String
    指定的Dom对象（和子孙）或是原始的HTML部分
  • returnElement : Boolean
    (可选的) true表示返回一个Ext.Element
返回值：
  • HTMLElement/Ext.Element
    新节点
DomHelper
overwrite( String/HTMLElement/Element el, Object/String o, Boolean returnElement ) : HTMLElement/Ext.Element
创建新的Dom元素并覆盖el的内容
创建新的Dom元素并覆盖el的内容
参数项：
  • el : String/HTMLElement/Element
    元素内容
  • o : Object/String
    指定的Dom对象（和子孙）或是原始的HTML部分
  • returnElement : Boolean
    (可选的) true表示返回一个Ext.Element
返回值：
  • HTMLElement/Ext.Element
    新节点
DomHelper
createTemplate( Object o ) : Ext.DomHelper.Template
根据指定的Dom对象创建新的Ext.DomHelper.Template对象
根据指定的Dom对象创建新的Ext.DomHelper.Template对象
参数项：
  • o : Object
    指定的Dom对象（连同子孙）
返回值：
  • Ext.DomHelper.Template
    新模板
DomHelper

公共事件

这个类没有公告事件。


类Ext.DomQuery

包： | Ext
定义的文件： | DomQuery.js
类全称： | Ext.DomQuery
继承自于： | Object
根据编译请求提供高效的将选择符 / xpath 处理为可复用的函数的方法。可以添加新的伪类和匹配器。该类可以运行于 HTML 和 XML 文档之上（如果给出了一个内容节点）。

DomQuery 提供大多数的CSS3 选择符，同时也支持某些自定义选择符和基本的 XPath。

下列所有的选择符、属性过滤器和伪类可以在任何命令中无限地组合使用。例如：“div.foo:nth-child(odd)[@foo=bar].bar:first”将是一个完全有效的选择符。命令中出现的节点过滤器将可以使你根据自己的文档结构对查询做出优化。

元素选择符：

    任意元素
  • E 一个标签为 E 的元素
  • E F 所有 E 元素的分支元素中含有标签为 F 的元素
  • E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素
  • E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
  • E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素

属性选择符：

@ 与引号的使用是可选的。例如：div[@foo='bar'] 也是一个有效的属性选择符。

  • E[foo] 拥有一个名为 “foo” 的属性
  • E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
  • E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
  • E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性
    • =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
  • E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
  • E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性

Pseudo Classes:

伪类：

  • 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 元素为拥有一个名为“checked”且值为“true”的元素（例如：单选框或复选框）
  • E:first 结果集中第一个 E 元素
  • E:last 结果集中最后一个 E 元素
  • E:nth(n) 结果集中第 n 个 E 元素（由1开始的个数）
  • E:odd :nth-child(odd) 的简写
  • E:even :nth-child(even) 的简写
  • E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
  • E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
  • E:not(S) 一个与简单选择符 S 不匹配的 E 元素
  • E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
  • E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
  • E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素

CSS 值选择符：

  • E{display=none} css 的“display”属性等于“none”
  • E{display^=none} css 的“display”属性以“none”开始
  • E{display$=none} css 的“display”属性以“none”结尾
    • =none} css 的“display”属性包含字串“none”
  • E{display%=2} css 的“display”属性能够被2整除
  • E{display!=none} css 的“display”属性不等于“none”
@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
compile( String selector, String type ) : Function
将一个 选择符 / xpath 查询编译为一个可利用的函数。返回的函数...
将一个 选择符 / xpath 查询编译为一个可利用的函数。返回的函数获得一个“root”参数（可选）作为查询的起点。
参数项：
  • selector : String
    选择符 / xpath 查询
  • type : String
    （可选）可以是“select”（默认）或“simple”以供简单选择符使用
返回值：
  • Function
DomQuery
select( String selector, Node root ) : Array
选择一组元素。
选择一组元素。
参数项：
  • selector : String
    选择符 / xpath 查询（可以是以逗号分隔的选择符列表）
  • root : Node
    （可选）查询的起点（默认为：document）。
返回值：
  • Array
    匹配选择符而形成的DOM元素数组，如果没有匹配的结果，返回一个空的数组An Array of DOM elements which match the selector. If there are no matches, and empty Array is returned.
DomQuery
selectNode( String selector, Node root ) : Element
选择单个元素。
选择单个元素。
参数项：
  • selector : String
    选择符 / xpath 查询
  • root : Node
    （可选）查询的起点（默认为：document）。
返回值：
  • Element
    匹配的选择符的DOM元素The DOM element which matched the selector.
DomQuery
selectValue( String selector, Node root, String defaultValue )
选择一个节点的值，可选择使用 defaultValue 替换掉 null。
选择一个节点的值，可选择使用 defaultValue 替换掉 null。
参数项：
  • selector : String
    选择符 / xpath 查询
  • root : Node
    （可选）查询的起点（默认为：document）。
  • defaultValue : String
返回值：
  • void
DomQuery
selectNumber( String selector, Node root, Number defaultValue ) : Number
取得一个经过处理的整形或浮点型的节点值。
取得一个经过处理的整形或浮点型的节点值。
参数项：
  • selector : String
    查询时使用的 XPath 或选择符
  • root : Node
    （可选）查询的起点（默认为 document）。
  • defaultValue : Number
返回值：
  • Number
DomQuery
is( String/HTMLElement/Array el, String selector ) : Boolean
如果所给的元素与简易选择符相匹配，则返回 true（例如：div.so...
如果所给的元素与简易选择符相匹配，则返回 true（例如：div.some-class 或者 span:first-child）
参数项：
  • el : String/HTMLElement/Array
    元素 ID、元素本身、或元素数组
  • selector : String
    测试用的简易选择符
返回值：
  • Boolean
DomQuery
filter( Array el, String selector, Boolean nonMatches ) : Array
将元素数组过滤成只包含匹配简易选择符的元素（例如：div.some-c...
将元素数组过滤成只包含匹配简易选择符的元素（例如：div.some-class 或者 span:first-child）
参数项：
  • el : Array
    要过滤的元素数组
  • selector : String
    测试用的简易选择符
  • nonMatches : Boolean
    如果值为 true，将返回与选择符不匹配的元素，而不是匹配的元素
返回值：
  • Array
    匹配选择符而形成的DOM元素数组，如果没有匹配的结果，返回一个空的数组An Array of DOM elements which match the selector. If there are no matches, and empty Array is returned.
DomQuery
matchers()
匹配的正则表达式和代码片断的集合。
匹配的正则表达式和代码片断的集合。
参数项：
  • None.
返回值：
  • void
DomQuery
operators()
= 和 %=。可以添加形如 c= 的运算符。其中 c 可以是除空格、&...
= 和 %=。可以添加形如 c= 的运算符。其中 c 可以是除空格、>和<之外的任意字符。
参数项：
  • None.
返回值：
  • void
DomQuery
pseudos()
"pseudo class" 处理器集合。每一个处理器将传递当前节点集...
"pseudo class" 处理器集合。每一个处理器将传递当前节点集（数组形式）和参数（如果有）以供选择符使用。
参数项：
  • None.
返回值：
  • void
DomQuery
query( String path, Node root ) : Array
选定一个通过CSS/XPath选择符获取的DOM节点组成的数组。Ext...
选定一个通过CSS/XPath选择符获取的DOM节点组成的数组。Ext.DomQueryselect的简写方式。
参数项：
  • path : String
    查询时使用的 XPath 或选择符
  • root : Node
    （可选）查询的起点（默认为 document）。
返回值：
  • Array
    @member Ext
DomQuery

公共事件

这个类没有公告事件。


类Ext.Editor

包： | Ext
定义的文件： | Editor.js
类全称： | Ext.Editor
继承自于： | Ext.Component
一个基础性的字段编辑器，它负责完成按需显示方面的工作，还有隐藏控制、某些内建的调节大小工作及事件处理函数的逻辑。A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.

配置项

配置项 定义者
field : Ext.form.Field
Field字段对象（或祖先）或field的配置项对象。The Fiel...
Field字段对象（或祖先）或field的配置项对象。The Field object (or descendant) or config object for field
Editor
autoSize : Boolean/String
True表示为编辑器的大小尺寸自适应到所属的字段，设置“width”表...
True表示为编辑器的大小尺寸自适应到所属的字段，设置“width”表示单单适应宽度，设置“height”表示单单适应高度（默认为fasle）。True for the editor to automatically adopt the size of the element being edited, "width" to adopt the width only, or "height" to adopt the height only (defaults to false)
Editor
revertInvalid : Boolean
True表示为当用户完成编辑但字段验证失败后，自动恢复原始值，然后取消...
True表示为当用户完成编辑但字段验证失败后，自动恢复原始值，然后取消这次编辑（默认为true）。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)
Editor
ignoreNoChange : Boolean
True表示为如果用户完成一次编辑但值没有改变时，中止这次编辑的操作（...
True表示为如果用户完成一次编辑但值没有改变时，中止这次编辑的操作（不保存，不触发事件）（默认为false）。只对字符类型的值有效，其它编辑的数据类型将会被忽略。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.
Editor
hideEl : Boolean
False表示为当编辑器显示时，保持绑定的元素可见（默认为true）。...
False表示为当编辑器显示时，保持绑定的元素可见（默认为true）。False to keep the bound element visible while the editor is displayed (defaults to true)
Editor
value : Mixed
所属字段的日期值（默认为""）。The data value of t...
所属字段的日期值（默认为""）。The data value of the underlying field (defaults to "")
Editor
alignment : String
对齐的位置（参见Ext.ElementalignTo了解详细，默认为"...
对齐的位置（参见Ext.ElementalignTo了解详细，默认为"c-c?"）。The position to align to (see Ext.ElementalignTo for more details, defaults to "c-c?").
Editor
shadow : Boolean/String
属性为"sides"是四边都是向上阴影，"frame"表示四边外发光，...
属性为"sides"是四边都是向上阴影，"frame"表示四边外发光，"drop"表示从右下角开始投影（默认为"frame"）。"sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "frame")
Editor
constrain : Boolean
表示为约束编辑器到视图。True to constrain the e...
表示为约束编辑器到视图。True to constrain the editor to the viewport
Editor
swallowKeys : Boolean
处理keydown/keypress事件使得不会上报（propagat...
处理keydown/keypress事件使得不会上报（propagate），（默认为true）。Handle the keydown/keypress events so they don't propagate (defaults to true)
Editor
completeOnEnter : Boolean
True表示为回车按下之后就完成编辑（默认为false）。True t...
True表示为回车按下之后就完成编辑（默认为false）。True to complete the edit when the enter key is pressed (defaults to false)
Editor
cancelOnEsc : Boolean
True表示为escape键按下之后便取消编辑（默认为false）。T...
True表示为escape键按下之后便取消编辑（默认为false）。True to cancel the edit when the escape key is pressed (defaults to false)
Editor
updateEl : Boolean
True表示为当更新完成之后同时更新绑定元素的innerHTML（默认...
True表示为当更新完成之后同时更新绑定元素的innerHTML（默认为false）。True to update the innerHTML of the bound element when the update completes (defaults to false)
Editor
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Editor( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Editor
startEdit( Mixed el, String value )
进入编辑状态并显示编辑器。Starts the editing pro...
进入编辑状态并显示编辑器。Starts the editing process and shows the editor.
参数项：
  • el : Mixed
    要编辑的元素。The element to edit
  • value : String
    编辑器初始化的值，如不设置该值便是元素的innerHTML。(optional) A value to initialize the editor with. If a value is not provided, it defaults to the innerHTML of el.
返回值：
  • void
Editor
setSize( Number width, Number height )
设置编辑器高、宽。Sets the height and width ...
设置编辑器高、宽。Sets the height and width of this editor.
参数项：
  • width : Number
    新宽度。The new width
  • height : Number
    新高度。The new height
返回值：
  • void
Editor
realign()
按照当前的最齐设置，把编辑器重新对齐到所绑定的字段。Realigns ...
按照当前的最齐设置，把编辑器重新对齐到所绑定的字段。Realigns the editor to the bound field based on the current alignment config value.
参数项：
  • None.
返回值：
  • void
Editor
completeEdit( Boolean remainVisible )
结束编辑状态，提交变化的内容到所属的字段，并隐藏编辑器。Ends th...
结束编辑状态，提交变化的内容到所属的字段，并隐藏编辑器。Ends the editing process, persists the changed value to the underlying field, and hides the editor.
参数项：
  • remainVisible : Boolean
    让编辑过后仍然显示编辑器，这是重写默认的动作（默认为false）。Override the default behavior and keep the editor visible after edit (defaults to false)
返回值：
  • void
Editor
cancelEdit( Boolean remainVisible )
取消编辑状态并返回到原始值，不作任何的修改。Cancels the e...
取消编辑状态并返回到原始值，不作任何的修改。Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to the original starting value.
参数项：
  • remainVisible : Boolean
    让编辑过后仍然显示编辑器，这是重写默认的动作（默认为false）。Override the default behavior and keep the editor visible after cancel (defaults to false)
返回值：
  • void
Editor
setValue( Mixed value )
设置编辑器的数据。Sets the data value of the...
设置编辑器的数据。Sets the data value of the editor
参数项：
  • value : Mixed
    所属field可支持的任意值。Any valid value supported by the underlying field
返回值：
  • void
Editor
getValue() : Mixed
获取编辑器的数据。Gets the data value of the...
获取编辑器的数据。Gets the data value of the editor
参数项：
  • None.
返回值：
  • Mixed
    数据值。The data value
Editor
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforestartedit()
编辑器开始初始化，但在修改值之前触发。若事件句柄返回false则取消整...
编辑器开始初始化，但在修改值之前触发。若事件句柄返回false则取消整个编辑事件。Fires when editing is initiated, but before the value changes. Editing can be canceled by returning false from the handler of this event.
侦听器会传入以下的参数：
  • None.
 Editor
startedit()
当编辑器显示时触发。Fires when this editor is...
当编辑器显示时触发。Fires when this editor is displayed
侦听器会传入以下的参数：
  • None.
 Editor
beforecomplete()
修改已提交到字段，但修改未真正反映在所属的字段上之前触发。若事件句柄返...
修改已提交到字段，但修改未真正反映在所属的字段上之前触发。若事件句柄返回false则取消整个编辑事件。注意如果值没有变动的话并且ignoreNoChange = true的情况下， 编辑依然会结束但因为没有真正的编辑所以不会触发事件。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.
侦听器会传入以下的参数：
  • None.
 Editor
complete()
当编辑完成过后，任何的改变写入到所属字段时触发。Fires after...
当编辑完成过后，任何的改变写入到所属字段时触发。Fires after editing is complete and any changed value has been written to the underlying field.
侦听器会传入以下的参数：
  • None.
 Editor
canceledit()
当编辑器取消后和编辑器复位之后触发。Fires after editi...
当编辑器取消后和编辑器复位之后触发。Fires after editing has been canceled and the editor's value has been reset.
侦听器会传入以下的参数：
  • None.
 Editor
specialkey()
用于导航的任意键被按下触发（arrows、tab、enter、esc等...
用于导航的任意键被按下触发（arrows、tab、enter、esc等等）。你可检查Ext.EventObjectgetKey以确定哪个键被按了。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Editor
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.Element

包： | Ext
定义的文件： | Element.js
类全称： | Ext.Element
继承自于： | Object
表示着DOM里面的一个元素。Represents an Element in the DOM.

用法：Usage:

// 通过id获取
var el = Ext.get("my-div");

// 通过DOM元素引用by DOM element reference
var el = Ext.get(myDivElement);
动画Animations
操作DOM元素，很多情况下会用一些到动画效果（可选的）。动画选项应该是布尔值（true）或是动画的配置项对象（以Object Literal形式）。注意要产生动画效果必须依赖Ext.Fx的包方可正确调用功能。动画的可选项有： Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter should either be a boolean (true) or an object literal with animation options. Note that the supported Element animation options are a subset of the Ext.Fx animation options specific to Fx effects. The Element animation options are:
可选项Option默认值Default 描述Description
--------- --------  ---------------------------------------------
duration  .35       动画持续的时间（单位：秒）。The duration of the animation in seconds
easing    easeOut   退却（收尾）的方法。The easing method
callback  none      动画完成之后执行的函数。A function to execute when the anim completes
scope     this      回调函数的作用域。The scope (this) of the callback function
另外，可通过配置项中的“anim”来获取动画对象，这样便可停止或操控这个动画效果。例子如下： Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or manipulate the animation. Here's an example:

var el = Ext.get("my-div");

// 没有动画no animation
el.setWidth(100);

// 默认动画default animation
el.setWidth(100, true);

// 对动画的一些设置animation with some options set
el.setWidth(100, {
    duration: 1,
    callback: this.foo,
    scope: this
});

// 使用属性“anim”来获取动画对象using the "anim" property to get the Anim object
var opt = {
    duration: 1,
    callback: this.foo,
    scope: this
};
el.setWidth(100, opt);
...
if(opt.anim.isAnimated()){
    opt.anim.stop();
}
组合（集合的）元素Composite (Collections of) Elements
要处理一组的元素，请参阅Ext.CompositeElement。For working with collections of Elements, see Ext.CompositeElement

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Number 显示模式（Visibility mode）的两个常量之一：使用Dis... 显示模式（Visibility mode）的两个常量之一：使用Display来隐藏元素 Visibility mode constant - Use display to hide element @static | Element

公共方法

方法 定义者
D( String/HTMLElement element, Boolean forceNew )
参数项：
  • element : String/HTMLElement
  • forceNew : Boolean
    （可选的） 构建函数默认会检查在Cache中是否已经有这个element实例。如果有，则返回缓存中的对象。如果设置为否，则跳过缓存的验查。设置这个布尔值会中止检查（扩展这个类时较有用）。(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).
返回值：
  • void
Element
setVisibilityMode( String visMode ) : Ext.Element
设置元素的可见模式。当通过调用setVisible()方法确定，可见模...
设置元素的可见模式。当通过调用setVisible()方法确定，可见模式（visibility mode）究竟是“可见性visibility”的还是“显示display”的。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 : String
    Element.VISIBILITY或Element.DISPLAY Element.VISIBILITY or Element.DISPLAY
返回值：
  • Ext.Element
    this
Element
enableDisplayMode( String display ) : Ext.Element
调用setVisibilityMode(Element.DISPLAY...
调用setVisibilityMode(Element.DISPLAY)的快捷方式。Convenience method for setVisibilityMode(Element.DISPLAY)
参数项：
  • display : String
    （可选的） 当可见时显示的内容。(optional) What to set display to when visible
返回值：
  • Ext.Element
    this
Element
findParent( String selector, Number/Mixed maxDepth, Boolean returnEl ) : HTMLElement
定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合...
定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符（简易选择符形如div.some-class、span:first-child）。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)
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
  • maxDepth : Number/Mixed
    （可选的） 搜索深度，可以为数字或元素（默认是10||document.body）。(optional) The max depth to
  • returnEl : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点(optional) True to return a Ext.Element object instead of DOM node
返回值：
  • HTMLElement
    匹配的DOM节点（null的话表示没有找到匹配结果）。The matching DOM node (or null if no match was found)
Element
findParentNode( String selector, Number/Mixed maxDepth, Boolean returnEl ) : HTMLElement
定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的...
定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符，简易选择符形如div.some-class、span:first-child）。Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
  • maxDepth : Number/Mixed
    （可选的） 搜索深度，可以为数字或元素（默认是10||document.body）。(optional) The max depth to
  • returnEl : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点(optional) True to return a Ext.Element object instead of DOM node
返回值：
  • HTMLElement
    匹配的DOM节点（null的话表示没有找到匹配结果）。The matching DOM node (or null if no match was found)
Element
up( String selector, Number/Mixed maxDepth ) : Ext.Element
沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的...
沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符，简易选择符形如div.some-class、span:first-child）。Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child). 这是一个便捷方法因此总是返回Ext.Element类型的节点。This is a shortcut for findParentNode() that always returns an Ext.Element.
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
  • maxDepth : Number/Mixed
    （可选的） 搜索深度，可以为数字或元素（默认是10||document.body）。(optional) The max depth to
返回值：
  • Ext.Element
    匹配的DOM节点（null的话表示没有找到匹配结果）。The matching DOM node (or null if no match was found)
Element
is( String selector ) : Boolean
如果这个元素符合传入的简易选择符的条件就返回true，简易选择符形如d...
如果这个元素符合传入的简易选择符的条件就返回true，简易选择符形如div.some-class或span:first-child。Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
返回值：
  • Boolean
    true表示元素匹配选择符成功，否则返回false。True if this element matches the selector, else false
Element
animate( Object args, Float duration, Function onComplete, String easing, String animType ) : Ext.Element
在元素上执行动画 Perform animation on this ...
在元素上执行动画 Perform animation on this element.
参数项：
  • args : Object
    动画配置项参数。The animation control args
  • duration : Float
    （可选的） 动画持续多久（默认为 .35 秒）。(optional) How long the animation lasts in seconds (defaults to .35)
  • onComplete : Function
    （可选的） 动画完成后调用的函数。(optional) Function to call when animation completes
  • easing : String
    (optional) （可选的） 指定“收尾”的方法（默认为 'easeOut'）。Easing method to use (defaults to 'easeOut')
  • animType : String
    （可选的） 默认为'run'，可以是'color'，'motion'，或'scroll'。(optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
返回值：
  • Ext.Element
    this
Element
clean( Boolean forceReclean )
移除无用的文本节点。Removes worthless text nodes
移除无用的文本节点。Removes worthless text nodes
参数项：
  • forceReclean : Boolean
    （可选的）缺省地， 元素会追踪自己是否已被清除了，所以你可以不断地调用这个方法。然而，如果你需要更新元素而且需要强制清除，你可以传入true的参数。(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.
返回值：
  • void
Element
contains( HTMLElement/String el ) : Boolean
如果当前元素是传入元素的父辈级元素（ancestor)返回true。R...
如果当前元素是传入元素的父辈级元素（ancestor)返回true。Returns true if this element is an ancestor of the passed element
参数项：
  • el : HTMLElement/String
    要检查的元素。The element to check
返回值：
  • Boolean
    true表示这个元素是传入元素的父级元素，否则返回false。True if this element is an ancestor of el, else false
Element
isVisible( Boolean deep ) : Boolean
检查当前该元素是否都使用属性visibility和属性display来...
检查当前该元素是否都使用属性visibility和属性display来显示。Checks whether the element is currently visible using both visibility and display properties.
参数项：
  • deep : Boolean
    （可选的）True表示为沿着DOM一路看父元素是否隐藏的。(optional) True to walk the dom and see if parent elements are hidden (defaults to false)
返回值：
  • Boolean
    true表示该元素当前是可见的，否则返回false。True if the element is currently visible, else false
Element
select( String selector, Boolean unique ) : CompositeElement/CompositeElementLite
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成...
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回（因为id的元素唯一的，所以选择符不应是id的选择符）。Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    CSS选择符。The CSS selector
  • unique : Boolean
    （可选的）true表示为为每个子元素创建唯一的Ext.Element（默认为false享元的普通对象flyweight object）。(optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)
返回值：
  • CompositeElement/CompositeElementLite
    组合元素。The composite element
Element
query( String selector ) : Array
传入一个CSS选择符的参数，然后基于该选择符选取其子节点（因为id的元...
传入一个CSS选择符的参数，然后基于该选择符选取其子节点（因为id的元素唯一的，所以选择符不应是id的选择符）。Selects child nodes based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    CSS选择符。The CSS selector
返回值：
  • Array
    匹配节点之数组。An array of the matched nodes
Element
child( String selector, Boolean returnDom ) : HTMLElement/Ext.Element
传入一个CSS选择符的参数，然后基于该选择符，不限定深度进行搜索，符合...
传入一个CSS选择符的参数，然后基于该选择符，不限定深度进行搜索，符合的话选取单个子节点（选择符不应有id）。Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    CSS选择符。The CSS selector
  • returnDom : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点。(optional) True to return the DOM node instead of Ext.Element (defaults to false)
返回值：
  • HTMLElement/Ext.Element
    子节点，Ext.Element类型（如returnDom = true则为DOM节点）。The child Ext.Element (or DOM node if returnDom = true)
Element
down( String selector, Boolean returnDom ) : HTMLElement/Ext.Element
传入一个CSS选择符的参数，然后基于该选择符，"直接"选取单个子节点（...
传入一个CSS选择符的参数，然后基于该选择符，"直接"选取单个子节点（选择符不应有id）。child based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    The CSS selector
  • returnDom : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点。(optional) True to return the DOM node instead of Ext.Element (defaults to false)
返回值：
  • HTMLElement/Ext.Element
    子节点，Ext.Element类型。The child Ext.Element (or DOM node if returnDom = true)
Element
setVisible( Boolean visible, Boolean/Object animate ) : Ext.Element
设置元素可见性（请参阅细节）。如果visibilityMode被设置成...
设置元素可见性（请参阅细节）。如果visibilityMode被设置成常量Element.DISPLAY， 那么它会使用display属性来隐藏元素，否则它会使用visibility。默认是使用visibility属性。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.
参数项：
  • visible : Boolean
    元素是否可见的。Whether the element is visible
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
isDisplayed() : Boolean
如果属性display不是"none"就返回true。Returns ...
如果属性display不是"none"就返回true。Returns true if display is not "none"
参数项：
  • None.
返回值：
  • Boolean
Element
toggle( Boolean/Object animate ) : Ext.Element
轮换（两种状态中转换到一个状态）元素的visibility或displ...
轮换（两种状态中转换到一个状态）元素的visibility或display，取决于visibility mode。Toggles the element's visibility or display, depending on visibility mode.
参数项：
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setDisplayed( Mixed value ) : Ext.Element
设置元素在样式中的display属性。如果value为true，则使用...
设置元素在样式中的display属性。如果value为true，则使用originalDisplay。Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
参数项：
  • value : Mixed
    如果value为true，则使用originalDisplay。否则直接设置显示的字符串。Boolean value to display the element using its default display, or a string to set the display directly.
返回值：
  • Ext.Element
    this
Element
focus( Number defer ) : Ext.Element
使这个元素得到焦点。忽略任何已捕获的异常。Tries to focus...
使这个元素得到焦点。忽略任何已捕获的异常。Tries to focus the element. Any exceptions are caught and ignored.
参数项：
  • defer : Number
    （可选的） 延时执行focus的毫秒数。(optional) Milliseconds to defer the focus
返回值：
  • Ext.Element
    this
Element
blur() : Ext.Element
使这个元素失去焦点。忽略任何已捕获的异常。Tries to blur ...
使这个元素失去焦点。忽略任何已捕获的异常。Tries to blur the element. Any exceptions are caught and ignored.
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
addClass( String/Array className ) : Ext.Element
为元素添加设置CSS类（CSS Class）。重复出来的类会被忽略。A...
为元素添加设置CSS类（CSS Class）。重复出来的类会被忽略。Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
参数项：
  • className : String/Array
    要加入的CSS类或者由各类组成的数组。The CSS class to add, or an array of classes
返回值：
  • Ext.Element
    this
Element
radioClass( String/Array className ) : Ext.Element
添加一个或多个className到这个元素，并移除其所有侧边（sibl...
添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
参数项：
  • className : String/Array
    要加入的className，或者是由类组成的数组。The CSS class to add, or an array of classes
返回值：
  • Ext.Element
    this
Element
removeClass( String/Array className ) : Ext.Element
移除元素身上一个或多个的CSS类。Removes one or mor...
移除元素身上一个或多个的CSS类。Removes one or more CSS classes from the element.
参数项：
  • className : String/Array
    要加入的className，或者是由类组成的数组。The CSS class to remove, or an array of classes
返回值：
  • Ext.Element
    this
Element
toggleClass( String className ) : Ext.Element
轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的C...
轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
参数项：
  • className : String
    轮换的CSS类The CSS class to toggle
返回值：
  • Ext.Element
    this
Element
hasClass( String className ) : Boolean
检查某个CSS类是否作用于这个元素身上。Checks if the s...
检查某个CSS类是否作用于这个元素身上。Checks if the specified CSS class exists on this element's DOM node.
参数项：
  • className : String
    要检查CSS类The CSS class to check for
返回值：
  • Boolean
    true表示为类是有的，否则为falseTrue if the class exists, else false
Element
replaceClass( String oldClassName, String newClassName ) : Ext.Element
在这个元素身上替换CSS类。如果旧的CSS名称不存在，新的就会加入。R...
在这个元素身上替换CSS类。如果旧的CSS名称不存在，新的就会加入。Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
参数项：
  • oldClassName : String
    要被替换之CSS类，旧的CSS类The CSS class to replace
  • newClassName : String
    新CSS类The replacement CSS class
返回值：
  • Ext.Element
    this
Element
getStyles( String style1, String style2, String etc ) : Object
给出一些CSS属性名，得到其值。如el.getStyles('colo...
给出一些CSS属性名，得到其值。如el.getStyles('color', 'font-size', 'width')会返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}。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'}.
参数项：
  • style1 : String
    样式一A style name
  • style2 : String
    样式二A style name
  • etc : String
    .
返回值：
  • Object
    样式对象The style object
Element
getStyle( String property ) : String
统一化当前样式和计算样式。Normalizes currentStyl...
统一化当前样式和计算样式。Normalizes currentStyle and computedStyle.
参数项：
  • property : String
    返回值的那个样式属性The style property whose value is returned.
返回值：
  • String
    该元素样式属性的当前值The current value of the style property for this element.
Element
setStyle( String/Object property, String value ) : Ext.Element
设置元素的样式，也可以用一个对象参数包含多个样式。Wrapper fo...
设置元素的样式，也可以用一个对象参数包含多个样式。Wrapper for setting style properties, also takes single object parameter of multiple styles.
参数项：
  • property : String/Object
    要设置的样式属性，或是包含多个样式的对象The style property to be set, or an object of multiple styles.
  • value : String
    （可选的）样式属性的值，如果第一个参数是对象，则这个参数为null（不需要了）(optional) The value to apply to the given property, or null if an object was passed.
返回值：
  • Ext.Element
    this
Element
applyStyles( String/Object/Function styles ) : Ext.Element
setStyle的另一个版本，更能灵活地设置样式属性。More fle...
setStyle的另一个版本，更能灵活地设置样式属性。More flexible version of setStyle for setting style properties.
参数项：
  • styles : String/Object/Function
    表示样式的特定格式字符串，如“width:100px”，或是对象的形式如{width:"100px"}，或是能返回这些格式的函数。A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or a function which returns such a specification.
返回值：
  • Ext.Element
    this
Element
getX() : Number
返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有...
返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • None.
返回值：
  • Number
    元素的X位置。The X position of the element
Element
getY() : Number
返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有...
返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • None.
返回值：
  • Number
    元素的Y位置。The Y position of the element
Element
getXY() : Array
返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确...
返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • None.
返回值：
  • Array
    元素的XY位置。The XY position of the element
Element
getOffsetsTo( Mixed element ) : Array
返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分...
返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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.
参数项：
  • element : Mixed
    测距离的那个元素。The element to get the offsets from.
返回值：
  • Array
    页面会上两点的距离。The XY page offsets (e.g. [100, -200])
Element
setX( Number x, Boolean/Object animate ) : Ext.Element
设置元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有...
设置元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • x : Number
    元素的Y位置The X position of the element
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setY( Number The, Boolean/Object animate ) : Ext.Element
设置元素基于页面坐标的Y位置。元素必须是DOM树中的一部分才拥有页面坐...
设置元素基于页面坐标的Y位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • The : Number
    Y position of the element
  • animate : Boolean/Object
    (optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setLeft( String left ) : Ext.Element
直接使用CSS样式（代替setX），设定元素的left位置。Sets ...
直接使用CSS样式（代替setX），设定元素的left位置。Sets the element's left position directly using CSS style (instead of setX).
参数项：
  • left : String
    CSS left属性值。The left CSS property value
返回值：
  • Ext.Element
    this
Element
setTop( String top ) : Ext.Element
直接使用CSS样式（代替setY），设定元素的top位置。Sets t...
直接使用CSS样式（代替setY），设定元素的top位置。Sets the element's top position directly using CSS style (instead of setY).
参数项：
  • top : String
    CSS属性top的值。The top CSS property value
返回值：
  • Ext.Element
    this
Element
setRight( String right ) : Ext.Element
设置元素CSS Right的样式。Sets the element's...
设置元素CSS Right的样式。Sets the element's CSS right style.
参数项：
  • right : String
    Bottom CSS属性值。The right CSS property value
返回值：
  • Ext.Element
    this
Element
setBottom( String bottom ) : Ext.Element
设置元素CSS Bottom的样式。Sets the element'...
设置元素CSS Bottom的样式。Sets the element's CSS bottom style.
参数项：
  • bottom : String
    Bottom CSS属性值。The bottom CSS property value
返回值：
  • Ext.Element
    this
Element
setXY( Array pos, Boolean/Object animate ) : Ext.Element
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的...
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • pos : Array
    对于新位置（基于页面坐标）包含X & Y [x, y]的值Contains X & Y [x, y] values for new position (coordinates are page-based)
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setLocation( Number x, Number y, Boolean/Object animate ) : Ext.Element
无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一...
无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • x : Number
    新定位的X值（基于页面坐标）。X value for new position (coordinates are page-based)
  • y : Number
    新定位的Y值（基于页面坐标）。Y value for new position (coordinates are page-based)
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
moveTo( Number x, Number y, Boolean/Object animate ) : Ext.Element
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的...
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • x : Number
    新定位的X值（基于页面坐标）。X value for new position (coordinates are page-based)
  • y : Number
    新定位的Y值（基于页面坐标）。Y value for new position (coordinates are page-based)
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
getRegion() : Region
返回当前元素的区域。元素必须是DOM树中的一部分才拥有页面坐标（dis...
返回当前元素的区域。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • None.
返回值：
  • Region
    Ext.lib.Region包含"top, left, bottom, right"成员数据A Ext.lib.Region containing "top, left, bottom, right" member data.
Element
getHeight( Boolean contentHeight ) : Number
返回元素的偏移（offset）高度。Returns the offse...
返回元素的偏移（offset）高度。Returns the offset height of the element
参数项：
  • contentHeight : Boolean
    （可选的） true表示为返回的是减去边框和内补丁（borders & padding）的宽度。(optional) true to get the height minus borders and padding
返回值：
  • Number
    The element's height
Element
getWidth( Boolean contentWidth ) : Number
返回元素的偏移（offset）宽度。
返回元素的偏移（offset）宽度。
参数项：
  • contentWidth : Boolean
    （可选的） true表示为返回的是减去边框和内补丁（borders & padding）的宽度。(optional) true to get the width minus borders and padding
返回值：
  • Number
    元素宽度The element's width
Element
getComputedHeight() : Number
当偏移值不可用时就模拟一个出来。该方法返回由padding或borde...
当偏移值不可用时就模拟一个出来。该方法返回由padding或borders调整过的元素CSS高度，也可能是偏移的高度。如果不用CSS设置高度而且是display:none的元素，可能会没有。
参数项：
  • None.
返回值：
  • Number
Element
getComputedWidth() : Number
当偏移值不可用时就模拟一个出来。该方法返回由padding或borde...
当偏移值不可用时就模拟一个出来。该方法返回由padding或borders调整过的元素CSS宽度，也可能是偏移的宽度。如果不用CSS设置宽度而且是display:none的元素，可能会没有。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.
参数项：
  • None.
返回值：
  • Number
Element
getSize( Boolean contentSize ) : Object
返回元素大小。Returns the size of the elem...
返回元素大小。Returns the size of the element.
参数项：
  • contentSize : Boolean
    （可选的） true表示为获取的是减去border和padding的宽度大小(optional) true to get the width/size minus borders and padding
返回值：
  • Object
    包含元素大小尺寸的对象An object containing the element's size {width: (element width), height: (element height)}
Element
getViewSize() : Object
返回视图的高度和宽度。Returns the width and he...
返回视图的高度和宽度。Returns the width and height of the viewport.
参数项：
  • None.
返回值：
  • Object
    包含视图大小尺寸的对象，如{width: (viewport width), height: (viewport height)}An object containing the viewport's size {width: (viewport width), height: (viewport height)}
Element
getValue( Boolean asNumber ) : String/Number
返回“值的”属性值。Returns the value of the ...
返回“值的”属性值。Returns the value of the "value" attribute
参数项：
  • asNumber : Boolean
    表示为将值解析为数字。true to parse the value as a number
返回值：
  • String/Number
Element
setWidth( Number width, Boolean/Object animate ) : Ext.Element
设置元素的宽度。Set the width of the element
设置元素的宽度。Set the width of the element
参数项：
  • width : Number
    新宽度。The new width
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setHeight( Number height, Boolean/Object animate ) : Ext.Element
设置元素的高度。Set the height of the element
设置元素的高度。Set the height of the element
参数项：
  • height : Number
    新高度。The new height
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setSize( Number width, Number height, Boolean/Object animate ) : Ext.Element
设置元素的大小尺寸。如果动画选项被打开，高度和宽度都会顺带产生变化的动...
设置元素的大小尺寸。如果动画选项被打开，高度和宽度都会顺带产生变化的动画效果。Set the size of the element. If animation is true, both width an height will be animated concurrently.
参数项：
  • width : Number
    新宽度The new width
  • height : Number
    新高度The new height
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setBounds( Number x, Number y, Number width, Number height, Boolean/Object animate ) : Ext.Element
同时设置元素的位置和大小。如果动画选项被打开，高度和宽度都会顺带产生变...
同时设置元素的位置和大小。如果动画选项被打开，高度和宽度都会顺带产生变化的动画效果。Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
参数项：
  • x : Number
    新位置上的x值（基于页面的坐标）X value for new position (coordinates are page-based)
  • y : Number
    新位置上的y值（基于页面的坐标）Y value for new position (coordinates are page-based)
  • width : Number
    新宽度The new width
  • height : Number
    新高度The new height
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setRegion( Ext.lib.Region region, Boolean/Object animate ) : Ext.Element
设置元素的位置并调整大小到指定的位置。如果动画选项被打开，高度和宽度都...
设置元素的位置并调整大小到指定的位置。如果动画选项被打开，高度和宽度都会顺带产生变化的动画效果。Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
参数项：
  • region : Ext.lib.Region
    要填充的区域The region to fill
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性：(optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObjectFalse 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代表为下次事件触发加入一个要处理的函数，然后再移除本身。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原句柄将不会 被启用，但是新句柄会安排在其位置。Causes the handler to be scheduled to run in an 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 on is used rather than the more verbose addListener. The two are equivalent. 下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： Using the options argument, it is possible to combine different types of listeners:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Element
removeListener( String eventName, Function fn, Object scope ) : Ext.Element
从这个元素上移除一个事件处理函数。un是它的简写方式。Removes ...
从这个元素上移除一个事件处理函数。un是它的简写方式。Removes an event handler from this element. The shorthand version un is equivalent. Example:

el.removeListener('click', this.handlerFn);
// 或者
el.un('click', this.handlerFn);
参数项：
  • eventName : String
    要移除的事件处理函数的名称the type of event to remove
  • fn : Function
    事件处理器the method the event invokes
  • scope : Object
    （可选的）函数的作用域（默认这个元素）(optional) The scope (The this reference) of the handler function. Defaults to this Element.
返回值：
  • Ext.Element
    this
Element
removeAllListeners() : Ext.Element
在该元素身上移除所有已加入的侦听器。Removes all previ...
在该元素身上移除所有已加入的侦听器。Removes all previous added listeners from this element
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
relayEvent( String eventName, Object object )
创建此元素的事件句柄，由此元素接替另外的对象触发和处理事件。Creat...
创建此元素的事件句柄，由此元素接替另外的对象触发和处理事件。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).
参数项：
  • eventName : String
    要接替的事件名称The type of event to relay
  • object : Object
    任何继承自Ext.util.Observable的对象用于在上下文里触发接替的事件Any object that extends Ext.util.Observable that will provide the context for firing the relayed event
返回值：
  • void
Element
setOpacity( Float opacity, Boolean/Object animate ) : Ext.Element
设置元素的透明度。Set the opacity of the ele...
设置元素的透明度。Set the opacity of the element
参数项：
  • opacity : Float
    新的透明度。0 = 透明，.5 = 50% 可见，1 = 完全可见……The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
getLeft( Boolean local ) : Number
获取左边的X坐标。Gets the left X coordinate
获取左边的X坐标。Gets the left X coordinate
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
getRight( Boolean local ) : Number
获取元素右边的X坐标（元素X位置 + 元素宽度）。Gets the r...
获取元素右边的X坐标（元素X位置 + 元素宽度）。Gets the right X coordinate of the element (element X position + element width)
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
getTop( Boolean local ) : Number
获取顶部Y坐标。Gets the top Y coordinate
获取顶部Y坐标。Gets the top Y coordinate
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
getBottom( Boolean local ) : Number
获取元素的底部Y坐标（元素Y位置 + 元素宽度）。Gets the b...
获取元素的底部Y坐标（元素Y位置 + 元素宽度）。Gets the bottom Y coordinate of the element (element Y position + element height)
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
position( String pos, Number zIndex, Number x, Number y )
初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前...
初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。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.
参数项：
  • pos : String
    （可选的） 使用"relative","absolute"或"fixed"的定位。(optional) Positioning to use "relative", "absolute" or "fixed"
  • zIndex : Number
    （可选的） z-Index值。(optional) The zIndex to apply
  • x : Number
    （可选的）设置页面X方向位置。(optional) Set the page X position
  • y : Number
    （可选的）设置页面Y方向位置。(optional) Set the page Y position
返回值：
  • void
Element
clearPositioning( String value ) : Ext.Element
当文档加载后清除位置并复位到默认。Clear positioning ...
当文档加载后清除位置并复位到默认。Clear positioning back to the default when the document was loaded
参数项：
  • value : String
    （可选的） 用于left,right,top,bottom的值，默认为''(空白字符串)。你可使用'auto'。(optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
返回值：
  • Ext.Element
    this
Element
getPositioning() : Object
返回一个包含CSS定位信息的对象。有用的技巧：连同setPostion...
返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。Gets an object with all CSS positioning properties. Useful along with setPostioning to get snapshot before performing an update and then restoring the element.
参数项：
  • None.
返回值：
  • Object
Element
getBorderWidth( String side ) : Number
返回指定边（side(s)）的padding宽度。Gets the w...
返回指定边（side(s)）的padding宽度。Gets the width of the border(s) for the specified side(s)
参数项：
  • side : String
    可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到(l)eft padding +(r)ight padding。Can be t, l, r, b or any combination of those to add multiple values. For example, passing lr would get the border (l)eft width + the border (r)ight width.
返回值：
  • Number
    四边的padding之和。The width of the sides passed added together
Element
getPadding( String side ) : Number
获取指定方位（side(s)）的padding宽度。Gets the ...
获取指定方位（side(s)）的padding宽度。Gets the width of the padding(s) for the specified side(s)
参数项：
  • side : String
    可以是t, l, r, b或是任何组合，例如，传入lr的参数会得到(l)eft padding +(r)ight padding。Can be t, l, r, b or any combination of those to add multiple values. For example, passing lr would get the padding (l)eft + the padding (r)ight.
返回值：
  • Number
    四边的padding之和The padding of the sides passed added together
Element
setPositioning( Object posCfg ) : Ext.Element
由getPositioning()返回的对象去进行定位。Set pos...
由getPositioning()返回的对象去进行定位。Set positioning with an object returned by getPositioning().
参数项：
  • posCfg : Object
返回值：
  • Ext.Element
    this
Element
setLeftTop( String left, String top ) : Ext.Element
快速设置left和top（采用默认单位）。Quick set left...
快速设置left和top（采用默认单位）。Quick set left and top adding default units
参数项：
  • left : String
    CSS的left属性值The left CSS property value
  • top : String
    CSS的top属性值The top CSS property value
返回值：
  • Ext.Element
    this
Element
move( String direction, Number distance, Boolean/Object animate ) : Ext.Element
移动这个元素到相对于当前的位置。Move this element r...
移动这个元素到相对于当前的位置。Move this element relative to its current position.
参数项：
  • direction : String
    允许的值：Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
  • distance : Number
    元素移动有多远（像素）How far to move the element in pixels
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
clip() : Ext.Element
保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使...
保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip来移除。Store the current overflow setting and clip overflow on the element - use unclip to remove
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
unclip() : Ext.Element
在调用clip()之前，返回原始的裁剪部分（溢出的）。Return c...
在调用clip()之前，返回原始的裁剪部分（溢出的）。Return clipping (overflow) to original clipping before clip() was called
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
clearOpacity() : Ext.Element
清除这个元素的透明度设置。IE有时候会用到。Clears any op...
清除这个元素的透明度设置。IE有时候会用到。Clears any opacity settings from this element. Required in some cases for IE.
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
hide( Boolean/Object animate ) : Ext.Element
隐藏此元素-使用display mode来决定用"display"抑或...
隐藏此元素-使用display mode来决定用"display"抑或"visibility"。请参阅setVisible。Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
参数项：
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
show( Boolean/Object animate ) : Ext.Element
显示此元素-使用display mode来决定用"display"抑或...
显示此元素-使用display mode来决定用"display"抑或"visibility"。请参阅setVisible。Show this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
参数项：
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
update( String html, Boolean loadScripts, Function callback ) : Ext.Element
更新该元素的innerHTML属性，有时遇到脚本便可以执行。Updat...
更新该元素的innerHTML属性，有时遇到脚本便可以执行。Update the innerHTML of this element, optionally searching for and processing scripts
参数项：
  • html : String
    新的HTMLThe new HTML
  • loadScripts : Boolean
    （可选的） true表示为遇到脚本要执行(optional) True to look for and process scripts (defaults to false)
  • callback : Function
    当更新完成后，你加载一个异步函数执行它，以得知更新完成。(optional) For async script loading you can be notified when the update completes
返回值：
  • Ext.Element
    this
Element
load() : Ext.Element
直接访问Updater的Ext.Updaterupdate方法（相同的...
直接访问Updater的Ext.Updaterupdate方法（相同的参数）。参数与Ext.Updaterupdate方法的一致。Direct access to the Updater Ext.Updaterupdate method. The method takes the same object parameter as Ext.Updaterupdate
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
getUpdater() : Ext.Updater
获取这个元素的UpdateManager。Gets this elem...
获取这个元素的UpdateManager。Gets this element's Updater
参数项：
  • None.
返回值：
  • Ext.Updater
    The Updater
Element
unselectable() : Ext.Element
禁止该元素的文本可被选择（可跨浏览器）。Disables text s...
禁止该元素的文本可被选择（可跨浏览器）。Disables text selection for this element (normalized across browsers)
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
getCenterXY() : Array
返回该元素的x，y到屏幕中心的值 Calculates the x, ...
返回该元素的x，y到屏幕中心的值 Calculates the x, y to center this element on the screen
参数项：
  • None.
返回值：
  • Array
    The x, y values [x, y]
Element
center( Mixed centerIn )
在视图或其他元素中，居中元素。Centers the Element ...
在视图或其他元素中，居中元素。Centers the Element in either the viewport, or another Element.
参数项：
  • centerIn : Mixed
    （可选的）视图或其他元素(optional) The element in which to center the element.
返回值：
  • void
Element
isBorderBox() : Boolean
测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。...
测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。Tests various css rules/browsers to determine if this element uses a border box
参数项：
  • None.
返回值：
  • Boolean
Element
getBox( Boolean contentBox, Boolean local ) : Object
返回一个BOX对象，形如{x, y, width, height}，可...
返回一个BOX对象，形如{x, y, width, height}，可用于设置其他与之匹配的元素的大小/位置。Return a box {x, y, width, height} that can be used to set another elements size/location to match this element.
参数项：
  • contentBox : Boolean
    （可选的）true表示为返回元素内容的BOX(optional)。If true a box for the content of the element is returned.
  • local : Boolean
    （可选的） true表示为返回元素的left和top代替页面的x/y。(optional) If true the element's left and top are returned instead of page x/y.
返回值：
  • Object
    box BOX对象，形如{x, y, width, height}
Element
getFrameWidth( String sides ) : Number
传入的“side”的参数，统计边框和内补丁（padding & bor...
传入的“side”的参数，统计边框和内补丁（padding & borders）的宽度并返回该值。参阅getBorderWidth()以得到更多sides的资料。Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth() for more information about the sides.
参数项：
  • sides : String
返回值：
  • Number
Element
setBox( Object box, Boolean adjust, Boolean/Object animate ) : Ext.Element
设置元素之Box。使用getBox() 在其他对象身上获取box对象。...
设置元素之Box。使用getBox() 在其他对象身上获取box对象。如果动画为true，那么高度和宽度都会同时出现动画效果。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.
参数项：
  • box : Object
    填充的Box {x, y, width, height}The box to fill {x, y, width, height}
  • adjust : Boolean
    （可选的） 是否自动调整由“箱子”问题引起的高度和宽度设置(optional) Whether to adjust for box-model issues automatically
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
repaint() : Ext.Element
强制浏览器重新渲染该元素。Forces the browser to ...
强制浏览器重新渲染该元素。Forces the browser to repaint this element
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
getMargins( String sides ) : Object/Number
返回该元素的top、left、right和bottom属性，以表示ma...
返回该元素的top、left、right和bottom属性，以表示margin（外补丁）除非有side参数。若有sides参数传入，即返回已计算好的sides宽度（参见getPading）。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)
参数项：
  • sides : String
    （可选的） 任何 l, r, t, b的组合，以获取该sides的统计。(optional) Any combination of l, r, t, b to get the sum of those sides
返回值：
  • Object/Number
Element
createProxy( String/Object config, String/HTMLElement renderTo, Boolean matchBox ) : Ext.Element
创建当前元素的代理（Proxy）元素。Creates a proxy ...
创建当前元素的代理（Proxy）元素。Creates a proxy element of this element
参数项：
  • config : String/Object
    代理元素的class名称或是DomHelper配置项对象The class name of the proxy element or a DomHelper config object
  • renderTo : String/HTMLElement
    （可选的） 成为代理的元素或是元素ID（默认为 document.body）(optional) The element or element id to render the proxy to (defaults to document.body)
  • matchBox : Boolean
    (optional) （可选的） true表示为立即与代理对齐和设置大小（默认为false）True to align and size the proxy to this element now (defaults to false)
返回值：
  • Ext.Element
    新代理元素The new proxy element
Element
mask( String msg, String msgCls ) : Element
在元素身上遮上一个蒙板（mask），以禁止用户操作。须依赖core.c...
在元素身上遮上一个蒙板（mask），以禁止用户操作。须依赖core.css文件。这个方法只能作用于接受子节点（child nodes）的元素。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.
参数项：
  • msg : String
    （可选的） 蒙板作用时显示的信息(optional) A message to display in the mask
  • msgCls : String
    （可选的） 蒙板元素的CSS类(optional) A css class to apply to the msg element
返回值：
  • Element
    蒙板元素The mask element
Element
unmask()
移除之前用过的蒙板。Removes a previously appl...
移除之前用过的蒙板。Removes a previously applied mask.
参数项：
  • None.
返回值：
  • void
Element
isMasked() : Boolean
返回true表示为这个元素应用了蒙板。Returns true if ...
返回true表示为这个元素应用了蒙板。Returns true if this element is masked
参数项：
  • None.
返回值：
  • Boolean
Element
createShim() : Ext.Element
创建一个“iframe垫片”来使得select和其他windowed对...
创建一个“iframe垫片”来使得select和其他windowed对象在该元素显示之下。Creates an iframe shim for this element to keep selects and other windowed objects from showing through.
参数项：
  • None.
返回值：
  • Ext.Element
    新垫片元素The new shim element
Element
remove()
从DOM里面移除当前元素，并从缓存中删除。Removes this e...
从DOM里面移除当前元素，并从缓存中删除。Removes this element from the DOM and deletes it from the cache
参数项：
  • None.
返回值：
  • void
Element
hover( Function overFn, Function outFn, Object scope ) : Ext.Element
设置事件句柄，当鼠标在此元素之上作用的Css样式类。自动过滤因mous...
设置事件句柄，当鼠标在此元素之上作用的Css样式类。自动过滤因mouseout事件引起在子元素上的轻移（Flicker） Sets up event handlers to call the passed functions when the mouse is over this element. Automatically filters child element mouse events.
参数项：
  • overFn : Function
  • outFn : Function
  • scope : Object
    (optional)
返回值：
  • Ext.Element
    this
Element
addClassOnOver( String className ) : Ext.Element
数组当鼠标位于元素上方时作用的CSS样式类。Sets up event...
数组当鼠标位于元素上方时作用的CSS样式类。Sets up event handlers to add and remove a css class when the mouse is over this element
参数项：
  • className : String
返回值：
  • Ext.Element
    this
Element
addClassOnFocus( String className ) : Ext.Element
设置当元素得到焦点（focus）时作用的CSS样式类。Sets up ...
设置当元素得到焦点（focus）时作用的CSS样式类。Sets up event handlers to add and remove a css class when this element has the focus
参数项：
  • className : String
返回值：
  • Ext.Element
    this
Element
addClassOnClick( String className ) : Ext.Element
当鼠标在该元素上面按下接着松开（即单击效果），设置事件处理器来添加和移...
当鼠标在该元素上面按下接着松开（即单击效果），设置事件处理器来添加和移除css类。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)
参数项：
  • className : String
返回值：
  • Ext.Element
    this
Element
swallowEvent( String/Array eventName, Boolean preventDefault ) : Ext.Element
事件上报（bubbling）的过程中停止特定的事件，阻止默认动作（可选...
事件上报（bubbling）的过程中停止特定的事件，阻止默认动作（可选的）。Stops the specified event(s) from bubbling and optionally prevents the default action
参数项：
  • eventName : String/Array
    要在上报过程中停止的事件或事件构成的数组an event / array of events to stop from bubbling
  • preventDefault : Boolean
    （可选的）true表示阻止默认动作(optional) true to prevent the default action too
返回值：
  • Ext.Element
    this
Element
parent( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
返回当前节点的那个父节点，可选地可送入一个期待的选择符。Gets th...
返回当前节点的那个父节点，可选地可送入一个期待的选择符。Gets the parent node for this element, optionally chaining up trying to match a selector
参数项：
  • selector : String
    (optional) 通过简易选择符来查找父节点Find a parent node that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    父节点或是null
Element
next( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取下一个侧边节点，跳过文本节点。Gets the next sibl...
获取下一个侧边节点，跳过文本节点。Gets the next sibling, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找下一个侧边节点(optional) Find the next sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    下一个侧边节点或nullThe next sibling or null
Element
prev( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取上一个侧边节点，跳过文本节点。Gets the previous ...
获取上一个侧边节点，跳过文本节点。Gets the previous sibling, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找上一个侧边节点(optional) Find the previous sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    上一个侧边节点或nullThe previous sibling or null
Element
first( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取第一个子元素，跳过文本节点。Gets the first chil...
获取第一个子元素，跳过文本节点。Gets the first child, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找第一个子元素(optional) Find the next sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    第一个子元素或nullThe first child or null
Element
last( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取最后一个子元素，跳过文本节点。Gets the last chil...
获取最后一个子元素，跳过文本节点。Gets the last child, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找最后一个元素(optional) Find the previous sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    最后一个元素或nullThe last child or null
Element
createChild( Object config, HTMLElement insertBefore, Boolean returnDom ) : Ext.Element
传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。C...
传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
参数项：
  • config : Object
    DomHelper元素配置项对象。如果没有传入特定的要求，如{tag:'input'}，那么将自动用DIV去创建，并附有一些属性。DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be automatically generated with the specified attributes.
  • insertBefore : HTMLElement
    （可选的） 该元素的子元素(optional) a child element of this element
  • returnDom : Boolean
    (optional) （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素true to return the dom node instead of creating an Element
返回值：
  • Ext.Element
    新的子元素The new child element
Element
wrap( Object config, Boolean returnDom ) : HTMLElement/Element
创建一个新的元素，包裹在当前元素外面。Creates and wrap...
创建一个新的元素，包裹在当前元素外面。Creates and wraps this element with another element
参数项：
  • config : Object
    （可选的） 包裹元素（null的话则是一个空白的div）的DomHelper配置项对象(optional) DomHelper element config object for the wrapper element or null for an empty div
  • returnDom : Boolean
    (optional) （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素True to return the raw DOM element instead of Ext.Element
返回值：
  • HTMLElement/Element
    刚创建好的包裹元素The newly created wrapper element
Element
insertHtml( String where, String html, Boolean returnEl ) : HTMLElement/Ext.Element
插入HTML片断到这个元素。Inserts an html fragm...
插入HTML片断到这个元素。Inserts an html fragment into this element
参数项：
  • where : String
    要插入的html放在元素的哪里。-Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
  • html : String
    HTML片断。The HTML fragment
  • returnEl : Boolean
    true表示为返回一个Ext.Element类型的DOM对象。(optional) True to return an Ext.Element (defaults to false)
返回值：
  • HTMLElement/Ext.Element
    被插入之节点（或最近的，如果超过一处插入的话）。The inserted node (or nearest related if more than 1 inserted)
Element
set( Object o, Boolean useSet ) : Ext.Element
传入属性（attributes）的参数，使之成为该元素的属性（一个样式...
传入属性（attributes）的参数，使之成为该元素的属性（一个样式的属性可以是字符串，对象或函数function）。Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
参数项：
  • o : Object
    属性对象。The object with the attributes
  • useSet : Boolean
    （可选的） false表示为用expandos来重写默认的setAttribute。(optional) false to override the default setAttribute to use expandos.
返回值：
  • Ext.Element
    this
Element
translatePoints( Number/Array x, Number y ) : Object
送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。T...
送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。Translates the passed page coordinates into left/top css values for this element
参数项：
  • x : Number/Array
    页面x or 数组 [x, y]The page x or an array containing [x, y]
  • y : Number
    （可选的）如x不是数组那必须指定y(optional) The page y, required if x is not an array
返回值：
  • Object
    包含left、top属性的对象，如 {left: (值), top: (值)}An object with left and top properties. e.g. {left: (value), top: (value)}
Element
getScroll() : Object
返回元素当前滚动的位置。Returns the current scr...
返回元素当前滚动的位置。Returns the current scroll position of the element.
参数项：
  • None.
返回值：
  • Object
    包含滚动位置的对象，格式如 {left: (scrollLeft), top: (scrollTop)}An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
Element
getColor( String attr, String defaultValue, String prefix )
为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值...
为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values。
参数项：
  • attr : String
    CSS属性The css attribute
  • defaultValue : String
    当找不到有效的颜色时所用的默认值。The default value to use when a valid color isn't found
  • prefix : String
    （可选的） 默认为#。当应用到颜色动画时须为空白字串符。Use an empty string when working with color anims.
返回值：
  • void
Element
usage( String class ) : Ext.Element
将指定的元素打包到一个特定的样式/markup块，渲染成为斜纹背景、圆...
将指定的元素打包到一个特定的样式/markup块，渲染成为斜纹背景、圆角和四边投影的灰色容器。用法举例：

//
Ext.get("foo").boxWrap();

Ext.get("foo").boxWrap().addClass("x-box-blue");
参数项：
  • class : String
    （可选的）一个CSS基类，应用到包裹元素（默认为'x-box'）。注意有许多依赖该CSS规则来产生整体的效果。所以你提供一个交替的基样式，必须保证你所提供的都是所需的规则。
返回值：
  • Ext.Element
    this
Element
boxWrap( String class ) : Ext.Element
Wrap()的高级版本。Wrap将指定的元素打包到一个特定的样式/ma...
Wrap()的高级版本。Wrap将指定的元素打包到一个特定的样式/markup块，产生斜纹背景、圆角和四边投影的灰色容器。用法举例： Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a gradient background, rounded corners and a 4-way shadow. Example usage:

// 基本box打包Basic box wrap
Ext.get("foo").boxWrap();

// 你也可以加入新的CSS样式类来定义box的外观。You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue'是内建的参考项。看看例子中是怎么创建一个自定义的样式。'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");
参数项：
  • class : String
    （可选的）一个CSS基类，应用到包裹元素（默认为'x-box'）(optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box'). 注意这里须要依赖一些CSS样式规则来产生整体的效果。所以你提供一个交替的基样式，必须保证你所提供的都是所需的规则。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.
返回值：
  • Ext.Element
    this
Element
getAttributeNS( String namespace, String name ) : String
在DOM节点中的某个元素，返回其一个命名空间属性的值。Returns ...
在DOM节点中的某个元素，返回其一个命名空间属性的值。Returns the value of a namespaced attribute from the element's underlying DOM node.
参数项：
  • namespace : String
    要查找属性所在的命名空间The namespace in which to look for the attribute
  • name : String
    属性名称The attribute name
返回值：
  • String
    属性值The attribute value
Element
on( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数（addListener的简写方式）Appends...
加入一个事件处理函数（addListener的简写方式）Appends an event handler (shorthand for addListener).
参数项：
  • eventName : String
    事件处理函数的名称The type of event to handle
  • fn : Function
    事件处理函数The handler function the event invokes
  • scope : Object
    （可选的）函数的作用域（默认这个元素）(optional) The scope (this element) of the handler function
  • options : Object
    （可选的）标准的事件addListener 配置项对象(optional) An object containing standard addListener options @member Ext.Element
返回值：
  • void
Element
un( String eventName, Function fn, Object scope ) : Ext.Element
从这个元素上移除一个事件处理函数（removeListener的简写方...
从这个元素上移除一个事件处理函数（removeListener的简写方式）。Removes an event handler from this element (shorthand for removeListener).
参数项：
  • eventName : String
    要移除的事件处理函数的名称the type of event to remove
  • fn : Function
    事件处理器the method the event invokes
  • scope : Object
    （可选的）函数的作用域（默认这个元素）(optional) The scope (The this reference) of the handler function. Defaults to this Element.
返回值：
  • Ext.Element
    this @member Ext.Element
Element
autoBoxAdjust()
true表示为自动调整由box-mode问题引起的高度和宽度设置（默认...
true表示为自动调整由box-mode问题引起的高度和宽度设置（默认true）。true to automatically adjust width and height settings for box-model issues (default to true)
参数项：
  • None.
返回值：
  • void
Element
get( Mixed el ) : Element
获取元素对象的静态方法。Static method to retrie...
获取元素对象的静态方法。Static method to retrieve Ext.Element objects.

这个方法并非能获取Component。 这是一个对DOM元素进行Ext.Element类型的封装方法。要获取组件，请使用Ext.ComponentMgrget方法。This method retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentMgrget.

如果是相同的对象的话，只是从缓存中提取。Uses simple caching to consistently return the same object. 如果通过AJAX或DOM再创建对象，那么它是同一个ID，这里会自动修正。Automatically fixes if an object was recreated with the same id via AJAX or DOM.

参数项：
  • el : Mixed
    节点的id，一个DOM节点或是已存在的元素The id of the node, a DOM Node or an existing Element.
返回值：
  • Element
    Element类型的元素对象（null的话就代表没有找到元素）The Element object (or null if no matching element was found) @member Ext
Element
fly( String/HTMLElement el, String named ) : Element
获取享元的元素，传入的节点会成为活动元素。这里不会保存该元素的引用（r...
获取享元的元素，传入的节点会成为活动元素。这里不会保存该元素的引用（reference）－可由其它代码重写dom节点。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.
参数项：
  • el : String/HTMLElement
    Dom节点或idThe dom node or id
  • named : String
    （可选的） 为避免某些冲突（如在ext内部的“_internal”），可另外起一个名字。(optional) Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_internal") @static
返回值：
  • Element
    共享的Element对象（null表示为找不到元素）The shared Element object (or null if no matching element was found)
Element

公共事件

这个类没有公告事件。


Class Ext.Error

Package: | Ext
Defined In: | Error.js
Class: | Error
Extends: | Object
try {
    generateError({
        foo: 'bar'
    });
}
catch (e) {
    console.error(e);
}
function generateError(data) {
    throw new Ext.Error('foo-error', data);
}

Public Properties

This class has no public properties.

Public Methods

Method Defined By
getMessage() : String
getMessage
getMessage
Parameters:
  • None.
Returns:
  • String
Error
getName() : String
getName
getName
Parameters:
  • None.
Returns:
  • String
Error
toJson() : String
toJson
toJson
Parameters:
  • None.
Returns:
  • String
Error

Public Events

This class has no public events.


类Ext.EventManager

包： | Ext
定义的文件： | EventManager.js
类全称： | Ext.EventManager
继承自于： | Object
对于登记的事件处理器（Event handlers），能够接受一个常规化的（已作跨浏览器处理的）EventObject的参数，而非浏览器的标准事件，并直接提供一些有用的事件。更多“已常规化的事件对象（normalized event objects）”的信息，请参阅Ext.EventObject。Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides several useful events directly. See Ext.EventObject for more details on normalized event objects. @singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
addListener( String/HTMLElement el, String eventName, Function handler, Object scope, Object options )
加入一个事件处理函数，方法on是其简写方式。Appends an ev...
加入一个事件处理函数，方法on是其简写方式。Appends an event handler to an element. The shorthand version on is equivalent. Typically you will use Ext.ElementaddListener directly on an Element in favor of calling this version.
参数项：
  • el : String/HTMLElement
    要分配的html元素或者其id。The html element or id to assign the event handler to
  • eventName : String
    事件处理函数的名称。The type of event to listen for
  • handler : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型为Element。注意该项可能会因delegate选项的筛选而发生变化。The Element which was the target of the event. Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象。The options object from the addListener call.
  • scope : Object
    （可选的）事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope in which to execute the handler function (the handler function's "this" context)
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性：(optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为下次事件触发加入一个要处理的函数，然后再移除本身。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原句柄将不会 被启用，但是新句柄会安排在其位置。Causes the handler to be scheduled to run in an 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.

    请参阅Ext.ElementaddListener其中的例子以了解这些选项更多的用法。See Ext.ElementaddListener for examples of how to use these options.

返回值：
  • void
EventManager
removeListener( String/HTMLElement el, String eventName, Function fn )
移除事件处理器（event handler），跟简写方式un是一样的。...
移除事件处理器（event handler），跟简写方式un是一样的。通常你会更多的使用元素本身Ext.ElementremoveListener的方法。Removes an event handler from an element. The shorthand version un is equivalent. Typically you will use Ext.ElementremoveListener directly on an Element in favor of calling this version.
参数项：
  • el : String/HTMLElement
    欲移除事件的html元素或id。The id or html element from which to remove the event
  • eventName : String
    事件的类型。The type of event
  • fn : Function
    事件的执行那个函数。The handler function to remove
返回值：
  • void
EventManager
removeAll( String/HTMLElement el )
移除某个元素所有的事件处理器。一般而言你直接在元素身上调用Ext.El...
移除某个元素所有的事件处理器。一般而言你直接在元素身上调用Ext.ElementremoveAllListeners方法即可。Removes all event handers from an element. Typically you will use Ext.ElementremoveAllListeners directly on an Element in favor of calling this version.
参数项：
  • el : String/HTMLElement
    HTML元素或其id。The id or html element from which to remove the event
返回值：
  • void
EventManager
onDocumentReady( Function fn, Object scope, boolean options )
当Document准备好的时候触发（在onload之前和在图片加载之前...
当Document准备好的时候触发（在onload之前和在图片加载之前）。可以简写为Ext.onReady()。Fires when the document is ready (before onload and before images are loaded). Can be accessed shorthanded as Ext.onReady().
参数项：
  • fn : Function
    执行的函数。The method the event invokes
  • scope : Object
    （可选的）函数的作用域。(optional) An object that becomes the scope of the handler
  • options : boolean
    （可选的）标准addListener的选项对象。(optional) An object containing standard addListener options
返回值：
  • void
EventManager
onWindowResize( Function fn, Object scope, boolean options )
当window改变大小后触发，并有随改变大小的缓冲（50毫秒），对回调...
当window改变大小后触发，并有随改变大小的缓冲（50毫秒），对回调函数传入新视图的高度、宽度的参数。Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
参数项：
  • fn : Function
    事件执行的函数。The method the event invokes
  • scope : Object
    函数的作用域。An object that becomes the scope of the handler
  • options : boolean
返回值：
  • void
EventManager
onTextResize( Function fn, Object scope, boolean options )
当激活的文本尺寸被用户改变时触发该事件。对回调函数传入旧尺寸、新尺寸的...
当激活的文本尺寸被用户改变时触发该事件。对回调函数传入旧尺寸、新尺寸的参数。Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
参数项：
  • fn : Function
    事件执行的函数。The method the event invokes
  • scope : Object
    函数的作用域。An object that becomes the scope of the handler
  • options : boolean
返回值：
  • void
EventManager
removeResizeListener( Function fn, Object scope )
移除传入的window resize侦听器。Removes the p...
移除传入的window resize侦听器。Removes the passed window resize listener.
参数项：
  • fn : Function
    事件执行的函数。The method the event invokes
  • scope : Object
    函数的作用域。The scope of handler
返回值：
  • void
EventManager
ieDeferSrc()
配合SSL为onDocumentReady使用的Url（默认为Ext....
配合SSL为onDocumentReady使用的Url（默认为Ext.SSL_SECURE_URL）。Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
参数项：
  • None.
返回值：
  • void
EventManager
textResizeInterval()
检查resize事件的频率，单位是毫秒数（默认为50）。The fre...
检查resize事件的频率，单位是毫秒数（默认为50）。The frequency, in milliseconds, to check for text resize events (defaults to 50)
参数项：
  • None.
返回值：
  • void
EventManager
on( String/HTMLElement el, String eventName, Function handler, Object scope, Object options )
Appends an event handler to an elem...
Appends an event handler to an element. Shorthand for addListener.
参数项：
  • el : String/HTMLElement
    The html element or id to assign the event handler to
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler function the event invokes
  • scope : Object
    (optional) The scope in which to execute the handler function (the handler function's "this" context)
  • options : Object
    (optional) An object containing standard addListener options @member Ext.EventManager
返回值：
  • void
EventManager
un( String/HTMLElement el, String eventName, Function fn ) : Boolean
Removes an event handler from an el...
Removes an event handler from an element. Shorthand for removeListener.
参数项：
  • el : String/HTMLElement
    The id or html element from which to remove the event
  • eventName : String
    The type of event
  • fn : Function
    The handler function to remove
返回值：
  • Boolean
    True if a listener was actually removed, else false @member Ext.EventManager
EventManager
onReady( Function fn, Object scope, boolean options )
当文档准备好的时候触发（在onload之前和在图片加载之前）。系Ext...
当文档准备好的时候触发（在onload之前和在图片加载之前）。系Ext.EventManageronDocumentReady的简写方式。Fires when the document is ready (before onload and before images are loaded). Shorthand of Ext.EventManageronDocumentReady.
参数项：
  • fn : Function
    The method the event invokes
  • scope : Object
    An object that becomes the scope of the handler
  • options : boolean
    (optional) An object containing standard addListener options @member Ext
返回值：
  • void
EventManager

公共事件

这个类没有公告事件。


类Ext.EventObject

包： | Ext
定义的文件： | EventManager.js
类全称： | Ext.EventObject
继承自于： | Object
为方便操作，在你定义的事件句柄上传入事件对象（Event Object），这个对象直接呈现了Yahoo! UI事件功能。同时也解决了自动null检查的不便。
EventObject exposes the Yahoo! UI Event functionality directly on the object passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code 举例：Example:

 function handleClick(e){ // e它不是一个标准的事件对象，而是Ext.EventObject。e is not a standard event object, it is a Ext.EventObject
    e.preventDefault();
    var target = e.getTarget();
    ...
 }
 var myDiv = Ext.get("myDiv");
 myDiv.on("click", handleClick);
 // 或者or
 Ext.EventManager.on("myDiv", 'click', handleClick);
 Ext.EventManager.addListener("myDiv", 'click', handleClick);
@singleton

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Number 键码常量。Key constant 键码常量。Key constant | EventObject

公共方法

方法 定义者
browserEvent()
一般浏览器事件。The normal browser event
一般浏览器事件。The normal browser event
参数项：
  • None.
返回值：
  • void
EventObject
button()
鼠标世界有按钮按下。The button pressed in a m...
鼠标世界有按钮按下。The button pressed in a mouse event
参数项：
  • None.
返回值：
  • void
EventObject
shiftKey()
True表示事件触发时是有按下shift键的。True if the ...
True表示事件触发时是有按下shift键的。True if the shift key was down during the event
参数项：
  • None.
返回值：
  • void
EventObject
ctrlKey()
True表示事件触发时是有按下ctrl键的。True if the c...
True表示事件触发时是有按下ctrl键的。True if the control key was down during the event
参数项：
  • None.
返回值：
  • void
EventObject
altKey()
True表示事件触发时是有按下alt键的。True if the al...
True表示事件触发时是有按下alt键的。True if the alt key was down during the event
参数项：
  • None.
返回值：
  • void
EventObject
stopEvent()
停止事件（preventDefault和stopPropagation...
停止事件（preventDefault和stopPropagation）。Stop the event (preventDefault and stopPropagation)
参数项：
  • None.
返回值：
  • void
EventObject
preventDefault()
阻止浏览器默认行为处理事件。Prevents the browsers...
阻止浏览器默认行为处理事件。Prevents the browsers default handling of the event.
参数项：
  • None.
返回值：
  • void
EventObject
stopPropagation()
获取事件的键盘代码。Cancels bubbling of the e...
获取事件的键盘代码。Cancels bubbling of the event.
参数项：
  • None.
返回值：
  • void
EventObject
getCharCode() : Number
返回一个常规化的事件键盘代码 Gets the character c...
返回一个常规化的事件键盘代码 Gets the character code for the event.
参数项：
  • None.
返回值：
  • Number
    键盘代码
EventObject
getKey() : Number
Returns a normalized keyCode for th...
Returns a normalized keyCode for the event.
参数项：
  • None.
返回值：
  • Number
    The key code
EventObject
getPageX() : Number
获取事件X坐标。Gets the x coordinate of th...
获取事件X坐标。Gets the x coordinate of the event.
参数项：
  • None.
返回值：
  • Number
EventObject
getPageY() : Number
获取事件Y坐标。Gets the y coordinate of th...
获取事件Y坐标。Gets the y coordinate of the event.
参数项：
  • None.
返回值：
  • Number
EventObject
getTime() : Number
获取事件的时间。Gets the time of the event.
获取事件的时间。Gets the time of the event.
参数项：
  • None.
返回值：
  • Number
EventObject
getXY() : Array
获取事件的页面坐标。Gets the page coordinates...
获取事件的页面坐标。Gets the page coordinates of the event.
参数项：
  • None.
返回值：
  • Array
    xy值，格式[x, y]。The xy values like [x, y]
EventObject
getTarget( String selector, Number/Mixed maxDepth, Boolean returnEl ) : HTMLelement
获取事件的目标对象。Gets the target for the e...
获取事件的目标对象。Gets the target for the event.
参数项：
  • selector : String
    （可选的） 一个简易的选择符，用于筛选目标或查找目标的父级元素。(optional) A simple selector to filter the target or look for an ancestor of the target
  • maxDepth : Number/Mixed
    （可选的）搜索的最大深度（数字或是元素，默认为10||document.body）。(optional) The max depth to search as a number or element (defaults to 10 || document.body)
  • returnEl : Boolean
    （可选的） True表示为返回Ext.Element的对象而非DOM节点。(optional) True to return a Ext.Element object instead of DOM node
返回值：
  • HTMLelement
EventObject
getRelatedTarget() : HTMLElement
获取相关的目标对象。Gets the related target.
获取相关的目标对象。Gets the related target.
参数项：
  • None.
返回值：
  • HTMLElement
EventObject
getWheelDelta() : Number
常规化鼠标滚轮的有限增量（跨浏览器）。Normalizes mouse...
常规化鼠标滚轮的有限增量（跨浏览器）。Normalizes mouse wheel delta across browsers
参数项：
  • None.
返回值：
  • Number
    有限增量。The delta
EventObject
hasModifier() : Boolean
返回一个布尔值，表示当该事件执行的过程中，ctrl、alt、shift...
返回一个布尔值，表示当该事件执行的过程中，ctrl、alt、shift有否被按下。Returns true if the control, meta, shift or alt key was pressed during this event.
参数项：
  • None.
返回值：
  • Boolean
EventObject
within( Mixed el, Boolean related, Boolean allowEl ) : Boolean
返回true表示如果该事件的目标对象等于el，或是el的子元素。Ret...
返回true表示如果该事件的目标对象等于el，或是el的子元素。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!');
    }
});
参数项：
  • el : Mixed
    The id, DOM element or Ext.Element to check
  • related : Boolean
    （可选的）如果相关的target就是el而非target本身，返回true。(optional) true to test if the related target is within el instead of the target
  • allowEl : Boolean
    {optional} true to also check if the passed element is the target or related target
返回值：
  • Boolean
EventObject

公共事件

这个类没有公告事件。


类Ext.FlashComponent

包： | Ext
定义的文件： | FlashComponent.js
类全称： | Ext.FlashComponent
继承自于： | Ext.BoxComponent

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
FlashComponent()
参数项：
  • None.
返回值：
  • void
FlashComponent
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.FlashProxy

包： | Ext
定义的文件： | EventProxy.js
类全称： | Ext.FlashProxy
继承自于： | Object
@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


Action
    Action.Load
      Action.DirectLoad

Class Ext.form.Action.DirectLoad

Package: | Ext.form
Defined In: | Action.js
Class: | Action.DirectLoad
Extends: | Action.Load

Config Options

Config Options Defined By
failure : Function
The function to call when a failure packet was recieved, or when an error ocurred in the Ajax communication. The func...
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 failureType. The result property of this object may be examined to perform custom postprocessing.
Action
method : String
The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not sp...
The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not specified, the underlying DOM form's method.
Action
params : Mixed
Extra parameter values to pass. These are added to the Form's Ext.form.BasicForm.baseParams and passed to the specifi...

Extra parameter values to pass. These are added to the Form's 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 Ext.urlEncode.

Action
reset : Boolean
When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callba...
When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callback is called and before the Form's actioncomplete event fires.
Action
scope : Object
The scope in which to call the callback functions (The this reference for the callback functions).
Action
success : Function
The function to call when a valid success return packet is recieved. The function is passed the following parameters:...
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 result property of this object may be examined to perform custom postprocessing.
Action
timeout : Number
The number of seconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE. If...
The number of seconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE. If not specified, defaults to the configured timeout of the form.
Action
url : String
The URL that the Action is to invoke.
Action
waitMsg : String
The message to be displayed by a call to Ext.MessageBox.wait during the time the action is being processed.
Action
waitTitle : String
The title to be displayed by a call to Ext.MessageBox.wait during the time the action is being processed.
Action

Public Properties

Property Defined By
CLIENT_INVALID : String
Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side valida...
Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side validation is performed unless clientValidation is explicitly set to false.
Action
CONNECT_FAILURE : String
Failure type returned when a communication error happens when attempting to send a request to the remote server. The ...
Failure type returned when a communication error happens when attempting to send a request to the remote server. The response may be examined to provide further information.
Action
LOAD_FAILURE : String
Failure type returned when the response's <tt style="font-weight:bold">success property is set to false, or no field ...
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.
Action
SERVER_INVALID : String
Failure type returned when server side processing fails and the result's <tt style="font-weight:bold">success propert...

Failure type returned when server side processing fails and the result's success property is set to false.

In the case of a form submission, field-specific error messages may be returned in the result's errors property.

Action
failureType : String
The type of failure detected will be one of these: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, or LOAD_FAILURE. ...
The type of failure detected will be one of these: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, or 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.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
The XMLHttpRequest object used to perform the action.
Action
result : Object
The decoded response object containing a boolean <tt style="font-weight:bold">success property and other, action-spec...
The decoded response object containing a boolean success property and other, action-specific properties.
Action
type : String
The type of action this Action instance performs. Currently only "submit" and "load" are supported.
Action

Public Methods

This class has no public methods.

Public Events

This class has no public events.


Action
    Action.Submit
      Action.DirectSubmit

Class Ext.form.Action.DirectSubmit

Package: | Ext.form
Defined In: | Action.js
Class: | Action.DirectSubmit
Extends: | Action.Submit

Config Options

Config Options Defined By
clientValidation : boolean
Determines whether a Form's fields are validated in a final call to isValid prior to submission. Pass false in the Fo...
Determines whether a Form's fields are validated in a final call to isValid prior to submission. Pass false in the Form's submit options to prevent this. If not defined, pre-submission field validation is performed.
Action.Submit
errorReader : Ext.data.DataReader
Optional. JSON is interpreted with no need for an errorReader. A Reader which reads a single record from the returned...
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.

.
Action.Submit
failure : Function
The function to call when a failure packet was recieved, or when an error ocurred in the Ajax communication. The func...
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 failureType. The result property of this object may be examined to perform custom postprocessing.
Action
method : String
The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not sp...
The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not specified, the underlying DOM form's method.
Action
params : Mixed
Extra parameter values to pass. These are added to the Form's Ext.form.BasicForm.baseParams and passed to the specifi...

Extra parameter values to pass. These are added to the Form's 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 Ext.urlEncode.

Action
reset : Boolean
When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callba...
When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callback is called and before the Form's actioncomplete event fires.
Action
scope : Object
The scope in which to call the callback functions (The this reference for the callback functions).
Action
success : Function
The function to call when a valid success return packet is recieved. The function is passed the following parameters:...
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 result property of this object may be examined to perform custom postprocessing.
Action
timeout : Number
The number of seconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE. If...
The number of seconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE. If not specified, defaults to the configured timeout of the form.
Action
url : String
The URL that the Action is to invoke.
Action
waitMsg : String
The message to be displayed by a call to Ext.MessageBox.wait during the time the action is being processed.
Action
waitTitle : String
The title to be displayed by a call to Ext.MessageBox.wait during the time the action is being processed.
Action

Public Properties

Property Defined By
CLIENT_INVALID : String
Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side valida...
Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side validation is performed unless clientValidation is explicitly set to false.
Action
CONNECT_FAILURE : String
Failure type returned when a communication error happens when attempting to send a request to the remote server. The ...
Failure type returned when a communication error happens when attempting to send a request to the remote server. The response may be examined to provide further information.
Action
LOAD_FAILURE : String
Failure type returned when the response's <tt style="font-weight:bold">success property is set to false, or no field ...
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.
Action
SERVER_INVALID : String
Failure type returned when server side processing fails and the result's <tt style="font-weight:bold">success propert...

Failure type returned when server side processing fails and the result's success property is set to false.

In the case of a form submission, field-specific error messages may be returned in the result's errors property.

Action
failureType : String
The type of failure detected will be one of these: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, or LOAD_FAILURE. ...
The type of failure detected will be one of these: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, or 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.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
The XMLHttpRequest object used to perform the action.
Action
result : Object
The decoded response object containing a boolean <tt style="font-weight:bold">success property and other, action-spec...
The decoded response object containing a boolean success property and other, action-specific properties.
Action
type : String
The type of action this Action instance performs. Currently only "submit" and "load" are supported.
Action

Public Methods

This class has no public methods.

Public Events

This class has no public events.


类Ext.form.Action

包： | Extform
定义的文件： | Action.js
类全称： | Ext.form.Action
继承自于： | Object

该类的子类提供在Form上执行的行为。
The subclasses of this class provide actions to perform upon Forms.

该类的实例只在Form要执行提交或者加载动作的时候才由Form创建，下列该类的配置选项通过激活表单的动作来设置： submit、load以及doAction。
Instances of this class are only created by a 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: submit, load and doAction

执行了表单动作的Action的实例被传递到表单的success，failure回调函数（ submit、load和doAction ），以及actioncomplete和actionfailed事件处理器。
The instance of Action which performed the action is passed to the success and failure callbacks of the Form's action methods (submit, load and doAction), and to the actioncomplete and actionfailed event handlers.

配置项

配置项 定义者
url : String
调用的URL资源。The URL that the Action is...
调用的URL资源。The URL that the Action is to invoke.
Action
reset : Boolean
当设置为true的时候，导致表单重置reset 如果指定了该值，re...
当设置为true的时候，导致表单重置reset 如果指定了该值，reset将在表单的success 回调函数前和actioncomplete事件被激发前执行。When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callback is called and before the Form's actioncomplete event fires.
Action
method : String
获取请求的URL的HTTP方法。默认为Ext.form.BasicFo...
获取请求的URL的HTTP方法。默认为Ext.form.BasicForm的方法。如果没有指定，使用DOM表单的方法。The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not specified, the underlying DOM form's method.
Action
params : Mixed
传递到额外值。它们添加到表单的Ext.form.BasicFormba...
传递到额外值。它们添加到表单的Ext.form.BasicFormbaseParams由表单的输入字段传递到指定的URL。Extra parameter values to pass. These are added to the Form's Ext.form.BasicFormbaseParams and passed to the specified URL along with the Form's input fields.
Action
timeout : Number
在服务端返回CONNECT_FAILURE这样的failureType...
在服务端返回CONNECT_FAILURE这样的failureType之前等待的毫秒数。The number of milliseconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE.
Action
success : Function
当接收到一个有效的成功返回的数据包的时候调用的回调函数。这个函数传递以...
当接收到一个有效的成功返回的数据包的时候调用的回调函数。这个函数传递以下的参数: 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
    Action类。该对象的result属性可能被检查，用来执行自定义的后期处理。The Action class. The result property of this object may be examined to perform custom postprocessing.
 Action
failure : Function
当接收到一个返回失败的数据包或者在Ajax通信时发生错误调用的回调函数...
当接收到一个返回失败的数据包或者在Ajax通信时发生错误调用的回调函数。这个函数传递以下的参数: 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
    Action类。如果发生了Ajax异常，错误类型会在failureType里。该对象的result属性可能被检查，用来执行自定义的后期处理。The Action class. If an Ajax error ocurred, the failure type will be in failureType. The result property of this object may be examined to perform custom postprocessing.
 Action
scope : Object
回调函数执行的范围。指改回调函数的this。The scope in ...
回调函数执行的范围。指改回调函数的this。The scope in which to call the callback functions (The this reference for the callback functions).
Action
waitMsg : String
在调用一个action的处理过程中调用Ext.MessageBoxwa...
在调用一个action的处理过程中调用Ext.MessageBoxwait显示的内容。The message to be displayed by a call to Ext.MessageBoxwait during the time the action is being processed.
Action
waitTitle : String
在调用一个action的处理过程中调用Ext.MessageBoxwa...
在调用一个action的处理过程中调用Ext.MessageBoxwait显示的标题。The title to be displayed by a call to Ext.MessageBoxwait during the time the action is being processed.
Action

公告属性

属性 |  | 定义者
 | : {String} 改Action的实例执行的action类型。目前仅支持“提交”和“加... 改Action的实例执行的action类型。目前仅支持“提交”和“加载”。The type of action this Action instance performs.Currently only "submit" and "load" are supported. | Action
 | failureType: {String} 错误检查类型。可参阅{@link link Ext.form.Act... 错误检查类型。可参阅{@link link Ext.form.Action#Action.CLIENT_INVALID CLIENT_INVALID}、 {@link link Ext.form.Action#Action.SERVER_INVALID SERVER_INVALID}、 Ext.form.ActionAction.CONNECT_FAILURE CONNECT_FAILURE、LOAD_FAILURE。The type of failure detected. See {@link link Ext.form.Action#Action.CLIENT_INVALID CLIENT_INVALID}, {@link link Ext.form.Action#Action.SERVER_INVALID SERVER_INVALID}, Ext.form.ActionAction.CONNECT_FAILURE CONNECT_FAILURE, LOAD_FAILURE | Action
 | response: {Object} 用来执行action的XMLHttpRequest对象。The XM... 用来执行action的XMLHttpRequest对象。The XMLHttpRequest object used to perform the action. | Action
 | result: {Object} 解码了的response对象包含一个boolean类型的succes... 解码了的response对象包含一个boolean类型的success属性和一些action的属性。The decoded response object containing a boolean success property and other, action-specific properties. | Action

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


Action
    Action.Load

Class Ext.form.Action.Load

Package: | Ext.form
Defined In: | Action.js
Class: | Action.Load
Subclasses: | Action.DirectLoad
Extends: | Action

A class which handles loading of data from a server into the Fields of an Ext.form.BasicForm.

Instances of this class are only created by a Form when loading.

A response packet must contain a boolean success property, and a data property. The data property contains the values of Fields to load. The individual value object for each Field is passed to the Field's setValue method.

By default, response packets are assumed to be JSON, so a typical response packet may look like this:

{
    success: true,
    data: {
        clientName: "Fred. Olsen Lines",
        portOfLoading: "FXT",
        portOfDischarge: "OSL"
    }
}

Other data may be placed into the response for processing the Form's callback or event handler methods. The object decoded from this JSON is available in the result property.

Config Options

Config Options Defined By
failure : Function
The function to call when a failure packet was recieved, or when an error ocurred in the Ajax communication. The func...
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 failureType. The result property of this object may be examined to perform custom postprocessing.
Action
method : String
The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not sp...
The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not specified, the underlying DOM form's method.
Action
params : Mixed
Extra parameter values to pass. These are added to the Form's Ext.form.BasicForm.baseParams and passed to the specifi...

Extra parameter values to pass. These are added to the Form's 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 Ext.urlEncode.

Action
reset : Boolean
When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callba...
When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callback is called and before the Form's actioncomplete event fires.
Action
scope : Object
The scope in which to call the callback functions (The this reference for the callback functions).
Action
success : Function
The function to call when a valid success return packet is recieved. The function is passed the following parameters:...
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 result property of this object may be examined to perform custom postprocessing.
Action
timeout : Number
The number of seconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE. If...
The number of seconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE. If not specified, defaults to the configured timeout of the form.
Action
url : String
The URL that the Action is to invoke.
Action
waitMsg : String
The message to be displayed by a call to Ext.MessageBox.wait during the time the action is being processed.
Action
waitTitle : String
The title to be displayed by a call to Ext.MessageBox.wait during the time the action is being processed.
Action

Public Properties

Property Defined By
CLIENT_INVALID : String
Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side valida...
Failure type returned when client side validation of the Form fails thus aborting a submit action. Client side validation is performed unless clientValidation is explicitly set to false.
Action
CONNECT_FAILURE : String
Failure type returned when a communication error happens when attempting to send a request to the remote server. The ...
Failure type returned when a communication error happens when attempting to send a request to the remote server. The response may be examined to provide further information.
Action
LOAD_FAILURE : String
Failure type returned when the response's <tt style="font-weight:bold">success property is set to false, or no field ...
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.
Action
SERVER_INVALID : String
Failure type returned when server side processing fails and the result's <tt style="font-weight:bold">success propert...

Failure type returned when server side processing fails and the result's success property is set to false.

In the case of a form submission, field-specific error messages may be returned in the result's errors property.

Action
failureType : String
The type of failure detected will be one of these: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, or LOAD_FAILURE. ...
The type of failure detected will be one of these: CLIENT_INVALID, SERVER_INVALID, CONNECT_FAILURE, or 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.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
The XMLHttpRequest object used to perform the action.
Action
result : Object
The decoded response object containing a boolean <tt style="font-weight:bold">success property and other, action-spec...
The decoded response object containing a boolean success property and other, action-specific properties.
Action
type : String
The type of action this Action instance performs. Currently only "submit" and "load" are supported.
Action

Public Methods

This class has no public methods.

Public Events

This class has no public events.


类Ext.form.Action.Submit

包： | ExtformAction
定义的文件： | Action.js
类全称： | Ext.form.Action.Submit
继承自于： | Ext.form.Action

处理表单Form数据和返回的response对象的类。A class which handles submission of data from Forms and processes the returned response.

该类的实例仅在表单Form{@link Ext.form.BasicForm#submit 提交}的时候创建。Instances of this class are only created by a Form when submitting.

返回的数据包必须包含一个 boolean 类型的success属性，还有可选地，一个含有无效字段的错误信息的属性。A response packet must contain a boolean success property, and, optionally an errors property. The errors property contains error messages for invalid fields.

默认情况下，response数据包被认为是一个JSON对象，所以典型的response数据包看起来像是这样的： 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"
    }
}

Ext.form.BasicForm的回调函数或其它处理函数的方法可能会处理其他的数据，放置在响应中。JSON解码后的数据可在result找到。Other data may be placed into the response for processing by the Ext.form.BasicForm 's callback or event handler methods. The object decoded from this JSON is available in the result property.

另外，如果一个errorReader指定为XmlReader： Alternatively, if an errorReader is specified as an XmlReader:

    errorReader: new Ext.data.XmlReader({
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    )

那么结果集将会以XML形式返回。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>

表单的回调函数或者时间处理函数可以向相应的XML里置入其他的元素。XML文档在errorReader的xmlData属性。Other elements may be placed into the response XML for processing by the Ext.form.BasicForm's callback or event handler methods. The XML document is available in the errorReader's xmlData property.

配置项

配置项 定义者
errorReader : Ext.data.DataReader
可选的。解读JSON对象不需要errorReader。Optional...
可选的。解读JSON对象不需要errorReader。Optional. JSON is interpreted with no need for an errorReader.

从返回结果中读取一条记录的Reader。DataReader的success属性指明决定是否提交成功。Record对象的数据提供了任何未通过验证(非法)的表单字段的错误信息。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.

.
Submit
clientValidation : boolean
表明一个表单的字段是否都合法。在表单最终提交前调用。可以在表单的提交选...
表明一个表单的字段是否都合法。在表单最终提交前调用。可以在表单的提交选项中选择避免执行该操作。如果没有定义改属性，执行提交前的表单验证。Determines whether a Form's fields are validated in a final call to isValid prior to submission. Pass false in the Form's submit options to prevent this. If not defined, pre-submission field validation is performed.
Submit
url : String
调用的URL资源。The URL that the Action is...
调用的URL资源。The URL that the Action is to invoke.
Action
reset : Boolean
当设置为true的时候，导致表单重置reset 如果指定了该值，re...
当设置为true的时候，导致表单重置reset 如果指定了该值，reset将在表单的success 回调函数前和actioncomplete事件被激发前执行。When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callback is called and before the Form's actioncomplete event fires.
Action
method : String
获取请求的URL的HTTP方法。默认为Ext.form.BasicFo...
获取请求的URL的HTTP方法。默认为Ext.form.BasicForm的方法。如果没有指定，使用DOM表单的方法。The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not specified, the underlying DOM form's method.
Action
params : Mixed
传递到额外值。它们添加到表单的Ext.form.BasicFormba...
传递到额外值。它们添加到表单的Ext.form.BasicFormbaseParams由表单的输入字段传递到指定的URL。Extra parameter values to pass. These are added to the Form's Ext.form.BasicFormbaseParams and passed to the specified URL along with the Form's input fields.
Action
timeout : Number
在服务端返回CONNECT_FAILURE这样的failureType...
在服务端返回CONNECT_FAILURE这样的failureType之前等待的毫秒数。The number of milliseconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE.
Action
success : Function
当接收到一个有效的成功返回的数据包的时候调用的回调函数。这个函数传递以...
当接收到一个有效的成功返回的数据包的时候调用的回调函数。这个函数传递以下的参数: 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
    Action类。该对象的result属性可能被检查，用来执行自定义的后期处理。The Action class. The result property of this object may be examined to perform custom postprocessing.
 Action
failure : Function
当接收到一个返回失败的数据包或者在Ajax通信时发生错误调用的回调函数...
当接收到一个返回失败的数据包或者在Ajax通信时发生错误调用的回调函数。这个函数传递以下的参数: 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
    Action类。如果发生了Ajax异常，错误类型会在failureType里。该对象的result属性可能被检查，用来执行自定义的后期处理。The Action class. If an Ajax error ocurred, the failure type will be in failureType. The result property of this object may be examined to perform custom postprocessing.
 Action
scope : Object
回调函数执行的范围。指改回调函数的this。The scope in ...
回调函数执行的范围。指改回调函数的this。The scope in which to call the callback functions (The this reference for the callback functions).
Action
waitMsg : String
在调用一个action的处理过程中调用Ext.MessageBoxwa...
在调用一个action的处理过程中调用Ext.MessageBoxwait显示的内容。The message to be displayed by a call to Ext.MessageBoxwait during the time the action is being processed.
Action
waitTitle : String
在调用一个action的处理过程中调用Ext.MessageBoxwa...
在调用一个action的处理过程中调用Ext.MessageBoxwait显示的标题。The title to be displayed by a call to Ext.MessageBoxwait during the time the action is being processed.
Action

公告属性

属性 |  | 定义者
 | : {String} 改Action的实例执行的action类型。目前仅支持“提交”和“加... 改Action的实例执行的action类型。目前仅支持“提交”和“加载”。The type of action this Action instance performs.Currently only "submit" and "load" are supported. | Action
 | failureType: {String} 错误检查类型。可参阅{@link link Ext.form.Act... 错误检查类型。可参阅{@link link Ext.form.Action#Action.CLIENT_INVALID CLIENT_INVALID}、 {@link link Ext.form.Action#Action.SERVER_INVALID SERVER_INVALID}、 Ext.form.ActionAction.CONNECT_FAILURE CONNECT_FAILURE、LOAD_FAILURE。The type of failure detected. See {@link link Ext.form.Action#Action.CLIENT_INVALID CLIENT_INVALID}, {@link link Ext.form.Action#Action.SERVER_INVALID SERVER_INVALID}, Ext.form.ActionAction.CONNECT_FAILURE CONNECT_FAILURE, LOAD_FAILURE | Action
 | response: {Object} 用来执行action的XMLHttpRequest对象。The XM... 用来执行action的XMLHttpRequest对象。The XMLHttpRequest object used to perform the action. | Action
 | result: {Object} 解码了的response对象包含一个boolean类型的succes... 解码了的response对象包含一个boolean类型的success属性和一些action的属性。The decoded response object containing a boolean success property and other, action-specific properties. | Action

公共方法

方法 定义者
Submit()
参数项：
  • None.
返回值：
  • void
Submit

公共事件

这个类没有公告事件。


类Ext.form.BasicForm

包： | Extform
定义的文件： | BasicForm.js
类全称： | Ext.form.BasicForm
继承自于： | Ext.util.Observable

提供表单的多种动作("actions")功能，并且初始化 Ext.form.Field 类型在现有的标签上。
Encapsulates the DOM <form> element at the heart of the 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 Ext.form.Action.Submit. To enable normal browser submission of an Ext Form, use the standardSubmit config option.

File Uploads

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.

配置项

配置项 定义者
method : String
如不指定，所有动作使用的默认表单请求方法（GET或POST）。The ...
如不指定，所有动作使用的默认表单请求方法（GET或POST）。The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
BasicForm
reader : DataReader
当执行"load"动作时，设置一个Ext.data.DataReade...
当执行"load"动作时，设置一个Ext.data.DataReader对象（如Ext.data.XmlReader实例）用来读取数据。它是一个可选项，因为这里已经有了一个内建对象来读取JSON数据。An Ext.data.DataReader (e.g. 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.
BasicForm
errorReader : DataReader
一个Ext.data.DataReader对象 An Ext.data...

一个Ext.data.DataReader对象 An Ext.data.DataReader (e.g. Ext.data.XmlReader) 当执行"submit"动作出错时被用来读取数据 to be used to read field error messages returned from "submit" actions. This is completely 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:
BasicForm
url : String
通讯url地址。该地址也可以由action那里指定。The URL t...
通讯url地址。该地址也可以由action那里指定。The URL to use for form actions if one isn't supplied in the action options.
BasicForm
fileUpload : Boolean
当为true时，表单为文件上传类型。Set to true if th...
当为true时，表单为文件上传类型。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.

 BasicForm
baseParams : Object
表单请求时传递的参数，例{id: '123', foo: 'bar'}...
表单请求时传递的参数，例{id: '123', foo: 'bar'}。Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
BasicForm
timeout : Number
表单动作的超时秒数（默认30秒）。Timeout for form a...
表单动作的超时秒数（默认30秒）。Timeout for form actions in seconds (default is 30 seconds).
BasicForm
trackResetOnLoad : Boolean
如果为true，则表单对象的form.reset()方法重置到最后一次...
如果为true，则表单对象的form.reset()方法重置到最后一次加载的数据或setValues()数据，以相对于一开始创建表单那时的数据。If set to true, form.reset() resets to the last loaded or setValues() data instead of when the form was first created.
BasicForm
standardSubmit : Boolean
If set to true, standard HTML form ...
If set to true, standard HTML form submits are used instead of XHR (Ajax) style form submissions. (defaults to false)

Note: When using standardSubmit, any the options to submit are ignored because Ext's Ajax infrastracture is bypassed. To pass extra parameters, you will need to create hidden fields within the form.

 BasicForm
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | items 所有表单内元素的集合。The Ext.form.Field items in this form.: MixedCollection | BasicForm
 | waitMsgTarget: Mixed 默认的等待提示窗口为Ext.MessageBox.wait。也可以指... 默认的等待提示窗口为Ext.MessageBox.wait。也可以指定一个对象或它的ID做为遮罩目标，如果指定为真则直接遮罩在表单对象上 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. | BasicForm

公共方法

方法 定义者
BasicForm( Mixed el, Object config )
参数项：
  • el : Mixed
    表单对象或它的ID el The form element or its id
  • config : Object
    配置表单对象的配置项选项 config Configuration options
返回值：
  • void
BasicForm
getEl() : Ext.Element
如果客户端的验证通过则返回真 Get the HTML form El...
如果客户端的验证通过则返回真 Get the HTML form Element
参数项：
  • None.
返回值：
  • Ext.Element
BasicForm
isValid() : Boolean
如果客户端的验证通过则返回真。Returns true if clie...
如果客户端的验证通过则返回真。Returns true if client-side validation on the form is successful.
参数项：
  • None.
返回值：
  • Boolean
BasicForm
isDirty() : Boolean
表单加载后，一旦有任何一个表单元素被修了，就返回真。Returns t...
表单加载后，一旦有任何一个表单元素被修了，就返回真。Returns true if any fields in this form have changed since their original load.
参数项：
  • None.
返回值：
  • Boolean
BasicForm
doAction( String/Object actionName, Object options ) : BasicForm
执行一个预定义的(提交或加载)或一个在表单上自定义的动作，Perfor...
执行一个预定义的(提交或加载)或一个在表单上自定义的动作，Performs a predefined action (Ext.form.Action.Submit or Ext.form.Action.Load) or a custom extension of Ext.form.Action to perform application-specific processing.
参数项：
  • actionName : String/Object
    The name of the predefined action type, 行为名称 or instance of Ext.form.Action to perform.
  • options : Object
    (optional) The options to pass to the Ext.form.Action. All of the config options listed below are supported by both the submit and 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 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)

    • 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. The function is passed the following parameters:

      • form : Ext.form.BasicForm
        The form that requested the action
      • action : Ext.form.Action
        The Action object which performed the operation. The result property of this object may be examined to perform custom postprocessing.

    • failure : Function

      The callback that will be invoked after a failed transaction attempt. This is invoked for field validation failure, communication failure, and in the case of the server returning a failure response packet. Which type of failure is indicated in the Action's failureType. The function is passed the following parameters:

      • form : Ext.form.BasicForm
        The form that requested the action
      • action : Ext.form.Action
        The Action object which performed the operation. The failure type will be in failureType. The result property of this object may be examined to perform custom postprocessing.

    • 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 isValid prior to submission. Set to false to prevent this. If undefined, pre-submission field validation is performed.

    属性 类型 描述 ---------------- --------------- ---------------------------------------------------------------------------------- url String 动作请求的url （默认为表单的url） method String 表单使用的提交方式 （默认为表单的方法，如果没有指定则"POST"） params String/Object 要传递的参数 （默认为表单的基本参数，如果没有指定则为空） clientValidation Boolean 只应用到提交方法。为真则在提交前调用表单对像的isValid方法，实现在客户端的验证。（默认为假）
返回值：
  • BasicForm
    this
BasicForm
submit( Object options ) : BasicForm
做提交动作的简便方法。Shortcut to do a submit ...
做提交动作的简便方法。Shortcut to do a submit action.
参数项：
  • options : Object
    传递给动作对象的选项配制 (请见 options The options to pass to the action (see doAction for details).

    Note: this is ignored when using the standardSubmit option.

    The following code:
返回值：
  • BasicForm
    this
BasicForm
load( Object options ) : BasicForm
load动作的简写方式。Shortcut to do a load a...
load动作的简写方式。Shortcut to do a load action.
参数项：
  • options : Object
    传到doAction的参数 The options to pass to the action (see doAction for details)
返回值：
  • BasicForm
    this
BasicForm
updateRecord( Record record ) : BasicForm
表单内的元素数据考贝到所传递的Ext.data.Record对象中(b...
表单内的元素数据考贝到所传递的Ext.data.Record对象中(beginEdit/endEdit块中进行赋值操作)。Persists the values in this form into the passed Ext.data.Record object in a beginEdit/endEdit block.
参数项：
  • record : Record
    要编辑的record The record to edit
返回值：
  • BasicForm
    this
BasicForm
loadRecord( Record record ) : BasicForm
加载Ext.data.Record对象的数据到表单元素中。Loads ...
加载Ext.data.Record对象的数据到表单元素中。Loads an Ext.data.Record into this form.
参数项：
  • record : Record
    加载的record The record to load
返回值：
  • BasicForm
    this
BasicForm
findField( String id ) : Field
按传递的ID、索引或名称查询表单中的元素。Find a Ext.for...
按传递的ID、索引或名称查询表单中的元素。Find a Ext.form.Field in this form by id, dataIndex, name or hiddenName.
参数项：
  • id : String
    所要查询的值 id The value to search for
返回值：
  • Field
BasicForm
markInvalid( Array/Object errors ) : BasicForm
可批量地标记表单元素为失效的。Mark fields in this ...
可批量地标记表单元素为失效的。Mark fields in this form invalid in bulk.
参数项：
  • errors : Array/Object
    即可以是像这样的[{id:'fieldId', msg:'The message'},...]的数组，也可以是像这样 {id: msg, id2: msg2} 的一个HASH结构对象。Either an array in the form [{id:'fieldId', msg:'The message'},...], or an object hash of {id: msg, id2: msg2}
返回值：
  • BasicForm
    this
BasicForm
setValues( Array/Object values ) : BasicForm
表单元素批量赋值。Set values for fields in t...
表单元素批量赋值。Set values for fields in this form in bulk.
参数项：
  • values : Array/Object
    既可以是数组也或是可以是像这样的一个HASH结构对象。Either an arrayor an object hash in the form:
返回值：
  • BasicForm
    this
BasicForm
getValues( Boolean asString ) : String/Object
返回以键/值形式包函表单所有元素的信息对象。如果表单元素中有相同名称...

返回以键/值形式包函表单所有元素的信息对象。如果表单元素中有相同名称的对象，则返回一个同名数组。

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 the value can potentionally be the emptyText of a field.

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 the value can potentionally be the emptyText of a field.

参数项：
  • asString : Boolean
    如果为真则返回一个字串，如果为假则返回一个键/值对象。（默认为假） (optional)false to return the values as an object (defaults to returning as a string)
返回值：
  • String/Object
BasicForm
clearInvalid() : BasicForm
清除表单中全部由校验错误的信息。Clears all invalid ...
清除表单中全部由校验错误的信息。Clears all invalid messages in this form.
参数项：
  • None.
返回值：
  • BasicForm
    this
BasicForm
reset() : BasicForm
重置表单。Resets this form.
重置表单。Resets this form.
参数项：
  • None.
返回值：
  • BasicForm
    this
BasicForm
add( Field field1, Field field2, Field etc ) : BasicForm
向表单中加入组件，成为collection中的一员。这样做不会渲染传入...
向表单中加入组件，成为collection中的一员。这样做不会渲染传入的组件，只会通知表单要验证这个field，或分配值给field。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.

通常你不会用到该函数。要渲染的话，应该是在Container中加入Field， 准确些来说是其子类FormPanel。FormPanel会其Collection内子元素特别处理与协调。

You will not usually call this function. In order to be rendered, a Field must be added to a Container, usually an FormPanel. The FormPanel to which the field is added takes care of adding the Field to the BasicForm's collection.

参数项：
  • field1 : Field
  • field2 : Field
    (optional)
  • etc : Field
    (optional)
返回值：
  • BasicForm
    this
BasicForm
remove( Field field ) : BasicForm
从表单对象集中清除一个元素（不清除它的页面标签）。Removes a ...
从表单对象集中清除一个元素（不清除它的页面标签）。Removes a field from the items collection (does NOT remove its markup).
参数项：
  • field : Field
返回值：
  • BasicForm
    this
BasicForm
render() : BasicForm
遍历表单所有已{@link #add 添加}的Field元素，获取他们...
遍历表单所有已{@link #add 添加}的Field元素，获取他们的id值，并生成到对应的dom元素上（用Ext.form.FieldapplyToMarkup方法）。Iterates through the Fields,which have been added to this BasicForm, checks them for an id attribute, and calls Ext.form.FieldapplyToMarkup on the existing dom element with that id.
参数项：
  • None.
返回值：
  • BasicForm
    this
BasicForm
applyToFields( Object values ) : BasicForm
遍历表单元素，对每一个元素调用Extapply方法，附加上传入的对象参...
遍历表单元素，对每一个元素调用Extapply方法，附加上传入的对象参数。Calls Extapply for all fields in this form with the passed object.
参数项：
  • values : Object
返回值：
  • BasicForm
    this
BasicForm
applyIfToFields( Object values ) : BasicForm
遍历表单元素，对每一个元素调用ExtapplyIf方法，附加上传入的对...
遍历表单元素，对每一个元素调用ExtapplyIf方法，附加上传入的对象参数。Calls ExtapplyIf for all field in this form with the passed object.
参数项：
  • values : Object
返回值：
  • BasicForm
    this
BasicForm
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeaction()
在任何动作被执行前被触发。如果返回false则取消这个动作。Fires...
在任何动作被执行前被触发。如果返回false则取消这个动作。Fires before any action is performed. Return false to cancel the action.
侦听器会传入以下的参数：
  • None.
 BasicForm
actionfailed()
当动作失败时被触发。Fires when an action fails.
当动作失败时被触发。Fires when an action fails.
侦听器会传入以下的参数：
  • None.
 BasicForm
actioncomplete()
当动作完成时被触发。Fires when an action is c...
当动作完成时被触发。Fires when an action is completed.
侦听器会传入以下的参数：
  • None.
 BasicForm


类Ext.form.Checkbox

包： | Extform
定义的文件： | Checkbox.js
类全称： | Ext.form.Checkbox
继承自于： | Ext.form.Field
单独的checkbox域，可以直接代替传统checkbox域。
Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.

配置项

配置项 定义者
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
checked : Boolean
如果checkbox需要呈现选中状态，设置checked为True（默...
如果checkbox需要呈现选中状态，设置checked为True（默认为false）。True if the the checkbox should render already checked (defaults to false)
Checkbox
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
boxLabel : String
checkbox旁边显示的文字。The text that appea...
checkbox旁边显示的文字。The text that appears beside the checkbox
Checkbox
inputValue : String
应该显示在元素value处的值。The value that shou...
应该显示在元素value处的值。The value that should go into the generated input element's value attribute
Checkbox
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Checkbox( Object config )
参数项：
  • config : Object
    配置项选项 config Configuration options
返回值：
  • void
Checkbox
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
check()
当checkbox选中也好，不选中也好，触发该事件。Fires whe...
当checkbox选中也好，不选中也好，触发该事件。Fires when the checkbox is checked or unchecked.
侦听器会传入以下的参数：
  • None.
 Checkbox
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.CheckboxGroup

包： | Extform
定义的文件： | CheckboxGroup.js
类全称： | Ext.form.CheckboxGroup
继承自于： | Ext.form.Field
Ext.form.Checkbox控制器的分组容器。
A grouping container for Ext.form.Checkbox controls.

配置项

配置项 定义者
items : Array
一个Checkbox的数组，或者配置选项。An Array of Ch...
一个Checkbox的数组，或者配置选项。An Array of Checkboxes or Checkbox config objects to arrange in the group.
CheckboxGroup
columns : String/Number/Array
使用自动布局显示 checkbox/radio 组的时候使用的列的数目...
使用自动布局显示 checkbox/radio 组的时候使用的列的数目，这个配置选项可以有多种不同的类型的值。
  • 'auto' :

    渲染的时候，组件会一列挨着一列，每一列的宽度按照整行的宽度均分。默认的是auto

  • Number :

    如果你指定了一个像 3 这样的数字，那么将会创建指定的数目的列，包含的组建将会根据vertical的值 自动的分发。

  • Array : Object

    你也可以指定一个整形和浮点型的数字组成的数组来表示各个列的宽度，比如[100, .25, .75]。Any integer values will be rendered first, 所有的整数型值会被先用来渲染，然后剩下的浮点型值将会被当做剩下的空间的百分比来计算。虽然不用使数据里的浮点型的值的和为一(100%)， 但是如果你想要让组件填充满容器，你应该是他们的和为一。

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

 CheckboxGroup
vertical : Boolean
如果设置为 true，将包含的组件跨列分发，每一行从头到底完全填充。自...
如果设置为 true，将包含的组件跨列分发，每一行从头到底完全填充。自动计算每一列的组件的数量以使每一列尽量平衡。默认为 false,每次每一列仅添加一个组件。每一行从头到尾完全填充。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.
CheckboxGroup
allowBlank : Boolean
是否允许为空。false则至少要有一个选项被选中，如果没有被选中的选项...
是否允许为空。false则至少要有一个选项被选中，如果没有被选中的选项，会显示{@link @blankText}的错误信息。默认为 true。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.
CheckboxGroup
blankText : String
allowBlank 验证失败显示的错误信息。默认为："You mus...
allowBlank 验证失败显示的错误信息。默认为："You must select at least one item in this group"。Error text to display if the allowBlank validation fails (defaults to "You must select at least one item in this group")
CheckboxGroup
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
CheckboxGroup( Object config )
参数项：
  • config : Object
    配置选项。Configuration options @xtype checkboxgroup
返回值：
  • void
CheckboxGroup
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.ComboBox

包： | Extform
定义的文件： | Combo.js
类全称： | Ext.form.ComboBox
继承自于： | 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 valueField, you must specify a hiddenName to create a hidden input field to hold the value of the valueField. The displayField is shown in the text field which is named according to the name.

配置项

配置项 定义者
transform : Mixed
要转换为组合框的id，DOM节点或者已有的select元素。The i...
要转换为组合框的id，DOM节点或者已有的select元素。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 a Ext.form.BasicForm or Ext.form.FormPanel, you must also set lazyRender = true.
ComboBox
lazyRender : Boolean
值为true时阻止ComboBox渲染直到该对象被请求（被渲染到Ext...
值为true时阻止ComboBox渲染直到该对象被请求（被渲染到Ext.Editor 组件的时候应该使用这个参数，默认为 false）。True to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor, defaults to false).
ComboBox
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
store : Ext.data.Store/Array
该组合框绑定的数据仓库（默认为 undefined）。The data...
该组合框绑定的数据仓库（默认为 undefined）。The data source to which this combo is bound (defaults to undefined). This can be any Ext.data.Store subclass, a 1-dimensional array (e.g., ['Foo','Bar']) or a 2-dimensional array (e.g., [['f','Foo'],['b','Bar']]). Arrays will be converted to a Ext.data.ArrayStore internally. 1-dimensional arrays will automatically be expanded (each array item will be the combo value and text) and for multi-dimensional arrays, the value in index 0 of each item will be assumed to be the combo value, while the value at index 1 is assumed to be the combo text.
ComboBox
title : String
如果提供了，则会创建一个包含此文本的元素并被添加到下拉列表的顶部（默认...
如果提供了，则会创建一个包含此文本的元素并被添加到下拉列表的顶部（默认为 undefined，表示没有头部元素）。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)
ComboBox
listWidth : Number
以象素表示的下拉列表的宽度（默认的宽度与ComboBox的width属...
以象素表示的下拉列表的宽度（默认的宽度与ComboBox的width属性一致）。The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
ComboBox
displayField : String
组合框用以展示的数据的字段名（如果mode='remote'则默认为 ...
组合框用以展示的数据的字段名（如果mode='remote'则默认为 undefined，如果mode = 'local' 则默认为 'text'）。The underlying data field name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'text' if transforming a select)
ComboBox
valueField : String
组合框用以取值的数据的字段名（如果mode='remote'则默认为 ...
组合框用以取值的数据的字段名（如果mode='remote'则默认为 undefined，如果mode = 'local' 则默认为 'value'）。The underlying data value name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'value' if transforming a select) Note: use of a valueField requires the user to make a selection in order for a value to be mapped.
ComboBox
hiddenName : String
如果指定了, 则会动态生成一个以指定名称命名的隐藏域用来存放值数据(默...
如果指定了, 则会动态生成一个以指定名称命名的隐藏域用来存放值数据(默认为)。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. Note that the hidden field's id will also default to this name if hiddenId is not specified. The combo's id and the hidden field's ids should be different, since no two DOM nodes should share the same id, so if the combo and hidden names are the same, you should specify a unique hiddenId.
ComboBox
hiddenId : String
If hiddenName is specified, hiddenI...
If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id (defaults to the hiddenName). The hiddenId and combo id should be different, since no two DOM nodes should share the same id.
ComboBox
hiddenValue : String
Sets the initial value of the hidde...
Sets the initial value of the hidden field if hiddenName is specified to contain the selected valueField, from the Store. Defaults to the configured value.
ComboBox
listClass : String
下拉列表元素应用的CSS类（默认为''）。CSS class to a...
下拉列表元素应用的CSS类（默认为''）。CSS class to apply to the dropdown list element (defaults to '')
ComboBox
selectedClass : String
下拉列表中选中项应用的CSS类（默认为 'x-combo-select...
下拉列表中选中项应用的CSS类（默认为 'x-combo-selected'）。CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
ComboBox
triggerClass : String
应用到触发器身上的CSS样式类。A CSS class to appl...
应用到触发器身上的CSS样式类。A CSS class to apply to the trigger
TriggerField
shadow : Boolean/String
值为true或者"sides"为默认效果，"frame"为四方向阴影，...
值为true或者"sides"为默认效果，"frame"为四方向阴影，"drop" 为右下角方向阴影。True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
ComboBox
listAlign : String
一个有效的方位锚点值。点击Ext.ElementalignTo查看支持...
一个有效的方位锚点值。点击Ext.ElementalignTo查看支持的方向锚点(默认为 'tl-bl')。A valid anchor position value. See Ext.ElementalignTo for details on supported anchor positions (defaults to 'tl-bl')
ComboBox
maxHeight : Number
以象素表示的下拉列表最大高度（默认为 300）。The maximum...
以象素表示的下拉列表最大高度（默认为 300）。The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
ComboBox
minHeight : Number
The minimum height in pixels of the...
The minimum height in pixels of the dropdown list when the list is constrained by its distance to the viewport edges (defaults to 90)
ComboBox
triggerAction : String
触发器被激活时执行的动作。使用'all'来运行由allQuery属性指...
触发器被激活时执行的动作。使用'all'来运行由allQuery属性指定的查询（默认为'query'）。The action to execute when the trigger is clicked. Use 'all' to run the query specified by the allQuery config option (defaults to 'query')
ComboBox
minChars : Number
在autocomplete和typeahead 被激活之前用户必须输入...
在autocomplete和typeahead 被激活之前用户必须输入的字符数（默认为4，如果editable = false则此属性无效）。The minimum number of characters the user must type before autocomplete and typeahead activate (defaults to 4 if remote or 0 if local, does not apply if editable = false)
ComboBox
typeAhead : Boolean
值为true时在经过指定延迟（typeAheadDelay）后弹出并自...
值为true时在经过指定延迟（typeAheadDelay）后弹出并自动选择输入的文本，如果该文本与已知的值相匹配（默认为false）。True to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if it matches a known value (defaults to false)
ComboBox
queryDelay : Number
以毫秒表示的从开始输入到发出查询语句过滤下拉列表的时长（如果mode=...
以毫秒表示的从开始输入到发出查询语句过滤下拉列表的时长（如果mode='remote'则默认为500，如果mode = 'local' 则默认为10）。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 mode = 'remote' or 10 if mode = 'local')
ComboBox
pageSize : Number
如果值大于0，则在下拉列表的底部显示一个分页工具条，并且在执行过滤查询...
如果值大于0，则在下拉列表的底部显示一个分页工具条，并且在执行过滤查询时将传递起始页和限制参数。只在 mode = 'remote'时生效（默认为 0）。If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
ComboBox
selectOnFocus : Boolean
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 fa...
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。True to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
queryParam : String
供querystring查询时传递的名字（默认为 'query'）。N...
供querystring查询时传递的名字（默认为 'query'）。Name of the query as it will be passed on the querystring (defaults to 'query')
ComboBox
loadingText : String
当读取数据时在下拉列表显示的文本。仅当mode = 'remote'时...
当读取数据时在下拉列表显示的文本。仅当mode = 'remote'时可用（默认为 'Loading...'）。The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Loading...')
ComboBox
resizable : Boolean
值为true时则在下拉列表的底部添加缩放柄（默认为false）。Tru...
值为true时则在下拉列表的底部添加缩放柄（默认为false）。True to add a resize handle to the bottom of the dropdown list (defaults to false)
ComboBox
handleHeight : Number
以像素表示的下拉列表的缩放柄的高度，仅当resizable = tru...
以像素表示的下拉列表的缩放柄的高度，仅当resizable = true 时可用（默认为 8）。The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
ComboBox
editable : Boolean
值为false时防止用户直接在输入框内输入文本，就像传统的选择框一样（...
值为false时防止用户直接在输入框内输入文本，就像传统的选择框一样（默认为 true）。False to prevent the user from typing text directly into the field, just like a traditional select (defaults to true)
ComboBox
allQuery : String
发送到服务器用以返回不经过滤的所有记录的文本（默认为 ''）。The ...
发送到服务器用以返回不经过滤的所有记录的文本（默认为 ''）。The text query to send to the server to return all records for the list with no filtering (defaults to '')
ComboBox
mode : String
如果ComboBox读取本地数据则将值设为'local'（默认为 'r...
如果ComboBox读取本地数据则将值设为'local'（默认为 'remote' 表示从服务器读取数据）。Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
ComboBox
minListWidth : Number
以像素表示的下拉列表的最小宽度（默认为70， 如果listWidth的...
以像素表示的下拉列表的最小宽度（默认为70， 如果listWidth的指定值更高则自动忽略该参数）。The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value)
ComboBox
forceSelection : Boolean
值为true时将限定选中的值为列表中的值，值为false则允许用户将任...
值为true时将限定选中的值为列表中的值，值为false则允许用户将任意文本设置到字段（默认为 false）。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)
ComboBox
typeAheadDelay : Number
以毫秒表示的 typeahead 文本延迟显示量，仅当 typeAhe...
以毫秒表示的 typeahead 文本延迟显示量，仅当 typeAhead = true 时生效（默认为 250）。The length of time in milliseconds to wait until the typeahead text is displayed if typeAhead = true (defaults to 250)
ComboBox
valueNotFoundText : String
当使用 name/value 组合框时，如果调用setValue方法时...
当使用 name/value 组合框时，如果调用setValue方法时传递的值没有在仓库中找到，且定义了valueNotFoundText则在字段中显示该值（默认为 undefined）。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 defaut text is used, it means there is no value set and no validation will occur on this field.
ComboBox
lazyInit : Boolean
True to not initialize the list for...
True to not initialize the list for this combo until the field is focused (defaults to true)
ComboBox
tpl : String/Ext.XTemplate
要转换为组合框的 id, DOM 节点 或者已有的 select 元素...
要转换为组合框的 id, DOM 节点 或者已有的 select 元素 The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. Use this to create custom UI layouts for items in the list.

If you wish to preserve the default visual look of list items, add the CSS class name

x-combo-list-item
to the template's container element.

The template must contain one or more substitution parameters using field names from the Combo's Store. An example of a custom template would be adding an

ext:qtip
attribute which might display other fields from the Store.

The dropdown list is displayed in a DataView. See Ext.DataView for details.

ComboBox
itemSelector : String
This setting is required if a custo...
This setting is required if a custom XTemplate has been specified in tpl which assigns a class other than
'x-combo-list-item'
to dropdown list items. A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the DataView which handles the dropdown display will be working with.
ComboBox
hideTrigger : Boolean
为true时隐藏触发元素，只显示基本文本域（默认为false）。Tru...
为true时隐藏触发元素，只显示基本文本域（默认为false）。True to hide the trigger element and display only the base text field (defaults to false)
TriggerField
vtypeText : String
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）...
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）。如vtype不设置该项就无效。A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Only applies if vtype is set, else ignored.
TextField
stripCharsRe : RegExp
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要...
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要的内容（默认为null）。A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
grow : Boolean
当值为 true 时表示字段可以根据内容自动伸缩。True if th...
当值为 true 时表示字段可以根据内容自动伸缩。True if this field should automatically grow and shrink to its content
TextField
growMin : Number
当 grow = true 时允许的字段最小宽度（默认为 30） Th...
当 grow = true 时允许的字段最小宽度（默认为 30） The minimum width to allow when grow = true (defaults to 30)
TextField
growMax : Number
当 grow = true 时允许的字段最大宽度(默认为 800) ...
当 grow = true 时允许的字段最大宽度(默认为 800) The maximum width to allow when grow = true (defaults to 800)
TextField
vtype : String
中定义的效验类型名(默认为 null) A validation t...
中定义的效验类型名(默认为 null) A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
maskRe : RegExp
一个用来过滤无效按键的正则表达式(默认为 null) An inpu...
一个用来过滤无效按键的正则表达式(默认为 null) An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
TextField
disableKeyFilter : Boolean
值为 true 时禁用输入按键过滤(默认为 false) True ...
值为 true 时禁用输入按键过滤(默认为 false) True to disable input keystroke filtering (defaults to false)
TextField
allowBlank : Boolean
值为 false 时将效验输入字符个数大于0(默认为 true) F...
值为 false 时将效验输入字符个数大于0(默认为 true) False to validate that the value length > 0 (defaults to true)
TextField
minLength : Number
输入字段所需的最小字符数(默认为 0) Minimum input ...
输入字段所需的最小字符数(默认为 0) Minimum input field length required (defaults to 0)
TextField
maxLength : Number
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) ...
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) Maximum input field length allowed (defaults to Number.MAX_VALUE)
TextField
minLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The minimum ...
输入字符数小于最小字符数时显示的文本（默认为"The minimum length for this field is {minLength}"） Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
maxLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The maximum ...
输入字符数小于最小字符数时显示的文本（默认为"The maximum length for this field is {maxLength}"） Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
blankText : String
当允许为空效验失败时显示的错误文本（默认为 "This field i...
当允许为空效验失败时显示的错误文本（默认为 "This field is required"）。Error text to display if the allow blank validation fails (defaults to "This field is required")
TextField
validator : Function
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则...
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则此函数将在所有基础效验（allowBlank、minLength、maxLength和任意的vtype）成功之后被调用，调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true，失败时返回错误文本。A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
regex : RegExp
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 ...
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项，则此正则表达式将在所有基础效验成功之后被执行，执行此正则表达式时传递的参数为该字段的值。如果效验失败，则根据regexText的设置将字段标记为无效。A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
当regex被设置且效验失败时显示的错误文本(默认为 "")。The ...
当regex被设置且效验失败时显示的错误文本(默认为 "")。The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
emptyText : String
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而...
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。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 name.
TextField
emptyClass : String
emptyText使用的CSS样式类名(默认为 'x-form-emp...
emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
enableKeyEvents : Boolean
True表示，为HTML的input输入字段激活键盘事件的代理（默认为...
True表示，为HTML的input输入字段激活键盘事件的代理（默认为false） True to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | lastQuery: String The value of the match string used... The value of the match string used to filter the store. Delete this property to force a requery. | ComboBox
 | : Ext.DataView 显示CoboBox选择所使用的DataView。The DataVi... 显示CoboBox选择所使用的DataView。The DataView used to display the ComboBox's options. | ComboBox
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
ComboBox( Object config )
参数项：
  • config : Object
    配置选项。config Configuration options
返回值：
  • void
ComboBox
getStore() : Ext.data.Store
返回Combo关联的Store对象。Returns the store...
返回Combo关联的Store对象。Returns the store associated with this combo.
参数项：
  • None.
返回值：
  • Ext.data.Store
    Store对象。The store
ComboBox
setEditable( Boolean value )
允许或防止用户直接编辑字段文本。如果传递值为false，用户将只能选择...
允许或防止用户直接编辑字段文本。如果传递值为false，用户将只能选择下拉列表中已经定义的选项。此方法相当于在配置时设置'editable'属性。Allow or prevent the user from directly editing the field text. If false is passed, the user will only be able to select from the items defined in the dropdown list. This method is the runtime equivalent of setting the 'editable' config option at config time.
参数项：
  • value : Boolean
    值为true时允许用户直接编辑字段文本。True to allow the user to directly edit the field text
返回值：
  • void
ComboBox
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
clearValue()
清除所有当前字段中设定的。Clears any text/value ...
清除所有当前字段中设定的。Clears any text/value currently set in the field
参数项：
  • None.
返回值：
  • void
ComboBox
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
isExpanded()
如果下拉列表已经展开则返回true，否则返回false。Returns...
如果下拉列表已经展开则返回true，否则返回false。Returns true if the dropdown list is expanded, else false.
参数项：
  • None.
返回值：
  • void
ComboBox
selectByValue( String value, Boolean scrollIntoView ) : Boolean
根据数据的值选择下拉列表中的选项。本函数不会触发'select'事件。...
根据数据的值选择下拉列表中的选项。本函数不会触发'select'事件。使用此函数必须在数据已经被读取且列表已经展开，否则请使用setValue方法。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.
参数项：
  • value : String
    要选择的项的值。The data value of the item to select
  • scrollIntoView : Boolean
    值为false时阻止下拉列表自动滚动到选中项位置（默认为 true）。False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
返回值：
  • Boolean
    如果给定值在列表中则返回true，否则返回。falseTrue if the value matched an item in the list, else false
ComboBox
select( Number index, Boolean scrollIntoView )
根据列表的索引数选择下拉列表中的一项。本函数不会触发 'select'...
根据列表的索引数选择下拉列表中的一项。本函数不会触发 'select' 事件。使用此函数必须在数据已经被读取且列表已经展开，否则请使用setValue方法。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.
参数项：
  • index : Number
    选中项在列表中以0开始的索引数。The zero-based index of the list item to select
  • scrollIntoView : Boolean
    值为false时阻止下拉列表自动滚动到选中项位置（默认为 true）。False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
返回值：
  • void
ComboBox
doQuery( String query, Boolean forceAll )
执行一个查询语句用以过滤下拉列表。在查询之前触发beforequery...
执行一个查询语句用以过滤下拉列表。在查询之前触发beforequery事件，以便可以在需要的时候取消查询动作。Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the query allowing the query action to be canceled if needed.
参数项：
  • query : String
    要执行的查询语句。The SQL query to execute
  • forceAll : Boolean
    值为true时强制执行查询即使当前输入的字符少于 minChars 设置项指定的值。同时还会清除当前数据仓库中保存的前一次结果（默认为false）。True to force the query to execute even if there are currently fewer characters in the field than the minimum specified by the minChars config option. It also clears any filter previously saved in the current store (defaults to false)
返回值：
  • void
ComboBox
collapse()
如果下拉列表当前是展开状态则隐藏它。并在完成的时候触发collapse...
如果下拉列表当前是展开状态则隐藏它。并在完成的时候触发collapse事件。Hides the dropdown list if it is currently expanded. Fires the collapse event on completion.
参数项：
  • None.
返回值：
  • void
ComboBox
expand()
如果下拉列表当前是隐藏状态则展开它。并在完成的时候触发expand事件...
如果下拉列表当前是隐藏状态则展开它。并在完成的时候触发expand事件。Expands the dropdown list if it is currently hidden. Fires the expand event on completion.
参数项：
  • None.
返回值：
  • void
ComboBox
TriggerField( Object config )
参数项：
  • config : Object
    配置选择（对于有效的{@Ext.form.TextField}配置项也会被传入到TextField） Configuration options (valid {@Ext.form.TextField} config options will also be applied to the base TextField)
返回值：
  • void
TriggerField
onTriggerClick( EventObject e )
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的...
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的方法重写后才会有效。The function that should handle the trigger's click event. This method does nothing by default until overridden by an implementing function.
参数项：
  • e : EventObject
    参数e是（{EventObject}类型）
返回值：
  • void
TriggerField
TextField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
TextField
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
validateValue( Mixed value ) : Boolean
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Vali...
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
参数项：
  • value : Mixed
    要效验的值 The value to validate
返回值：
  • Boolean
    值有效时返回true，否则返回 false True if the value is valid, else false
TextField
selectText( Number start, Number end )
选择此字段中的文本。Selects text in this field
选择此字段中的文本。Selects text in this field
参数项：
  • start : Number
    （可选项） 选择区域的索引起点(默认为 0) (optional)The index where the selection should start (defaults to 0)
  • end : Number
    （可选项） 选择区域的索引终点(默认为文本长度) (optional)The index where the selection should end (defaults to the text length)
返回值：
  • void
TextField
autoSize()
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = tr...
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = true 时有效，并触发autosize事件。Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
参数项：
  • None.
返回值：
  • void
TextField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
expand()
当下拉列表展开的时候触发。Fires when the dropdow...
当下拉列表展开的时候触发。Fires when the dropdown list is expanded
侦听器会传入以下的参数：
  • None.
 ComboBox
collapse()
当下拉列表收起的时候触发。Fires when the dropdow...
当下拉列表收起的时候触发。Fires when the dropdown list is collapsed
侦听器会传入以下的参数：
  • None.
 ComboBox
beforeselect()
列表项被选中前触发。返回 false 可以取消选择。Fires bef...
列表项被选中前触发。返回 false 可以取消选择。Fires before a list item is selected. Return false to cancel the selection.
侦听器会传入以下的参数：
  • None.
 ComboBox
select()
当列表项被选中时触发。Fires when a list item i...
当列表项被选中时触发。Fires when a list item is selected
侦听器会传入以下的参数：
  • None.
 ComboBox
beforequery()
所有的查询被处理前触发。返回 false 或者设置cancel参数为t...
所有的查询被处理前触发。返回 false 或者设置cancel参数为true可以取消查询。Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to true.
侦听器会传入以下的参数：
  • None.
 ComboBox
autosize()
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地...
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地改变大小，但该事件的目的在于，允许开发人员在运行时加入额外的逻辑，以备调整输入字段的大小。Fires when the 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.
侦听器会传入以下的参数：
  • None.
 TextField
keydown()
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为...
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为true时有效。Keydown input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keyup()
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为...
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为true时有效。Keyup input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keypress()
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为...
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为true时有效。Keypress input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.DateField

包： | Extform
定义的文件： | DateField.js
类全称： | Ext.form.DateField
继承自于： | Ext.form.TriggerField
提供一个下拉的Ext.DatePicker日期选择、自动效验控件的日期输入字段。
Provides a date input field with a Ext.DatePicker dropdown and automatic date validation.

配置项

配置项 定义者
format : String
用以覆盖本地化的默认日期格式化字串。字串必须为符合指定Datepars...
用以覆盖本地化的默认日期格式化字串。字串必须为符合指定DateparseDate的形式(默认为 'm/d/y')。The default date format string which can be overriden for localization support. The format must be valid according to DateparseDate (defaults to 'm/d/Y').
DateField
altFormats : String
用 "|" 符号分隔的多个日期格式化字串，当输入的日期与默认的格式不符...
用 "|" 符号分隔的多个日期格式化字串，当输入的日期与默认的格式不符时用来尝试格式化输入值(默认为 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d')。Multiple date formats separated by "|" to try when parsing a user input value and it doesn't 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').
DateField
disabledDaysText : String
一个禁用的星期数组，以 0 开始。例如，[0，6] 表示禁用周六和周日...
一个禁用的星期数组，以 0 开始。例如，[0，6] 表示禁用周六和周日(默认为 null)。The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
DateField
disabledDatesText : String
禁用星期上显示的工具提示(默认为 'Disabled')。The to...
禁用星期上显示的工具提示(默认为 'Disabled')。The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
DateField
minText : String
当字段的日期早于 minValue 属性指定值时显示的错误文本(默认为...
当字段的日期早于 minValue 属性指定值时显示的错误文本(默认为'The date in this field must be after {minValue}') The error text to display when the date in the cell is before minValue (defaults to 'The date in this field must be after {minValue}').
DateField
maxText : String
当字段的日期晚于 maxValue 属性指定值时显示的错误文本(默认为...
当字段的日期晚于 maxValue 属性指定值时显示的错误文本(默认为'The date in this field must be before {maxValue}') The error text to display when the date in the cell is after maxValue (defaults to ).
DateField
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
triggerClass : String
应用到触发器身上的CSS样式类。A CSS class to appl...
应用到触发器身上的CSS样式类。A CSS class to apply to the trigger
TriggerField
showToday : Boolean
False表示隐藏底部的Today按钮并禁止空格的快捷键来选择当日日期...
False表示隐藏底部的Today按钮并禁止空格的快捷键来选择当日日期（默认为true）。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).
DateField
minValue : Date/String
允许最早的日期。可以是JavaScript日期对象或者是一个符合日期格...
允许最早的日期。可以是JavaScript日期对象或者是一个符合日期格式要求的字符串（默认为null）。The minimum allowed date. Can be either a Javascript date object or a string date in a valid format (defaults to null).
DateField
maxValue : Date/String
允许最晚的日期。可以是JavaScript日期对象或者是一个符合日期格...
允许最晚的日期。可以是JavaScript日期对象或者是一个符合日期格式要求的字符串（默认为null）。The maximum allowed date. Can be either a Javascript date object or a string date in a valid format (defaults to null).
DateField
disabledDays : Array
禁用日子的数组，从0开始。[0, 6]禁止了从星期日到星期六（默认为n...
禁用日子的数组，从0开始。[0, 6]禁止了从星期日到星期六（默认为null）。An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
DateField
disabledDates : Array
一个以字串形式表示的禁用的日期数组。这些字串将会被用来创建一个动态正则...
一个以字串形式表示的禁用的日期数组。这些字串将会被用来创建一个动态正则表达式，所以它们是很强大的。一个例子: 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"]将会禁用 2006 年 三月 的每一天 would disable every day in March 2006
  • ["^03"]将会禁用每年三月的每一天 would disable every day in every March
注意日期的格式必须一定要符合format的配置格式。为了提供正则表达式的支持, 如果你使用一个包含 "." 的日期格式，你就得将小数点转义使用。例如: ["03\\.08\\.03"]。Note that the format of the dates included in the array should exactly match the 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"].
DateField
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
hideTrigger : Boolean
为true时隐藏触发元素，只显示基本文本域（默认为false）。Tru...
为true时隐藏触发元素，只显示基本文本域（默认为false）。True to hide the trigger element and display only the base text field (defaults to false)
TriggerField
vtypeText : String
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）...
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）。如vtype不设置该项就无效。A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Only applies if vtype is set, else ignored.
TextField
stripCharsRe : RegExp
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要...
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要的内容（默认为null）。A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
grow : Boolean
当值为 true 时表示字段可以根据内容自动伸缩。True if th...
当值为 true 时表示字段可以根据内容自动伸缩。True if this field should automatically grow and shrink to its content
TextField
growMin : Number
当 grow = true 时允许的字段最小宽度（默认为 30） Th...
当 grow = true 时允许的字段最小宽度（默认为 30） The minimum width to allow when grow = true (defaults to 30)
TextField
growMax : Number
当 grow = true 时允许的字段最大宽度(默认为 800) ...
当 grow = true 时允许的字段最大宽度(默认为 800) The maximum width to allow when grow = true (defaults to 800)
TextField
vtype : String
中定义的效验类型名(默认为 null) A validation t...
中定义的效验类型名(默认为 null) A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
maskRe : RegExp
一个用来过滤无效按键的正则表达式(默认为 null) An inpu...
一个用来过滤无效按键的正则表达式(默认为 null) An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
TextField
disableKeyFilter : Boolean
值为 true 时禁用输入按键过滤(默认为 false) True ...
值为 true 时禁用输入按键过滤(默认为 false) True to disable input keystroke filtering (defaults to false)
TextField
allowBlank : Boolean
值为 false 时将效验输入字符个数大于0(默认为 true) F...
值为 false 时将效验输入字符个数大于0(默认为 true) False to validate that the value length > 0 (defaults to true)
TextField
minLength : Number
输入字段所需的最小字符数(默认为 0) Minimum input ...
输入字段所需的最小字符数(默认为 0) Minimum input field length required (defaults to 0)
TextField
maxLength : Number
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) ...
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) Maximum input field length allowed (defaults to Number.MAX_VALUE)
TextField
minLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The minimum ...
输入字符数小于最小字符数时显示的文本（默认为"The minimum length for this field is {minLength}"） Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
maxLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The maximum ...
输入字符数小于最小字符数时显示的文本（默认为"The maximum length for this field is {maxLength}"） Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
selectOnFocus : Boolean
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 fa...
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。True to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
blankText : String
当允许为空效验失败时显示的错误文本（默认为 "This field i...
当允许为空效验失败时显示的错误文本（默认为 "This field is required"）。Error text to display if the allow blank validation fails (defaults to "This field is required")
TextField
validator : Function
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则...
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则此函数将在所有基础效验（allowBlank、minLength、maxLength和任意的vtype）成功之后被调用，调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true，失败时返回错误文本。A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
regex : RegExp
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 ...
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项，则此正则表达式将在所有基础效验成功之后被执行，执行此正则表达式时传递的参数为该字段的值。如果效验失败，则根据regexText的设置将字段标记为无效。A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
当regex被设置且效验失败时显示的错误文本(默认为 "")。The ...
当regex被设置且效验失败时显示的错误文本(默认为 "")。The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
emptyText : String
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而...
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。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 name.
TextField
emptyClass : String
emptyText使用的CSS样式类名(默认为 'x-form-emp...
emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
enableKeyEvents : Boolean
True表示，为HTML的input输入字段激活键盘事件的代理（默认为...
True表示，为HTML的input输入字段激活键盘事件的代理（默认为false） True to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
DateField( Object config )
参数项：
  • config : Object
返回值：
  • void
DateField
setDisabledDates( Array disabledDates )
更换当前禁用的日期，并刷新日期拾取器。Replaces any exi...
更换当前禁用的日期，并刷新日期拾取器。Replaces any existing disabled dates with new values and refreshes the DatePicker.
参数项：
  • disabledDates : Array
    禁用日子的数组。参阅disabledDates的配置了解可支持值的详细内容。An array of date strings (see the disabledDates config for details on supported values) used to disable a pattern of dates.
返回值：
  • void
DateField
setDisabledDays( Array disabledDays )
更换当前禁用的日子，并刷新日期拾取器。Replaces any exi...
更换当前禁用的日子，并刷新日期拾取器。Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
参数项：
  • disabledDays : Array
    禁用日子的数组。参阅disabledDays的配置 An array of disabled day indexes. See the disabledDays config for details on supported values.
返回值：
  • void
DateField
setMinValue( Date value )
更换现有的minValue，并刷新日期拾取器。Replaces any...
更换现有的minValue，并刷新日期拾取器。Replaces any existing minValue with the new value and refreshes the DatePicker.
参数项：
  • value : Date
    最早可选择的日期 The minimum date that can be selected
返回值：
  • void
DateField
setMaxValue( Date value )
更换现有的maxValue，并刷新日期拾取器。Replaces any...
更换现有的maxValue，并刷新日期拾取器。Replaces any existing maxValue with the new value and refreshes the DatePicker.
参数项：
  • value : Date
    最晚可选择的日期 The maximum date that can be selected
返回值：
  • void
DateField
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
TriggerField( Object config )
参数项：
  • config : Object
    配置选择（对于有效的{@Ext.form.TextField}配置项也会被传入到TextField） Configuration options (valid {@Ext.form.TextField} config options will also be applied to the base TextField)
返回值：
  • void
TriggerField
onTriggerClick( EventObject e )
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的...
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的方法重写后才会有效。The function that should handle the trigger's click event. This method does nothing by default until overridden by an implementing function.
参数项：
  • e : EventObject
    参数e是（{EventObject}类型）
返回值：
  • void
TriggerField
TextField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
TextField
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
validateValue( Mixed value ) : Boolean
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Vali...
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
参数项：
  • value : Mixed
    要效验的值 The value to validate
返回值：
  • Boolean
    值有效时返回true，否则返回 false True if the value is valid, else false
TextField
selectText( Number start, Number end )
选择此字段中的文本。Selects text in this field
选择此字段中的文本。Selects text in this field
参数项：
  • start : Number
    （可选项） 选择区域的索引起点(默认为 0) (optional)The index where the selection should start (defaults to 0)
  • end : Number
    （可选项） 选择区域的索引终点(默认为文本长度) (optional)The index where the selection should end (defaults to the text length)
返回值：
  • void
TextField
autoSize()
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = tr...
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = true 时有效，并触发autosize事件。Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
参数项：
  • None.
返回值：
  • void
TextField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
select()
当日期选择器选取日期后触发的事件。Fires when a date ...
当日期选择器选取日期后触发的事件。Fires when a date is selected via the date picker.
侦听器会传入以下的参数：
  • None.
 DateField
autosize()
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地...
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地改变大小，但该事件的目的在于，允许开发人员在运行时加入额外的逻辑，以备调整输入字段的大小。Fires when the 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.
侦听器会传入以下的参数：
  • None.
 TextField
keydown()
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为...
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为true时有效。Keydown input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keyup()
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为...
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为true时有效。Keyup input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keypress()
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为...
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为true时有效。Keypress input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.DisplayField

包： | Extform
定义的文件： | DisplayField.js
类全称： | Ext.form.DisplayField
继承自于： | Ext.form.Field

配置项

配置项 定义者
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
DisplayField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
DisplayField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.Field

包： | Extform
定义的文件： | Field.js
类全称： | Ext.form.Field
继承自于： | Ext.BoxComponent
表单元素的基类，提供事件操作、尺寸调整、值操作与其它功能。
Base class for form fields that provides default event handling, sizing, value handling and other functionality.

配置项

配置项 定义者
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.FieldSet

包： | Extform
定义的文件： | FieldSet.js
类全称： | Ext.form.FieldSet
继承自于： | Ext.Panel
针对某一组字段的标准容器。
Standard container used for grouping form fields.

配置项

配置项 定义者
checkboxToggle : Mixed
True表示在lengend标签之前fieldset的范围内渲染一个c...
True表示在lengend标签之前fieldset的范围内渲染一个checkbox，或者送入一个DomHelper的配置对象制定checkbox（默认为false）。选择该checkbox会为展开、收起该面板服务。True to render a checkbox into the fieldset frame just in front of the legend, or a DomHelper config object to create the checkbox. (defaults to false). The fieldset will be expanded or collapsed when the checkbox is toggled.
FieldSet
checkboxName : String
分配到fieldset的checkbox的名称，在checkboxTo...
分配到fieldset的checkbox的名称，在checkboxToggle = true的情况有效。（默认为'[checkbox id]-checkbox'）。The name to assign to the fieldset's checkbox if checkboxToggle = true (defaults to '[checkbox id]-checkbox').
FieldSet
labelWidth : Number
标签的宽度，该属性会影响下级的子容器。The width of lab...
标签的宽度，该属性会影响下级的子容器。The width of labels. This property cascades to child containers.
FieldSet
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
FieldSet( Object config )
参数项：
  • config : Object
    配置选项 Configuration options
返回值：
  • void
FieldSet
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.FormPanel

包： | Extform
定义的文件： | Form.js
类全称： | Ext.form.FormPanel
继承自于： | Ext.Panel
Standard form container.

使用js为类Ext.form.BasicForm添加动态加载效果的能力
Although they are not listed, this class also accepts all the config options required to configure its internal Ext.form.BasicForm

The BasicForm is configured using the initialConfig of the FormPanel - that is the configuration object passed to the constructor. This means that if you subclass FormPanel, and you wish to configure the BasicForm, you will need to insert any configuration options for the BasicForm into the initialConfig property. Applying BasicForm configuration settings to this will not affect the BasicForm's configuration.

By default, FormPanel uses an 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 Ext.layout.FormLayout layout manager.

By default, Ext Forms are submitted through Ajax, using Ext.form.Action. To enable normal browser submission of the Ext Form contained in this FormPanel, use the {@link Ext.form.BasicForm#standardSubmit standardSubmit) option:

var myForm = new Ext.form.FormPanel({
    standardSubmit: true,
    items: myFieldset
});

配置项

配置项 定义者
formId : String
（可选的）FORM标签的id（默认是自动生成的）。(optional)...
（可选的）FORM标签的id（默认是自动生成的）。(optional) The id of the FORM tag (defaults to an auto-generated id).
FormPanel
labelWidth : Number
标签的宽度。该属性级联于子容器。The width of labels...
标签的宽度。该属性级联于子容器。The width of labels. 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).
FormPanel
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
labelAlign : String
有效值为"left," "top" 和 "right" (默认为"le...
有效值为"left," "top" 和 "right" (默认为"left")。该属性级联于没有设定此属性的子容器。Valid values are "left," "top" and "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).
FormPanel
monitorValid : Boolean
true表示为通过不断触发一个事件，来监视有效值的状态（在客户端进行）...
true表示为通过不断触发一个事件，来监视有效值的状态（在客户端进行） If true, the form monitors its valid state client-side and regularly fires the clientvalidation event passing that state.

该项须绑定到有配置项formBind:true的按钮的valid state When monitoring valid state, the FormPanel enables/disables any of its configured buttons which have been configured with formBind: true depending on whether the form is valid or not.

 FormPanel
monitorPoll : Number
检验valid state的间隔毫秒数，如monitorValid非真...
检验valid state的间隔毫秒数，如monitorValid非真则忽略改项（默认为200）。The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
FormPanel
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
FormPanel( Object config )
参数项：
  • config : Object
    配置选项 Configuration options
返回值：
  • void
FormPanel
getForm() : Ext.form.BasicForm
返回该面板包含的Form。Provides access to the...
返回该面板包含的Form。Provides access to the Form which this Panel contains.
参数项：
  • None.
返回值：
  • Ext.form.BasicForm
    返回面板对象包含的 Form以供访问。The Form which this Panel contains.
FormPanel
startMonitoring()
开始监视该表单的验证过程。通常这是由配置项"monitorValid"...
开始监视该表单的验证过程。通常这是由配置项"monitorValid"完成的。Starts monitoring of the valid state of this form. Usually this is done by passing the config option "monitorValid"
参数项：
  • None.
返回值：
  • void
FormPanel
stopMonitoring()
停止监视该form的验证状态。Stops monitoring of ...
停止监视该form的验证状态。Stops monitoring of the valid state of this form
参数项：
  • None.
返回值：
  • void
FormPanel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
clientvalidation()
如果配置项monitorValid为true，那么为通知验证的状态（v...
如果配置项monitorValid为true，那么为通知验证的状态（valid state）该事件将不断地触发。If the monitorValid config option is true, this event fires repetitively to notify of valid state
侦听器会传入以下的参数：
  • None.
 FormPanel
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.Hidden

包： | Extform
定义的文件： | Hidden.js
类全称： | Ext.form.Hidden
继承自于： | Ext.form.Field
用于存放表单里需要被传递到后台的隐藏值得隐藏域。
A basic hidden field for storing hidden values in forms that need to be passed in the form submit.

配置项

配置项 定义者
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Hidden( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
Hidden
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.HtmlEditor

包： | Extform
定义的文件： | HtmlEditor.js
类全称： | Ext.form.HtmlEditor
继承自于： | Ext.form.Field
提供一个轻量级的HTML编辑器组件。Safari环境下有些工具条的功能还不能使用，所以它会自动隐藏没有用的功能。在配置项的文档中有适当提示了。
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.

编辑器工具条的提示文本均在buttonTips属性中定义。只要单例对象Ext.QuickTips执行initialized方法便可以显示出来。
The editor's toolbar buttons have tooltips defined in the buttonTips property, but they are not enabled by default unless the global Ext.QuickTips singleton is initialized.

注意: 此组件不支持由 Ext.form.Field 继承而来的 focus/blur 和效验函数。
Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT supported by this editor.

编辑器组件是非常敏感的，因此它并不能应用于所有标准字段的场景。在 Safari 和 Firefox 中，在任何 display 属性被设置为 'none' 的元素中使用该组件都会造成错误。
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
});

// 声明xtype是什么，还有一些参数：
// 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
    }
});

配置项

配置项 定义者
enableFormat : Boolean
允许粗体、斜体和下划线按钮(默认为 true)。Enable the ...
允许粗体、斜体和下划线按钮(默认为 true)。Enable the bold, italic and underline buttons (defaults to true)
HtmlEditor
enableFontSize : Boolean
允许增大/缩小字号按钮(默认为 true)。Enable the in...
允许增大/缩小字号按钮(默认为 true)。Enable the increase/decrease font size buttons (defaults to true)
HtmlEditor
enableColors : Boolean
允许前景/高亮颜色按钮(默认为 true)。Enable the fo...
允许前景/高亮颜色按钮(默认为 true)。Enable the fore/highlight color buttons (defaults to true)
HtmlEditor
enableAlignments : Boolean
允许居左、居中、居右按钮(默认为 true)。Enable the l...
允许居左、居中、居右按钮(默认为 true)。Enable the left, center, right alignment buttons (defaults to true)
HtmlEditor
enableLists : Boolean
允许项目和列表符号按钮。Safari 中无效。(默认为 true)。E...
允许项目和列表符号按钮。Safari 中无效。(默认为 true)。Enable the bullet and numbered list buttons. Not available in Safari. (defaults to true)
HtmlEditor
enableSourceEdit : Boolean
允许切换到源码编辑按钮。Safari 中无效。(默认为 true)。E...
允许切换到源码编辑按钮。Safari 中无效。(默认为 true)。Enable the switch to source edit button. Not available in Safari. (defaults to true)
HtmlEditor
enableLinks : Boolean
允许创建链接按钮。Safari 中无效。(默认为 true)。Enab...
允许创建链接按钮。Safari 中无效。(默认为 true)。Enable the create link button. Not available in Safari. (defaults to true)
HtmlEditor
enableFont : Boolean
允许字体选项。Safari 中无效。(默认为 true)。Enable...
允许字体选项。Safari 中无效。(默认为 true)。Enable font selection. Not available in Safari. (defaults to true)
HtmlEditor
createLinkText : String
创建链接时提示的默认文本。The default text for t...
创建链接时提示的默认文本。The default text for the create link prompt
HtmlEditor
defaultLinkValue : String
创建链接时提示的默认值(默认为 http:/ /)。The defau...
创建链接时提示的默认值(默认为 http:/ /)。The default value for the create link prompt (defaults to http:/ /)
HtmlEditor
fontFamilies : Array
一个有效的字体列表数组。An array of available f...
一个有效的字体列表数组。An array of available font families
HtmlEditor
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 定义者
: Object
编辑器中工具栏上按钮的工具提示对象的集合。关键在于，对象ID必须与...
编辑器中工具栏上按钮的工具提示对象的集合。关键在于，对象ID必须与按钮相同且值应为一个有效的QuickTips对象。例如: 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'
    },
    ...
HtmlEditor
initialConfig: Object
组件初始化配置项。只读的。This Component's init...
组件初始化配置项。只读的。This Component's initial configuration specification. Read-only.
Component
el: Ext.Element
该组件的Ext.Element元素对象。只读的。 用getEl可返回...

该组件的Ext.Element元素对象。只读的。

用getEl可返回该对象。

 Component
ownerCt: Ext.Container
组件自身的Ext.Container（默认是undefined，只有...
组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.
Component
hidden: Boolean
True表示为组件是隐藏的。只读的。True if this com...
True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only.
Component
disabled: Boolean
True表示为组件已被禁止。只读的。True if this com...
True表示为组件已被禁止。只读的。True if this component is disabled. Read-only.
Component
rendered: Boolean
True表示为该组件已经渲染好了。只读的。True if this ...
True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only.
Component

公共方法

方法 定义者
HtmlEditor( Object config )
参数项：
  • config : Object
返回值：
  • void
HtmlEditor
createToolbar( HtmlEditor editor )
受保护的方法一般不会直接调用。重写该方法可添加制定的工具条。Prote...
受保护的方法一般不会直接调用。重写该方法可添加制定的工具条。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.
参数项：
  • editor : HtmlEditor
返回值：
  • void
HtmlEditor
getDocMarkup()
受保护的方法一般不会直接调用。在编辑器初始化iframe的HTML时，...
受保护的方法一般不会直接调用。在编辑器初始化iframe的HTML时，就调用该方法。如果你想修改iframe的内容就覆盖该方法吧（例如修改某些样式）。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).
参数项：
  • None.
返回值：
  • void
HtmlEditor
toggleSourceEdit( Boolean sourceEdit )
在标准模式与源码模式下切换。Toggles the editor be...
在标准模式与源码模式下切换。Toggles the editor between standard and source edit mode.
参数项：
  • sourceEdit : Boolean
    （可选的）True表示源码模式，false表示标准模式 (optional) True for source edit, false for standard
返回值：
  • void
HtmlEditor
cleanHtml( String html ) : String
受保护的方法一般不会直接调用。如果你需要自定义HTML cleanup...
受保护的方法一般不会直接调用。如果你需要自定义HTML cleanup，那么你要重写该方法。Protected method that will not generally be called directly. If you need/want custom HTML cleanup, this is the method you should override.
参数项：
  • html : String
    被执行清理的HTMLThe HTML to be cleaned
返回值：
  • String
    干净的HTML The cleaned HTML
HtmlEditor
syncValue()
受保护的方法, 一般不会被直接调用。它会通过读取编辑器中当前选中区域的...
受保护的方法, 一般不会被直接调用。它会通过读取编辑器中当前选中区域的标记状态触发对工具栏的更新操作。Protected method that will not generally be called directly. Syncs the contents of the editor iframe with the textarea.
参数项：
  • None.
返回值：
  • void
HtmlEditor
pushValue()
受保护的方法一般不会直接调用。把textarea的值赋给iframe中...
受保护的方法一般不会直接调用。把textarea的值赋给iframe中的编辑器。Protected method that will not generally be called directly. Pushes the value of the textarea into the iframe editor.
参数项：
  • None.
返回值：
  • void
HtmlEditor
updateToolbar()
受保护的方法一般不会直接调用。当编辑器有选中部分经过标签（markup...
受保护的方法一般不会直接调用。当编辑器有选中部分经过标签（markup）判断分析的，工具条就会作适当的反应，就是这个方法触发的。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.
参数项：
  • None.
返回值：
  • void
HtmlEditor
relayCmd( String cmd, String/Boolean value )
对编辑的文本执行一条 Midas 指令, 并完成必要的聚焦和工具栏的更...
对编辑的文本执行一条 Midas 指令, 并完成必要的聚焦和工具栏的更新动作。此方法只能在编辑器初始化后被调用。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.
参数项：
  • cmd : String
    The Midas 指令 command
  • value : String/Boolean
    (可选项) 传递给指令的值(默认为 null) (optional) The value to pass to the command (defaults to null)
返回值：
  • void
HtmlEditor
execCmd( String cmd, String/Boolean value )
对编辑的文本直接执行一条 Midas 指令。对于可视化的指令, 应采用...
对编辑的文本直接执行一条 Midas 指令。对于可视化的指令, 应采用relayCmd 方法。此方法只能在编辑器初始化后被调用。 Executes a Midas editor command directly on the editor document. For visual commands, you should use relayCmd instead. This should only be called after the editor is initialized.
参数项：
  • cmd : String
    指令 The Midas command
  • value : String/Boolean
    (可选项) 传递给指令的值(默认为 null) (optional) The value to pass to the command (defaults to null)
返回值：
  • void
HtmlEditor
insertAtCursor( String text )
在光标当前所在位置插入给定的文本。注意:编辑器必须已经初始化且处于活动...
在光标当前所在位置插入给定的文本。注意:编辑器必须已经初始化且处于活动状态才能插入本文。Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated to insert text.
参数项：
  • text : String
返回值：
  • void
HtmlEditor
getToolbar() : Ext.Toolbar
返回编辑器的工具栏。此方法在编辑器被渲染后才可用。 Returns ...
返回编辑器的工具栏。此方法在编辑器被渲染后才可用。 Returns the editor's toolbar. This is only available after the editor has been rendered.
参数项：
  • None.
返回值：
  • Ext.Toolbar
HtmlEditor
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
initialize()
当编辑器完全初始化后触发(包括 iframe)。Fires when...
当编辑器完全初始化后触发(包括 iframe)。Fires when the editor is fully initialized (including the iframe)
侦听器会传入以下的参数：
  • None.
 HtmlEditor
activate()
当编辑器首次获取焦点时触发。所有的插入操作都必须等待此事件完成。Fi...
当编辑器首次获取焦点时触发。所有的插入操作都必须等待此事件完成。Fires when the editor is first receives the focus. Any insertion must wait until after this event.
侦听器会传入以下的参数：
  • None.
 HtmlEditor
beforesync()
在把编辑器的 iframe 中的内容同步更新到文本域之前触发。返回f...
在把编辑器的 iframe 中的内容同步更新到文本域之前触发。返回false可取消更新。Fires before the textarea is updated with content from the editor iframe. Return false to cancel the sync.
侦听器会传入以下的参数：
  • None.
 HtmlEditor
beforepush()
在把文本域中的内容同步更新到编辑器的iframe之前触发。返回 fa...
在把文本域中的内容同步更新到编辑器的iframe之前触发。返回 false 可取消更新。Fires before the iframe editor is updated with content from the textarea. Return false to cancel the push.
侦听器会传入以下的参数：
  • None.
 HtmlEditor
sync()
当把编辑器的 iframe 中的内容同步更新到文本域后触发。Fire...
当把编辑器的 iframe 中的内容同步更新到文本域后触发。Fires when the textarea is updated with content from the editor iframe.
侦听器会传入以下的参数：
  • None.
 HtmlEditor
push()
当把文本域中的内容同步更新到编辑器的iframe后触发。Fires ...
当把文本域中的内容同步更新到编辑器的iframe后触发。Fires when the iframe editor is updated with content from the textarea.
侦听器会传入以下的参数：
  • None.
 HtmlEditor
editmodechange()
当切换了编辑器的编辑模式后触发。Fires when the edi...
当切换了编辑器的编辑模式后触发。Fires when the editor switches edit modes
侦听器会传入以下的参数：
  • None.
 HtmlEditor
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.Label

包： | Extform
定义的文件： | Label.js
类全称： | Ext.form.Label
继承自于： | Ext.BoxComponent
简单的Label字段元素。
Basic Label field.

配置项

配置项 定义者
text : String
Label内显示的普通文本，默认为''。如果想在Label组件里嵌入H...
Label内显示的普通文本，默认为''。如果想在Label组件里嵌入HTML标签，请使用html。The plain text to display within the label (defaults to ''). If you need to include HTML tags within the label's innerHTML, use the html config instead.
Label
forId : String
该Label将要通过标准的HTML 'for'属性绑定到的页面元素(e...
该Label将要通过标准的HTML 'for'属性绑定到的页面元素(element)的ID，如果没有指定，那么该属性不会被加到label上。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.
Label
html : String
Label的内部 HTML片段。如果指定了text，将优先使用text...
Label的内部 HTML片段。如果指定了text，将优先使用text属性，html属性将被忽略。An HTML fragment that will be used as the label's innerHTML (defaults to ''). Note that if text is specified it will take precedence and this value will be ignored.
Label
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Label( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。如果传入一个元素(element)，那么该元素会作为label组件的内部元素，使用它(传入的element)的ID作为组件的ID， 如果传入的是一个字符串，假设之该字符串是一个已存在的元素的ID，它的ID作为label组件的ID。否则，就作为一个普通的配置对象，应用到该组件。
    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
返回值：
  • void
Label
setText( String text, Boolean encode ) : Label
更改Label的内部HTML为指定的字符串。Updates the l...
更改Label的内部HTML为指定的字符串。Updates the label's innerHTML with the specified string.
参数项：
  • text : String
    新指定的在Label内显示的文本。The new label text
  • encode : Boolean
    （可选选项）默认为true，对html片段进行编码，如果为false将在渲染的时候的时候将跳过对HTML的编码，用于想要在Label里使用html标签而不是 作为普通的字符串进行渲染。(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.
返回值：
  • Label
    this
Label
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.NumberField

包： | Extform
定义的文件： | NumberField.js
类全称： | Ext.form.NumberField
继承自于： | Ext.form.TextField
数字型文本域，提供自动键击过滤和数字校验。
Numeric text field that provides automatic keystroke filtering and numeric validation.

配置项

配置项 定义者
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
allowDecimals : Boolean
值为 False时将不接受十进制值 (默认为true)。False t...
值为 False时将不接受十进制值 (默认为true)。False to disallow decimal values (defaults to true)
NumberField
decimalSeparator : String
设置十进制数分割符(默认为 '.')（？？指的大概是小数点） 。Cha...
设置十进制数分割符(默认为 '.')（？？指的大概是小数点） 。Character(s) to allow as the decimal separator (defaults to '.')
NumberField
decimalPrecision : Number
设置小数点后最大精确位数(默认为 2)。The maximum pre...
设置小数点后最大精确位数(默认为 2)。The maximum precision to display after the decimal separator (defaults to 2)
NumberField
allowNegative : Boolean
值为 False时只允许为正数(默认为 true，即默认允许为负数)。...
值为 False时只允许为正数(默认为 true，即默认允许为负数)。False to prevent entering a negative sign (defaults to true)
NumberField
minValue : Number
允许的最小值(默认为Number.NEGATIVE_INFINITY)...
允许的最小值(默认为Number.NEGATIVE_INFINITY)。The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
NumberField
maxValue : Number
允许的最大值(默认为Number.MAX_VALUE)。The max...
允许的最大值(默认为Number.MAX_VALUE)。The maximum allowed value (defaults to Number.MAX_VALUE)
NumberField
minText : String
最小值验证失败（ps：超出设置的最小值范围）时显示该错误信息（默认为"...
最小值验证失败（ps：超出设置的最小值范围）时显示该错误信息（默认为"The minimum value for this field is {minValue}"）。Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
NumberField
maxText : String
最大值验证失败（ps：超出设置的最大值范围）时显示该错误信息(默认为 ...
最大值验证失败（ps：超出设置的最大值范围）时显示该错误信息(默认为 "The maximum value for this field is {maxValue}")。Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
NumberField
nanText : String
当值非数字时显示此错误信息。例如，如果仅仅合法字符如'.' 或 '-'...
当值非数字时显示此错误信息。例如，如果仅仅合法字符如'.' 或 '-'而没有其他任何数字出现在该域时，会显示该错误信息。(默认为"{value} is not a valid number")。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")
NumberField
baseChars : String
接受有效数字的一组基础字符（默认为0123456789）。The ba...
接受有效数字的一组基础字符（默认为0123456789）。The base set of characters to evaluate as valid numbers (defaults to '0123456789').
NumberField
vtypeText : String
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）...
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）。如vtype不设置该项就无效。A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Only applies if vtype is set, else ignored.
TextField
stripCharsRe : RegExp
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要...
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要的内容（默认为null）。A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
grow : Boolean
当值为 true 时表示字段可以根据内容自动伸缩。True if th...
当值为 true 时表示字段可以根据内容自动伸缩。True if this field should automatically grow and shrink to its content
TextField
growMin : Number
当 grow = true 时允许的字段最小宽度（默认为 30） Th...
当 grow = true 时允许的字段最小宽度（默认为 30） The minimum width to allow when grow = true (defaults to 30)
TextField
growMax : Number
当 grow = true 时允许的字段最大宽度(默认为 800) ...
当 grow = true 时允许的字段最大宽度(默认为 800) The maximum width to allow when grow = true (defaults to 800)
TextField
vtype : String
中定义的效验类型名(默认为 null) A validation t...
中定义的效验类型名(默认为 null) A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
maskRe : RegExp
一个用来过滤无效按键的正则表达式(默认为 null) An inpu...
一个用来过滤无效按键的正则表达式(默认为 null) An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
TextField
disableKeyFilter : Boolean
值为 true 时禁用输入按键过滤(默认为 false) True ...
值为 true 时禁用输入按键过滤(默认为 false) True to disable input keystroke filtering (defaults to false)
TextField
allowBlank : Boolean
值为 false 时将效验输入字符个数大于0(默认为 true) F...
值为 false 时将效验输入字符个数大于0(默认为 true) False to validate that the value length > 0 (defaults to true)
TextField
minLength : Number
输入字段所需的最小字符数(默认为 0) Minimum input ...
输入字段所需的最小字符数(默认为 0) Minimum input field length required (defaults to 0)
TextField
maxLength : Number
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) ...
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) Maximum input field length allowed (defaults to Number.MAX_VALUE)
TextField
minLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The minimum ...
输入字符数小于最小字符数时显示的文本（默认为"The minimum length for this field is {minLength}"） Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
maxLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The maximum ...
输入字符数小于最小字符数时显示的文本（默认为"The maximum length for this field is {maxLength}"） Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
selectOnFocus : Boolean
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 fa...
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。True to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
blankText : String
当允许为空效验失败时显示的错误文本（默认为 "This field i...
当允许为空效验失败时显示的错误文本（默认为 "This field is required"）。Error text to display if the allow blank validation fails (defaults to "This field is required")
TextField
validator : Function
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则...
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则此函数将在所有基础效验（allowBlank、minLength、maxLength和任意的vtype）成功之后被调用，调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true，失败时返回错误文本。A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
regex : RegExp
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 ...
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项，则此正则表达式将在所有基础效验成功之后被执行，执行此正则表达式时传递的参数为该字段的值。如果效验失败，则根据regexText的设置将字段标记为无效。A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
当regex被设置且效验失败时显示的错误文本(默认为 "")。The ...
当regex被设置且效验失败时显示的错误文本(默认为 "")。The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
emptyText : String
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而...
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。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 name.
TextField
emptyClass : String
emptyText使用的CSS样式类名(默认为 'x-form-emp...
emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
enableKeyEvents : Boolean
True表示，为HTML的input输入字段激活键盘事件的代理（默认为...
True表示，为HTML的input输入字段激活键盘事件的代理（默认为false） True to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
NumberField( Object config )
参数项：
  • config : Object
    配置选项 Configuration options
返回值：
  • void
NumberField
TextField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
TextField
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
validateValue( Mixed value ) : Boolean
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Vali...
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
参数项：
  • value : Mixed
    要效验的值 The value to validate
返回值：
  • Boolean
    值有效时返回true，否则返回 false True if the value is valid, else false
TextField
selectText( Number start, Number end )
选择此字段中的文本。Selects text in this field
选择此字段中的文本。Selects text in this field
参数项：
  • start : Number
    （可选项） 选择区域的索引起点(默认为 0) (optional)The index where the selection should start (defaults to 0)
  • end : Number
    （可选项） 选择区域的索引终点(默认为文本长度) (optional)The index where the selection should end (defaults to the text length)
返回值：
  • void
TextField
autoSize()
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = tr...
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = true 时有效，并触发autosize事件。Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
参数项：
  • None.
返回值：
  • void
TextField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
autosize()
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地...
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地改变大小，但该事件的目的在于，允许开发人员在运行时加入额外的逻辑，以备调整输入字段的大小。Fires when the 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.
侦听器会传入以下的参数：
  • None.
 TextField
keydown()
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为...
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为true时有效。Keydown input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keyup()
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为...
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为true时有效。Keyup input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keypress()
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为...
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为true时有效。Keypress input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.Radio

包： | Extform
定义的文件： | Radio.js
类全称： | Ext.form.Radio
继承自于： | Ext.form.Checkbox
单个的radio按钮。与Checkbox类似，提供一种简便，自动的输入方式。如果你给radio按钮组中的每个按钮相同的名字（属性name值相同），按钮组会自动被浏览器编组。
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.

配置项

配置项 定义者
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
checked : Boolean
如果checkbox需要呈现选中状态，设置checked为True（默...
如果checkbox需要呈现选中状态，设置checked为True（默认为false）。True if the the checkbox should render already checked (defaults to false)
Checkbox
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
boxLabel : String
checkbox旁边显示的文字。The text that appea...
checkbox旁边显示的文字。The text that appears beside the checkbox
Checkbox
inputValue : String
应该显示在元素value处的值。The value that shou...
应该显示在元素value处的值。The value that should go into the generated input element's value attribute
Checkbox
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Radio( Object config )
参数项：
  • config : Object
    配置选项 Configuration options
返回值：
  • void
Radio
getGroupValue() : String
如果该radio是组的一部分，将返回已选中的值。If this rad...
如果该radio是组的一部分，将返回已选中的值。If this radio is part of a group, it will return the selected value
参数项：
  • None.
返回值：
  • String
Radio
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
Checkbox( Object config )
参数项：
  • config : Object
    配置项选项 config Configuration options
返回值：
  • void
Checkbox
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
check()
当checkbox选中也好，不选中也好，触发该事件。Fires whe...
当checkbox选中也好，不选中也好，触发该事件。Fires when the checkbox is checked or unchecked.
侦听器会传入以下的参数：
  • None.
 Checkbox
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.RadioGroup

包： | Extform
定义的文件： | RadioGroup.js
类全称： | Ext.form.RadioGroup
继承自于： | Ext.form.CheckboxGroup
群组Ext.form.Radio控件的容器。
A grouping container for Ext.form.Radio controls.

配置项

配置项 定义者
allowBlank : Boolean
是否允许为空。false则至少要有一个选项被选中，如果没有被选中的选项...
是否允许为空。false则至少要有一个选项被选中，如果没有被选中的选项，会显示{@link @blankText}的错误信息。默认为 true。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.
CheckboxGroup
blankText : String
allowBlank 验证失败显示的错误信息。默认为："You mus...
allowBlank 验证失败显示的错误信息。默认为："You must select at least one item in this group"。Error text to display if the allowBlank validation fails (defaults to "You must select at least one item in this group")
CheckboxGroup
items : Array
一个Checkbox的数组，或者配置选项。An Array of Ch...
一个Checkbox的数组，或者配置选项。An Array of Checkboxes or Checkbox config objects to arrange in the group.
CheckboxGroup
columns : String/Number/Array
使用自动布局显示 checkbox/radio 组的时候使用的列的数目...
使用自动布局显示 checkbox/radio 组的时候使用的列的数目，这个配置选项可以有多种不同的类型的值。
  • 'auto' :

    渲染的时候，组件会一列挨着一列，每一列的宽度按照整行的宽度均分。默认的是auto

  • Number :

    如果你指定了一个像 3 这样的数字，那么将会创建指定的数目的列，包含的组建将会根据vertical的值 自动的分发。

  • Array : Object

    你也可以指定一个整形和浮点型的数字组成的数组来表示各个列的宽度，比如[100, .25, .75]。Any integer values will be rendered first, 所有的整数型值会被先用来渲染，然后剩下的浮点型值将会被当做剩下的空间的百分比来计算。虽然不用使数据里的浮点型的值的和为一(100%)， 但是如果你想要让组件填充满容器，你应该是他们的和为一。

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

 CheckboxGroup
vertical : Boolean
如果设置为 true，将包含的组件跨列分发，每一行从头到底完全填充。自...
如果设置为 true，将包含的组件跨列分发，每一行从头到底完全填充。自动计算每一列的组件的数量以使每一列尽量平衡。默认为 false,每次每一列仅添加一个组件。每一行从头到尾完全填充。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.
CheckboxGroup
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
RadioGroup( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
RadioGroup
CheckboxGroup( Object config )
参数项：
  • config : Object
    配置选项。Configuration options @xtype checkboxgroup
返回值：
  • void
CheckboxGroup
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.TextArea

包： | Extform
定义的文件： | TextArea.js
类全称： | Ext.form.TextArea
继承自于： | Ext.form.TextField
多行文本域。可以直接用于替代textarea，支持自动调整大小。
Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds support for auto-sizing.

配置项

配置项 定义者
growMin : Number
当 grow = true 时允许的字段最小宽度（默认为 30） Th...
当 grow = true 时允许的字段最小宽度（默认为 30） The minimum width to allow when grow = true (defaults to 30)
TextField
growMax : Number
当 grow = true 时允许的字段最大宽度(默认为 800) ...
当 grow = true 时允许的字段最大宽度(默认为 800) The maximum width to allow when grow = true (defaults to 800)
TextField
preventScrollbars : Boolean
为True时在为本域中将禁止滑动条，不论域中文本的数量（相当于设置ov...
为True时在为本域中将禁止滑动条，不论域中文本的数量（相当于设置overflow为hidden，默认值为false）。True to prevent scrollbars from appearing regardless of how much text is in the field (equivalent to setting overflow: hidden, defaults to false)
TextArea
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
vtypeText : String
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）...
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）。如vtype不设置该项就无效。A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Only applies if vtype is set, else ignored.
TextField
stripCharsRe : RegExp
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要...
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要的内容（默认为null）。A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
grow : Boolean
当值为 true 时表示字段可以根据内容自动伸缩。True if th...
当值为 true 时表示字段可以根据内容自动伸缩。True if this field should automatically grow and shrink to its content
TextField
vtype : String
中定义的效验类型名(默认为 null) A validation t...
中定义的效验类型名(默认为 null) A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
maskRe : RegExp
一个用来过滤无效按键的正则表达式(默认为 null) An inpu...
一个用来过滤无效按键的正则表达式(默认为 null) An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
TextField
disableKeyFilter : Boolean
值为 true 时禁用输入按键过滤(默认为 false) True ...
值为 true 时禁用输入按键过滤(默认为 false) True to disable input keystroke filtering (defaults to false)
TextField
allowBlank : Boolean
值为 false 时将效验输入字符个数大于0(默认为 true) F...
值为 false 时将效验输入字符个数大于0(默认为 true) False to validate that the value length > 0 (defaults to true)
TextField
minLength : Number
输入字段所需的最小字符数(默认为 0) Minimum input ...
输入字段所需的最小字符数(默认为 0) Minimum input field length required (defaults to 0)
TextField
maxLength : Number
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) ...
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) Maximum input field length allowed (defaults to Number.MAX_VALUE)
TextField
minLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The minimum ...
输入字符数小于最小字符数时显示的文本（默认为"The minimum length for this field is {minLength}"） Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
maxLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The maximum ...
输入字符数小于最小字符数时显示的文本（默认为"The maximum length for this field is {maxLength}"） Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
selectOnFocus : Boolean
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 fa...
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。True to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
blankText : String
当允许为空效验失败时显示的错误文本（默认为 "This field i...
当允许为空效验失败时显示的错误文本（默认为 "This field is required"）。Error text to display if the allow blank validation fails (defaults to "This field is required")
TextField
validator : Function
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则...
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则此函数将在所有基础效验（allowBlank、minLength、maxLength和任意的vtype）成功之后被调用，调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true，失败时返回错误文本。A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
regex : RegExp
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 ...
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项，则此正则表达式将在所有基础效验成功之后被执行，执行此正则表达式时传递的参数为该字段的值。如果效验失败，则根据regexText的设置将字段标记为无效。A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
当regex被设置且效验失败时显示的错误文本(默认为 "")。The ...
当regex被设置且效验失败时显示的错误文本(默认为 "")。The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
emptyText : String
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而...
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。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 name.
TextField
emptyClass : String
emptyText使用的CSS样式类名(默认为 'x-form-emp...
emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
enableKeyEvents : Boolean
True表示，为HTML的input输入字段激活键盘事件的代理（默认为...
True表示，为HTML的input输入字段激活键盘事件的代理（默认为false） True to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TextArea( Object config )
参数项：
  • config : Object
    配置选项 Configuration options
返回值：
  • void
TextArea
autoSize()
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = tr...
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = true 时有效，并触发autosize事件。Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
参数项：
  • None.
返回值：
  • void
TextField
TextField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
TextField
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
validateValue( Mixed value ) : Boolean
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Vali...
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
参数项：
  • value : Mixed
    要效验的值 The value to validate
返回值：
  • Boolean
    值有效时返回true，否则返回 false True if the value is valid, else false
TextField
selectText( Number start, Number end )
选择此字段中的文本。Selects text in this field
选择此字段中的文本。Selects text in this field
参数项：
  • start : Number
    （可选项） 选择区域的索引起点(默认为 0) (optional)The index where the selection should start (defaults to 0)
  • end : Number
    （可选项） 选择区域的索引终点(默认为文本长度) (optional)The index where the selection should end (defaults to the text length)
返回值：
  • void
TextField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
autosize()
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地...
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地改变大小，但该事件的目的在于，允许开发人员在运行时加入额外的逻辑，以备调整输入字段的大小。Fires when the 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.
侦听器会传入以下的参数：
  • None.
 TextField
keydown()
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为...
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为true时有效。Keydown input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keyup()
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为...
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为true时有效。Keyup input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keypress()
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为...
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为true时有效。Keypress input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.TextField

包： | Extform
定义的文件： | TextField.js
类全称： | Ext.form.TextField
继承自于： | Ext.form.Field
基本的文本字段。可以被当作传统文本转入框的直接代替, 或者当作其他更复杂输入控件的基础类（比如 Ext.form.TextArea 和 Ext.form.ComboBox）。
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 Ext.form.TextArea and Ext.form.ComboBox).

配置项

配置项 定义者
vtypeText : String
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）...
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）。如vtype不设置该项就无效。A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Only applies if vtype is set, else ignored.
TextField
stripCharsRe : RegExp
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要...
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要的内容（默认为null）。A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
grow : Boolean
当值为 true 时表示字段可以根据内容自动伸缩。True if th...
当值为 true 时表示字段可以根据内容自动伸缩。True if this field should automatically grow and shrink to its content
TextField
growMin : Number
当 grow = true 时允许的字段最小宽度（默认为 30） Th...
当 grow = true 时允许的字段最小宽度（默认为 30） The minimum width to allow when grow = true (defaults to 30)
TextField
growMax : Number
当 grow = true 时允许的字段最大宽度(默认为 800) ...
当 grow = true 时允许的字段最大宽度(默认为 800) The maximum width to allow when grow = true (defaults to 800)
TextField
vtype : String
中定义的效验类型名(默认为 null) A validation t...
中定义的效验类型名(默认为 null) A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
maskRe : RegExp
一个用来过滤无效按键的正则表达式(默认为 null) An inpu...
一个用来过滤无效按键的正则表达式(默认为 null) An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
TextField
disableKeyFilter : Boolean
值为 true 时禁用输入按键过滤(默认为 false) True ...
值为 true 时禁用输入按键过滤(默认为 false) True to disable input keystroke filtering (defaults to false)
TextField
allowBlank : Boolean
值为 false 时将效验输入字符个数大于0(默认为 true) F...
值为 false 时将效验输入字符个数大于0(默认为 true) False to validate that the value length > 0 (defaults to true)
TextField
minLength : Number
输入字段所需的最小字符数(默认为 0) Minimum input ...
输入字段所需的最小字符数(默认为 0) Minimum input field length required (defaults to 0)
TextField
maxLength : Number
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) ...
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) Maximum input field length allowed (defaults to Number.MAX_VALUE)
TextField
minLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The minimum ...
输入字符数小于最小字符数时显示的文本（默认为"The minimum length for this field is {minLength}"） Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
maxLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The maximum ...
输入字符数小于最小字符数时显示的文本（默认为"The maximum length for this field is {maxLength}"） Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
selectOnFocus : Boolean
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 fa...
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。True to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
blankText : String
当允许为空效验失败时显示的错误文本（默认为 "This field i...
当允许为空效验失败时显示的错误文本（默认为 "This field is required"）。Error text to display if the allow blank validation fails (defaults to "This field is required")
TextField
validator : Function
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则...
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则此函数将在所有基础效验（allowBlank、minLength、maxLength和任意的vtype）成功之后被调用，调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true，失败时返回错误文本。A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
regex : RegExp
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 ...
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项，则此正则表达式将在所有基础效验成功之后被执行，执行此正则表达式时传递的参数为该字段的值。如果效验失败，则根据regexText的设置将字段标记为无效。A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
当regex被设置且效验失败时显示的错误文本(默认为 "")。The ...
当regex被设置且效验失败时显示的错误文本(默认为 "")。The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
emptyText : String
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而...
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。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 name.
TextField
emptyClass : String
emptyText使用的CSS样式类名(默认为 'x-form-emp...
emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
enableKeyEvents : Boolean
True表示，为HTML的input输入字段激活键盘事件的代理（默认为...
True表示，为HTML的input输入字段激活键盘事件的代理（默认为false） True to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TextField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
TextField
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
validateValue( Mixed value ) : Boolean
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Vali...
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
参数项：
  • value : Mixed
    要效验的值 The value to validate
返回值：
  • Boolean
    值有效时返回true，否则返回 false True if the value is valid, else false
TextField
selectText( Number start, Number end )
选择此字段中的文本。Selects text in this field
选择此字段中的文本。Selects text in this field
参数项：
  • start : Number
    （可选项） 选择区域的索引起点(默认为 0) (optional)The index where the selection should start (defaults to 0)
  • end : Number
    （可选项） 选择区域的索引终点(默认为文本长度) (optional)The index where the selection should end (defaults to the text length)
返回值：
  • void
TextField
autoSize()
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = tr...
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = true 时有效，并触发autosize事件。Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
参数项：
  • None.
返回值：
  • void
TextField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
autosize()
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地...
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地改变大小，但该事件的目的在于，允许开发人员在运行时加入额外的逻辑，以备调整输入字段的大小。Fires when the 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.
侦听器会传入以下的参数：
  • None.
 TextField
keydown()
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为...
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为true时有效。Keydown input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keyup()
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为...
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为true时有效。Keyup input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keypress()
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为...
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为true时有效。Keypress input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.TimeField

包： | Extform
定义的文件： | TimeField.js
类全称： | Ext.form.TimeField
继承自于： | 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
});

配置项

配置项 定义者
minValue : Date/String
允许输入的最早的时间。可以是JavaScript Date对象，也可以...
允许输入的最早的时间。可以是JavaScript Date对象，也可以是一个格式正确的字符串，请参阅format和altFormats（默认为null）。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 format and altFormats (defaults to null).
TimeField
maxValue : Date/String
允许输入的最晚时间。可以是JavaScriptDate对象，也可以是一...
允许输入的最晚时间。可以是JavaScriptDate对象，也可以是一个格式正确的字符串，请参阅format和altFormats（默认为null）。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 format and altFormats (defaults to null).
TimeField
minText : String
单元格里的时间早于限定的最早时间的错误信息（默认为:'The time...
单元格里的时间早于限定的最早时间的错误信息（默认为:'The time in this field must be equal to or after {0}'）。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}').
TimeField
maxText : String
单元格里的时间晚于限定的最早时间的错误信息（默认为:'The time...
单元格里的时间晚于限定的最早时间的错误信息（默认为:'The time in this field must be equal to or before {0}'）。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}').
TimeField
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
format : String
默认的字符串时间的格式，可以被覆盖以支持本地化。表示此格式的该字符串必...
默认的字符串时间的格式，可以被覆盖以支持本地化。表示此格式的该字符串必须符合DateparseDate（默认为'g:i A', e.g., '3:15 PM'）。The default time format string which can be overriden for localization support. The format must be valid according to DateparseDate (defaults to 'g:i A', e.g., '3:15 PM'). For 24-hour time format try 'H:i' instead.
TimeField
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'） 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').
TimeField
increment : Number
下拉框里显示时间的步长（默认为15分钟）。PS:数字的单位是分钟。Th...
下拉框里显示时间的步长（默认为15分钟）。PS:数字的单位是分钟。The number of minutes between each time value in the list (defaults to 15).
TimeField
transform : Mixed
要转换为组合框的id，DOM节点或者已有的select元素。The i...
要转换为组合框的id，DOM节点或者已有的select元素。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 a Ext.form.BasicForm or Ext.form.FormPanel, you must also set lazyRender = true.
ComboBox
lazyRender : Boolean
值为true时阻止ComboBox渲染直到该对象被请求（被渲染到Ext...
值为true时阻止ComboBox渲染直到该对象被请求（被渲染到Ext.Editor 组件的时候应该使用这个参数，默认为 false）。True to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor, defaults to false).
ComboBox
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
store : Ext.data.Store/Array
该组合框绑定的数据仓库（默认为 undefined）。The data...
该组合框绑定的数据仓库（默认为 undefined）。The data source to which this combo is bound (defaults to undefined). This can be any Ext.data.Store subclass, a 1-dimensional array (e.g., ['Foo','Bar']) or a 2-dimensional array (e.g., [['f','Foo'],['b','Bar']]). Arrays will be converted to a Ext.data.ArrayStore internally. 1-dimensional arrays will automatically be expanded (each array item will be the combo value and text) and for multi-dimensional arrays, the value in index 0 of each item will be assumed to be the combo value, while the value at index 1 is assumed to be the combo text.
ComboBox
title : String
如果提供了，则会创建一个包含此文本的元素并被添加到下拉列表的顶部（默认...
如果提供了，则会创建一个包含此文本的元素并被添加到下拉列表的顶部（默认为 undefined，表示没有头部元素）。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)
ComboBox
listWidth : Number
以象素表示的下拉列表的宽度（默认的宽度与ComboBox的width属...
以象素表示的下拉列表的宽度（默认的宽度与ComboBox的width属性一致）。The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
ComboBox
displayField : String
组合框用以展示的数据的字段名（如果mode='remote'则默认为 ...
组合框用以展示的数据的字段名（如果mode='remote'则默认为 undefined，如果mode = 'local' 则默认为 'text'）。The underlying data field name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'text' if transforming a select)
ComboBox
valueField : String
组合框用以取值的数据的字段名（如果mode='remote'则默认为 ...
组合框用以取值的数据的字段名（如果mode='remote'则默认为 undefined，如果mode = 'local' 则默认为 'value'）。The underlying data value name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'value' if transforming a select) Note: use of a valueField requires the user to make a selection in order for a value to be mapped.
ComboBox
hiddenName : String
如果指定了, 则会动态生成一个以指定名称命名的隐藏域用来存放值数据(默...
如果指定了, 则会动态生成一个以指定名称命名的隐藏域用来存放值数据(默认为)。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. Note that the hidden field's id will also default to this name if hiddenId is not specified. The combo's id and the hidden field's ids should be different, since no two DOM nodes should share the same id, so if the combo and hidden names are the same, you should specify a unique hiddenId.
ComboBox
hiddenId : String
If hiddenName is specified, hiddenI...
If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id (defaults to the hiddenName). The hiddenId and combo id should be different, since no two DOM nodes should share the same id.
ComboBox
hiddenValue : String
Sets the initial value of the hidde...
Sets the initial value of the hidden field if hiddenName is specified to contain the selected valueField, from the Store. Defaults to the configured value.
ComboBox
listClass : String
下拉列表元素应用的CSS类（默认为''）。CSS class to a...
下拉列表元素应用的CSS类（默认为''）。CSS class to apply to the dropdown list element (defaults to '')
ComboBox
selectedClass : String
下拉列表中选中项应用的CSS类（默认为 'x-combo-select...
下拉列表中选中项应用的CSS类（默认为 'x-combo-selected'）。CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
ComboBox
triggerClass : String
应用到触发器身上的CSS样式类。A CSS class to appl...
应用到触发器身上的CSS样式类。A CSS class to apply to the trigger
TriggerField
shadow : Boolean/String
值为true或者"sides"为默认效果，"frame"为四方向阴影，...
值为true或者"sides"为默认效果，"frame"为四方向阴影，"drop" 为右下角方向阴影。True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
ComboBox
listAlign : String
一个有效的方位锚点值。点击Ext.ElementalignTo查看支持...
一个有效的方位锚点值。点击Ext.ElementalignTo查看支持的方向锚点(默认为 'tl-bl')。A valid anchor position value. See Ext.ElementalignTo for details on supported anchor positions (defaults to 'tl-bl')
ComboBox
maxHeight : Number
以象素表示的下拉列表最大高度（默认为 300）。The maximum...
以象素表示的下拉列表最大高度（默认为 300）。The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
ComboBox
minHeight : Number
The minimum height in pixels of the...
The minimum height in pixels of the dropdown list when the list is constrained by its distance to the viewport edges (defaults to 90)
ComboBox
triggerAction : String
触发器被激活时执行的动作。使用'all'来运行由allQuery属性指...
触发器被激活时执行的动作。使用'all'来运行由allQuery属性指定的查询（默认为'query'）。The action to execute when the trigger is clicked. Use 'all' to run the query specified by the allQuery config option (defaults to 'query')
ComboBox
minChars : Number
在autocomplete和typeahead 被激活之前用户必须输入...
在autocomplete和typeahead 被激活之前用户必须输入的字符数（默认为4，如果editable = false则此属性无效）。The minimum number of characters the user must type before autocomplete and typeahead activate (defaults to 4 if remote or 0 if local, does not apply if editable = false)
ComboBox
typeAhead : Boolean
值为true时在经过指定延迟（typeAheadDelay）后弹出并自...
值为true时在经过指定延迟（typeAheadDelay）后弹出并自动选择输入的文本，如果该文本与已知的值相匹配（默认为false）。True to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if it matches a known value (defaults to false)
ComboBox
queryDelay : Number
以毫秒表示的从开始输入到发出查询语句过滤下拉列表的时长（如果mode=...
以毫秒表示的从开始输入到发出查询语句过滤下拉列表的时长（如果mode='remote'则默认为500，如果mode = 'local' 则默认为10）。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 mode = 'remote' or 10 if mode = 'local')
ComboBox
pageSize : Number
如果值大于0，则在下拉列表的底部显示一个分页工具条，并且在执行过滤查询...
如果值大于0，则在下拉列表的底部显示一个分页工具条，并且在执行过滤查询时将传递起始页和限制参数。只在 mode = 'remote'时生效（默认为 0）。If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0)
ComboBox
selectOnFocus : Boolean
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 fa...
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。True to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
queryParam : String
供querystring查询时传递的名字（默认为 'query'）。N...
供querystring查询时传递的名字（默认为 'query'）。Name of the query as it will be passed on the querystring (defaults to 'query')
ComboBox
loadingText : String
当读取数据时在下拉列表显示的文本。仅当mode = 'remote'时...
当读取数据时在下拉列表显示的文本。仅当mode = 'remote'时可用（默认为 'Loading...'）。The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Loading...')
ComboBox
resizable : Boolean
值为true时则在下拉列表的底部添加缩放柄（默认为false）。Tru...
值为true时则在下拉列表的底部添加缩放柄（默认为false）。True to add a resize handle to the bottom of the dropdown list (defaults to false)
ComboBox
handleHeight : Number
以像素表示的下拉列表的缩放柄的高度，仅当resizable = tru...
以像素表示的下拉列表的缩放柄的高度，仅当resizable = true 时可用（默认为 8）。The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
ComboBox
editable : Boolean
值为false时防止用户直接在输入框内输入文本，就像传统的选择框一样（...
值为false时防止用户直接在输入框内输入文本，就像传统的选择框一样（默认为 true）。False to prevent the user from typing text directly into the field, just like a traditional select (defaults to true)
ComboBox
allQuery : String
发送到服务器用以返回不经过滤的所有记录的文本（默认为 ''）。The ...
发送到服务器用以返回不经过滤的所有记录的文本（默认为 ''）。The text query to send to the server to return all records for the list with no filtering (defaults to '')
ComboBox
mode : String
如果ComboBox读取本地数据则将值设为'local'（默认为 'r...
如果ComboBox读取本地数据则将值设为'local'（默认为 'remote' 表示从服务器读取数据）。Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
ComboBox
minListWidth : Number
以像素表示的下拉列表的最小宽度（默认为70， 如果listWidth的...
以像素表示的下拉列表的最小宽度（默认为70， 如果listWidth的指定值更高则自动忽略该参数）。The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value)
ComboBox
forceSelection : Boolean
值为true时将限定选中的值为列表中的值，值为false则允许用户将任...
值为true时将限定选中的值为列表中的值，值为false则允许用户将任意文本设置到字段（默认为 false）。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)
ComboBox
typeAheadDelay : Number
以毫秒表示的 typeahead 文本延迟显示量，仅当 typeAhe...
以毫秒表示的 typeahead 文本延迟显示量，仅当 typeAhead = true 时生效（默认为 250）。The length of time in milliseconds to wait until the typeahead text is displayed if typeAhead = true (defaults to 250)
ComboBox
valueNotFoundText : String
当使用 name/value 组合框时，如果调用setValue方法时...
当使用 name/value 组合框时，如果调用setValue方法时传递的值没有在仓库中找到，且定义了valueNotFoundText则在字段中显示该值（默认为 undefined）。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 defaut text is used, it means there is no value set and no validation will occur on this field.
ComboBox
lazyInit : Boolean
True to not initialize the list for...
True to not initialize the list for this combo until the field is focused (defaults to true)
ComboBox
tpl : String/Ext.XTemplate
要转换为组合框的 id, DOM 节点 或者已有的 select 元素...
要转换为组合框的 id, DOM 节点 或者已有的 select 元素 The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. Use this to create custom UI layouts for items in the list.

If you wish to preserve the default visual look of list items, add the CSS class name

x-combo-list-item
to the template's container element.

The template must contain one or more substitution parameters using field names from the Combo's Store. An example of a custom template would be adding an

ext:qtip
attribute which might display other fields from the Store.

The dropdown list is displayed in a DataView. See Ext.DataView for details.

ComboBox
itemSelector : String
This setting is required if a custo...
This setting is required if a custom XTemplate has been specified in tpl which assigns a class other than
'x-combo-list-item'
to dropdown list items. A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the DataView which handles the dropdown display will be working with.
ComboBox
hideTrigger : Boolean
为true时隐藏触发元素，只显示基本文本域（默认为false）。Tru...
为true时隐藏触发元素，只显示基本文本域（默认为false）。True to hide the trigger element and display only the base text field (defaults to false)
TriggerField
vtypeText : String
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）...
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）。如vtype不设置该项就无效。A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Only applies if vtype is set, else ignored.
TextField
stripCharsRe : RegExp
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要...
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要的内容（默认为null）。A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
grow : Boolean
当值为 true 时表示字段可以根据内容自动伸缩。True if th...
当值为 true 时表示字段可以根据内容自动伸缩。True if this field should automatically grow and shrink to its content
TextField
growMin : Number
当 grow = true 时允许的字段最小宽度（默认为 30） Th...
当 grow = true 时允许的字段最小宽度（默认为 30） The minimum width to allow when grow = true (defaults to 30)
TextField
growMax : Number
当 grow = true 时允许的字段最大宽度(默认为 800) ...
当 grow = true 时允许的字段最大宽度(默认为 800) The maximum width to allow when grow = true (defaults to 800)
TextField
vtype : String
中定义的效验类型名(默认为 null) A validation t...
中定义的效验类型名(默认为 null) A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
maskRe : RegExp
一个用来过滤无效按键的正则表达式(默认为 null) An inpu...
一个用来过滤无效按键的正则表达式(默认为 null) An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
TextField
disableKeyFilter : Boolean
值为 true 时禁用输入按键过滤(默认为 false) True ...
值为 true 时禁用输入按键过滤(默认为 false) True to disable input keystroke filtering (defaults to false)
TextField
allowBlank : Boolean
值为 false 时将效验输入字符个数大于0(默认为 true) F...
值为 false 时将效验输入字符个数大于0(默认为 true) False to validate that the value length > 0 (defaults to true)
TextField
minLength : Number
输入字段所需的最小字符数(默认为 0) Minimum input ...
输入字段所需的最小字符数(默认为 0) Minimum input field length required (defaults to 0)
TextField
maxLength : Number
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) ...
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) Maximum input field length allowed (defaults to Number.MAX_VALUE)
TextField
minLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The minimum ...
输入字符数小于最小字符数时显示的文本（默认为"The minimum length for this field is {minLength}"） Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
maxLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The maximum ...
输入字符数小于最小字符数时显示的文本（默认为"The maximum length for this field is {maxLength}"） Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
blankText : String
当允许为空效验失败时显示的错误文本（默认为 "This field i...
当允许为空效验失败时显示的错误文本（默认为 "This field is required"）。Error text to display if the allow blank validation fails (defaults to "This field is required")
TextField
validator : Function
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则...
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则此函数将在所有基础效验（allowBlank、minLength、maxLength和任意的vtype）成功之后被调用，调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true，失败时返回错误文本。A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
regex : RegExp
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 ...
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项，则此正则表达式将在所有基础效验成功之后被执行，执行此正则表达式时传递的参数为该字段的值。如果效验失败，则根据regexText的设置将字段标记为无效。A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
当regex被设置且效验失败时显示的错误文本(默认为 "")。The ...
当regex被设置且效验失败时显示的错误文本(默认为 "")。The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
emptyText : String
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而...
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。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 name.
TextField
emptyClass : String
emptyText使用的CSS样式类名(默认为 'x-form-emp...
emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
enableKeyEvents : Boolean
True表示，为HTML的input输入字段激活键盘事件的代理（默认为...
True表示，为HTML的input输入字段激活键盘事件的代理（默认为false） True to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | lastQuery: String The value of the match string used... The value of the match string used to filter the store. Delete this property to force a requery. | ComboBox
 | : Ext.DataView 显示CoboBox选择所使用的DataView。The DataVi... 显示CoboBox选择所使用的DataView。The DataView used to display the ComboBox's options. | ComboBox
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TimeField( Object config )
参数项：
  • config : Object
    参数
返回值：
  • void
TimeField
ComboBox( Object config )
参数项：
  • config : Object
    配置选项。config Configuration options
返回值：
  • void
ComboBox
getStore() : Ext.data.Store
返回Combo关联的Store对象。Returns the store...
返回Combo关联的Store对象。Returns the store associated with this combo.
参数项：
  • None.
返回值：
  • Ext.data.Store
    Store对象。The store
ComboBox
setEditable( Boolean value )
允许或防止用户直接编辑字段文本。如果传递值为false，用户将只能选择...
允许或防止用户直接编辑字段文本。如果传递值为false，用户将只能选择下拉列表中已经定义的选项。此方法相当于在配置时设置'editable'属性。Allow or prevent the user from directly editing the field text. If false is passed, the user will only be able to select from the items defined in the dropdown list. This method is the runtime equivalent of setting the 'editable' config option at config time.
参数项：
  • value : Boolean
    值为true时允许用户直接编辑字段文本。True to allow the user to directly edit the field text
返回值：
  • void
ComboBox
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
clearValue()
清除所有当前字段中设定的。Clears any text/value ...
清除所有当前字段中设定的。Clears any text/value currently set in the field
参数项：
  • None.
返回值：
  • void
ComboBox
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
isExpanded()
如果下拉列表已经展开则返回true，否则返回false。Returns...
如果下拉列表已经展开则返回true，否则返回false。Returns true if the dropdown list is expanded, else false.
参数项：
  • None.
返回值：
  • void
ComboBox
selectByValue( String value, Boolean scrollIntoView ) : Boolean
根据数据的值选择下拉列表中的选项。本函数不会触发'select'事件。...
根据数据的值选择下拉列表中的选项。本函数不会触发'select'事件。使用此函数必须在数据已经被读取且列表已经展开，否则请使用setValue方法。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.
参数项：
  • value : String
    要选择的项的值。The data value of the item to select
  • scrollIntoView : Boolean
    值为false时阻止下拉列表自动滚动到选中项位置（默认为 true）。False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
返回值：
  • Boolean
    如果给定值在列表中则返回true，否则返回。falseTrue if the value matched an item in the list, else false
ComboBox
select( Number index, Boolean scrollIntoView )
根据列表的索引数选择下拉列表中的一项。本函数不会触发 'select'...
根据列表的索引数选择下拉列表中的一项。本函数不会触发 'select' 事件。使用此函数必须在数据已经被读取且列表已经展开，否则请使用setValue方法。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.
参数项：
  • index : Number
    选中项在列表中以0开始的索引数。The zero-based index of the list item to select
  • scrollIntoView : Boolean
    值为false时阻止下拉列表自动滚动到选中项位置（默认为 true）。False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
返回值：
  • void
ComboBox
doQuery( String query, Boolean forceAll )
执行一个查询语句用以过滤下拉列表。在查询之前触发beforequery...
执行一个查询语句用以过滤下拉列表。在查询之前触发beforequery事件，以便可以在需要的时候取消查询动作。Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the query allowing the query action to be canceled if needed.
参数项：
  • query : String
    要执行的查询语句。The SQL query to execute
  • forceAll : Boolean
    值为true时强制执行查询即使当前输入的字符少于 minChars 设置项指定的值。同时还会清除当前数据仓库中保存的前一次结果（默认为false）。True to force the query to execute even if there are currently fewer characters in the field than the minimum specified by the minChars config option. It also clears any filter previously saved in the current store (defaults to false)
返回值：
  • void
ComboBox
collapse()
如果下拉列表当前是展开状态则隐藏它。并在完成的时候触发collapse...
如果下拉列表当前是展开状态则隐藏它。并在完成的时候触发collapse事件。Hides the dropdown list if it is currently expanded. Fires the collapse event on completion.
参数项：
  • None.
返回值：
  • void
ComboBox
expand()
如果下拉列表当前是隐藏状态则展开它。并在完成的时候触发expand事件...
如果下拉列表当前是隐藏状态则展开它。并在完成的时候触发expand事件。Expands the dropdown list if it is currently hidden. Fires the expand event on completion.
参数项：
  • None.
返回值：
  • void
ComboBox
TriggerField( Object config )
参数项：
  • config : Object
    配置选择（对于有效的{@Ext.form.TextField}配置项也会被传入到TextField） Configuration options (valid {@Ext.form.TextField} config options will also be applied to the base TextField)
返回值：
  • void
TriggerField
onTriggerClick( EventObject e )
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的...
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的方法重写后才会有效。The function that should handle the trigger's click event. This method does nothing by default until overridden by an implementing function.
参数项：
  • e : EventObject
    参数e是（{EventObject}类型）
返回值：
  • void
TriggerField
TextField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
TextField
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
validateValue( Mixed value ) : Boolean
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Vali...
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
参数项：
  • value : Mixed
    要效验的值 The value to validate
返回值：
  • Boolean
    值有效时返回true，否则返回 false True if the value is valid, else false
TextField
selectText( Number start, Number end )
选择此字段中的文本。Selects text in this field
选择此字段中的文本。Selects text in this field
参数项：
  • start : Number
    （可选项） 选择区域的索引起点(默认为 0) (optional)The index where the selection should start (defaults to 0)
  • end : Number
    （可选项） 选择区域的索引终点(默认为文本长度) (optional)The index where the selection should end (defaults to the text length)
返回值：
  • void
TextField
autoSize()
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = tr...
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = true 时有效，并触发autosize事件。Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
参数项：
  • None.
返回值：
  • void
TextField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
expand()
当下拉列表展开的时候触发。Fires when the dropdow...
当下拉列表展开的时候触发。Fires when the dropdown list is expanded
侦听器会传入以下的参数：
  • None.
 ComboBox
collapse()
当下拉列表收起的时候触发。Fires when the dropdow...
当下拉列表收起的时候触发。Fires when the dropdown list is collapsed
侦听器会传入以下的参数：
  • None.
 ComboBox
beforeselect()
列表项被选中前触发。返回 false 可以取消选择。Fires bef...
列表项被选中前触发。返回 false 可以取消选择。Fires before a list item is selected. Return false to cancel the selection.
侦听器会传入以下的参数：
  • None.
 ComboBox
select()
当列表项被选中时触发。Fires when a list item i...
当列表项被选中时触发。Fires when a list item is selected
侦听器会传入以下的参数：
  • None.
 ComboBox
beforequery()
所有的查询被处理前触发。返回 false 或者设置cancel参数为t...
所有的查询被处理前触发。返回 false 或者设置cancel参数为true可以取消查询。Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to true.
侦听器会传入以下的参数：
  • None.
 ComboBox
autosize()
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地...
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地改变大小，但该事件的目的在于，允许开发人员在运行时加入额外的逻辑，以备调整输入字段的大小。Fires when the 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.
侦听器会传入以下的参数：
  • None.
 TextField
keydown()
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为...
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为true时有效。Keydown input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keyup()
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为...
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为true时有效。Keyup input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keypress()
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为...
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为true时有效。Keypress input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.form.TriggerField

包： | Extform
定义的文件： | TriggerField.js
类全称： | Ext.form.TriggerField
继承自于： | Ext.form.TextField
为添加了带有可触发事件的按钮的TextFields（文本域）提供一个方便的封装（很像一个默认combobox）。触发器没有默认行为（action），因此你必须通过重写方法onTriggerClick的方式，指派一个方法实现触发器的点击事件处理。你可以直接创建一个TriggerField（触发域），由于它会呈现与combobox相像的效果，你可以通过它提供一种自定义的实现。例如：
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 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');
然而，你可能会更倾向于将TriggerField作为一个可复用容器的基类。Ext.form.DateField和Ext.form.ComboBox就是两个较好的样板。However, in general you will most likely want to use TriggerField as the base class for a reusable component.Ext.form.DateFieldand Ext.form.ComboBoxare perfect examples of this.

配置项

配置项 定义者
triggerClass : String
应用到触发器身上的CSS样式类。A CSS class to appl...
应用到触发器身上的CSS样式类。A CSS class to apply to the trigger
TriggerField
autoCreate : String/Object
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{ta...
一个指定的DomHelper配置对象，如果为真则为一个默认对象（{tag: "input", type: "text", size: "20", autocomplete: "off"}）。A DomHelper element spec, or true for a default element spec (defaults to {tag: "input", type: "text", size: "20", autocomplete: "off"})
Field
hideTrigger : Boolean
为true时隐藏触发元素，只显示基本文本域（默认为false）。Tru...
为true时隐藏触发元素，只显示基本文本域（默认为false）。True to hide the trigger element and display only the base text field (defaults to false)
TriggerField
vtypeText : String
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）...
在当前字段的vtype中，制定一个错误信息代替默认的（默认为null）。如vtype不设置该项就无效。A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Only applies if vtype is set, else ignored.
TextField
stripCharsRe : RegExp
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要...
一个JavaScript正则表达式，用于在进行验证该动作之前抽离不需要的内容（默认为null）。A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
grow : Boolean
当值为 true 时表示字段可以根据内容自动伸缩。True if th...
当值为 true 时表示字段可以根据内容自动伸缩。True if this field should automatically grow and shrink to its content
TextField
growMin : Number
当 grow = true 时允许的字段最小宽度（默认为 30） Th...
当 grow = true 时允许的字段最小宽度（默认为 30） The minimum width to allow when grow = true (defaults to 30)
TextField
growMax : Number
当 grow = true 时允许的字段最大宽度(默认为 800) ...
当 grow = true 时允许的字段最大宽度(默认为 800) The maximum width to allow when grow = true (defaults to 800)
TextField
vtype : String
中定义的效验类型名(默认为 null) A validation t...
中定义的效验类型名(默认为 null) A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
maskRe : RegExp
一个用来过滤无效按键的正则表达式(默认为 null) An inpu...
一个用来过滤无效按键的正则表达式(默认为 null) An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)
TextField
disableKeyFilter : Boolean
值为 true 时禁用输入按键过滤(默认为 false) True ...
值为 true 时禁用输入按键过滤(默认为 false) True to disable input keystroke filtering (defaults to false)
TextField
allowBlank : Boolean
值为 false 时将效验输入字符个数大于0(默认为 true) F...
值为 false 时将效验输入字符个数大于0(默认为 true) False to validate that the value length > 0 (defaults to true)
TextField
minLength : Number
输入字段所需的最小字符数(默认为 0) Minimum input ...
输入字段所需的最小字符数(默认为 0) Minimum input field length required (defaults to 0)
TextField
maxLength : Number
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) ...
输入字段允许的最大字符数(默认为 Number.MAX_VALUE) Maximum input field length allowed (defaults to Number.MAX_VALUE)
TextField
minLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The minimum ...
输入字符数小于最小字符数时显示的文本（默认为"The minimum length for this field is {minLength}"） Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
maxLengthText : String
输入字符数小于最小字符数时显示的文本（默认为"The maximum ...
输入字符数小于最小字符数时显示的文本（默认为"The maximum length for this field is {maxLength}"） Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
selectOnFocus : Boolean
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 fa...
值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。True to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
blankText : String
当允许为空效验失败时显示的错误文本（默认为 "This field i...
当允许为空效验失败时显示的错误文本（默认为 "This field is required"）。Error text to display if the allow blank validation fails (defaults to "This field is required")
TextField
validator : Function
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则...
字段效验时调用的自定义的效验函数(默认为 null)。如果启用此项，则此函数将在所有基础效验（allowBlank、minLength、maxLength和任意的vtype）成功之后被调用，调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true，失败时返回错误文本。A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
regex : RegExp
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 ...
一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项，则此正则表达式将在所有基础效验成功之后被执行，执行此正则表达式时传递的参数为该字段的值。如果效验失败，则根据regexText的设置将字段标记为无效。A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
当regex被设置且效验失败时显示的错误文本(默认为 "")。The ...
当regex被设置且效验失败时显示的错误文本(默认为 "")。The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
emptyText : String
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而...
空字段中显示的文本(默认为 null)。注意，只要这个字段是被激活的而且name属性是有被指定的，那么也会发送到服务端。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 name.
TextField
emptyClass : String
emptyText使用的CSS样式类名(默认为 'x-form-emp...
emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
enableKeyEvents : Boolean
True表示，为HTML的input输入字段激活键盘事件的代理（默认为...
True表示，为HTML的input输入字段激活键盘事件的代理（默认为false） True to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
inputType : String
input字段的type属性，诸如 radio、text、passwo...
input字段的type属性，诸如 radio、text、password、file等的元素都有type属性。属性是“file”与“怕ssword”就要在这里设置了，因为当前Ext并没有这些单独的组件。注意当你使用inputType:'file'时，emptyText就避免使用。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', emptyText is not supported and should be avoided.
Field
tabIndex : Number
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那...
字段的tabIndex。注意这只对已渲染的元素有效，applyTo的那些无效（默认为undfined）。The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
value : Mixed
字段初始化的值（默认为undefined）。A value to in...
字段初始化的值（默认为undefined）。A value to initialize this field with (defaults to undefined).
Field
name : String
字段的name属性，HTML的name属性（默认为''）。The fi...
字段的name属性，HTML的name属性（默认为''）。The field's HTML name attribute (defaults to "").
Field
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
invalidClass : String
当出现无效字段所使用上的CSS样式（默认为"x-form-invali...
当出现无效字段所使用上的CSS样式（默认为"x-form-invalid）。The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
表单元素无效时标在上面的文本信息（默认为"The value in t...
表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
focusClass : String
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）...
当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）。The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
validationEvent : String/Boolean
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。...
初始化元素验证的事件名，如果设假，则不进行验证（默认"keyup"）。The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validateOnBlur : Boolean
是否当失去焦点时验证此表单元素（默认真）。Whether the fi...
是否当失去焦点时验证此表单元素（默认真）。Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The leng...
用户输入开始到验证开始的间隔毫秒数（默认250毫秒）。The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
fieldClass : String
表单元素一般状态CSS样式（默认为"x-form-field"）。Th...
表单元素一般状态CSS样式（默认为"x-form-field"）。The default CSS class for the field (defaults to "x-form-field")
Field
msgTarget : String
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。...
错误提示的显示位置。可以是以下列表中的任意一项（默认为"qtip"）。The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Field
msgFx : String
Experimental 表单元素无效提示显示的动画效果（默认为"no...
Experimental 表单元素无效提示显示的动画效果（默认为"normal"）The effect used when displaying a validation message under the field (defaults to 'normal').
Field
readOnly : Boolean
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单...
如果为真，则在HTML时标明此表单元素为只读 -- 注意：只是设置表单对象的只读属性。True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TriggerField( Object config )
参数项：
  • config : Object
    配置选择（对于有效的{@Ext.form.TextField}配置项也会被传入到TextField） Configuration options (valid {@Ext.form.TextField} config options will also be applied to the base TextField)
返回值：
  • void
TriggerField
onTriggerClick( EventObject e )
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的...
该方法应该用于处理触发器的click事件。默认为空方法，要被某个实现的方法重写后才会有效。The function that should handle the trigger's click event. This method does nothing by default until overridden by an implementing function.
参数项：
  • e : EventObject
    参数e是（{EventObject}类型）
返回值：
  • void
TriggerField
TextField( Object config )
参数项：
  • config : Object
    配置项 Configuration options
返回值：
  • void
TextField
reset()
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the...
重置此元素的值到原始值，并且清除所有无效提示信息。Resets the current field value to the originally loaded value and clears any validation messages
参数项：
  • None.
返回值：
  • void
Field
validateValue( Mixed value ) : Boolean
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Vali...
根据字段的效验规则效验字段值，并在效验失败时将字段标记为无效。Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
参数项：
  • value : Mixed
    要效验的值 The value to validate
返回值：
  • Boolean
    值有效时返回true，否则返回 false True if the value is valid, else false
TextField
selectText( Number start, Number end )
选择此字段中的文本。Selects text in this field
选择此字段中的文本。Selects text in this field
参数项：
  • start : Number
    （可选项） 选择区域的索引起点(默认为 0) (optional)The index where the selection should start (defaults to 0)
  • end : Number
    （可选项） 选择区域的索引终点(默认为文本长度) (optional)The index where the selection should end (defaults to the text length)
返回值：
  • void
TextField
autoSize()
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = tr...
自动增长字段宽度以便容纳字段所允许的最大文本。仅在 grow = true 时有效，并触发autosize事件。Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
参数项：
  • None.
返回值：
  • void
TextField
Field( Object config )
参数项：
  • config : Object
    配制选项 Configuration options
返回值：
  • void
Field
getName() : String
试图获取元素的名称。Returns the name attribut...
试图获取元素的名称。Returns the name attribute of the field if available
参数项：
  • None.
返回值：
  • String
    name 域名 The field name
Field
isDirty()
把组件应用到一个现有的对象上。这个被用来代替render()方法。Re...
把组件应用到一个现有的对象上。这个被用来代替render()方法。Returns true if this field has been changed since it was originally loaded and is not disabled.
参数项：
  • None.
返回值：
  • void
Field
isValid( Boolean preventMark ) : Boolean
它的原始值没有变更，并且它是可用的则返回真。Returns wheth...
它的原始值没有变更，并且它是可用的则返回真。Returns whether or not the field value is currently valid
参数项：
  • preventMark : Boolean
    True表示为禁止标记字段无效True to disable marking the field invalid
返回值：
  • Boolean
    True表示为这是有效值，否则为false。True if the value is valid, else false
Field
validate() : Boolean
验证域的值。Validates the field value
验证域的值。Validates the field value
参数项：
  • None.
返回值：
  • Boolean
    True表示为值有效，否则为false。True if the value is valid, else false
Field
markInvalid( String msg )
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字...
标记该字段无效，使用msgTarget来确定错误信息显示在哪里并设置字段元素的invalidClass。Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
参数项：
  • msg : String
    (optional) 验证信息（默认为invalidText）The validation message (defaults to invalidText)
返回值：
  • void
Field
clearInvalid()
清除元素任何无效标志样式与信息。Clear any invalid s...
清除元素任何无效标志样式与信息。Clear any invalid styles/messages for this field
参数项：
  • None.
返回值：
  • void
Field
getRawValue() : Mixed
返回可能无效的原始值。要返回正式的值应该使用getValue。Retu...
返回可能无效的原始值。要返回正式的值应该使用getValue。Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
getValue() : Mixed
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看ge...
返回格式化后的数据（未定义或空值则会返回''）。返回原始值可以查看getRawValue。Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
参数项：
  • None.
返回值：
  • Mixed
    value The field value
Field
setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • Mixed
    value 已设置的值 The field value that is set
Field
setValue( Mixed value )
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValu...
设置元素值并加以验证。如果想跃过验证直接设值则请看setRawValue。Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
参数项：
  • value : Mixed
    要设置的值 The value to set
返回值：
  • void
Field
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
autosize()
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地...
当autosize函数调用时触发。根据缺省的逻辑，字段有可能不会真正地改变大小，但该事件的目的在于，允许开发人员在运行时加入额外的逻辑，以备调整输入字段的大小。Fires when the 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.
侦听器会传入以下的参数：
  • None.
 TextField
keydown()
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为...
输入字段键盘下降时的事件。该事件只会在enableKeyEvents为true时有效。Keydown input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keyup()
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为...
输入字段键盘升起时的事件。该事件只会在enableKeyEvents为true时有效。Keyup input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
keypress()
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为...
输入字段键盘按下时的事件。该事件只会在enableKeyEvents为true时有效。Keypress input field event. This event only fires if enableKeyEvents is set to true.
侦听器会传入以下的参数：
  • None.
 TextField
focus()
当此元素获取焦点时激发此事件。Fires when this fiel...
当此元素获取焦点时激发此事件。Fires when this field receives input focus.
侦听器会传入以下的参数：
  • None.
 Field
blur()
当此元素推动焦点时激发此事件。Fires when this fiel...
当此元素推动焦点时激发此事件。Fires when this field loses input focus.
侦听器会传入以下的参数：
  • None.
 Field
specialkey()
任何一个关于导航类键（arrows、tab、enter、esc等）被敲...
任何一个关于导航类键（arrows、tab、enter、esc等）被敲击则触发此事件。你可以查看Ext.EventObjectgetKey去断定哪个键被敲击。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Field
change()
当元素失去焦点时，如果值被修改则触发此事件。Fires just be...
当元素失去焦点时，如果值被修改则触发此事件。Fires just before the field blurs if the field value has changed.
侦听器会传入以下的参数：
  • None.
 Field
invalid()
当此元素被标为无效后触发此事件。Fires after the fie...
当此元素被标为无效后触发此事件。Fires after the field has been marked as invalid.
侦听器会传入以下的参数：
  • None.
 Field
valid()
在此元素被验证有效后触发此事件。Fires after the fie...
在此元素被验证有效后触发此事件。Fires after the field has been validated with no errors.
侦听器会传入以下的参数：
  • None.
 Field
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


Observable
    Component
      BoxComponent
        Field
          TextField
            TriggerField
              TwinTriggerField

Class Ext.form.TwinTriggerField

Package: | Ext.form
Defined In: | TriggerField.js
Class: | TwinTriggerField
Extends: | 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

Config Options

Config Options Defined By
allowBlank : Boolean
Specify false to validate that the value's length is > 0 (defaults to true)
TextField
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use the An...

Note: this config is only used when this Component is rendered by a Container which has been configured to use the AnchorLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'anchor').

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: "input", type: "text", size: "16", autocomplete: "off"}
TriggerField
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (defaults to false). Note: Although many components inherit thi...
True to use height:'auto', false to use fixed height (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.
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (defaults to false). Note: Although many components inherit this ...
True to use width:'auto', false to use fixed width (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.
BoxComponent
blankText : String
The error text to display if the allowBlank validation fails (defaults to "This field is required")
TextField
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
A custom CSS class to apply to the field's underlying element (defaults to "").
Field
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disableKeyFilter : Boolean
Specify true to disable input keystroke filtering (defaults to false)
TextField
disabled : Boolean
True to disable the field (defaults to false). Be aware that conformant with the <a href="http://www.w3.org/TR/html40...
True to disable the field (defaults to false).

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Field
disabledClass : String
CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
editable : Boolean
false to prevent the user from typing text directly into the field, the field will only respond to a click on the tri...
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)
TriggerField
emptyClass : String
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is au...
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
emptyText : String
The default text to place into an empty field (defaults to null). Note: that this value will be submitted to the serv...
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 name.
TextField
enableKeyEvents : Boolean
true to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldClass : String
The default CSS class for the field (defaults to "x-form-field")
Field
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
grow : Boolean
true if this field should automatically grow and shrink to its content (defaults to false)
TextField
growMax : Number
The maximum width to allow when grow = true (defaults to 800)
TextField
growMin : Number
The minimum width to allow when grow = true (defaults to 30)
TextField
height : Number
The height of this component in pixels (defaults to auto).
BoxComponent
hidden : Boolean
Render this component hidden (default is false).
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset p...

How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
hideTrigger : Boolean
true to hide the trigger element and display only the base text field (defaults to false)
TriggerField
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 see itemId.

Note: to access the container of an item see ownerCt.

Component
inputType : String
The type attribute for input fields -- e.g. radio, text, password, file (defaults to "text"). The types "file" and "p...
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', emptyText is not supported and should be avoided.
Field
invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (eg, Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

Note: While some Observable classes export selected DOM events (eg "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement listeners must be added to the 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;
    },

    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() {
            c.el.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'
});

Observable
maskRe : RegExp
An input mask regular expression that will be used to filter keystrokes that do not match (defaults to null)
TextField
maxLength : Number
Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide...
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 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"}
});
TextField
maxLengthText : String
Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxL...
Error text to display if the maximum length validation fails (defaults to "The maximum length for this field is {maxLength}")
TextField
minLength : Number
Minimum input field length required (defaults to 0)
TextField
minLengthText : String
Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minL...
Error text to display if the minimum length validation fails (defaults to "The minimum length for this field is {minLength}")
TextField
msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value ...
The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text directly to the innerHTML of the specified element
Field
name : String
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automaticall...
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automatically included with form submit().
Field
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
readOnly : Boolean
True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM att...
True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.
Field
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
regex : RegExp
A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, t...
A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If available, this regex will be evaluated only after the basic validators all return true, and will be passed the current field value. If the test fails, the field will be marked invalid using regexText.
TextField
regexText : String
The error text to display if regex is used and the test fails during validation (defaults to "")
TextField
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (eg. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

  • Notes :
      When using this config, a call to render() is not required.
      Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render its child items.

See render also.

Component
selectOnFocus : Boolean
true to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

To set the state provider for the current page:

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

A stateful Component attempts to save state when one of the events listed in the 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the (@link #stateId}, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events

Component
stripCharsRe : RegExp
A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT...
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
trigger1Class : String
An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' by ...
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.
TwinTriggerField
trigger2Class : String
An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' by ...
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.
TwinTriggerField
triggerClass : String
An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' by ...
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.
TriggerField
triggerConfig : Mixed
A DomHelper config object specifying the structure of the trigger elements for this Field. (Optional). Specify this w...

A 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 trigger1Class and trigger2Class).

Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning and appearance of the triggers.

TwinTriggerField
validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "key...
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validator : Function
A custom validation function to be called during field validation (defaults to null). If specified, this function wil...
A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
value : Mixed
A value to initialize this field with (defaults to undefined).
Field
vtype : String
A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
vtypeText : String
A custom error message to display in place of the default message provided for the vtype currently set for this field...
A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Note: only applies if vtype is set, else ignored.
TextField
width : Number
The width of this component in pixels (defaults to auto).
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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), perform the adding of the listener in a render event listener:

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

See also getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
    });
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
autoSize() : void
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only ta...
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
Parameters:
  • None.
Returns:
  • void
TextField
clearInvalid() : void
Clear any invalid styles/messages for this field
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
Field
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component.
Disable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component.
Enable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fcn, [Object scope] ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
Parameters:
  • fcn : Function
  • scope : Object
    (optional)
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 autoEl config.

The 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), perform the adding of the listener in a one-off render event listener:

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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or generates an id:"ext-comp-" + (++Ext.Component.AUTO_ID)
Returns the id of this component or generates an id:
"ext-comp-" + (++Ext.Component.AUTO_ID)
Parameters:
  • None.
Returns:
  • String
Component
getItemId() : String
Returns the item id of this component.
Returns the item id of this component.
Parameters:
  • None.
Returns:
  • String
Component
getName() : String
Returns the name or hiddenName attribute of the field if available.
Returns the name or hiddenName attribute of the field if available.
Parameters:
  • None.
Returns:
  • String
    name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRawValue() : Mixed
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue...
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getValue() : Mixed
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa...
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component.
Hide this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isDirty() : Boolean
Returns true if the value of this Field has been changed from its original value. Will return false if the field is d...

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 form was configured with Ext.form.BasicForm.trackResetOnLoad then the original value is updated when the values are loaded by Ext.form.BasicForm.setValues.

Parameters:
  • None.
Returns:
  • Boolean
    True if this field has been changed from its original value (and is not disabled), false otherwise.
Field
isValid( Boolean preventMark ) : Boolean
Returns whether or not the field value is currently valid
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
Field
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
markInvalid( [String msg] ) : void
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the fi...
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
Parameters:
  • msg : String
    (optional) The validation message (defaults to invalidText)
Returns:
  • void
Field
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
onTrigger1Click( EventObject e ) : void
The function that should handle the trigger's click event. This method does nothing by default until overridden by a...
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.TriggerField.onTriggerClick for additional information.
Parameters:
  • e : EventObject
Returns:
  • void
TwinTriggerField
onTrigger2Click( EventObject e ) : void
The function that should handle the trigger's click event. This method does nothing by default until overridden by a...
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.TriggerField.onTriggerClick for additional information.
Parameters:
  • e : EventObject
Returns:
  • void
TwinTriggerField
onTriggerClick( EventObject e ) : void
The function that should handle the trigger's click event. This method does nothing by default until overridden by a...
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.
Parameters:
  • e : EventObject
Returns:
  • void
TriggerField
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
reset() : void
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText...
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText and emptyClass if the original value was blank.
Parameters:
  • None.
Returns:
  • void
TextField
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
selectText( [Number start], [Number end] ) : void
Selects text in this field
Selects text in this field
Parameters:
  • start : Number
    (optional) The index where the selection should start (defaults to 0)
  • end : Number
    (optional) The index where the selection should end (defaults to the text length)
Returns:
  • void
TextField
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setEditable( Boolean value ) : void
Allow or prevent the user from directly editing the field text. If false is passed, the user will only be able to mo...
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. This method is the runtime equivalent of setting the 'editable' config option at config time.
Parameters:
  • value : Boolean
    True to allow the user to directly edit the field text
Returns:
  • void
TriggerField
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue( Mixed value ) : Mixed
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Mixed
    value The field value that is set
Field
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setValue( Mixed value ) : Ext.form.Field
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Ext.form.Field
    this
Field
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component.
Show this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent
validate() : Boolean
Validates the field value
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
Field
validateValue( Mixed value ) : Boolean
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Parameters:
  • value : Mixed
    The value to validate
Returns:
  • Boolean
    True if the value is valid, else false
TextField

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished.
Fires after the component rendering is finished.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this, Number width )
Fires when the autoSize function is triggered. The field may or may not have actually changed size according to the d...
Fires when the 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.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
    This text field
  • width : Number
    The new field width
TextField
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false to stop the destroy.
Fires before the component is destroyed. Return false to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden. Return false to stop the hide.
Fires before the component is hidden. Return false to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false to stop the render.
Fires before the component is rendered. Return false to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown. Return false to stop the show.
Fires before the component is shown. Return false to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false to stop the restore.
Fires before the state of the component is restored. Return false to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
blur : ( Ext.form.Field this )
Fires when this field loses input focus.
Fires when this field loses input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
Fires just before the field blurs if the field value has changed.
Fires just before the field blurs if the field value has changed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • newValue : Mixed
    The new value
  • oldValue : Mixed
    The original value
Field
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
Fires when this field receives input focus.
Fires when this field receives input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
Fires after the component is hidden.
Fires after the component is hidden.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this, String msg )
Fires after the field has been marked as invalid.
Fires after the field has been marked as invalid.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • msg : String
    The validation message
Field
keydown : ( Ext.form.TextField this, Ext.EventObject e )
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this, Ext.EventObject e )
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this, Ext.EventObject e )
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown.
Fires after the component is shown.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Pan...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Panel.keys or Ext.KeyMap. You can check 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.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Field
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
valid : ( Ext.form.Field this )
Fires after the field has been validated with no errors.
Fires after the field has been validated with no errors.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field


类Ext.form.VTypes

包： | Extform
定义的文件： | VTypes.js
类全称： | Ext.form.VTypes
继承自于： | Object
提供一个简单的、易于扩展的、可重写的表单验证功能。
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 your own custom VType:

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'
});
@singleton

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : RegExp 只允文数字（alphanum）的正则表达式。The keystrok... 只允文数字（alphanum）的正则表达式。The keystroke filter mask to be applied on alphanumeric input | VTypes

公共方法

方法 定义者
email( String value )
用于验证Email地址的函数。The function used to...
用于验证Email地址的函数。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.
参数项：
  • value : String
    The email address
返回值：
  • void
VTypes
url( String value )
验证URL地址的函数。The function used to val...
验证URL地址的函数。The function used to validate URLs
参数项：
  • value : String
    The URL
返回值：
  • void
VTypes
alpha( String value )
验证alpha到函数。The function used to val...
验证alpha到函数。The function used to validate alpha values
参数项：
  • value : String
    The value
返回值：
  • void
VTypes
alphanum( String value )
验证数字的函数。The function used to valida...
验证数字的函数。The function used to validate alphanumeric values
参数项：
  • value : String
    The value
返回值：
  • void
VTypes

公共事件

这个类没有公告事件。


类Ext.Fx

包： | Ext
定义的文件： | Fx.js
类全称： | Ext.Fx
继承自于： | Object

这是一个提供基础动画和视觉效果支持的类。注意：此类被引用后会自动应用于 Ext.Element 的接口， 因此所有的效果必须通过 Element 对象来实现。反过来说，既然 Element 对象实际上并没有定义这些效果， Ext.Fx 类必须被 Element 对象引用后才能使那些效果生效。

值得注意的是，虽然 Fx 的方法和许多非 Fx Element 对象的方法支持“方法链”，即他们返回 Element 对象本身作为方法的返回值， 但是并非每次都能将两个对象混合在一个方法链中。Fx 的方法使用一个内部的效果队列以使每个效果能够在适当的时候按次序展现。另一方面，对于非 Fx 的方法则没有这样的一个内部队列，它们总是立即生效。正因为如此，虽然可以在一个单链中混合调用 Fx 和非 Fx 的方法， 但是并非总能得到预期的结果，而且必须小心处理类似的情况。

移动类的效果支持8个方向的定位锚，这意味着你可以选择 Element 对象所有8个不同的锚点中的任意一个来作为动画的起点或终点。下面是所有支持的定位锚点位置：

值     说明
-----  -----------------------------
tl     左上角
t      顶部中央
tr     右上角
l      左边中央
r      右边中央
bl     左下角
b      底部中央
br     右下角
尽管某些 Fx 方法可以接受特殊的自定义配置参数，然而下面的配置选项区域内显示了可供所有 Fx 方法使用的公共选项。

配置项

配置项 |  | 定义者
 | stopFx : Boolean 是否在当前特效完成后停止并删除先前（并发）的特效 是否在当前特效完成后停止并删除先前（并发）的特效 | Fx

公告属性

这个类没有公告属性。

公共方法

方法 定义者
slideIn( String anchor, Object options ) : Ext.Element
将元素滑入到视图中。作为可选参数传入的定位锚点将被设置为滑入特效的起始...
将元素滑入到视图中。作为可选参数传入的定位锚点将被设置为滑入特效的起始点。该函数会在需要的时候自动将元素与一个固定尺寸的容器封装起来。有效的定位锚点可以参见 Fx 类的概述。用法：

// 默认情况：将元素从顶部滑入
el.slideIn();

// 自定义：在2秒钟内将元素从右边滑入
el.slideIn('r', { duration: 2 });

// 常见的配置选项及默认值
el.slideIn('t', {
    easing: 'easeOut',
    duration: .5
});
参数项：
  • anchor : String
    （可选）有效的 Fx 定位锚点之一（默认为顶部：'t'）
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
slideOut( String anchor, Object options ) : Ext.Element
将元素从视图中滑出。作为可选参数传入的定位锚点将被设置为滑出特效的结束...
将元素从视图中滑出。作为可选参数传入的定位锚点将被设置为滑出特效的结束点。特效结束后，元素会被隐藏（visibility = 'hidden'）， 但是块元素仍然会在 document 对象中占据空间。如果需要将元素从 DOM 树删除，则使用'remove'配置选项。该函数会在需要的时候自动将元素与一个固定尺寸的容器封装起来。有效的定位锚点可以参见 Fx 类的概述。用法：

// 默认情况：将元素从顶部滑出
el.slideOut();

// 自定义：在2秒钟内将元素从右边滑出
el.slideOut('r', { duration: 2 });

// 常见的配置选项及默认值
el.slideOut('t', {
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});
参数项：
  • anchor : String
    （可选）有效的 Fx 定位锚点之一（默认为顶部：'t'）
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
puff( Object options ) : Ext.Element
渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（...
渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility = 'hidden'）， 但是块元素仍然会在 document 对象中占据空间。如果需要将元素从 DOM 树删除，则使用'remove'配置选项。用法：

// 默认
el.puff();

// 常见的配置选项及默认值
el.puff({
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});
参数项：
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
switchOff( Object options ) : Ext.Element
类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩（类似于关闭电视...
类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩（类似于关闭电视机时的效果）。特效结束后，元素会被隐藏（visibility = 'hidden'），但是块元素仍然会在 document 对象中占据空间。如果需要将元素从 DOM 树删除，则使用'remove'配置选项。用法：

// 默认
el.switchOff();

// 所有的配置选项及默认值
el.switchOff({
    easing: 'easeIn',
    duration: .3,
    remove: false,
    useDisplay: false
});
参数项：
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
highlight( String color, Object options ) : Ext.Element
根据设置的颜色高亮显示 Element 对象（默认情况下应用于 bac...
根据设置的颜色高亮显示 Element 对象（默认情况下应用于 background-color 属性，但是也可以通过"attr"配置选项来改变）， 然后渐隐为原始颜色。如果原始颜色不可用，你应该设置"endColor"配置选项以免动画结束后被清除。用法：

// 默认情况：高亮显示的背景颜色为黄色
el.highlight();

// 自定义：高亮显示前景字符颜色为蓝色并持续2秒
el.highlight("0000ff", { attr: 'color', duration: 2 });

// 常见的配置选项及默认值
el.highlight("ffff9c", {
    attr: "background-color", //可以是任何能够把值设置成颜色代码的 CSS 属性
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1
});
参数项：
  • color : String
    （可选）高亮颜色。必须为不以 # 开头的6位16进制字符（默认为黄色：'ffff9c'）
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
frame( String color, Number count, Object options ) : Ext.Element
展示一个展开的波纹，伴随着渐隐的边框以突出显示 Element 对象。...
展示一个展开的波纹，伴随着渐隐的边框以突出显示 Element 对象。用法：

// 默认情况：一个淡蓝色的波纹
el.frame();

// 自定义：三个红色的波纹并持续3秒
el.frame("ff0000", 3, { duration: 3 });

// 常见的配置选项及默认值
el.frame("C3DAF9", 1, {
    duration: 1 //每个波纹持续的时间duration of each individual ripple.
    // 注意：这里不能使用 Easing 选项在，即使被包含了也会被忽略
});
参数项：
  • color : String
    （可选）边框的颜色。必须为不以 # 开头的6位16进制字符（默认为淡蓝色色：'C3DAF9'）
  • count : Number
    （可选）要显示的波纹的个数（默认为1）
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
pause( Number seconds ) : Ext.Element
在任何后续的等效开始之前创建一次暂停。如果队列中没有后续特效则没有效果...
在任何后续的等效开始之前创建一次暂停。如果队列中没有后续特效则没有效果。用法：

el.pause(1);
参数项：
  • seconds : Number
    以秒为单位的暂停时间
返回值：
  • Ext.Element
    Element 对象
Fx
fadeIn( Object options ) : Ext.Element
将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity...
将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。用法：

// 默认情况：将可见度由 0 渐变到 100%
el.fadeIn();

// 自定义：在2秒钟之内将可见度由 0 渐变到 75%
el.fadeIn({ endOpacity: .75, duration: 2});

// 常见的配置选项及默认值
el.fadeIn({
    endOpacity: 1, //可以是 0 到 1 之前的任意值（例如：.5）
    easing: 'easeOut',
    duration: .5
});
参数项：
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
fadeOut( Object options ) : Ext.Element
将元素从不透明渐变为透明。结束时的透明度可以根据"endOpacity...
将元素从不透明渐变为透明。结束时的透明度可以根据"endOpacity"选项来指定。用法：

// 默认情况：将元素的可见度由当前值渐变到 0
el.fadeOut();

// 自定义：在2秒钟内将元素的可见度由当前值渐变到 25%
el.fadeOut({ endOpacity: .25, duration: 2});

// 常见的配置选项及默认值
el.fadeOut({
    endOpacity: 0, 可以是 0 到 1 之前的任意值（例如：.5）
    easing: 'easeOut',
    duration: .5
    remove: false,
    useDisplay: false
});
参数项：
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
scale( Number width, Number height, Object options ) : Ext.Element
以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。用法： //...
以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。用法：

// 将宽度和高度设置为 100x100 象素
el.scale(100, 100);

// 常见的配置选项及默认值。如果给定值为 null，则高度和宽度默认被设置为元素已有的值。el.scale(
    [element's width],
    [element's height], {
    easing: 'easeOut',
    duration: .35
});
参数项：
  • width : Number
    新的宽度（传递 undefined 则保持原始宽度）
  • height : Number
    新的高度（传递 undefined 则保持原始高度）
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
shift( Object options ) : Ext.Element
以动画展示元素任意组合属性的改变，如元素的尺寸、位置坐标和（或）透明度...
以动画展示元素任意组合属性的改变，如元素的尺寸、位置坐标和（或）透明度。如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生改变。为了使该特效生效，则必须在配置选项对象中设置至少一个新的尺寸、位置坐标或透明度属性。用法：

// 将元素水平地滑动到X坐标值为200的位置，同时还伴随着高度和透明度的改变
el.shift({ x: 200, height: 50, opacity: .8 });

// 常见的配置选项及默认值。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
    Element 对象
Fx
ghost( String anchor, Object options ) : Ext.Element
将元素从视图滑出并伴随着渐隐。作为可选参数传入的定位锚点将被设置为滑出...
将元素从视图滑出并伴随着渐隐。作为可选参数传入的定位锚点将被设置为滑出特效的结束点。用法：

// 默认情况：将元素向下方滑出并渐隐
el.ghost();

// 自定义：在2秒钟内将元素向右边滑出并渐隐
el.ghost('r', { duration: 2 });

// 常见的配置选项及默认值。el.ghost('b', {
    easing: 'easeOut',
    duration: .5
    remove: false,
    useDisplay: false
});
参数项：
  • anchor : String
    （可选）有效的 Fx 定位锚点之一（默认为底部：'b'）
  • options : Object
    （可选）由任何 Fx 的配置选项构成的对象
返回值：
  • Ext.Element
    Element 对象
Fx
syncFx() : Ext.Element
确保元素调用 syncFx 方法之后所有队列中的特效并发运行。它与 s...
确保元素调用 syncFx 方法之后所有队列中的特效并发运行。它与 sequenceFx 的作用是相反的。
参数项：
  • None.
返回值：
  • Ext.Element
    Element 对象
Fx
sequenceFx() : Ext.Element
确保元素调用 sequenceFx 方法之后所有队列中的特效依次运行。...
确保元素调用 sequenceFx 方法之后所有队列中的特效依次运行。它与 syncFx 的作用是相反的。
参数项：
  • None.
返回值：
  • Ext.Element
    Element 对象
Fx
hasActiveFx() : Boolean
当元素拥有任何活动的或队列中的特效时返回 true，否则返回 false。
当元素拥有任何活动的或队列中的特效时返回 true，否则返回 false。
参数项：
  • None.
返回值：
  • Boolean
    如果元素拥有特效为 true，否则为 false。
Fx
stopFx() : Ext.Element
停止运行中的任何特效，如果元素的内部特效队列中还包含其他尚未开始的特效...
停止运行中的任何特效，如果元素的内部特效队列中还包含其他尚未开始的特效也一并清除。
参数项：
  • None.
返回值：
  • Ext.Element
    Element 对象
Fx
hasFxBlock() : Boolean
如果元素的当前特效阻塞了特效队列以致于在当前特效完成前其他特效无法排队...
如果元素的当前特效阻塞了特效队列以致于在当前特效完成前其他特效无法排队，则返回 true。如果元素没有阻塞队列则返回 false。此方法一般用于保证由用户动作启动的特效在相同的特效重新启动之前能够顺利完成（例如：即使用户点击了很多次也只触发一个效果）。
参数项：
  • None.
返回值：
  • Boolean
    如果阻塞返回 true，否则返回 false。
Fx

公共事件

这个类没有公告事件。


类Ext.grid.AbstractSelectionModel

包： | Extgrid
定义的文件： | AbstractSelectionModel.js
类全称： | Ext.grid.AbstractSelectionModel
继承自于： | Ext.util.Observable
Grid选区模型（SelectionModels）基本抽象类。本类提供了子类要实现的接口。该类不能被直接实例化。
Abstract base class for grid SelectionModels. It provides the interface that should be implemented by descendant classes. This class should not be directly instantiated.

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
AbstractSelectionModel()
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
lock()
锁定多个选区。Locks the selections.
锁定多个选区。Locks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
unlock()
解锁多个选区。Unlocks the selections.
解锁多个选区。Unlocks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
isLocked() : Boolean
返回true如果选区被锁。Returns true if the se...
返回true如果选区被锁。Returns true if the selections are locked.
参数项：
  • None.
返回值：
  • Boolean
AbstractSelectionModel
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

这个类没有公告事件。


Column
    BooleanColumn

Class Ext.grid.BooleanColumn

Package: | Ext.grid
Defined In: | Column.js
Class: | BooleanColumn
Extends: | Column

A Column definition class which renders boolean data fields. See the xtype config option of Ext.grid.ColumnModel for more details.

Config Options

Config Options Defined By
align : String
Set the CSS text-align property of the column. Defaults to undefined.
Column
css : String
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to...
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.
Column
dataIndex : String
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's valu...
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value. If not specified, the column's index is used as an index into the Record's data Array.
Column
editable : Boolean
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The in...
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The initial configuration may be dynamically altered using Ext.grid.ColumnModel.setEditable().
Column
editor : Ext.form.Field
The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See editable also.
Column
falseText : String
The string returned by the renderer when the column value is falsey (but not undefined) (defaults to 'false').
BooleanColumn
fixed : Boolean
true if the column width cannot be changed. Defaults to false.
Column
groupName : String
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with which to...
If the grid is being rendered by an 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 groupRenderer and Ext.grid.GroupingView.showGroupName.
Column
groupRenderer : Function
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to f...

If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. If a groupRenderer is not specified, the configured renderer will be called; if a renderer is also not specified the new value of the group field will be used.

The called function (either the groupRenderer or 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.

Column
groupable : Boolean
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to disable the header menu item t...
If the grid is being rendered by an 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 groupName.
Column
header : String
The header text to be used as innerHTML (html tags are accepted) to display in the Grid view.
Column
hidden : Boolean
true to hide the column. Defaults to false.
Column
hideable : Boolean
Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding globally...
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 Ext.grid.GridPanel.enableColumnHide instead.
Column
id : String
A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to create a ...
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.x-grid3-td-id
The Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier.
Column
menuDisabled : Boolean
true to disable the column menu. Defaults to false.
Column
renderer : Mixed
For an alternative to specifying a renderer see xtype (optional) A renderer is an "interceptor" method which can be ...

For an alternative to specifying a renderer see 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 Ext.util.Format class which provides a renderer function.
  • An object specifying both the renderer function, and its execution scope (this reference) eg:
    {
    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 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 scope.
Column
resizable : Boolean
false to disable column resizing. Defaults to true.
Column
scope : Object
The scope (this reference) in which to execute the renderer. Defaults to the Column configuration object.
Column
sortable : Boolean
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether loc...
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort.
Column
tooltip : String
A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text ...
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 ''.
Column
trueText : String
The string returned by the renderer when the column value is not falsey (defaults to 'true').
BooleanColumn
undefinedText : String
The string returned by the renderer when the column value is undefined (defaults to ' ').
BooleanColumn
width : Number
The initial width in pixels of the column. The width of each column can also be affected if any of the following are...
The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:
  • Ext.grid.GridPanel.autoExpandColumn
  • Ext.grid.GridView.forceFit

    By specifying forceFit:true, 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.

  • Ext.grid.GridView.autoFill
  • Ext.grid.GridPanel.minColumnWidth

    • Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.scrollOffset can be modified to reduce or eliminate the reserved offset.

Column
xtype : String
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate rend...
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate renderer to be easily configured into a ColumnModel. The predefined Ext.grid.Column subclass types are:
  • gridcolumn : Ext.grid.Column (Default)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : 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 Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

Public Properties

Property Defined By
renderer : Function A function which returns displayable data when passed the following parameters: <div class="mdetail-params"><ul> <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li> <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li> </ul></div>
Column

Public Methods

Method Defined By
getCellEditor( Number rowIndex ) : Ext.Editor
Returns the editor defined for this column.
Returns the editor defined for this column.
Parameters:
  • rowIndex : Number
    The row index
Returns:
  • Ext.Editor
    The {@link Ext.Editor Editor} that was created to wrap the {@link Ext.form.Field Field} used to edit the cell.
Column

Public Events

This class has no public events.


类Ext.grid.CellSelectionModel

包： | Extgrid
定义的文件： | CellSelectionModel.js
类全称： | Ext.grid.CellSelectionModel
继承自于： | Ext.grid.AbstractSelectionModel
本类提供了grid单元格选区的基本实现。执行getSelectedCell的方法返回一个选区对象，这个对象包含下列的属性：
This class provides the basic implementation for single cell selection in a grid. The object stored as the selection and returned by getSelectedCell contains the following properties:
  • record : Ext.data.record

    提供所选行中的 Ext.data.Record数据 The Record which provides the data for the row containing the selection

  • cell : Ext.data.record

    一个包含下列属性的对象：An object containing the following properties:

    • rowIndex : Number

      选中行的索引 The index of the selected row

    • cellIndex : Number

      选中单元格的索引 The index of the selected cell
      注意有时会因为列渲染的问题，单元格索引不应用于Record数据的索引。因此，应该使用当前的字段名称来获取数据值，如： Note that due to possible column reordering, the cellIndex should not be used as an index into the Record's data. Instead, the name of the selected field should be determined in order to retrieve the data value from the record by name:

    var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
    var data = record.get(fieldName);

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
CellSelectionModel( Object config )
参数项：
  • config : Object
    针对该模型的配置对象 The object containing the configuration of this model.
返回值：
  • void
CellSelectionModel
getSelectedCell() : Array
返回当前选中的单元格，如[0, 0]。Returns the curr...
返回当前选中的单元格，如[0, 0]。Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).
参数项：
  • None.
返回值：
  • Array
    选中的单元格，null就代表没选中。An array containing the row and column indexes of the selected cell, or null if none selected.
CellSelectionModel
clearSelections( Boolean preventNotify )
清除所有选区。Clears all selections.
清除所有选区。Clears all selections.
参数项：
  • preventNotify : Boolean
    true表示改变时不通知gridview。true to prevent the gridview from being notified about the change.
返回值：
  • void
CellSelectionModel
hasSelection() : Boolean
有选区的话返回true。Returns true if there i...
有选区的话返回true。Returns true if there is a selection.
参数项：
  • None.
返回值：
  • Boolean
CellSelectionModel
select( Number rowIndex, Number collIndex )
选中一个单元格。Selects a cell.
选中一个单元格。Selects a cell.
参数项：
  • rowIndex : Number
  • collIndex : Number
返回值：
  • void
CellSelectionModel
AbstractSelectionModel()
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
lock()
锁定多个选区。Locks the selections.
锁定多个选区。Locks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
unlock()
解锁多个选区。Unlocks the selections.
解锁多个选区。Unlocks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
isLocked() : Boolean
返回true如果选区被锁。Returns true if the se...
返回true如果选区被锁。Returns true if the selections are locked.
参数项：
  • None.
返回值：
  • Boolean
AbstractSelectionModel
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforecellselect()
单元格被选中之前触发。Fires before a cell is ...
单元格被选中之前触发。Fires before a cell is selected.
侦听器会传入以下的参数：
  • None.
 CellSelectionModel
cellselect()
当单元格被选中时触发。Fires when a cell is se...
当单元格被选中时触发。Fires when a cell is selected.
侦听器会传入以下的参数：
  • None.
 CellSelectionModel
selectionchange()
当已激活的选区改变时触发。Fires when the active...
当已激活的选区改变时触发。Fires when the active selection changes.
侦听器会传入以下的参数：
  • None.
 CellSelectionModel


类Ext.grid.CheckboxSelectionModel

包： | Extgrid
定义的文件： | CheckboxSelectionModel.js
类全称： | Ext.grid.CheckboxSelectionModel
继承自于： | Ext.grid.RowSelectionModel
通过checkbox选择或反选时触发选区轮换的一个制定选区模型。
A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.

配置项

配置项 |  | 定义者
 | header : String 任何显示在checkbox列头部上有效的HTML片断（默认为 '<... 任何显示在checkbox列头部上有效的HTML片断（默认为 '<div class="x-grid3-hd-checker"> </div>'） 默认的CSS样式类'x-grid3-hd-checker'负责头部的那个checkbox，以支持全局单击、反选的行为。这个字符串可以替换为任何有效的HTML片断，包括几句的文本字符串（如'Select Rows'）， 但是全局单击、反选行为的checkbox就只能带有“x-grid3-hd-checker”样式的元素才能工作。 Any valid text or HTML fragment to display in the header cell for the checkbox column (defaults to '<div class="x-grid3-hd-checker"> </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. | CheckboxSelectionModel
 | width : Number checkbox列默认的宽度（默认为20）。The default w... checkbox列默认的宽度（默认为20）。The default width in pixels of the checkbox column (defaults to 20). | CheckboxSelectionModel
 | sortable : Boolean True 表示为checkbox列可以被排序（默认为fasle）。if... True 表示为checkbox列可以被排序（默认为fasle）。if the checkbox column is sortable (defaults to false). | CheckboxSelectionModel
 | singleSelect : Boolean True表示为同时只能选单行（默认false）。True to all... True表示为同时只能选单行（默认false）。True to allow selection of only one row at a time (defaults to false) | RowSelectionModel
 | moveEditorOnEnter : Boolean False表示禁止按下回车键时就是移动到下一行，shift+回车就是网... False表示禁止按下回车键时就是移动到下一行，shift+回车就是网上移动。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. | RowSelectionModel
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
CheckboxSelectionModel( Object config )
参数项：
  • config : Object
    配置项选项 The configuration options
返回值：
  • void
CheckboxSelectionModel
RowSelectionModel( Object config )
参数项：
  • config : Object
返回值：
  • void
RowSelectionModel
selectRecords( Array records, Boolean keepExisting )
选择多个记录。Select records.
选择多个记录。Select records.
参数项：
  • records : Array
    要选择的record。The records to select
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional)True to keep existing selections
返回值：
  • void
RowSelectionModel
getCount() : Number
获取已选择的行数。Gets the number of selecte...
获取已选择的行数。Gets the number of selected rows.
参数项：
  • None.
返回值：
  • Number
RowSelectionModel
selectFirstRow()
选择GRID的第一行。Selects the first row in...
选择GRID的第一行。Selects the first row in the grid.
参数项：
  • None.
返回值：
  • void
RowSelectionModel
selectLastRow( Boolean keepExisting )
选择最后一行。Select the last row.
选择最后一行。Select the last row.
参数项：
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional) True to keep existing selections
返回值：
  • void
RowSelectionModel
selectNext( Boolean keepExisting ) : Boolean
选取上次选取的最后一行。Selects the row immedia...
选取上次选取的最后一行。Selects the row immediately following the last selected row.
参数项：
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional)True to keep existing selections
返回值：
  • Boolean
    True if there is a next row, else false
RowSelectionModel
selectPrevious( Boolean keepExisting ) : Boolean
选取上次选取的最前一行。Selects the row that pr...
选取上次选取的最前一行。Selects the row that precedes the last selected row.
参数项：
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional)True to keep existing selections
返回值：
  • Boolean
    True表示为有前一行，false表示没有。True if there is a previous row, else false
RowSelectionModel
hasNext() : Boolean
若有下一个可选取的记录返回true。Returns true if t...
若有下一个可选取的记录返回true。Returns true if there is a next record to select
参数项：
  • None.
返回值：
  • Boolean
RowSelectionModel
hasPrevious() : Boolean
若有前一个可选取的记录返回true。Returns true if t...
若有前一个可选取的记录返回true。Returns true if there is a previous record to select
参数项：
  • None.
返回值：
  • Boolean
RowSelectionModel
getSelections() : Array
返回以选取的纪录。Returns the selected records
返回以选取的纪录。Returns the selected records
参数项：
  • None.
返回值：
  • Array
    已选取记录的数组。Array of selected records
RowSelectionModel
getSelected() : Record
返回选区中的第一个记录。Returns the first selec...
返回选区中的第一个记录。Returns the first selected record.
参数项：
  • None.
返回值：
  • Record
RowSelectionModel
each( Function fn, Object scope ) : Boolean
对选区执行传入函数。如果函数返回false，枚举将会中止，each函数...
对选区执行传入函数。如果函数返回false，枚举将会中止，each函数就会返回false，否则返回true。Calls the passed function with each selection. If the function returns false, iteration is stopped and this function returns false. Otherwise it returns true.
参数项：
  • fn : Function
  • scope : Object
    (optional)
返回值：
  • Boolean
    true表示为已枚举所有的记录。true if all selections were iterated
RowSelectionModel
clearSelections()
清除全部的选区。Clears all selections.
清除全部的选区。Clears all selections.
参数项：
  • None.
返回值：
  • void
RowSelectionModel
selectAll()
选择所有的行 Selects all rows.
选择所有的行 Selects all rows.
参数项：
  • None.
返回值：
  • void
RowSelectionModel
hasSelection() : Boolean
返回True表示有选中。Returns True if there i...
返回True表示有选中。Returns True if there is a selection.
参数项：
  • None.
返回值：
  • Boolean
RowSelectionModel
isSelected( Number/Record record ) : Boolean
返回True表示有特定的行是被选中的。Returns True if ...
返回True表示有特定的行是被选中的。Returns True if the specified row is selected.
参数项：
  • record : Number/Record
    Record对象或Record的id。The record or index of the record to check
返回值：
  • Boolean
RowSelectionModel
isIdSelected( String id ) : Boolean
返回True表示特定的记录是否被选中。Returns True if ...
返回True表示特定的记录是否被选中。Returns True if the specified record id is selected.
参数项：
  • id : String
    要检查的记录id。The id of record to check
返回值：
  • Boolean
RowSelectionModel
selectRows( Array rows, Boolean keepExisting )
选取多行。Selects multiple rows.
选取多行。Selects multiple rows.
参数项：
  • rows : Array
    要选取行的索引的集合。Array of the indexes of the row to select
  • keepExisting : Boolean
    （可选的）表示为保持现有的选区。(optional)True to keep existing selections (defaults to false)
返回值：
  • void
RowSelectionModel
selectRange( Number startRow, Number endRow, Boolean keepExisting )
选取某个范围内的行（rows）。所有在startRow和endRow之...
选取某个范围内的行（rows）。所有在startRow和endRow之间的行都会被选中。Selects a range of rows. All rows in between startRow and endRow are also selected.
参数项：
  • startRow : Number
    范围内的第一行之索引。The index of the first row in the range
  • endRow : Number
    范围内的最后一行之索引。The index of the last row in the range
  • keepExisting : Boolean
    （可选的）表示为保持现有的选区。(optional)True to retain existing selections
返回值：
  • void
RowSelectionModel
deselectRange( Number startRow, Number endRow )
反选某个范围内的行（rows）。所有在startRow和endRow之...
反选某个范围内的行（rows）。所有在startRow和endRow之间的行都会被选反。Deselects a range of rows. All rows in between startRow and endRow are also deselected.
参数项：
  • startRow : Number
    范围内的第一行之索引。The index of the first row in the range
  • endRow : Number
    范围内的最后一行之索引。The index of the last row in the range
返回值：
  • void
RowSelectionModel
selectRow( Number row, Boolean keepExisting )
选择一行。Selects a row.
选择一行。Selects a row.
参数项：
  • row : Number
    要选择行的索引。The index of the row to select
  • keepExisting : Boolean
    (optional) （可选的）表示为保持现有的选区。True to keep existing selections
返回值：
  • void
RowSelectionModel
deselectRow( Number row )
反选一个行。Deselects a row.
反选一个行。Deselects a row.
参数项：
  • row : Number
    反选行的索引。The index of the row to deselect
返回值：
  • void
RowSelectionModel
AbstractSelectionModel()
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
lock()
锁定多个选区。Locks the selections.
锁定多个选区。Locks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
unlock()
解锁多个选区。Unlocks the selections.
解锁多个选区。Unlocks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
isLocked() : Boolean
返回true如果选区被锁。Returns true if the se...
返回true如果选区被锁。Returns true if the selections are locked.
参数项：
  • None.
返回值：
  • Boolean
AbstractSelectionModel
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
selectionchange()
当选区改变时触发。Fires when the selection ...
当选区改变时触发。Fires when the selection changes
侦听器会传入以下的参数：
  • None.
 RowSelectionModel
beforerowselect()
当行（row）是选中又被选择触发，返回false取消。Fires w...
当行（row）是选中又被选择触发，返回false取消。Fires when a row is being selected, return false to cancel.
侦听器会传入以下的参数：
  • None.
 RowSelectionModel
rowselect()
当行（row）被选中时触发。Fires when a row is ...
当行（row）被选中时触发。Fires when a row is selected.
侦听器会传入以下的参数：
  • None.
 RowSelectionModel
rowdeselect()
当行（row）反选时触发。Fires when a row is d...
当行（row）反选时触发。Fires when a row is deselected.
侦听器会传入以下的参数：
  • None.
 RowSelectionModel


类Ext.grid.Column

包： | Extgrid
定义的文件： | Column.js
类全称： | Ext.grid.Column
继承自于： | Object
Ext.grid.Column类。

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.grid.ColumnModel

包： | Extgrid
定义的文件： | ColumnModel.js
类全称： | Ext.grid.ColumnModel
继承自于： | Ext.util.Observable
Grid的列模型（ColumnModel）的默认实现。该类由列配置组成的数组初始化。
This is the default implementation of a ColumnModel used by the Grid. This class is initialized with an Array of column config objects.
我们用配置对象来定义不同列是怎么显示的， 包括头部（header）的字符串、对当前列是否可排序、对齐方式等的一般设置、当然还有最重要的dataIndex，该配置指定了数据的来源（须配合Ext.data.Record字段的描述） 另外render也是我们开发者经常要特别设置的，它本质上就是一个自定义数据格式的渲染函数。这里介绍一个小技巧，就是允许通过和配置选项id相同名称的CSS样式类来指定某列的样式。
An individual column's config object defines the header string, the Ext.data.Record field the column draws its data from, an optional rendering function to provide customized data formatting, and the ability to apply a CSS class to all cells in a column through its id config option.

用法：Usage:

 var colModel = new Ext.grid.ColumnModel([
    { header: "Ticker", width: 60, sortable: true},
    { header: "Company Name", width: 150, sortable: true},
    { header: "Market Cap.", width: 100, sortable: true},
    { header: "$ Sales", width: 100, sortable: true, renderer: money},
    { header: "Employees", width: 100, sortable: true, resizable: false}
 ]);

适用于该类的许多配置项参数也适用于每一个列的定义。为了让父类能够使用更多的配置项参数，可以将列的参数指定在配置项columns的数组中，如：
The config options defined by this class are options which may appear in each individual column definition. In order to use configuration options from the superclass, specify the column configuration Array in the columns config property. eg:

 var colModel = new Ext.grid.ColumnModel({
    listeners: {
        widthchange: function(cm, colIndex, width) {
            saveConfig(colIndex, width);
        }
    },
    columns: [
        { header: "Ticker", width: 60, sortable: true},
        { header: "Company Name", width: 150, sortable: true},
        { header: "Market Cap.", width: 100, sortable: true},
        { header: "$ Sales", width: 100, sortable: true, renderer: money},
        { header: "Employees", width: 100, sortable: true, resizable: false}
     ]
});

配置项

配置项 定义者
  id : String
（可选的）默认值是按列出现的位置的序号。这就是该列的标示。该列的所有单...
（可选的）默认值是按列出现的位置的序号。这就是该列的标示。该列的所有单元格包括头部都是用这个值来创建CSS class属性。CSS Class产生的格式将是
x-grid3-td-id
。(optional) Defaults to the column's initial ordinal position. A name which identifies this column. The id is used to create a CSS class name which is applied to all table cells (including headers) in that column. The class name takes the form of
x-grid3-td-id

头部区域也有这个CSS类，但会多出x-grid3-hd，因此使用这样的
.x-grid3-hd.x-grid3-td-id
CSS选择符就可以找到头部。Ext.grid.GridPanelautoExpandColumn也是透过这个id来配置的。Header cells will also recieve 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.x-grid3-td-id
The Ext.grid.GridPanelautoExpandColumn grid config option references the column via this identifier.
ColumnModel
  header : String
在Grid头部视图中显示的文字。The header text to ...
在Grid头部视图中显示的文字。The header text to display in the Grid view.
ColumnModel
  dataIndex : String
（可选的）数据索引，相当于Grid记录集（Ext.data.Store...
（可选的）数据索引，相当于Grid记录集（Ext.data.Store里面的Ext.data.Record ）中字段名称，字段的值用于展示列里面的值（column's value）。如不指定，Record的数据列中的索引将作为列的索引。(optional) The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value. If not specified, the column's index is used as an index into the Record's data Array.
ColumnModel
  width : Number
（可选的）列的初始宽度（像素）。如采用Ext.grid.Gridaut...
（可选的）列的初始宽度（像素）。如采用Ext.grid.GridautoSizeColumns性能较差。(optional) The initial width in pixels of the column. This is ignored if the Grid's view is configured with forceFit true.
ColumnModel
  sortable : Boolean
（可选的）True表示为可在该列上进行排列。默认为defaultSor...
（可选的）True表示为可在该列上进行排列。默认为defaultSortable属性的值。由Ext.data.StoreremoteSort指定本地排序抑或是远程排序。(optional) True if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.StoreremoteSort.
ColumnModel
  fixed : Boolean
(optional) True表示为列的宽度不能够改变。默认为fasl...
(optional) True表示为列的宽度不能够改变。默认为fasle。True if the column width cannot be changed. Defaults to false.
ColumnModel
  resizable : Boolean
（可选的）False禁止列可变动大小。默认为true。(optiona...
（可选的）False禁止列可变动大小。默认为true。(optional) False to disable column resizing. Defaults to true.
ColumnModel
  menuDisabled : Boolean
True表示禁止列菜单。默认为fasle。(optional) Tru...
True表示禁止列菜单。默认为fasle。(optional) True to disable the column menu. Defaults to false.
ColumnModel
  hidden : Boolean
(optional) （可选的）True表示隐藏列，默认为false。...
(optional) （可选的）True表示隐藏列，默认为false。True to hide the column. Defaults to false.
ColumnModel
  tooltip : String
(optional) （可选的）在列头部显示的提示文字。如果Quick...
(optional) （可选的）在列头部显示的提示文字。如果Quicktips的功能有被打开，那么就会用Quicktps来显示，否则就会用HTML的title属性来显示。默认为""。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 ''.
ColumnModel
  renderer : Function
（可选的）该函数用于加工单元格的原始数据，转换成为HTML并返回给Gr...
（可选的）该函数用于加工单元格的原始数据，转换成为HTML并返回给GridView进一步处理。请参阅setRenderer。如不指定，则对原始数据值进行默认地渲染。(optional) A function used to generate HTML markup for a cell given the cell's data value. See setRenderer. If not specified, the default renderer uses the raw data value.
ColumnModel
  align : String
（可选的）设置列的CSS text-align属性。默认为undefi...
（可选的）设置列的CSS text-align属性。默认为undefined。(optional) Set the CSS text-align property of the column. Defaults to undefined.
ColumnModel
  css : String
（可选的）设置表格中全体单元格的CSS样式（包括头部）。默认为unde...
（可选的）设置表格中全体单元格的CSS样式（包括头部）。默认为undefined。(optional) Set custom CSS for all table cells in the column (excluding headers). Defaults to undefined.
ColumnModel
  hideable : Boolean
（可选的）指定false可禁止用户隐藏该列。默认为True。要全局地禁...
（可选的）指定false可禁止用户隐藏该列。默认为True。要全局地禁止Grid中所有列的隐藏性，使用Ext.grid.GridPanelenableColumnHide。(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 Ext.grid.GridPanelenableColumnHide instead.
ColumnModel
  editor : Ext.form.Field
（可选的）如果Grid的编辑器支持被打开，这属性指定了用户编辑时所用的...
（可选的）如果Grid的编辑器支持被打开，这属性指定了用户编辑时所用的编辑器Ext.form.Field。(optional) The Ext.form.Field to use when editing values in this column if editing is supported by the grid.
ColumnModel
  groupRenderer : Function
如果Grid是通过Ext.grid.GroupingView负责渲染的...
如果Grid是通过Ext.grid.GroupingView负责渲染的， 那么该配置项将对格式化组字段的值有用，指定一个函数就是这个格式化的函数，告知Grid怎么显示头部的组。这函数应该返回字符串。If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. Should return a string value.

可以有以下的参数: This takes the following parameters:

  • v : Object

    组字段的新值。The new value of the group field.

  • unused : undefined

    未用的参数。Unused parameter.

  • r : Ext.data.Record

    引发组变动的Record对象。The Record providing the data for the row which caused group change.

  • rowIndex : Number

    引发组变动的Record行索引。The row index of the Record which caused group change.

  • colIndex : Number

    组字段的列索引。The column index of the group field.

  • ds : Ext.data.Store

    提高数据模型的Store对象。The Store which is providing the data Model.

 ColumnModel
  listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | config: {Array} 传入配置到构建函数。The config passed into ... 传入配置到构建函数。The config passed into the constructor | ColumnModel
 | defaultWidth: Number 列不指定宽度时的默认值（默认为100）。The width of ... 列不指定宽度时的默认值（默认为100）。The width of columns which have no width specified (defaults to 100) | ColumnModel
 | defaultSortable: Boolean 是否默认排序（默认为false）。只对那些没有指定sortable... 是否默认排序（默认为false）。只对那些没有指定sortable的有效。Default sortable of columns which have no sortable specified (defaults to false) | ColumnModel

公共方法

方法 定义者
  ColumnModel( Object config )
参数项：
  • config : Object
    列配置组成的数组，参阅关于本类的配置对象的更多资料。An Array of column config objects. See this class's config objects for details.
返回值：
  • void
ColumnModel
  getColumnId( Number index ) : String
返回指定index列的Id。Returns the id of the...
返回指定index列的Id。Returns the id of the column at the specified index.
参数项：
  • index : Number
    列索引。The column index
返回值：
  • String
    the id
ColumnModel
  setConfig( Array config )
重新配置列模型。传入一个数组，就是各个列的配置对象。要了解各个列的...

重新配置列模型。传入一个数组，就是各个列的配置对象。要了解各个列的配置说明，请参阅Config Options。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.

这会引起configchange事件的触发。GridPanel就是靠这个事件来得知其所用的列有变化并自动刷新Grid的UI。Causes the configchange event to be fired. A GridPanel using this ColumnModel will listen for this event and refresh its UI automatically.

参数项：
  • config : Array
    列配置组成的数组。Array of Column definition objects.
返回值：
  • void
ColumnModel
  getColumnById( String id ) : Object
返回指定id的列。Returns the column for a s...
返回指定id的列。Returns the column for a specified id.
参数项：
  • id : String
    列id。The column id
返回值：
  • Object
    列。the column
ColumnModel
  getIndexById( String id ) : Number
返回指定列id的索引。Returns the index for a ...
返回指定列id的索引。Returns the index for a specified column id.
参数项：
  • id : String
    列id The column id
返回值：
  • Number
    索引，-1表示找不到。the index, or -1 if not found
ColumnModel
  moveColumn( Number oldIndex, Number newIndex )
把列从一个位置移到别处。Moves a column from one...
把列从一个位置移到别处。Moves a column from one position to another.
参数项：
  • oldIndex : Number
    移动之前的列索引。The index of the column to move.
  • newIndex : Number
    移动之后的列索引。The position at which to reinsert the coolumn.
返回值：
  • void
ColumnModel
  getColumnCount( Boolean visibleOnly ) : Number
返回列数。Returns the number of columns.
返回列数。Returns the number of columns.
参数项：
  • visibleOnly : Boolean
    （可选的）传入true表示只是包含可见那些的列。Optional. Pass as true to only include visible columns.
返回值：
  • Number
ColumnModel
  getColumnsBy( Function fn, Object scope ) : Array
传入一个function类型的参数，这个函数执行时会有(columnC...
传入一个function类型的参数，这个函数执行时会有(columnConfig, index)的参数送入其内，如函数返回true则加入到数组中保存并返回数组。Returns the column configs that return true by the passed function that is called with (columnConfig, index)
参数项：
  • fn : Function
  • scope : Object
    （可选的）(optional)
返回值：
  • Array
    result
ColumnModel
  isSortable( Number col ) : Boolean
返回指定的列可否排序。Returns true if the spec...
返回指定的列可否排序。Returns true if the specified column is sortable.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • Boolean
ColumnModel
  isMenuDisabled( Number col ) : Boolean
如果列的菜单被禁用的话，返回true。Returns true if ...
如果列的菜单被禁用的话，返回true。Returns true if the specified column menu is disabled.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • Boolean
ColumnModel
  getRenderer( Number col ) : Function
返回对某个列的渲染（格式化）函数。Returns the render...
返回对某个列的渲染（格式化）函数。Returns the rendering (formatting) function defined for the column.
参数项：
  • col : Number
    列索引。The column index.
返回值：
  • Function
    用于渲染单元格的那个函数。可参阅setRenderer。The function used to render the cell. See setRenderer.
ColumnModel
  setRenderer( Number col, Function fn )
设置对某个列的渲染（格式化formatting）函数 Sets th...
设置对某个列的渲染（格式化formatting）函数 Sets the rendering (formatting) function for a column. See Ext.util.Format for some default formatting functions.
参数项：
  • col : Number
    列索引。The column index
  • fn : Function
    该函数用于加工单元格的原始数据，转换成为HTML并返回给GridView进一步处理。这个渲染函数调用时会有下列的参数： 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

      单元格元数据（Cell metadata）对象。你也可以设置下列的属性：An object in which you may set the following attributes:

      • css : String

        单元格CSS样式字符串，作用在td元素上。A CSS class name to add to the cell's TD element.

      • attr : String

        一段HTML属性的字符串，将作用于表格单元格内的数据容器元素（如'style="color:red;"'）。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

      从数据中提取的Ext.data.Record。The Ext.data.Record from which the data was extracted.

    • rowIndex : Number

      行索引。Row index

    • colIndex : Number

      列索引。Column index

    • store : Ext.data.Store

      从Record中提取的Ext.data.Store对象。The Ext.data.Store object from which the Record was extracted.

返回值：
  • void
ColumnModel
  getColumnWidth( Number col ) : Number
返回某个列的宽度。Returns the width for the ...
返回某个列的宽度。Returns the width for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • Number
ColumnModel
  setColumnWidth( Number col, Number width )
设置某个列的宽度。Sets the width for a column.
设置某个列的宽度。Sets the width for a column.
参数项：
  • col : Number
    列索引。The column index
  • width : Number
    新宽度。The new width
返回值：
  • void
ColumnModel
  getTotalWidth( Boolean includeHidden ) : Number
返回所有列宽度之和。Returns the total width o...
返回所有列宽度之和。Returns the total width of all columns.
参数项：
  • includeHidden : Boolean
    True表示为包括隐藏的宽度。True to include hidden column widths
返回值：
  • Number
ColumnModel
  getColumnHeader( Number col ) : String
返回某个列的头部（header）。Returns the header...
返回某个列的头部（header）。Returns the header for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • String
ColumnModel
  setColumnHeader( Number col, String header )
设置某个列的头部（header）。Sets the header fo...
设置某个列的头部（header）。Sets the header for a column.
参数项：
  • col : Number
    列索引。The column index
  • header : String
    新头部。The new header
返回值：
  • void
ColumnModel
  getColumnTooltip( Number col ) : String
返回某个列的工具提示（tooltip）。Returns the too...
返回某个列的工具提示（tooltip）。Returns the tooltip for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • String
ColumnModel
  setColumnTooltip( Number col, String tooltip )
设置某个列的提示文字（tooltip）。Sets the toolti...
设置某个列的提示文字（tooltip）。Sets the tooltip for a column.
参数项：
  • col : Number
    列索引。The column index
  • tooltip : String
    新tooltip对象。The new tooltip
返回值：
  • void
ColumnModel
  getDataIndex( Number col ) : String
返回某个列的数据索引。Returns the dataIndex fo...
返回某个列的数据索引。Returns the dataIndex for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • String
    列的数据索引。The column's dataIndex
ColumnModel
  setDataIndex( Number col, String dataIndex )
设置某个列的数据索引。Sets the dataIndex for a...
设置某个列的数据索引。Sets the dataIndex for a column.
参数项：
  • col : Number
    列索引。The column index
  • dataIndex : String
    新数据索引。The new dataIndex
返回值：
  • void
ColumnModel
  findColumnIndex( String col ) : Number
送入数据索引，找到第一个匹配的列。Finds the index of...
送入数据索引，找到第一个匹配的列。Finds the index of the first matching column for the given dataIndex.
参数项：
  • col : String
    dataIndex结果。The dataIndex to find
返回值：
  • Number
    列索引，如果是-1就表示没找到。The column index, or -1 if no match was found
ColumnModel
  isCellEditable( Number colIndex, Number rowIndex ) : Boolean
返回true如果列是隐藏的。Returns true if the c...
返回true如果列是隐藏的。Returns true if the cell is editable.
参数项：
  • colIndex : Number
    列索引。The column index
  • rowIndex : Number
    行索引。The row index
返回值：
  • Boolean
ColumnModel
  getCellEditor( Number colIndex, Number rowIndex ) : Ext.Editor
返回单元格/列所定义的编辑器。Returns the editor d...
返回单元格/列所定义的编辑器。Returns the editor defined for the cell/column.
参数项：
  • colIndex : Number
    列索引。The column index
  • rowIndex : Number
    行索引。The row index
返回值：
  • Ext.Editor
    创建一个Editor用于Field编辑时所用。The Editor that was created to wrap the Field used to edit the cell.
ColumnModel
  setEditable( Number col, Boolean editable )
设置列是否可编辑的。Sets if a column is edita...
设置列是否可编辑的。Sets if a column is editable.
参数项：
  • col : Number
    列索引。The column index
  • editable : Boolean
    True表示为列是可编辑的。True if the column is editable
返回值：
  • void
ColumnModel
  isHidden( Number colIndex ) : Boolean
如果列是隐藏的则返回true。Returns true if the ...
如果列是隐藏的则返回true。Returns true if the column is hidden.
参数项：
  • colIndex : Number
    列索引。The column index
返回值：
  • Boolean
ColumnModel
  isFixed()
如果列是固定的则返回true。Returns true if the ...
如果列是固定的则返回true。Returns true if the column width cannot be changed
参数项：
  • None.
返回值：
  • void
ColumnModel
  isResizable() : Boolean
如果列不能调整尺寸返回true。Returns true if the...
如果列不能调整尺寸返回true。Returns true if the column can be resized
参数项：
  • None.
返回值：
  • Boolean
ColumnModel
  setHidden( Number colIndex, Boolean hidden )
设置列隐藏。Sets if a column is hidden.
设置列隐藏。Sets if a column is hidden.
参数项：
  • colIndex : Number
    列索引。The column index
  • hidden : Boolean
    True表示为列是已隐藏的。True if the column is hidden
返回值：
  • void
ColumnModel
  setEditor( Number col, Object editor )
为列设置编辑器。Sets the editor for a column.
为列设置编辑器。Sets the editor for a column.
参数项：
  • col : Number
    列索引。The column index
  • editor : Object
    编辑器对象。The editor object
返回值：
  • void
ColumnModel
  fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
  addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
  removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
  purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
  relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
  addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
  hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
  suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
  resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
  on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
  un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
  capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
  releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
  widthchange()
当列宽度变动时触发。Fires when the width of ...
当列宽度变动时触发。Fires when the width of a column changes.
侦听器会传入以下的参数：
  • None.
 ColumnModel
  headerchange()
当头部文字改变时触发。Fires when the text of ...
当头部文字改变时触发。Fires when the text of a header changes.
侦听器会传入以下的参数：
  • None.
 ColumnModel
  hiddenchange()
当某一列隐藏或“反隐藏”时触发。Fires when a colum...
当某一列隐藏或“反隐藏”时触发。Fires when a column is hidden or "unhidden".
侦听器会传入以下的参数：
  • None.
 ColumnModel
  columnmoved()
当列被移动时触发。Fires when a column is mo...
当列被移动时触发。Fires when a column is moved.
侦听器会传入以下的参数：
  • None.
 ColumnModel
  configchange()
当列锁定状态被改变时触发。Fires when the config...
当列锁定状态被改变时触发。Fires when the configuration is changed
侦听器会传入以下的参数：
  • None.
 ColumnModel


Column
    DateColumn

Class Ext.grid.DateColumn

Package: | Ext.grid
Defined In: | Column.js
Class: | DateColumn
Extends: | Column

A Column definition class which renders a passed date according to the default locale, or a configured format. See the xtype config option of Ext.grid.ColumnModel for more details.

Config Options

Config Options Defined By
align : String
Set the CSS text-align property of the column. Defaults to undefined.
Column
css : String
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to...
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.
Column
dataIndex : String
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's valu...
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value. If not specified, the column's index is used as an index into the Record's data Array.
Column
editable : Boolean
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The in...
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The initial configuration may be dynamically altered using Ext.grid.ColumnModel.setEditable().
Column
editor : Ext.form.Field
The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See editable also.
Column
fixed : Boolean
true if the column width cannot be changed. Defaults to false.
Column
format : String
A formatting string as used by Date.format to format a Date for this Column (defaults to 'm/d/Y').
DateColumn
groupName : String
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with which to...
If the grid is being rendered by an 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 groupRenderer and Ext.grid.GroupingView.showGroupName.
Column
groupRenderer : Function
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to f...

If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. If a groupRenderer is not specified, the configured renderer will be called; if a renderer is also not specified the new value of the group field will be used.

The called function (either the groupRenderer or 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.

Column
groupable : Boolean
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to disable the header menu item t...
If the grid is being rendered by an 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 groupName.
Column
header : String
The header text to be used as innerHTML (html tags are accepted) to display in the Grid view.
Column
hidden : Boolean
true to hide the column. Defaults to false.
Column
hideable : Boolean
Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding globally...
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 Ext.grid.GridPanel.enableColumnHide instead.
Column
id : String
A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to create a ...
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.x-grid3-td-id
The Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier.
Column
menuDisabled : Boolean
true to disable the column menu. Defaults to false.
Column
renderer : Mixed
For an alternative to specifying a renderer see xtype (optional) A renderer is an "interceptor" method which can be ...

For an alternative to specifying a renderer see 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 Ext.util.Format class which provides a renderer function.
  • An object specifying both the renderer function, and its execution scope (this reference) eg:
    {
    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 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 scope.
Column
resizable : Boolean
false to disable column resizing. Defaults to true.
Column
scope : Object
The scope (this reference) in which to execute the renderer. Defaults to the Column configuration object.
Column
sortable : Boolean
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether loc...
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort.
Column
tooltip : String
A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text ...
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 ''.
Column
width : Number
The initial width in pixels of the column. The width of each column can also be affected if any of the following are...
The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:
  • Ext.grid.GridPanel.autoExpandColumn
  • Ext.grid.GridView.forceFit

    By specifying forceFit:true, 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.

  • Ext.grid.GridView.autoFill
  • Ext.grid.GridPanel.minColumnWidth

    • Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.scrollOffset can be modified to reduce or eliminate the reserved offset.

Column
xtype : String
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate rend...
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate renderer to be easily configured into a ColumnModel. The predefined Ext.grid.Column subclass types are:
  • gridcolumn : Ext.grid.Column (Default)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : 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 Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

Public Properties

Property Defined By
renderer : Function A function which returns displayable data when passed the following parameters: <div class="mdetail-params"><ul> <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li> <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li> </ul></div>
Column

Public Methods

Method Defined By
getCellEditor( Number rowIndex ) : Ext.Editor
Returns the editor defined for this column.
Returns the editor defined for this column.
Parameters:
  • rowIndex : Number
    The row index
Returns:
  • Ext.Editor
    The {@link Ext.Editor Editor} that was created to wrap the {@link Ext.form.Field Field} used to edit the cell.
Column

Public Events

This class has no public events.


类Ext.grid.EditorGridPanel

包： | Extgrid
定义的文件： | EditorGrid.js
类全称： | Ext.grid.EditorGridPanel
继承自于： | Ext.grid.GridPanel

在GridPanel的基础上扩展的新类用于在指定某些的列可以编辑单元格。这些可编辑的列取决于editor的配置情况。
This class extends the GridPanel to provide cell editing on selected columns. The editable columns are specified by providing an editor in the column configuration.

你可以在ColumnModel插入一个isCellEditable的实作来控制 某些列是否可以被编辑。
Editability of columns may be controlled programatically by inserting an implementation of isCellEditable into your ColumnModel.

正在编辑的是什么的值，就取决于列所指定的dataIndex是指向Store里面的什么的值。（这样的话，如果你使用{@link Ext.grid.ColumnModel#setRenderer renderer（数据重新显示）}）来转换了的数据，那么该项一定要说明清楚。
Editing is performed on the value of the field specified by the column's dataIndex in the backing Store (so if you are using a renderer in order to display transformed data, this must be accounted for).

如果渲染列的时候，其映射关系是“值为内，说明文本为外”的关系，譬如{Ext.form.Field#ComboBox ComboBox}的情况， 便是这样value到description的关系， 那么就会采用适当的编辑器。
If a value-to-description mapping is used to render a column, then a {Ext.form.Field#ComboBox ComboBox} which uses the same value-to-description mapping would be an appropriate editor.

如果在Grid显示数据的时候有更复杂的情形，与Store不一定对称的话，那么就可以利用 beforeedit afteredit的事件来转换数据，达成是一致的数据。
If there is a more complex mismatch between the visible data in the grid, and the editable data in the Store, then code to transform the data both before and after editing can be injected using the beforeedit and afteredit events.

配置项

配置项 定义者
clicksToEdit : Number
要转换单元格为编辑状态所需的鼠标点击数（默认为两下，即双击...

要转换单元格为编辑状态所需的鼠标点击数（默认为两下，即双击）。The number of clicks on a cell required to display the cell's editor (defaults to 2).

把该项设置为“auto”表示鼠标移至选中单元格上面就开始编辑的状态。Setting this option to 'auto' means that mousedown on the selected cell starts editing that cell.

EditorGridPanel
forceValidation : Boolean
True表示即使没有被碰的值过都要去验证（默认为false）。True...
True表示即使没有被碰的值过都要去验证（默认为false）。True to force validation even if the value is unmodified (defaults to false)
EditorGridPanel
autoEncode : Boolean
True表示为对任何值和任何后来输入的值都要自动HTML编码或解码（默...
True表示为对任何值和任何后来输入的值都要自动HTML编码或解码（默认为false）。True to automatically HTML encode and decode values pre and post edit (defaults to false)
EditorGridPanel
selModel : Object
AbstractSelectionModel的子类，以为Grid提供选...
AbstractSelectionModel的子类，以为Grid提供选区模型（selection model）。（如不指定则默认为Ext.grid.RowSelectionModel）。Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext.grid.RowSelectionModel if not specified).
GridPanel
store : Ext.data.Store
Grid应使用Ext.data.Store作为其数据源（必须的）。Th...
Grid应使用Ext.data.Store作为其数据源（必须的）。The Ext.data.Store the grid should use as its data source (required).
GridPanel
cm : Object
colModel的简写方式。Shorthand for colModel.
colModel的简写方式。Shorthand for colModel.
GridPanel
colModel : Object
渲染Grid所使用的Ext.grid.ColumnModel（必须的）...
渲染Grid所使用的Ext.grid.ColumnModel（必须的）。The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
sm : Object
selModel的简写方式。Shorthand for selModel.
selModel的简写方式。Shorthand for selModel.
GridPanel
columns : Array
自动创建列模型（ColumnModel）的数组。An array of...
自动创建列模型（ColumnModel）的数组。An array of columns to auto create a ColumnModel
GridPanel
maxHeight : Number
设置Grid的高度最大值（若autoHeight关闭则忽略）。Sets...
设置Grid的高度最大值（若autoHeight关闭则忽略）。Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
disableSelection : Boolean
True表示为禁止grid的选区功能（默认为false）——若指定了S...
True表示为禁止grid的选区功能（默认为false）——若指定了SelectionModel则忽略。True to disable selections in the grid (defaults to false). - ignored if a SelectionModel is specified
GridPanel
enableColumnMove : Boolean
True表示为激活列的拖动（默认为true）。True to enab...
True表示为激活列的拖动（默认为true）。True to enable drag and drop reorder of columns.
GridPanel
enableColumnResize : Boolean
False 表示为关闭列的大小调节功能（默认为true）。False ...
False 表示为关闭列的大小调节功能（默认为true）。False to turn off column resizing for the whole grid (defaults to true).
GridPanel
viewConfig : Object
作用在grid's UI试图上的配置项对象， 任何Ext.grid....
作用在grid's UI试图上的配置项对象， 任何Ext.grid.GridView可用的配置选项都可在这里指定。若view已指定则此项无效。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 xpecified.
GridPanel
hideHeaders : Boolean
True表示为隐藏Grid的头部（默认为false）。True to ...
True表示为隐藏Grid的头部（默认为false）。True to hide the grid's header (defaults to false).
GridPanel
minColumnWidth : Number
列的宽度的调整下限。默认为25。The minimum width a...
列的宽度的调整下限。默认为25。The minimum width a column can be resized to. Defaults to 25.
GridPanel
trackMouseOver : Boolean
True表示为鼠标移动时高亮显示（默认为true）。True to h...
True表示为鼠标移动时高亮显示（默认为true）。True to highlight rows when the mouse is over. Default is true.
GridPanel
enableDragDrop : Boolean
True表示为激活GridPanel行的拖动。True to enab...

True表示为激活GridPanel行的拖动。True to enable dragging of the selected rows of the GridPanel.

设置该项为true那样{GridPanel@link #getView GridView}的将会创建一个Ext.grid.GridDragZone实例。通过GridView的dragZone属性可访问该实例（只在Grid渲染后的条件后）。Setting this to true causes this GridPanel's GridView to create an instance of Ext.grid.GridDragZone. This is available (only after the Grid has been rendered) as the GridView's dragZone property.

要让DropZone运作起来必须一定要有onNodeEnter、onNodeOver, onNodeOut以及onNodeDrop这些实现的定义，好让能够处理data。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
enableColumnHide : Boolean
True表示为隐藏每列头部的邮件菜单（默认为true）。True to...
True表示为隐藏每列头部的邮件菜单（默认为true）。True to enable hiding of columns with the header context menu.
GridPanel
enableHdMenu : Boolean
True表示为在头部出现下拉按钮，以激活头部菜单。True to en...
True表示为在头部出现下拉按钮，以激活头部菜单。True to enable the drop down button for menu in the headers.
GridPanel
stripeRows : Boolean
True表示为显示行的分隔符（默认为true）。True to str...
True表示为显示行的分隔符（默认为true）。True to stripe the rows. Default is false.

为Grid的隔行之处都会加上x-grid3-row-alt样式。原理是利用加入背景色的CSS规则来实现，但你可以用有修饰符"!important"的background-color样式覆盖这个规则，或使用较高优先级的CSS选择符。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
autoExpandColumn : String
指定某个列之id,grid就会在这一列自动扩展宽度，以填满空白的位置，...
指定某个列之id,grid就会在这一列自动扩展宽度，以填满空白的位置，该id不能为0。The id of a column in this grid that should expand to fill unused space. This id can not be 0.
GridPanel
autoExpandMin : Number
autoExpandColumn可允许最小之宽度（有激活的话）。默认为...
autoExpandColumn可允许最小之宽度（有激活的话）。默认为50。The minimum width the autoExpandColumn can have (if enabled). defaults to 50.
GridPanel
autoExpandMax : Number
autoExpandColumn可允许最大之宽度（有激活的话）。默认为...
autoExpandColumn可允许最大之宽度（有激活的话）。默认为 1000。The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.
GridPanel
view : Object
Grid所使用的Ext.grid.GridView。该项可在rende...
Grid所使用的Ext.grid.GridView。该项可在render()调用之前设置。The Ext.grid.GridView used by the grid. This can be set before a call to render().
GridPanel
loadMask : Object
True表示为当grid加载过程中，会有一个Ext.LoadMask的...
True表示为当grid加载过程中，会有一个Ext.LoadMask的遮罩效果。默认为false。An Ext.LoadMask config or true to mask the grid while loading (defaults to false).
GridPanel
columnLines : Boolean
True表示为在列分隔处显示分隔符。默认为false。True to ...
True表示为在列分隔处显示分隔符。默认为false。True to add css for column separation lines. Default is false.
GridPanel
deferRowRender : Boolean
True表示为延时激活行渲染。默认为true。True to enab...
True表示为延时激活行渲染。默认为true。True to enable deferred row rendering. Default is true.
GridPanel
stateEvents : Array
事件名称组成的数组。这些事件触发时会导致该组件进行状态记忆（默认为["...
事件名称组成的数组。这些事件触发时会导致该组件进行状态记忆（默认为["columnmove", "columnresize", "sortchange"]）。可支持该组件身上的任意事件类型，包括浏览器原生的或自定义的，如['click', 'customerchange']。An array of events that, when fired, should trigger this component to save its state (defaults to ["columnmove", "columnresize", "sortchange"]). These can be any types of events supported by this component, including browser or custom events (e.g.,['click', 'customerchange']).

请参阅stateful有关Component状态的恢复与保存方面的解释。See stateful for an explanation of saving and restoring Component state.

 GridPanel
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : String 配置拖动代理中的文本（缺省为"{0} selected row(s... 配置拖动代理中的文本（缺省为"{0} selected row(s)"）。选中行的行数会替换到{0}。Configures the text in the drag proxy (defaults to "{0} selected row(s)"). {0} is replaced with the number of selected rows. | GridPanel
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
EditorGridPanel( Object config )
参数项：
  • config : Object
    配置项对象。The config object @xtype editorgrid
返回值：
  • void
EditorGridPanel
startEditing( Number rowIndex, Number colIndex )
指定的行/列，进行单元格内容的编辑。Starts editing th...
指定的行/列，进行单元格内容的编辑。Starts editing the specified for the specified row/column
参数项：
  • rowIndex : Number
  • colIndex : Number
返回值：
  • void
EditorGridPanel
stopEditing( Boolean cancel )
停止任何激活的行为。Stops any active editing
停止任何激活的行为。Stops any active editing
参数项：
  • cancel : Boolean
    （可选的）True撤销更改。(optional) True to cancel any changes
返回值：
  • void
EditorGridPanel
GridPanel( Object config )
参数项：
  • config : Object
    配置项对象 The config object
返回值：
  • void
GridPanel
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )
重新配置Grid的Store和Column Model（列模型）。视图...

重新配置Grid的Store和Column Model（列模型）。视图会重新绑定对象并刷新。Reconfigures the grid to use a different Store and Column Model. The View will be bound to the new objects and refreshed.

要注意当重新配置这个GridPanel之后，某些现有的设置可能会变为无效。比如配置项autoExpandColumn的设置在新的ColumnModel作用后就不复存在； 再譬如，PagingToolbar还是旧Store的，需要重新绑定之； 某些plugins需要在新数据的配合下再配置配置。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
    另外一个Ext.data.Store对象。The new Ext.data.Store object
  • colModel : Ext.grid.ColumnModel
    另外一个Ext.grid.ColumnModel对象。The new Ext.grid.ColumnModel object
返回值：
  • void
GridPanel
getGridEl() : Element
返回Grid的元素。Returns the grid's underl...
返回Grid的元素。Returns the grid's underlying element.
参数项：
  • None.
返回值：
  • Element
    元素。The element
GridPanel
getSelectionModel() : Ext.grid.AbstractSelectionModel
返回grid的SelectionModel。Returns the g...
返回grid的SelectionModel。Returns the grid's SelectionModel.
参数项：
  • None.
返回值：
  • Ext.grid.AbstractSelectionModel
    which provides either cell or row selectability.
GridPanel
getStore() : Store对象。The store
返回Grid的Data store。Returns the grid'...
返回Grid的Data store。Returns the grid's data store.
参数项：
  • None.
返回值：
  • Store对象。The store
GridPanel
getColumnModel() : Ext.grid.ColumnModel
返回Grid的列模型（ColumnModel）。Returns the...
返回Grid的列模型（ColumnModel）。Returns the grid's ColumnModel.
参数项：
  • None.
返回值：
  • Ext.grid.ColumnModel
    列模型。The column model
GridPanel
getView() : Ext.grid.GridView
返回Grid的GridView对象。Returns the grid'...
返回Grid的GridView对象。Returns the grid's GridView object.
参数项：
  • None.
返回值：
  • Ext.grid.GridView
    GridView对象。The grid view
GridPanel
getDragDropText() : String
获取GRID拖动的代理文本（drag proxy text），默认返回...
获取GRID拖动的代理文本（drag proxy text），默认返回this.ddText。Called to get grid's drag proxy text, by default returns this.ddText.
参数项：
  • None.
返回值：
  • String
    GRID拖动的代理文本。The text
GridPanel
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeedit()
当一个单元格被切换到编辑之前触发。编辑的事件对象会有下列的属性： Fi...
当一个单元格被切换到编辑之前触发。编辑的事件对象会有下列的属性： Fires before cell editing is triggered. The edit event object has the following properties
  • grid - grid本身。This grid
  • record - 正在编辑的record。The record being edited
  • field - 正在编辑的字段名。The field name being edited
  • value - 正在设置的值（value）。The value for the field being edited.
  • row - grid行索引。The grid row index
  • column - grid列索引。The grid column index
  • cancel - 由处理函数返回的布尔值，决定true为取消编辑，否则为false。Set this to true to cancel the edit or return false from your handler.
侦听器会传入以下的参数：
  • None.
 EditorGridPanel
afteredit()
当一个单元格被编辑后触发。Fires after a cell is ...
当一个单元格被编辑后触发。Fires after a cell is edited. The edit event object has the following properties
  • grid - grid本身。This grid
  • record - 正在编辑的record。The record being edited
  • field - 正在编辑的字段名。The field name being edited
  • value - 正在设置的值（value）。The value being set
  • originalValue - 在编辑之前的原始值。The original value for the field, before the edit.
  • row - grid行索引。The grid row index
  • column - grid行索引。The grid column index
侦听器会传入以下的参数：
  • None.
 EditorGridPanel
validateedit()
编辑单元格后触发，但发生在更改值被设置到record之前...
编辑单元格后触发，但发生在更改值被设置到record之前。如果返回false即取消更改。编辑的事件有以下属性： 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 - grid本身。This grid
  • record - 正在编辑的record。The record being edited
  • field - 正在编辑的字段名。The field name being edited
  • value - 正在设置的值（value）。The value being set
  • originalValue - 在编辑之前的原始值。The original value for the field, before the edit.
  • row - grid行索引。The grid row index
  • column - grid行索引。The grid column index
  • cancel - 由处理函数返回的布尔值，决定true为取消编辑，否则为false。Set this to true to cancel the edit or return false from your handler.
侦听器会传入以下的参数：
  • None.
 EditorGridPanel
click()
整个Grid被单击的原始事件。The raw click event...
整个Grid被单击的原始事件。The raw click event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
dblclick()
整个Grid被双击的原始事件。The raw dblclick ev...
整个Grid被双击的原始事件。The raw dblclick event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
contextmenu()
整个Grid被右击的原始事件。The raw contextmenu...
整个Grid被右击的原始事件。The raw contextmenu event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mousedown()
整个Grid的mousedown的原始事件。The raw mous...
整个Grid的mousedown的原始事件。The raw mousedown event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseup()
整个Grid的mouseup的原始事件。The raw mouseu...
整个Grid的mouseup的原始事件。The raw mouseup event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseover()
整个Grid的mouseover的原始事件。The raw mous...
整个Grid的mouseover的原始事件。The raw mouseover event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseout()
整个Grid的mouseout的原始事件。The raw mouse...
整个Grid的mouseout的原始事件。The raw mouseout event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
keypress()
整个Grid的keypress的原始事件。The raw keypr...
整个Grid的keypress的原始事件。The raw keypress event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
keydown()
整个Grid的keydown的原始事件。The raw keydow...
整个Grid的keydown的原始事件。The raw keydown event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
cellmousedown()
当单元格被单击之前触发。Fires before a cell is...
当单元格被单击之前触发。Fires before a cell is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowmousedown()
当行被单击之前触发。Fires before a row is cl...
当行被单击之前触发。Fires before a row is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headermousedown()
当头部被单击之前触发。Fires before a header i...
当头部被单击之前触发。Fires before a header is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
cellclick()
当单元格被点击时触发。单击格的数据保存在Record。要在侦听器函数...
当单元格被点击时触发。单击格的数据保存在Record。要在侦听器函数内访问数据，可按照以下的办法： 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:

侦听器会传入以下的参数：

  • None.
    •
GridPanel
celldblclick()
单元格（cell）被双击时触发。Fires when a cell ...
单元格（cell）被双击时触发。Fires when a cell is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowclick()
行（row）被单击时触发。Fires when a row is c...
行（row）被单击时触发。Fires when a row is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowdblclick()
行（row）被双击时触发。Fires when a row is d...
行（row）被双击时触发。Fires when a row is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headerclick()
头部（header）被单击时触发。Fires when a head...
头部（header）被单击时触发。Fires when a header is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headerdblclick()
头部（header）被双击时触发。Fires when a head...
头部（header）被双击时触发。Fires when a header cell is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowcontextmenu()
行（row）被右击时触发。Fires when a row is r...
行（row）被右击时触发。Fires when a row is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
cellcontextmenu()
单元格（cell）被右击时触发。Fires when a cell ...
单元格（cell）被右击时触发。Fires when a cell is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headercontextmenu()
头部（header）被右击时触发。Fires when a head...
头部（header）被右击时触发。Fires when a header is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
bodyscroll()
当body元素被滚动后触发。Fires when the body ...
当body元素被滚动后触发。Fires when the body element is scrolled
侦听器会传入以下的参数：
  • None.
 GridPanel
columnresize()
当用户调整某个列（column）大小时触发。Fires when t...
当用户调整某个列（column）大小时触发。Fires when the user resizes a column
侦听器会传入以下的参数：
  • None.
 GridPanel
columnmove()
当用户移动某个列（column）时触发。Fires when the...
当用户移动某个列（column）时触发。Fires when the user moves a column
侦听器会传入以下的参数：
  • None.
 GridPanel
sortchange()
当行（row）开始被拖动时触发。Fires when the gri...
当行（row）开始被拖动时触发。Fires when the grid's store sort changes
侦听器会传入以下的参数：
  • None.
 GridPanel
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.grid.GridDragZone

包： | Extgrid
定义的文件： | GridDD.js
类全称： | Ext.grid.GridDragZone
继承自于： | Ext.dd.DragZone

A customized implementation of a 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 DropZone must be created who's template method implementations of onNodeEnter, onNodeOver, onNodeOut and onNodeDrop

are able to process the data which is provided.

配置项

配置项 |  | 定义者
 | containerScroll : Boolean 设为True 用来将此容器在Scrollmanager上注册,使得在拖... 设为True 用来将此容器在Scrollmanager上注册,使得在拖动操作发生时可以自动卷动。True to register this container with the Scrollmanager for auto scrolling during drag operations. | DragZone
 | hlColor : String 第二个参数:hlColor 用于在一次失败的拖动操作后调用afterR... 第二个参数:hlColor 用于在一次失败的拖动操作后调用afterRepair方法会用在此设定的颜色(默认颜色为亮蓝"c3daf9")来标识可见的拽源 The color to use when visually highlighting the drag source in the afterRepair method after a failed drop (defaults to "c3daf9" - light blue) | DragZone
 | dropAllowed : String 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 | DragSource
 | dropNotAllowed : String 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-no... 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-nodrop"）。 | DragSource

公告属性

属性 |  | 定义者
 | dragData: Object This property contains the data r... This property contains the data representing the dragged object. This data is set up by the implementation of the getDragData method. It must contain a ddel property, but can contain any other data according to the application's needs. | DragZone

公共方法

方法 定义者
GridDragZone()
参数项：
  • None.
返回值：
  • void
GridDragZone
getDragData() : Object
返回与拖动源关联的数据对象
返回与拖动源关联的数据对象
参数项：
  • None.
返回值：
  • Object
    data 包含自定义数据的对象
DragSource
onInitDrag( Number x, Number y ) : Boolean
该方法在拖拽动作开始，初始化代理元素时调用，默认情况下，它克隆了thi...
该方法在拖拽动作开始，初始化代理元素时调用，默认情况下，它克隆了this.dragData.ddel。Called once drag threshold has been reached to initialize the proxy element. By default, it clones the this.dragData.ddel.
参数项：
  • x : Number
    被点击的拖拽对象的X坐标The x position of the click on the dragged object
  • y : Number
    被点击的拖拽对象的y坐标The y position of the click on the dragged object
返回值：
  • Boolean
    该方法返回一个布尔常量,当返回true时,表示继续(保持)拖拽,返回false时,表示取消拖拽true to continue the drag, false to cancel
DragZone
afterRepair( Event e, String id )
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
getRepairXY( Object target, Event e, String id )
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Object
    DD目标
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
DragZone( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DragZone
DragSource( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DragSource
beforeDragEnter( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。...
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。该动作可被取消onDragEnter。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragOver( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动...
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
cachedTarget( Ext.dd.DragDrop target, Event e, String id )
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • void
DragSource
beforeDragOut( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作...
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeInvalidDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    拖动元素的id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
onBeforeDrag( Object data, Event e ) : Boolean
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该...
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • data : Object
    与落下目标共享的自定义数据对象
  • e : Event
    事件对象
返回值：
  • Boolean
    isValid True的话拖动事件有效，否则false取消
DragSource
onStartDrag( Number x, Number y )
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在...
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在该函数中取消拖动。
参数项：
  • x : Number
    在拖动对象身上单击点的x值
  • y : Number
    在拖动对象身上单击点的y值
返回值：
  • void
DragSource
getProxy() : Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • Ext.dd.StatusProxy
    proxy StatusProxy对象
DragSource
hideProxy()
隐藏拖动源的Ext.dd.StatusProxy
隐藏拖动源的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • void
DragSource

公共事件

这个类没有公告事件。


类Ext.grid.GridEditor

包： | Extgrid
定义的文件： | GridEditor.js
类全称： | Ext.grid.GridEditor
继承自于： | Object
private This is a support class used internally by the Grid components

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.grid.GridPanel

包： | Extgrid
定义的文件： | GridPanel.js
类全称： | Ext.grid.GridPanel
继承自于： | Ext.Panel

此类系基于Grid控件的一个面板组件，呈现了Grid的主要交互接口。
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

用法 Usage:
var grid = new Ext.grid.GridPanel({
    store: new Ext.data.Store({
        reader: reader,
        data: xg.dummyData
    }),
    columns: [
        {id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: "Change", width: 120, sortable: true, dataIndex: 'change'},
        {header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    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 Checkbox Selection and Horizontal Scrolling',
    iconCls:'icon-grid'
});
注意 Notes:
  • 尽管本类是由Panel类继承而得到的，但是不支持其基类的某些功能，不能都做到好像一般Panel类那样的方法，如autoScroll、autoWidth、layout、items等…… 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.
  • Grid需要一个宽度来显示其所有的列，也需要一个高度来滚动列出所有的行。这些尺寸都通过配置项height 和width来精确地指定， 又或者将Grid放置进入一个带有{@link Ext.Container#layout 某种布局风格}的{@link Ext.Container 容器}中去，让上层容器来管理子容器的尺寸大小。例如指定layout为“fit”的布局就可以很好地自适应容器的拉伸了。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').
  • 要访问GRID中的数据，就必须通过由Store封装的数据模型。参与cellclick事件。To access the data in a Grid, it is necessary to use the data model encapsulated by the Store. See the cellclick event.

配置项

配置项 定义者
store : Ext.data.Store
Grid应使用Ext.data.Store作为其数据源（必须的）。Th...
Grid应使用Ext.data.Store作为其数据源（必须的）。The Ext.data.Store the grid should use as its data source (required).
GridPanel
cm : Object
colModel的简写方式。Shorthand for colModel.
colModel的简写方式。Shorthand for colModel.
GridPanel
colModel : Object
渲染Grid所使用的Ext.grid.ColumnModel（必须的）...
渲染Grid所使用的Ext.grid.ColumnModel（必须的）。The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
sm : Object
selModel的简写方式。Shorthand for selModel.
selModel的简写方式。Shorthand for selModel.
GridPanel
selModel : Object
AbstractSelectionModel的子类，以为Grid提供选...
AbstractSelectionModel的子类，以为Grid提供选区模型（selection model）。（如不指定则默认为Ext.grid.RowSelectionModel）。Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext.grid.RowSelectionModel if not specified).
GridPanel
columns : Array
自动创建列模型（ColumnModel）的数组。An array of...
自动创建列模型（ColumnModel）的数组。An array of columns to auto create a ColumnModel
GridPanel
maxHeight : Number
设置Grid的高度最大值（若autoHeight关闭则忽略）。Sets...
设置Grid的高度最大值（若autoHeight关闭则忽略）。Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
disableSelection : Boolean
True表示为禁止grid的选区功能（默认为false）——若指定了S...
True表示为禁止grid的选区功能（默认为false）——若指定了SelectionModel则忽略。True to disable selections in the grid (defaults to false). - ignored if a SelectionModel is specified
GridPanel
enableColumnMove : Boolean
True表示为激活列的拖动（默认为true）。True to enab...
True表示为激活列的拖动（默认为true）。True to enable drag and drop reorder of columns.
GridPanel
enableColumnResize : Boolean
False 表示为关闭列的大小调节功能（默认为true）。False ...
False 表示为关闭列的大小调节功能（默认为true）。False to turn off column resizing for the whole grid (defaults to true).
GridPanel
viewConfig : Object
作用在grid's UI试图上的配置项对象， 任何Ext.grid....
作用在grid's UI试图上的配置项对象， 任何Ext.grid.GridView可用的配置选项都可在这里指定。若view已指定则此项无效。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 xpecified.
GridPanel
hideHeaders : Boolean
True表示为隐藏Grid的头部（默认为false）。True to ...
True表示为隐藏Grid的头部（默认为false）。True to hide the grid's header (defaults to false).
GridPanel
minColumnWidth : Number
列的宽度的调整下限。默认为25。The minimum width a...
列的宽度的调整下限。默认为25。The minimum width a column can be resized to. Defaults to 25.
GridPanel
trackMouseOver : Boolean
True表示为鼠标移动时高亮显示（默认为true）。True to h...
True表示为鼠标移动时高亮显示（默认为true）。True to highlight rows when the mouse is over. Default is true.
GridPanel
enableDragDrop : Boolean
True表示为激活GridPanel行的拖动。True to enab...

True表示为激活GridPanel行的拖动。True to enable dragging of the selected rows of the GridPanel.

设置该项为true那样{GridPanel@link #getView GridView}的将会创建一个Ext.grid.GridDragZone实例。通过GridView的dragZone属性可访问该实例（只在Grid渲染后的条件后）。Setting this to true causes this GridPanel's GridView to create an instance of Ext.grid.GridDragZone. This is available (only after the Grid has been rendered) as the GridView's dragZone property.

要让DropZone运作起来必须一定要有onNodeEnter、onNodeOver, onNodeOut以及onNodeDrop这些实现的定义，好让能够处理data。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
enableColumnHide : Boolean
True表示为隐藏每列头部的邮件菜单（默认为true）。True to...
True表示为隐藏每列头部的邮件菜单（默认为true）。True to enable hiding of columns with the header context menu.
GridPanel
enableHdMenu : Boolean
True表示为在头部出现下拉按钮，以激活头部菜单。True to en...
True表示为在头部出现下拉按钮，以激活头部菜单。True to enable the drop down button for menu in the headers.
GridPanel
stripeRows : Boolean
True表示为显示行的分隔符（默认为true）。True to str...
True表示为显示行的分隔符（默认为true）。True to stripe the rows. Default is false.

为Grid的隔行之处都会加上x-grid3-row-alt样式。原理是利用加入背景色的CSS规则来实现，但你可以用有修饰符"!important"的background-color样式覆盖这个规则，或使用较高优先级的CSS选择符。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
autoExpandColumn : String
指定某个列之id,grid就会在这一列自动扩展宽度，以填满空白的位置，...
指定某个列之id,grid就会在这一列自动扩展宽度，以填满空白的位置，该id不能为0。The id of a column in this grid that should expand to fill unused space. This id can not be 0.
GridPanel
autoExpandMin : Number
autoExpandColumn可允许最小之宽度（有激活的话）。默认为...
autoExpandColumn可允许最小之宽度（有激活的话）。默认为50。The minimum width the autoExpandColumn can have (if enabled). defaults to 50.
GridPanel
autoExpandMax : Number
autoExpandColumn可允许最大之宽度（有激活的话）。默认为...
autoExpandColumn可允许最大之宽度（有激活的话）。默认为 1000。The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.
GridPanel
view : Object
Grid所使用的Ext.grid.GridView。该项可在rende...
Grid所使用的Ext.grid.GridView。该项可在render()调用之前设置。The Ext.grid.GridView used by the grid. This can be set before a call to render().
GridPanel
loadMask : Object
True表示为当grid加载过程中，会有一个Ext.LoadMask的...
True表示为当grid加载过程中，会有一个Ext.LoadMask的遮罩效果。默认为false。An Ext.LoadMask config or true to mask the grid while loading (defaults to false).
GridPanel
columnLines : Boolean
True表示为在列分隔处显示分隔符。默认为false。True to ...
True表示为在列分隔处显示分隔符。默认为false。True to add css for column separation lines. Default is false.
GridPanel
deferRowRender : Boolean
True表示为延时激活行渲染。默认为true。True to enab...
True表示为延时激活行渲染。默认为true。True to enable deferred row rendering. Default is true.
GridPanel
stateEvents : Array
事件名称组成的数组。这些事件触发时会导致该组件进行状态记忆（默认为["...
事件名称组成的数组。这些事件触发时会导致该组件进行状态记忆（默认为["columnmove", "columnresize", "sortchange"]）。可支持该组件身上的任意事件类型，包括浏览器原生的或自定义的，如['click', 'customerchange']。An array of events that, when fired, should trigger this component to save its state (defaults to ["columnmove", "columnresize", "sortchange"]). These can be any types of events supported by this component, including browser or custom events (e.g.,['click', 'customerchange']).

请参阅stateful有关Component状态的恢复与保存方面的解释。See stateful for an explanation of saving and restoring Component state.

 GridPanel
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : String 配置拖动代理中的文本（缺省为"{0} selected row(s... 配置拖动代理中的文本（缺省为"{0} selected row(s)"）。选中行的行数会替换到{0}。Configures the text in the drag proxy (defaults to "{0} selected row(s)"). {0} is replaced with the number of selected rows. | GridPanel
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
GridPanel( Object config )
参数项：
  • config : Object
    配置项对象 The config object
返回值：
  • void
GridPanel
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )
重新配置Grid的Store和Column Model（列模型）。视图...

重新配置Grid的Store和Column Model（列模型）。视图会重新绑定对象并刷新。Reconfigures the grid to use a different Store and Column Model. The View will be bound to the new objects and refreshed.

要注意当重新配置这个GridPanel之后，某些现有的设置可能会变为无效。比如配置项autoExpandColumn的设置在新的ColumnModel作用后就不复存在； 再譬如，PagingToolbar还是旧Store的，需要重新绑定之； 某些plugins需要在新数据的配合下再配置配置。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
    另外一个Ext.data.Store对象。The new Ext.data.Store object
  • colModel : Ext.grid.ColumnModel
    另外一个Ext.grid.ColumnModel对象。The new Ext.grid.ColumnModel object
返回值：
  • void
GridPanel
getGridEl() : Element
返回Grid的元素。Returns the grid's underl...
返回Grid的元素。Returns the grid's underlying element.
参数项：
  • None.
返回值：
  • Element
    元素。The element
GridPanel
getSelectionModel() : Ext.grid.AbstractSelectionModel
返回grid的SelectionModel。Returns the g...
返回grid的SelectionModel。Returns the grid's SelectionModel.
参数项：
  • None.
返回值：
  • Ext.grid.AbstractSelectionModel
    which provides either cell or row selectability.
GridPanel
getStore() : Store对象。The store
返回Grid的Data store。Returns the grid'...
返回Grid的Data store。Returns the grid's data store.
参数项：
  • None.
返回值：
  • Store对象。The store
GridPanel
getColumnModel() : Ext.grid.ColumnModel
返回Grid的列模型（ColumnModel）。Returns the...
返回Grid的列模型（ColumnModel）。Returns the grid's ColumnModel.
参数项：
  • None.
返回值：
  • Ext.grid.ColumnModel
    列模型。The column model
GridPanel
getView() : Ext.grid.GridView
返回Grid的GridView对象。Returns the grid'...
返回Grid的GridView对象。Returns the grid's GridView object.
参数项：
  • None.
返回值：
  • Ext.grid.GridView
    GridView对象。The grid view
GridPanel
getDragDropText() : String
获取GRID拖动的代理文本（drag proxy text），默认返回...
获取GRID拖动的代理文本（drag proxy text），默认返回this.ddText。Called to get grid's drag proxy text, by default returns this.ddText.
参数项：
  • None.
返回值：
  • String
    GRID拖动的代理文本。The text
GridPanel
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
整个Grid被单击的原始事件。The raw click event...
整个Grid被单击的原始事件。The raw click event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
dblclick()
整个Grid被双击的原始事件。The raw dblclick ev...
整个Grid被双击的原始事件。The raw dblclick event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
contextmenu()
整个Grid被右击的原始事件。The raw contextmenu...
整个Grid被右击的原始事件。The raw contextmenu event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mousedown()
整个Grid的mousedown的原始事件。The raw mous...
整个Grid的mousedown的原始事件。The raw mousedown event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseup()
整个Grid的mouseup的原始事件。The raw mouseu...
整个Grid的mouseup的原始事件。The raw mouseup event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseover()
整个Grid的mouseover的原始事件。The raw mous...
整个Grid的mouseover的原始事件。The raw mouseover event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseout()
整个Grid的mouseout的原始事件。The raw mouse...
整个Grid的mouseout的原始事件。The raw mouseout event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
keypress()
整个Grid的keypress的原始事件。The raw keypr...
整个Grid的keypress的原始事件。The raw keypress event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
keydown()
整个Grid的keydown的原始事件。The raw keydow...
整个Grid的keydown的原始事件。The raw keydown event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
cellmousedown()
当单元格被单击之前触发。Fires before a cell is...
当单元格被单击之前触发。Fires before a cell is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowmousedown()
当行被单击之前触发。Fires before a row is cl...
当行被单击之前触发。Fires before a row is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headermousedown()
当头部被单击之前触发。Fires before a header i...
当头部被单击之前触发。Fires before a header is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
cellclick()
当单元格被点击时触发。单击格的数据保存在Record。要在侦听器函数...
当单元格被点击时触发。单击格的数据保存在Record。要在侦听器函数内访问数据，可按照以下的办法： 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:

侦听器会传入以下的参数：

  • None.
    •
GridPanel
celldblclick()
单元格（cell）被双击时触发。Fires when a cell ...
单元格（cell）被双击时触发。Fires when a cell is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowclick()
行（row）被单击时触发。Fires when a row is c...
行（row）被单击时触发。Fires when a row is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowdblclick()
行（row）被双击时触发。Fires when a row is d...
行（row）被双击时触发。Fires when a row is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headerclick()
头部（header）被单击时触发。Fires when a head...
头部（header）被单击时触发。Fires when a header is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headerdblclick()
头部（header）被双击时触发。Fires when a head...
头部（header）被双击时触发。Fires when a header cell is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowcontextmenu()
行（row）被右击时触发。Fires when a row is r...
行（row）被右击时触发。Fires when a row is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
cellcontextmenu()
单元格（cell）被右击时触发。Fires when a cell ...
单元格（cell）被右击时触发。Fires when a cell is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headercontextmenu()
头部（header）被右击时触发。Fires when a head...
头部（header）被右击时触发。Fires when a header is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
bodyscroll()
当body元素被滚动后触发。Fires when the body ...
当body元素被滚动后触发。Fires when the body element is scrolled
侦听器会传入以下的参数：
  • None.
 GridPanel
columnresize()
当用户调整某个列（column）大小时触发。Fires when t...
当用户调整某个列（column）大小时触发。Fires when the user resizes a column
侦听器会传入以下的参数：
  • None.
 GridPanel
columnmove()
当用户移动某个列（column）时触发。Fires when the...
当用户移动某个列（column）时触发。Fires when the user moves a column
侦听器会传入以下的参数：
  • None.
 GridPanel
sortchange()
当行（row）开始被拖动时触发。Fires when the gri...
当行（row）开始被拖动时触发。Fires when the grid's store sort changes
侦听器会传入以下的参数：
  • None.
 GridPanel
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.grid.GridView

包： | Extgrid
定义的文件： | GridView.js
类全称： | Ext.grid.GridView
继承自于： | Ext.util.Observable

GridView类是对Ext.grid.GridPanel用户界面的封装。为 产生特殊的现实效果，可以该类的一些方法来控制用户界面。注意请不要改变用户界面的DOM结构。
This class encapsulates the user interface of an 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.

GridView类不提供其所属数据的操作方式。Grid的数据模型是交由Ext.data.Store所实现的。
This class does not provide ways to manipulate the underlying data. The data model of a Grid is held in an Ext.data.Store.

配置项

配置项 |  | 定义者
 | enableRowBody : Boolean True表示为在每一数据行的下方加入一个TR的元素，为行部分提供位置。... True表示为在每一数据行的下方加入一个TR的元素，为行部分提供位置。应使用getRowClass方法的rowParams的配置自定义行部分。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 getRowClass method's rowParams config to customize the row body. | GridView
 | emptyText : String 当GRID没有一行可供显示时出现在body的提示文本（默认为""）。D... 当GRID没有一行可供显示时出现在body的提示文本（默认为""）。Default text to display in the grid body when no rows are available (defaults to ''). | GridView
 | deferEmptyText : Boolean True表示为emptyText推迟到Store首次加载后才生效。Tr... True表示为emptyText推迟到Store首次加载后才生效。True to defer emptyText being applied until the store's first load | GridView
 | autoFill : Boolean True表示为当GRID创建后自动展开各列，自适应整个GRID。Tru... True表示为当GRID创建后自动展开各列，自适应整个GRID。True表示除了auto expand（自动展开）外，还会对超出的部分进行缩减，让每一列的尺寸适应GRID的宽度大小，阻止水平滚动条的出现。True to auto expand the columns to fit the grid when the grid is created. | GridView
 | forceFit : Boolean True表示为自动展开/缩小列的宽度以适应grid的宽度，这样就不会出... True表示为自动展开/缩小列的宽度以适应grid的宽度，这样就不会出现水平的滚动条。ColumnModel中任意的width的设置可覆盖此配置项。True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. This option overrides any width settings in the ColumnModel. | GridView
 | cellSelectorDepth : Number 在事件委托中搜索单元格的深度（默认为4）。The number of ... 在事件委托中搜索单元格的深度（默认为4）。The number of levels to search for cells in event delegation (defaults to 4) | GridView
 | rowSelectorDepth : Number 在事件委托中搜索行的深度（默认为10）。The number of l... 在事件委托中搜索行的深度（默认为10）。The number of levels to search for rows in event delegation (defaults to 10) | GridView
 | cellSelector : String 用于内部搜索单元格的选择符。The selector used to ... 用于内部搜索单元格的选择符。The selector used to find cells internally | GridView
 | rowSelector : String 用于内部搜索行的选择符。The selector used to fi... 用于内部搜索行的选择符。The selector used to find rows internally | GridView
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | dragZone: Ext.grid.GridDragZone 仅当所在的GridPanelenableDragDrop配置为... 仅当所在的GridPanelenableDragDrop配置为true时候，该项才会出现。This will only be present if the owning GridPanel was configured with enableDragDrop true. 仅当所在的GridPanel被渲染后，该项才会出现。This will only be present after the owning GridPanel has been rendered. 一个制定的DragZone实现，它提供了DragZone的模板方法的默认实现。详细内容请参阅Ext.grid.GridDragZone。A customized implementation of a DragZone which provides default implementations of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. See Ext.grid.GridDragZone for details. | GridView
 | scrollOffset: Number 预留给滚动条的空白位置（默认为19像素）。The amount o... 预留给滚动条的空白位置（默认为19像素）。The amount of space to reserve for the scrollbar (defaults to 19 pixels) | GridView
 | : String “列”菜单项的提示文字。The text displayed in... “列”菜单项的提示文字。The text displayed in the "Columns" menu item | GridView

公共方法

方法 定义者
GridView( Object config )
参数项：
  • config : Object
返回值：
  • void
GridView
deferEmptyText( Record record, Number index, Object rowParams, Store store ) : String
重写该函数就会在渲染过程中修改每一行的CSS样式类。同样地，你也可以通...
重写该函数就会在渲染过程中修改每一行的CSS样式类。同样地，你也可以通过制定行模板（row template）的参数修改当前行样式，达到控制行渲染的目的，这个参数是rowParams。该函数应该返回一个CSS样式类的名称（如没有就空白字符串''），应用当行所在的div元素上。可支持定义多个样式类的名称，用空白字符分割开即可。如（'my-class another-class'）
参数项：
  • record : Record
    当然行所关联的Ext.data.Record对象。The Ext.data.Record corresponding to the current row.
  • index : Number
    行索引。The row index
  • rowParams : Object
    传入到行模板（row template）的配置项对象，以便渲染过程中可控制每行的部分是怎么显示的（可选的）。注意该对象只会在enableRowBody = true时有效，不然的话会被忽略。对象可以包含下例的属性： A config object that is passed to the row template during rendering that allows customization of various aspects of a body row, if applicable. Note that this object will only be applied if enableRowBody = true, otherwise it will be ignored. The object may contain any of these properties:
    • body : String
      渲染成为单元格主体部分内容的HTML片断（默认为''）。An HTML fragment to be rendered as the cell's body content (defaults to '').
    • bodyStyle : String
      加入到行所在TR元素的CSS样式（默认为''）。A CSS style string that will be applied to the row's TR style attribute (defaults to '').
    • cols : Number
      列的数量，与body 行的TDcolspan属性紧密联系（默认为当前grid的列数）。The column count to apply to the body row's TD colspan attribute (defaults to the current column count of the grid).
  • store : Store
    与此GRID所绑定的Ext.data.Store对象。The Ext.data.Store this grid is bound to
返回值：
  • String
    行新加入的样式类。a CSS class name to add to the row.
GridView
findRow( Element el ) : 行索引，或null就表示目标元素不在此GridView的某行中。The row element, or null if the target element is not within a row of this GridView.
传入一个元素，返回该元素所在行的HtmlElement元素。Retur...
传入一个元素，返回该元素所在行的HtmlElement元素。Return the HtmlElement representing the grid row which contains the passed element.
参数项：
  • el : Element
    目标元素。The target element
返回值：
  • 行索引，或null就表示目标元素不在此GridView的某行中。The row element, or null if the target element is not within a row of this GridView.
GridView
findRowIndex( Element el ) : 行索引，或false就表示目标元素不在此GridView的某行中。The row index, or false if the target element is not within a row of this GridView.
传入一个元素，返回该元素所在的行索引。Return the index...
传入一个元素，返回该元素所在的行索引。Return the index of the grid row which contains the passed element.
参数项：
  • el : Element
    目标元素。The target element
返回值：
  • 行索引，或false就表示目标元素不在此GridView的某行中。The row index, or false if the target element is not within a row of this GridView.
GridView
getRow( Number index ) : HtmlElement
指定一个行索引，返回该行的<TR> HtmlElement。Re...
指定一个行索引，返回该行的<TR> HtmlElement。Return the <TR> HtmlElement which represents a Grid row for the specified index.
参数项：
  • index : Number
    行索引。The row index
返回值：
  • HtmlElement
    The <TR>元素。lement.
GridView
getCell( Number row, Number col ) : HtmlElement
指定一个单元格的坐标，返回该单元格的<TD> HtmlEleme...
指定一个单元格的坐标，返回该单元格的<TD> HtmlElement。Returns the grid's <TD> HtmlElement at the specified coordinates.
参数项：
  • row : Number
    定位单元格的行索引。The row index in which to find the cell.
  • col : Number
    单元格的列索引。The column index of the cell.
返回值：
  • HtmlElement
    坐标所在的<TD>元素。The <TD> at the specified coordinates.
GridView
getHeaderCell( Number index ) : HtmlElement
指定一个列索引，返回该列头部的单元格的<TD> HtmlElem...
指定一个列索引，返回该列头部的单元格的<TD> HtmlElement。Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index.
参数项：
  • index : Number
    列索引。The column index
返回值：
  • HtmlElement
    The <TD>。元素 element.
GridView
scrollToTop()
滚动grid到顶部。Scrolls the grid to the top
滚动grid到顶部。Scrolls the grid to the top
参数项：
  • None.
返回值：
  • void
GridView
focusRow( Number row )
让指定的行获得焦点。Focuses the specified row.
让指定的行获得焦点。Focuses the specified row.
参数项：
  • row : Number
    行索引。The row index
返回值：
  • void
GridView
focusCell( Number row, Number col )
让指定的单元格获得焦点。Focuses the specified c...
让指定的单元格获得焦点。Focuses the specified cell.
参数项：
  • row : Number
    行索引。The row index
  • col : Number
    列索引。The column index
返回值：
  • void
GridView
refresh( Boolean headersToo )
刷新grid UI Refreshs the grid UI
刷新grid UI Refreshs the grid UI
参数项：
  • headersToo : Boolean
    （可选的）True表示为也刷新头部 (optional) True to also refresh the headers
返回值：
  • void
GridView
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforerowremoved()
当行被移除之前触发。Internal UI Event. Fired...
当行被移除之前触发。Internal UI Event. Fired before a row is removed.
侦听器会传入以下的参数：
  • None.
 GridView
beforerowsinserted()
插入行之前触发。Internal UI Event. Fired b...
插入行之前触发。Internal UI Event. Fired before rows are inserted.
侦听器会传入以下的参数：
  • None.
 GridView
beforerefresh()
在视图刷新之前触发。Internal UI Event. Fired...
在视图刷新之前触发。Internal UI Event. Fired before the view is refreshed.
侦听器会传入以下的参数：
  • None.
 GridView
rowremoved()
当有行被移除时触发。Internal UI Event. Fired...
当有行被移除时触发。Internal UI Event. Fired after a row is removed.
侦听器会传入以下的参数：
  • None.
 GridView
rowsinserted()
当有行被插入时触发。Internal UI Event. Fired...
当有行被插入时触发。Internal UI Event. Fired after rows are inserted.
侦听器会传入以下的参数：
  • None.
 GridView
rowupdated()
当有一行的内容被更新后触发。Internal UI Event. F...
当有一行的内容被更新后触发。Internal UI Event. Fired after a row has been updated.
侦听器会传入以下的参数：
  • None.
 GridView
refresh()
当GridView主体刷新完毕后触发。Internal UI Eve...
当GridView主体刷新完毕后触发。Internal UI Event. Fired after the GridView's body has been refreshed.
侦听器会传入以下的参数：
  • None.
 GridView


类Ext.grid.GroupingView

包： | Extgrid
定义的文件： | GroupingView.js
类全称： | Ext.grid.GroupingView
继承自于： | Ext.grid.GridView
Adds the ability for single level grouping to the grid.
var grid = new Ext.grid.GridPanel({
    // A groupingStore is required for a GroupingView
    store: new Ext.data.GroupingStore({
        reader: reader,
        data: xg.dummyData,
        sortInfo:{field: 'company', direction: "ASC"},
        groupField:'industry'
    }),

    columns: [
        {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
        {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
        {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],

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

配置项

配置项 定义者
hideGroupedColumn : Boolean
True to hide the column that is cur...
True to hide the column that is currently grouped
GroupingView
showGroupName : Boolean
True to display the name for each s...
True to display the name for each set of grouped rows (defaults to true)
GroupingView
startCollapsed : Boolean
True to start all groups collapsed
True to start all groups collapsed
GroupingView
enableGrouping : Boolean
False to disable grouping functiona...
False to disable grouping functionality (defaults to true)
GroupingView
enableGroupingMenu : Boolean
True to enable the grouping control...
True to enable the grouping control in the column menu
GroupingView
enableNoGroups : Boolean
True to allow the user to turn off ...
True to allow the user to turn off grouping
GroupingView
emptyGroupText : String
The text to display when there is a...
The text to display when there is an empty group value
GroupingView
ignoreAdd : Boolean
True to skip refreshing the view wh...
True to skip refreshing the view when new rows are added (defaults to false)
GroupingView
groupTextTpl : String
The template used to render the gro...
The template used to render the group header. 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 groupRenderer is specified, it is the result of a call to that.

  • gvalue : Object

    The raw value of the group field.

  • text : String

    The configured header (If showGroupName is true) plus the renderedgroup 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 Ext.XTemplate for information on how to format data using a template.
GroupingView
groupRenderer : Function
The function used to format the gro...
The function used to format the grouping field value for display in the group header. Should return a string value. This configuration object is in fact a configuration option of the column definition in the grid's ColumnModel, it is included here for ease of reference.

This takes 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.

 GroupingView
header : String
The text with which to prefix the g...
The text with which to prefix the group field value in the group header line.
GroupingView
groupByText : String
Text displayed in the grid header m...
Text displayed in the grid header menu for grouping by a column (defaults to 'Group By This Field').
GroupingView
showGroupsText : String
Text displayed in the grid header f...
Text displayed in the grid header for enabling/disabling grouping (defaults to 'Show in Groups').
GroupingView
enableRowBody : Boolean
True表示为在每一数据行的下方加入一个TR的元素，为行部分提供位置。...
True表示为在每一数据行的下方加入一个TR的元素，为行部分提供位置。应使用getRowClass方法的rowParams的配置自定义行部分。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 getRowClass method's rowParams config to customize the row body.
GridView
emptyText : String
当GRID没有一行可供显示时出现在body的提示文本（默认为""）。D...
当GRID没有一行可供显示时出现在body的提示文本（默认为""）。Default text to display in the grid body when no rows are available (defaults to '').
GridView
deferEmptyText : Boolean
True表示为emptyText推迟到Store首次加载后才生效。Tr...
True表示为emptyText推迟到Store首次加载后才生效。True to defer emptyText being applied until the store's first load
GridView
autoFill : Boolean
True表示为当GRID创建后自动展开各列，自适应整个GRID。Tru...
True表示为当GRID创建后自动展开各列，自适应整个GRID。True表示除了auto expand（自动展开）外，还会对超出的部分进行缩减，让每一列的尺寸适应GRID的宽度大小，阻止水平滚动条的出现。True to auto expand the columns to fit the grid when the grid is created.
GridView
forceFit : Boolean
True表示为自动展开/缩小列的宽度以适应grid的宽度，这样就不会出...
True表示为自动展开/缩小列的宽度以适应grid的宽度，这样就不会出现水平的滚动条。ColumnModel中任意的width的设置可覆盖此配置项。True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. This option overrides any width settings in the ColumnModel.
GridView
cellSelectorDepth : Number
在事件委托中搜索单元格的深度（默认为4）。The number of ...
在事件委托中搜索单元格的深度（默认为4）。The number of levels to search for cells in event delegation (defaults to 4)
GridView
rowSelectorDepth : Number
在事件委托中搜索行的深度（默认为10）。The number of l...
在事件委托中搜索行的深度（默认为10）。The number of levels to search for rows in event delegation (defaults to 10)
GridView
cellSelector : String
用于内部搜索单元格的选择符。The selector used to ...
用于内部搜索单元格的选择符。The selector used to find cells internally
GridView
rowSelector : String
用于内部搜索行的选择符。The selector used to fi...
用于内部搜索行的选择符。The selector used to find rows internally
GridView
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | dragZone: Ext.grid.GridDragZone 仅当所在的GridPanelenableDragDrop配置为... 仅当所在的GridPanelenableDragDrop配置为true时候，该项才会出现。This will only be present if the owning GridPanel was configured with enableDragDrop true. 仅当所在的GridPanel被渲染后，该项才会出现。This will only be present after the owning GridPanel has been rendered. 一个制定的DragZone实现，它提供了DragZone的模板方法的默认实现。详细内容请参阅Ext.grid.GridDragZone。A customized implementation of a DragZone which provides default implementations of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. See Ext.grid.GridDragZone for details. | GridView
 | scrollOffset: Number 预留给滚动条的空白位置（默认为19像素）。The amount o... 预留给滚动条的空白位置（默认为19像素）。The amount of space to reserve for the scrollbar (defaults to 19 pixels) | GridView
 | : String “列”菜单项的提示文字。The text displayed in... “列”菜单项的提示文字。The text displayed in the "Columns" menu item | GridView

公共方法

方法 定义者
GroupingView( Object config )
参数项：
  • config : Object
返回值：
  • void
GroupingView
toggleGroup( String groupId, Boolean expanded )
Toggles the specified group if no v...
Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.
参数项：
  • groupId : String
    The groupId assigned to the group (see getGroupId)
  • expanded : Boolean
    (optional)
返回值：
  • void
GroupingView
toggleAllGroups( Boolean expanded )
Toggles all groups if no value is p...
Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.
参数项：
  • expanded : Boolean
    (optional)
返回值：
  • void
GroupingView
expandAllGroups()
Expands all grouped rows.
Expands all grouped rows.
参数项：
  • None.
返回值：
  • void
GroupingView
collapseAllGroups()
Collapses all grouped rows.
Collapses all grouped rows.
参数项：
  • None.
返回值：
  • void
GroupingView
getGroupId( String value ) : String
Dynamically tries to determine the ...
Dynamically tries to determine the groupId of a specific value
参数项：
  • value : String
返回值：
  • String
    The group id
GroupingView
GridView( Object config )
参数项：
  • config : Object
返回值：
  • void
GridView
deferEmptyText( Record record, Number index, Object rowParams, Store store ) : String
重写该函数就会在渲染过程中修改每一行的CSS样式类。同样地，你也可以通...
重写该函数就会在渲染过程中修改每一行的CSS样式类。同样地，你也可以通过制定行模板（row template）的参数修改当前行样式，达到控制行渲染的目的，这个参数是rowParams。该函数应该返回一个CSS样式类的名称（如没有就空白字符串''），应用当行所在的div元素上。可支持定义多个样式类的名称，用空白字符分割开即可。如（'my-class another-class'）
参数项：
  • record : Record
    当然行所关联的Ext.data.Record对象。The Ext.data.Record corresponding to the current row.
  • index : Number
    行索引。The row index
  • rowParams : Object
    传入到行模板（row template）的配置项对象，以便渲染过程中可控制每行的部分是怎么显示的（可选的）。注意该对象只会在enableRowBody = true时有效，不然的话会被忽略。对象可以包含下例的属性： A config object that is passed to the row template during rendering that allows customization of various aspects of a body row, if applicable. Note that this object will only be applied if enableRowBody = true, otherwise it will be ignored. The object may contain any of these properties:
    • body : String
      渲染成为单元格主体部分内容的HTML片断（默认为''）。An HTML fragment to be rendered as the cell's body content (defaults to '').
    • bodyStyle : String
      加入到行所在TR元素的CSS样式（默认为''）。A CSS style string that will be applied to the row's TR style attribute (defaults to '').
    • cols : Number
      列的数量，与body 行的TDcolspan属性紧密联系（默认为当前grid的列数）。The column count to apply to the body row's TD colspan attribute (defaults to the current column count of the grid).
  • store : Store
    与此GRID所绑定的Ext.data.Store对象。The Ext.data.Store this grid is bound to
返回值：
  • String
    行新加入的样式类。a CSS class name to add to the row.
GridView
findRow( Element el ) : 行索引，或null就表示目标元素不在此GridView的某行中。The row element, or null if the target element is not within a row of this GridView.
传入一个元素，返回该元素所在行的HtmlElement元素。Retur...
传入一个元素，返回该元素所在行的HtmlElement元素。Return the HtmlElement representing the grid row which contains the passed element.
参数项：
  • el : Element
    目标元素。The target element
返回值：
  • 行索引，或null就表示目标元素不在此GridView的某行中。The row element, or null if the target element is not within a row of this GridView.
GridView
findRowIndex( Element el ) : 行索引，或false就表示目标元素不在此GridView的某行中。The row index, or false if the target element is not within a row of this GridView.
传入一个元素，返回该元素所在的行索引。Return the index...
传入一个元素，返回该元素所在的行索引。Return the index of the grid row which contains the passed element.
参数项：
  • el : Element
    目标元素。The target element
返回值：
  • 行索引，或false就表示目标元素不在此GridView的某行中。The row index, or false if the target element is not within a row of this GridView.
GridView
getRow( Number index ) : HtmlElement
指定一个行索引，返回该行的<TR> HtmlElement。Re...
指定一个行索引，返回该行的<TR> HtmlElement。Return the <TR> HtmlElement which represents a Grid row for the specified index.
参数项：
  • index : Number
    行索引。The row index
返回值：
  • HtmlElement
    The <TR>元素。lement.
GridView
getCell( Number row, Number col ) : HtmlElement
指定一个单元格的坐标，返回该单元格的<TD> HtmlEleme...
指定一个单元格的坐标，返回该单元格的<TD> HtmlElement。Returns the grid's <TD> HtmlElement at the specified coordinates.
参数项：
  • row : Number
    定位单元格的行索引。The row index in which to find the cell.
  • col : Number
    单元格的列索引。The column index of the cell.
返回值：
  • HtmlElement
    坐标所在的<TD>元素。The <TD> at the specified coordinates.
GridView
getHeaderCell( Number index ) : HtmlElement
指定一个列索引，返回该列头部的单元格的<TD> HtmlElem...
指定一个列索引，返回该列头部的单元格的<TD> HtmlElement。Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index.
参数项：
  • index : Number
    列索引。The column index
返回值：
  • HtmlElement
    The <TD>。元素 element.
GridView
scrollToTop()
滚动grid到顶部。Scrolls the grid to the top
滚动grid到顶部。Scrolls the grid to the top
参数项：
  • None.
返回值：
  • void
GridView
focusRow( Number row )
让指定的行获得焦点。Focuses the specified row.
让指定的行获得焦点。Focuses the specified row.
参数项：
  • row : Number
    行索引。The row index
返回值：
  • void
GridView
focusCell( Number row, Number col )
让指定的单元格获得焦点。Focuses the specified c...
让指定的单元格获得焦点。Focuses the specified cell.
参数项：
  • row : Number
    行索引。The row index
  • col : Number
    列索引。The column index
返回值：
  • void
GridView
refresh( Boolean headersToo )
刷新grid UI Refreshs the grid UI
刷新grid UI Refreshs the grid UI
参数项：
  • headersToo : Boolean
    （可选的）True表示为也刷新头部 (optional) True to also refresh the headers
返回值：
  • void
GridView
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforerowremoved()
当行被移除之前触发。Internal UI Event. Fired...
当行被移除之前触发。Internal UI Event. Fired before a row is removed.
侦听器会传入以下的参数：
  • None.
 GridView
beforerowsinserted()
插入行之前触发。Internal UI Event. Fired b...
插入行之前触发。Internal UI Event. Fired before rows are inserted.
侦听器会传入以下的参数：
  • None.
 GridView
beforerefresh()
在视图刷新之前触发。Internal UI Event. Fired...
在视图刷新之前触发。Internal UI Event. Fired before the view is refreshed.
侦听器会传入以下的参数：
  • None.
 GridView
rowremoved()
当有行被移除时触发。Internal UI Event. Fired...
当有行被移除时触发。Internal UI Event. Fired after a row is removed.
侦听器会传入以下的参数：
  • None.
 GridView
rowsinserted()
当有行被插入时触发。Internal UI Event. Fired...
当有行被插入时触发。Internal UI Event. Fired after rows are inserted.
侦听器会传入以下的参数：
  • None.
 GridView
rowupdated()
当有一行的内容被更新后触发。Internal UI Event. F...
当有一行的内容被更新后触发。Internal UI Event. Fired after a row has been updated.
侦听器会传入以下的参数：
  • None.
 GridView
refresh()
当GridView主体刷新完毕后触发。Internal UI Eve...
当GridView主体刷新完毕后触发。Internal UI Event. Fired after the GridView's body has been refreshed.
侦听器会传入以下的参数：
  • None.
 GridView


类Ext.grid.HeaderDragZone

包： | Extgrid
定义的文件： | ColumnDD.js
类全称： | Ext.grid.HeaderDragZone
继承自于： | Object
这是一个Grid组件内部会使用的类。This is a support class used internally by the Grid components

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


Column
    NumberColumn

Class Ext.grid.NumberColumn

Package: | Ext.grid
Defined In: | Column.js
Class: | NumberColumn
Extends: | Column

A Column definition class which renders a numeric data field according to a format string. See the xtype config option of Ext.grid.ColumnModel for more details.

Config Options

Config Options Defined By
align : String
Set the CSS text-align property of the column. Defaults to undefined.
Column
css : String
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to...
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.
Column
dataIndex : String
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's valu...
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value. If not specified, the column's index is used as an index into the Record's data Array.
Column
editable : Boolean
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The in...
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The initial configuration may be dynamically altered using Ext.grid.ColumnModel.setEditable().
Column
editor : Ext.form.Field
The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See editable also.
Column
fixed : Boolean
true if the column width cannot be changed. Defaults to false.
Column
format : String
A formatting string as used by Ext.util.Format.number to format a numeric value for this Column (defaults to '0,000....
A formatting string as used by Ext.util.Format.number to format a numeric value for this Column (defaults to '0,000.00').
NumberColumn
groupName : String
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with which to...
If the grid is being rendered by an 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 groupRenderer and Ext.grid.GroupingView.showGroupName.
Column
groupRenderer : Function
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to f...

If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. If a groupRenderer is not specified, the configured renderer will be called; if a renderer is also not specified the new value of the group field will be used.

The called function (either the groupRenderer or 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.

Column
groupable : Boolean
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to disable the header menu item t...
If the grid is being rendered by an 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 groupName.
Column
header : String
The header text to be used as innerHTML (html tags are accepted) to display in the Grid view.
Column
hidden : Boolean
true to hide the column. Defaults to false.
Column
hideable : Boolean
Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding globally...
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 Ext.grid.GridPanel.enableColumnHide instead.
Column
id : String
A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to create a ...
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.x-grid3-td-id
The Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier.
Column
menuDisabled : Boolean
true to disable the column menu. Defaults to false.
Column
renderer : Mixed
For an alternative to specifying a renderer see xtype (optional) A renderer is an "interceptor" method which can be ...

For an alternative to specifying a renderer see 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 Ext.util.Format class which provides a renderer function.
  • An object specifying both the renderer function, and its execution scope (this reference) eg:
    {
    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 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 scope.
Column
resizable : Boolean
false to disable column resizing. Defaults to true.
Column
scope : Object
The scope (this reference) in which to execute the renderer. Defaults to the Column configuration object.
Column
sortable : Boolean
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether loc...
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort.
Column
tooltip : String
A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text ...
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 ''.
Column
width : Number
The initial width in pixels of the column. The width of each column can also be affected if any of the following are...
The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:
  • Ext.grid.GridPanel.autoExpandColumn
  • Ext.grid.GridView.forceFit

    By specifying forceFit:true, 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.

  • Ext.grid.GridView.autoFill
  • Ext.grid.GridPanel.minColumnWidth

    • Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.scrollOffset can be modified to reduce or eliminate the reserved offset.

Column
xtype : String
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate rend...
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate renderer to be easily configured into a ColumnModel. The predefined Ext.grid.Column subclass types are:
  • gridcolumn : Ext.grid.Column (Default)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : 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 Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

Public Properties

Property Defined By
renderer : Function A function which returns displayable data when passed the following parameters: <div class="mdetail-params"><ul> <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li> <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li> </ul></div>
Column

Public Methods

Method Defined By
getCellEditor( Number rowIndex ) : Ext.Editor
Returns the editor defined for this column.
Returns the editor defined for this column.
Parameters:
  • rowIndex : Number
    The row index
Returns:
  • Ext.Editor
    The {@link Ext.Editor Editor} that was created to wrap the {@link Ext.form.Field Field} used to edit the cell.
Column

Public Events

This class has no public events.


类Ext.grid.PropertyColumnModel

包： | Extgrid
定义的文件： | PropertyGrid.js
类全称： | Ext.grid.PropertyColumnModel
继承自于： | Ext.grid.ColumnModel
为Ext.grid.PropertyGrid制定的列模型。一般情况下不需要直接使用该类。A custom column model for the Ext.grid.PropertyGrid.Generally it should not need to be used directly.

配置项

配置项 定义者
id : String
（可选的）默认值是按列出现的位置的序号。这就是该列的标示。该列的所有单...
（可选的）默认值是按列出现的位置的序号。这就是该列的标示。该列的所有单元格包括头部都是用这个值来创建CSS class属性。CSS Class产生的格式将是
x-grid3-td-id
。(optional) Defaults to the column's initial ordinal position. A name which identifies this column. The id is used to create a CSS class name which is applied to all table cells (including headers) in that column. The class name takes the form of
x-grid3-td-id

头部区域也有这个CSS类，但会多出x-grid3-hd，因此使用这样的
.x-grid3-hd.x-grid3-td-id
CSS选择符就可以找到头部。Ext.grid.GridPanelautoExpandColumn也是透过这个id来配置的。Header cells will also recieve 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.x-grid3-td-id
The Ext.grid.GridPanelautoExpandColumn grid config option references the column via this identifier.
ColumnModel
header : String
在Grid头部视图中显示的文字。The header text to ...
在Grid头部视图中显示的文字。The header text to display in the Grid view.
ColumnModel
dataIndex : String
（可选的）数据索引，相当于Grid记录集（Ext.data.Store...
（可选的）数据索引，相当于Grid记录集（Ext.data.Store里面的Ext.data.Record ）中字段名称，字段的值用于展示列里面的值（column's value）。如不指定，Record的数据列中的索引将作为列的索引。(optional) The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value. If not specified, the column's index is used as an index into the Record's data Array.
ColumnModel
width : Number
（可选的）列的初始宽度（像素）。如采用Ext.grid.Gridaut...
（可选的）列的初始宽度（像素）。如采用Ext.grid.GridautoSizeColumns性能较差。(optional) The initial width in pixels of the column. This is ignored if the Grid's view is configured with forceFit true.
ColumnModel
sortable : Boolean
（可选的）True表示为可在该列上进行排列。默认为defaultSor...
（可选的）True表示为可在该列上进行排列。默认为defaultSortable属性的值。由Ext.data.StoreremoteSort指定本地排序抑或是远程排序。(optional) True if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.StoreremoteSort.
ColumnModel
fixed : Boolean
(optional) True表示为列的宽度不能够改变。默认为fasl...
(optional) True表示为列的宽度不能够改变。默认为fasle。True if the column width cannot be changed. Defaults to false.
ColumnModel
resizable : Boolean
（可选的）False禁止列可变动大小。默认为true。(optiona...
（可选的）False禁止列可变动大小。默认为true。(optional) False to disable column resizing. Defaults to true.
ColumnModel
menuDisabled : Boolean
True表示禁止列菜单。默认为fasle。(optional) Tru...
True表示禁止列菜单。默认为fasle。(optional) True to disable the column menu. Defaults to false.
ColumnModel
hidden : Boolean
(optional) （可选的）True表示隐藏列，默认为false。...
(optional) （可选的）True表示隐藏列，默认为false。True to hide the column. Defaults to false.
ColumnModel
tooltip : String
(optional) （可选的）在列头部显示的提示文字。如果Quick...
(optional) （可选的）在列头部显示的提示文字。如果Quicktips的功能有被打开，那么就会用Quicktps来显示，否则就会用HTML的title属性来显示。默认为""。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 ''.
ColumnModel
renderer : Function
（可选的）该函数用于加工单元格的原始数据，转换成为HTML并返回给Gr...
（可选的）该函数用于加工单元格的原始数据，转换成为HTML并返回给GridView进一步处理。请参阅setRenderer。如不指定，则对原始数据值进行默认地渲染。(optional) A function used to generate HTML markup for a cell given the cell's data value. See setRenderer. If not specified, the default renderer uses the raw data value.
ColumnModel
align : String
（可选的）设置列的CSS text-align属性。默认为undefi...
（可选的）设置列的CSS text-align属性。默认为undefined。(optional) Set the CSS text-align property of the column. Defaults to undefined.
ColumnModel
css : String
（可选的）设置表格中全体单元格的CSS样式（包括头部）。默认为unde...
（可选的）设置表格中全体单元格的CSS样式（包括头部）。默认为undefined。(optional) Set custom CSS for all table cells in the column (excluding headers). Defaults to undefined.
ColumnModel
hideable : Boolean
（可选的）指定false可禁止用户隐藏该列。默认为True。要全局地禁...
（可选的）指定false可禁止用户隐藏该列。默认为True。要全局地禁止Grid中所有列的隐藏性，使用Ext.grid.GridPanelenableColumnHide。(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 Ext.grid.GridPanelenableColumnHide instead.
ColumnModel
editor : Ext.form.Field
（可选的）如果Grid的编辑器支持被打开，这属性指定了用户编辑时所用的...
（可选的）如果Grid的编辑器支持被打开，这属性指定了用户编辑时所用的编辑器Ext.form.Field。(optional) The Ext.form.Field to use when editing values in this column if editing is supported by the grid.
ColumnModel
groupRenderer : Function
如果Grid是通过Ext.grid.GroupingView负责渲染的...
如果Grid是通过Ext.grid.GroupingView负责渲染的， 那么该配置项将对格式化组字段的值有用，指定一个函数就是这个格式化的函数，告知Grid怎么显示头部的组。这函数应该返回字符串。If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. Should return a string value.

可以有以下的参数: This takes the following parameters:

  • v : Object

    组字段的新值。The new value of the group field.

  • unused : undefined

    未用的参数。Unused parameter.

  • r : Ext.data.Record

    引发组变动的Record对象。The Record providing the data for the row which caused group change.

  • rowIndex : Number

    引发组变动的Record行索引。The row index of the Record which caused group change.

  • colIndex : Number

    组字段的列索引。The column index of the group field.

  • ds : Ext.data.Store

    提高数据模型的Store对象。The Store which is providing the data Model.

 ColumnModel
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | config: {Array} 传入配置到构建函数。The config passed into ... 传入配置到构建函数。The config passed into the constructor | ColumnModel
 | defaultWidth: Number 列不指定宽度时的默认值（默认为100）。The width of ... 列不指定宽度时的默认值（默认为100）。The width of columns which have no width specified (defaults to 100) | ColumnModel
 | defaultSortable: Boolean 是否默认排序（默认为false）。只对那些没有指定sortable... 是否默认排序（默认为false）。只对那些没有指定sortable的有效。Default sortable of columns which have no sortable specified (defaults to false) | ColumnModel

公共方法

方法 定义者
PropertyColumnModel( Ext.grid.Grid grid, Object source )
参数项：
  • grid : Ext.grid.Grid
    stroe所绑定的grid。The grid this store will be bound to
  • source : Object
    配置项对象数据源。The source data config object
返回值：
  • void
PropertyColumnModel
ColumnModel( Object config )
参数项：
  • config : Object
    列配置组成的数组，参阅关于本类的配置对象的更多资料。An Array of column config objects. See this class's config objects for details.
返回值：
  • void
ColumnModel
getColumnId( Number index ) : String
返回指定index列的Id。Returns the id of the...
返回指定index列的Id。Returns the id of the column at the specified index.
参数项：
  • index : Number
    列索引。The column index
返回值：
  • String
    the id
ColumnModel
setConfig( Array config )
重新配置列模型。传入一个数组，就是各个列的配置对象。要了解各个列的...

重新配置列模型。传入一个数组，就是各个列的配置对象。要了解各个列的配置说明，请参阅Config Options。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.

这会引起configchange事件的触发。GridPanel就是靠这个事件来得知其所用的列有变化并自动刷新Grid的UI。Causes the configchange event to be fired. A GridPanel using this ColumnModel will listen for this event and refresh its UI automatically.

参数项：
  • config : Array
    列配置组成的数组。Array of Column definition objects.
返回值：
  • void
ColumnModel
getColumnById( String id ) : Object
返回指定id的列。Returns the column for a s...
返回指定id的列。Returns the column for a specified id.
参数项：
  • id : String
    列id。The column id
返回值：
  • Object
    列。the column
ColumnModel
getIndexById( String id ) : Number
返回指定列id的索引。Returns the index for a ...
返回指定列id的索引。Returns the index for a specified column id.
参数项：
  • id : String
    列id The column id
返回值：
  • Number
    索引，-1表示找不到。the index, or -1 if not found
ColumnModel
moveColumn( Number oldIndex, Number newIndex )
把列从一个位置移到别处。Moves a column from one...
把列从一个位置移到别处。Moves a column from one position to another.
参数项：
  • oldIndex : Number
    移动之前的列索引。The index of the column to move.
  • newIndex : Number
    移动之后的列索引。The position at which to reinsert the coolumn.
返回值：
  • void
ColumnModel
getColumnCount( Boolean visibleOnly ) : Number
返回列数。Returns the number of columns.
返回列数。Returns the number of columns.
参数项：
  • visibleOnly : Boolean
    （可选的）传入true表示只是包含可见那些的列。Optional. Pass as true to only include visible columns.
返回值：
  • Number
ColumnModel
getColumnsBy( Function fn, Object scope ) : Array
传入一个function类型的参数，这个函数执行时会有(columnC...
传入一个function类型的参数，这个函数执行时会有(columnConfig, index)的参数送入其内，如函数返回true则加入到数组中保存并返回数组。Returns the column configs that return true by the passed function that is called with (columnConfig, index)
参数项：
  • fn : Function
  • scope : Object
    （可选的）(optional)
返回值：
  • Array
    result
ColumnModel
isSortable( Number col ) : Boolean
返回指定的列可否排序。Returns true if the spec...
返回指定的列可否排序。Returns true if the specified column is sortable.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • Boolean
ColumnModel
isMenuDisabled( Number col ) : Boolean
如果列的菜单被禁用的话，返回true。Returns true if ...
如果列的菜单被禁用的话，返回true。Returns true if the specified column menu is disabled.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • Boolean
ColumnModel
getRenderer( Number col ) : Function
返回对某个列的渲染（格式化）函数。Returns the render...
返回对某个列的渲染（格式化）函数。Returns the rendering (formatting) function defined for the column.
参数项：
  • col : Number
    列索引。The column index.
返回值：
  • Function
    用于渲染单元格的那个函数。可参阅setRenderer。The function used to render the cell. See setRenderer.
ColumnModel
setRenderer( Number col, Function fn )
设置对某个列的渲染（格式化formatting）函数 Sets th...
设置对某个列的渲染（格式化formatting）函数 Sets the rendering (formatting) function for a column. See Ext.util.Format for some default formatting functions.
参数项：
  • col : Number
    列索引。The column index
  • fn : Function
    该函数用于加工单元格的原始数据，转换成为HTML并返回给GridView进一步处理。这个渲染函数调用时会有下列的参数： 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

      单元格元数据（Cell metadata）对象。你也可以设置下列的属性：An object in which you may set the following attributes:

      • css : String

        单元格CSS样式字符串，作用在td元素上。A CSS class name to add to the cell's TD element.

      • attr : String

        一段HTML属性的字符串，将作用于表格单元格内的数据容器元素（如'style="color:red;"'）。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

      从数据中提取的Ext.data.Record。The Ext.data.Record from which the data was extracted.

    • rowIndex : Number

      行索引。Row index

    • colIndex : Number

      列索引。Column index

    • store : Ext.data.Store

      从Record中提取的Ext.data.Store对象。The Ext.data.Store object from which the Record was extracted.

返回值：
  • void
ColumnModel
getColumnWidth( Number col ) : Number
返回某个列的宽度。Returns the width for the ...
返回某个列的宽度。Returns the width for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • Number
ColumnModel
setColumnWidth( Number col, Number width )
设置某个列的宽度。Sets the width for a column.
设置某个列的宽度。Sets the width for a column.
参数项：
  • col : Number
    列索引。The column index
  • width : Number
    新宽度。The new width
返回值：
  • void
ColumnModel
getTotalWidth( Boolean includeHidden ) : Number
返回所有列宽度之和。Returns the total width o...
返回所有列宽度之和。Returns the total width of all columns.
参数项：
  • includeHidden : Boolean
    True表示为包括隐藏的宽度。True to include hidden column widths
返回值：
  • Number
ColumnModel
getColumnHeader( Number col ) : String
返回某个列的头部（header）。Returns the header...
返回某个列的头部（header）。Returns the header for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • String
ColumnModel
setColumnHeader( Number col, String header )
设置某个列的头部（header）。Sets the header fo...
设置某个列的头部（header）。Sets the header for a column.
参数项：
  • col : Number
    列索引。The column index
  • header : String
    新头部。The new header
返回值：
  • void
ColumnModel
getColumnTooltip( Number col ) : String
返回某个列的工具提示（tooltip）。Returns the too...
返回某个列的工具提示（tooltip）。Returns the tooltip for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • String
ColumnModel
setColumnTooltip( Number col, String tooltip )
设置某个列的提示文字（tooltip）。Sets the toolti...
设置某个列的提示文字（tooltip）。Sets the tooltip for a column.
参数项：
  • col : Number
    列索引。The column index
  • tooltip : String
    新tooltip对象。The new tooltip
返回值：
  • void
ColumnModel
getDataIndex( Number col ) : String
返回某个列的数据索引。Returns the dataIndex fo...
返回某个列的数据索引。Returns the dataIndex for the specified column.
参数项：
  • col : Number
    列索引。The column index
返回值：
  • String
    列的数据索引。The column's dataIndex
ColumnModel
setDataIndex( Number col, String dataIndex )
设置某个列的数据索引。Sets the dataIndex for a...
设置某个列的数据索引。Sets the dataIndex for a column.
参数项：
  • col : Number
    列索引。The column index
  • dataIndex : String
    新数据索引。The new dataIndex
返回值：
  • void
ColumnModel
findColumnIndex( String col ) : Number
送入数据索引，找到第一个匹配的列。Finds the index of...
送入数据索引，找到第一个匹配的列。Finds the index of the first matching column for the given dataIndex.
参数项：
  • col : String
    dataIndex结果。The dataIndex to find
返回值：
  • Number
    列索引，如果是-1就表示没找到。The column index, or -1 if no match was found
ColumnModel
isCellEditable( Number colIndex, Number rowIndex ) : Boolean
返回true如果列是隐藏的。Returns true if the c...
返回true如果列是隐藏的。Returns true if the cell is editable.
参数项：
  • colIndex : Number
    列索引。The column index
  • rowIndex : Number
    行索引。The row index
返回值：
  • Boolean
ColumnModel
getCellEditor( Number colIndex, Number rowIndex ) : Ext.Editor
返回单元格/列所定义的编辑器。Returns the editor d...
返回单元格/列所定义的编辑器。Returns the editor defined for the cell/column.
参数项：
  • colIndex : Number
    列索引。The column index
  • rowIndex : Number
    行索引。The row index
返回值：
  • Ext.Editor
    创建一个Editor用于Field编辑时所用。The Editor that was created to wrap the Field used to edit the cell.
ColumnModel
setEditable( Number col, Boolean editable )
设置列是否可编辑的。Sets if a column is edita...
设置列是否可编辑的。Sets if a column is editable.
参数项：
  • col : Number
    列索引。The column index
  • editable : Boolean
    True表示为列是可编辑的。True if the column is editable
返回值：
  • void
ColumnModel
isHidden( Number colIndex ) : Boolean
如果列是隐藏的则返回true。Returns true if the ...
如果列是隐藏的则返回true。Returns true if the column is hidden.
参数项：
  • colIndex : Number
    列索引。The column index
返回值：
  • Boolean
ColumnModel
isFixed()
如果列是固定的则返回true。Returns true if the ...
如果列是固定的则返回true。Returns true if the column width cannot be changed
参数项：
  • None.
返回值：
  • void
ColumnModel
isResizable() : Boolean
如果列不能调整尺寸返回true。Returns true if the...
如果列不能调整尺寸返回true。Returns true if the column can be resized
参数项：
  • None.
返回值：
  • Boolean
ColumnModel
setHidden( Number colIndex, Boolean hidden )
设置列隐藏。Sets if a column is hidden.
设置列隐藏。Sets if a column is hidden.
参数项：
  • colIndex : Number
    列索引。The column index
  • hidden : Boolean
    True表示为列是已隐藏的。True if the column is hidden
返回值：
  • void
ColumnModel
setEditor( Number col, Object editor )
为列设置编辑器。Sets the editor for a column.
为列设置编辑器。Sets the editor for a column.
参数项：
  • col : Number
    列索引。The column index
  • editor : Object
    编辑器对象。The editor object
返回值：
  • void
ColumnModel
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
widthchange()
当列宽度变动时触发。Fires when the width of ...
当列宽度变动时触发。Fires when the width of a column changes.
侦听器会传入以下的参数：
  • None.
 ColumnModel
headerchange()
当头部文字改变时触发。Fires when the text of ...
当头部文字改变时触发。Fires when the text of a header changes.
侦听器会传入以下的参数：
  • None.
 ColumnModel
hiddenchange()
当某一列隐藏或“反隐藏”时触发。Fires when a colum...
当某一列隐藏或“反隐藏”时触发。Fires when a column is hidden or "unhidden".
侦听器会传入以下的参数：
  • None.
 ColumnModel
columnmoved()
当列被移动时触发。Fires when a column is mo...
当列被移动时触发。Fires when a column is moved.
侦听器会传入以下的参数：
  • None.
 ColumnModel
configchange()
当列锁定状态被改变时触发。Fires when the config...
当列锁定状态被改变时触发。Fires when the configuration is changed
侦听器会传入以下的参数：
  • None.
 ColumnModel


类Ext.grid.PropertyGrid

包： | Extgrid
定义的文件： | PropertyGrid.js
类全称： | Ext.grid.PropertyGrid
继承自于： | Ext.grid.EditorGridPanel
Grid的一种特殊形式的实现，大体情形类似于IDE开发环境中的属性grid。Grid中的每一行表示一些对象当中的属性、数据，以“名称/值”的形式保存在Ext.grid.PropertyRecord中。举例如下： 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 Ext.grid.PropertyRecords. 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"
    }
});

配置项

配置项 定义者
propertyNames : Object
包含“名称（键值）/显示名称”的结对对象。如指定，将用“显示名称”以代...
包含“名称（键值）/显示名称”的结对对象。如指定，将用“显示名称”以代替直接显示属性名称（即键值名称）。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.
PropertyGrid
source : Object
数据对象，作为grid的数据源（参阅setSource）。A data...
数据对象，作为grid的数据源（参阅setSource）。A data object to use as the data source of the grid (see setSource for details).
PropertyGrid
customEditors : Object
为了使grid能够支持一些可编辑字段，把这些编辑字段的类型的定义写在这...
为了使grid能够支持一些可编辑字段，把这些编辑字段的类型的定义写在这个对象中，它以“名称/值”的形式出现。缺省下，Grid内置的表单编辑器支持强类型的编辑，如字符串、日期、数字和布尔型，但亦可以将任意的input控件关联到特定的编辑器。编辑器的名字应该与属性的名字相一致，例如： 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:
PropertyGrid
clicksToEdit : Number
要转换单元格为编辑状态所需的鼠标点击数（默认为两下，即双击...

要转换单元格为编辑状态所需的鼠标点击数（默认为两下，即双击）。The number of clicks on a cell required to display the cell's editor (defaults to 2).

把该项设置为“auto”表示鼠标移至选中单元格上面就开始编辑的状态。Setting this option to 'auto' means that mousedown on the selected cell starts editing that cell.

EditorGridPanel
forceValidation : Boolean
True表示即使没有被碰的值过都要去验证（默认为false）。True...
True表示即使没有被碰的值过都要去验证（默认为false）。True to force validation even if the value is unmodified (defaults to false)
EditorGridPanel
autoEncode : Boolean
True表示为对任何值和任何后来输入的值都要自动HTML编码或解码（默...
True表示为对任何值和任何后来输入的值都要自动HTML编码或解码（默认为false）。True to automatically HTML encode and decode values pre and post edit (defaults to false)
EditorGridPanel
selModel : Object
AbstractSelectionModel的子类，以为Grid提供选...
AbstractSelectionModel的子类，以为Grid提供选区模型（selection model）。（如不指定则默认为Ext.grid.RowSelectionModel）。Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext.grid.RowSelectionModel if not specified).
GridPanel
store : Ext.data.Store
Grid应使用Ext.data.Store作为其数据源（必须的）。Th...
Grid应使用Ext.data.Store作为其数据源（必须的）。The Ext.data.Store the grid should use as its data source (required).
GridPanel
cm : Object
colModel的简写方式。Shorthand for colModel.
colModel的简写方式。Shorthand for colModel.
GridPanel
colModel : Object
渲染Grid所使用的Ext.grid.ColumnModel（必须的）...
渲染Grid所使用的Ext.grid.ColumnModel（必须的）。The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
sm : Object
selModel的简写方式。Shorthand for selModel.
selModel的简写方式。Shorthand for selModel.
GridPanel
columns : Array
自动创建列模型（ColumnModel）的数组。An array of...
自动创建列模型（ColumnModel）的数组。An array of columns to auto create a ColumnModel
GridPanel
maxHeight : Number
设置Grid的高度最大值（若autoHeight关闭则忽略）。Sets...
设置Grid的高度最大值（若autoHeight关闭则忽略）。Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
disableSelection : Boolean
True表示为禁止grid的选区功能（默认为false）——若指定了S...
True表示为禁止grid的选区功能（默认为false）——若指定了SelectionModel则忽略。True to disable selections in the grid (defaults to false). - ignored if a SelectionModel is specified
GridPanel
enableColumnMove : Boolean
True表示为激活列的拖动（默认为true）。True to enab...
True表示为激活列的拖动（默认为true）。True to enable drag and drop reorder of columns.
GridPanel
enableColumnResize : Boolean
False 表示为关闭列的大小调节功能（默认为true）。False ...
False 表示为关闭列的大小调节功能（默认为true）。False to turn off column resizing for the whole grid (defaults to true).
GridPanel
viewConfig : Object
作用在grid's UI试图上的配置项对象， 任何Ext.grid....
作用在grid's UI试图上的配置项对象， 任何Ext.grid.GridView可用的配置选项都可在这里指定。若view已指定则此项无效。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 xpecified.
GridPanel
hideHeaders : Boolean
True表示为隐藏Grid的头部（默认为false）。True to ...
True表示为隐藏Grid的头部（默认为false）。True to hide the grid's header (defaults to false).
GridPanel
minColumnWidth : Number
列的宽度的调整下限。默认为25。The minimum width a...
列的宽度的调整下限。默认为25。The minimum width a column can be resized to. Defaults to 25.
GridPanel
trackMouseOver : Boolean
True表示为鼠标移动时高亮显示（默认为true）。True to h...
True表示为鼠标移动时高亮显示（默认为true）。True to highlight rows when the mouse is over. Default is true.
GridPanel
enableDragDrop : Boolean
True表示为激活GridPanel行的拖动。True to enab...

True表示为激活GridPanel行的拖动。True to enable dragging of the selected rows of the GridPanel.

设置该项为true那样{GridPanel@link #getView GridView}的将会创建一个Ext.grid.GridDragZone实例。通过GridView的dragZone属性可访问该实例（只在Grid渲染后的条件后）。Setting this to true causes this GridPanel's GridView to create an instance of Ext.grid.GridDragZone. This is available (only after the Grid has been rendered) as the GridView's dragZone property.

要让DropZone运作起来必须一定要有onNodeEnter、onNodeOver, onNodeOut以及onNodeDrop这些实现的定义，好让能够处理data。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
enableColumnHide : Boolean
True表示为隐藏每列头部的邮件菜单（默认为true）。True to...
True表示为隐藏每列头部的邮件菜单（默认为true）。True to enable hiding of columns with the header context menu.
GridPanel
enableHdMenu : Boolean
True表示为在头部出现下拉按钮，以激活头部菜单。True to en...
True表示为在头部出现下拉按钮，以激活头部菜单。True to enable the drop down button for menu in the headers.
GridPanel
stripeRows : Boolean
True表示为显示行的分隔符（默认为true）。True to str...
True表示为显示行的分隔符（默认为true）。True to stripe the rows. Default is false.

为Grid的隔行之处都会加上x-grid3-row-alt样式。原理是利用加入背景色的CSS规则来实现，但你可以用有修饰符"!important"的background-color样式覆盖这个规则，或使用较高优先级的CSS选择符。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
autoExpandColumn : String
指定某个列之id,grid就会在这一列自动扩展宽度，以填满空白的位置，...
指定某个列之id,grid就会在这一列自动扩展宽度，以填满空白的位置，该id不能为0。The id of a column in this grid that should expand to fill unused space. This id can not be 0.
GridPanel
autoExpandMin : Number
autoExpandColumn可允许最小之宽度（有激活的话）。默认为...
autoExpandColumn可允许最小之宽度（有激活的话）。默认为50。The minimum width the autoExpandColumn can have (if enabled). defaults to 50.
GridPanel
autoExpandMax : Number
autoExpandColumn可允许最大之宽度（有激活的话）。默认为...
autoExpandColumn可允许最大之宽度（有激活的话）。默认为 1000。The maximum width the autoExpandColumn can have (if enabled). Defaults to 1000.
GridPanel
view : Object
Grid所使用的Ext.grid.GridView。该项可在rende...
Grid所使用的Ext.grid.GridView。该项可在render()调用之前设置。The Ext.grid.GridView used by the grid. This can be set before a call to render().
GridPanel
loadMask : Object
True表示为当grid加载过程中，会有一个Ext.LoadMask的...
True表示为当grid加载过程中，会有一个Ext.LoadMask的遮罩效果。默认为false。An Ext.LoadMask config or true to mask the grid while loading (defaults to false).
GridPanel
columnLines : Boolean
True表示为在列分隔处显示分隔符。默认为false。True to ...
True表示为在列分隔处显示分隔符。默认为false。True to add css for column separation lines. Default is false.
GridPanel
deferRowRender : Boolean
True表示为延时激活行渲染。默认为true。True to enab...
True表示为延时激活行渲染。默认为true。True to enable deferred row rendering. Default is true.
GridPanel
stateEvents : Array
事件名称组成的数组。这些事件触发时会导致该组件进行状态记忆（默认为["...
事件名称组成的数组。这些事件触发时会导致该组件进行状态记忆（默认为["columnmove", "columnresize", "sortchange"]）。可支持该组件身上的任意事件类型，包括浏览器原生的或自定义的，如['click', 'customerchange']。An array of events that, when fired, should trigger this component to save its state (defaults to ["columnmove", "columnresize", "sortchange"]). These can be any types of events supported by this component, including browser or custom events (e.g.,['click', 'customerchange']).

请参阅stateful有关Component状态的恢复与保存方面的解释。See stateful for an explanation of saving and restoring Component state.

 GridPanel
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : String 配置拖动代理中的文本（缺省为"{0} selected row(s... 配置拖动代理中的文本（缺省为"{0} selected row(s)"）。选中行的行数会替换到{0}。Configures the text in the drag proxy (defaults to "{0} selected row(s)"). {0} is replaced with the number of selected rows. | GridPanel
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
PropertyGrid( Object config )
参数项：
  • config : Object
    Grid配置参数。The grid config object
返回值：
  • void
PropertyGrid
setSource( Object source )
设置包含属性的源数据对象。数据对象包含了一个或一个以上的“名称/值”格...
设置包含属性的源数据对象。数据对象包含了一个或一个以上的“名称/值”格式的对象以显示在grid。这些数据也会自动加载到grid的store。如果grid已经包含数据，该方法会替换原有Grid的数据。请参阅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 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 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"
});
参数项：
  • source : Object
    数据对象。The data object
返回值：
  • void
PropertyGrid
getSource() : Object
返回包含属性的数据对象源。请参阅setSource以了解数据对象的格式...
返回包含属性的数据对象源。请参阅setSource以了解数据对象的格式。Gets the source data object containing the property data. See setSource for details regarding the format of the data object.
参数项：
  • None.
返回值：
  • Object
    数据对象 The data object
PropertyGrid
EditorGridPanel( Object config )
参数项：
  • config : Object
    配置项对象。The config object @xtype editorgrid
返回值：
  • void
EditorGridPanel
startEditing( Number rowIndex, Number colIndex )
指定的行/列，进行单元格内容的编辑。Starts editing th...
指定的行/列，进行单元格内容的编辑。Starts editing the specified for the specified row/column
参数项：
  • rowIndex : Number
  • colIndex : Number
返回值：
  • void
EditorGridPanel
stopEditing( Boolean cancel )
停止任何激活的行为。Stops any active editing
停止任何激活的行为。Stops any active editing
参数项：
  • cancel : Boolean
    （可选的）True撤销更改。(optional) True to cancel any changes
返回值：
  • void
EditorGridPanel
GridPanel( Object config )
参数项：
  • config : Object
    配置项对象 The config object
返回值：
  • void
GridPanel
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )
重新配置Grid的Store和Column Model（列模型）。视图...

重新配置Grid的Store和Column Model（列模型）。视图会重新绑定对象并刷新。Reconfigures the grid to use a different Store and Column Model. The View will be bound to the new objects and refreshed.

要注意当重新配置这个GridPanel之后，某些现有的设置可能会变为无效。比如配置项autoExpandColumn的设置在新的ColumnModel作用后就不复存在； 再譬如，PagingToolbar还是旧Store的，需要重新绑定之； 某些plugins需要在新数据的配合下再配置配置。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
    另外一个Ext.data.Store对象。The new Ext.data.Store object
  • colModel : Ext.grid.ColumnModel
    另外一个Ext.grid.ColumnModel对象。The new Ext.grid.ColumnModel object
返回值：
  • void
GridPanel
getGridEl() : Element
返回Grid的元素。Returns the grid's underl...
返回Grid的元素。Returns the grid's underlying element.
参数项：
  • None.
返回值：
  • Element
    元素。The element
GridPanel
getSelectionModel() : Ext.grid.AbstractSelectionModel
返回grid的SelectionModel。Returns the g...
返回grid的SelectionModel。Returns the grid's SelectionModel.
参数项：
  • None.
返回值：
  • Ext.grid.AbstractSelectionModel
    which provides either cell or row selectability.
GridPanel
getStore() : Store对象。The store
返回Grid的Data store。Returns the grid'...
返回Grid的Data store。Returns the grid's data store.
参数项：
  • None.
返回值：
  • Store对象。The store
GridPanel
getColumnModel() : Ext.grid.ColumnModel
返回Grid的列模型（ColumnModel）。Returns the...
返回Grid的列模型（ColumnModel）。Returns the grid's ColumnModel.
参数项：
  • None.
返回值：
  • Ext.grid.ColumnModel
    列模型。The column model
GridPanel
getView() : Ext.grid.GridView
返回Grid的GridView对象。Returns the grid'...
返回Grid的GridView对象。Returns the grid's GridView object.
参数项：
  • None.
返回值：
  • Ext.grid.GridView
    GridView对象。The grid view
GridPanel
getDragDropText() : String
获取GRID拖动的代理文本（drag proxy text），默认返回...
获取GRID拖动的代理文本（drag proxy text），默认返回this.ddText。Called to get grid's drag proxy text, by default returns this.ddText.
参数项：
  • None.
返回值：
  • String
    GRID拖动的代理文本。The text
GridPanel
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforepropertychange()
当属性值改变时触发。如要取消事件可在这个句柄中返回一个false值（...
当属性值改变时触发。如要取消事件可在这个句柄中返回一个false值（同时会内置调用Ext.data.Recordreject方法在这个属性的记录上）。Fires before a property value changes. Handlers can return false to cancel the property change (this will internally call Ext.data.Recordreject on the property's record).
侦听器会传入以下的参数：
  • None.
 PropertyGrid
propertychange()
当属性改变之后触发的事件。Fires after a propert...
当属性改变之后触发的事件。Fires after a property value has changed.
侦听器会传入以下的参数：
  • None.
 PropertyGrid
beforeedit()
当一个单元格被切换到编辑之前触发。编辑的事件对象会有下列的属性： Fi...
当一个单元格被切换到编辑之前触发。编辑的事件对象会有下列的属性： Fires before cell editing is triggered. The edit event object has the following properties
  • grid - grid本身。This grid
  • record - 正在编辑的record。The record being edited
  • field - 正在编辑的字段名。The field name being edited
  • value - 正在设置的值（value）。The value for the field being edited.
  • row - grid行索引。The grid row index
  • column - grid列索引。The grid column index
  • cancel - 由处理函数返回的布尔值，决定true为取消编辑，否则为false。Set this to true to cancel the edit or return false from your handler.
侦听器会传入以下的参数：
  • None.
 EditorGridPanel
afteredit()
当一个单元格被编辑后触发。Fires after a cell is ...
当一个单元格被编辑后触发。Fires after a cell is edited. The edit event object has the following properties
  • grid - grid本身。This grid
  • record - 正在编辑的record。The record being edited
  • field - 正在编辑的字段名。The field name being edited
  • value - 正在设置的值（value）。The value being set
  • originalValue - 在编辑之前的原始值。The original value for the field, before the edit.
  • row - grid行索引。The grid row index
  • column - grid行索引。The grid column index
侦听器会传入以下的参数：
  • None.
 EditorGridPanel
validateedit()
编辑单元格后触发，但发生在更改值被设置到record之前...
编辑单元格后触发，但发生在更改值被设置到record之前。如果返回false即取消更改。编辑的事件有以下属性： 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 - grid本身。This grid
  • record - 正在编辑的record。The record being edited
  • field - 正在编辑的字段名。The field name being edited
  • value - 正在设置的值（value）。The value being set
  • originalValue - 在编辑之前的原始值。The original value for the field, before the edit.
  • row - grid行索引。The grid row index
  • column - grid行索引。The grid column index
  • cancel - 由处理函数返回的布尔值，决定true为取消编辑，否则为false。Set this to true to cancel the edit or return false from your handler.
侦听器会传入以下的参数：
  • None.
 EditorGridPanel
click()
整个Grid被单击的原始事件。The raw click event...
整个Grid被单击的原始事件。The raw click event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
dblclick()
整个Grid被双击的原始事件。The raw dblclick ev...
整个Grid被双击的原始事件。The raw dblclick event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
contextmenu()
整个Grid被右击的原始事件。The raw contextmenu...
整个Grid被右击的原始事件。The raw contextmenu event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mousedown()
整个Grid的mousedown的原始事件。The raw mous...
整个Grid的mousedown的原始事件。The raw mousedown event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseup()
整个Grid的mouseup的原始事件。The raw mouseu...
整个Grid的mouseup的原始事件。The raw mouseup event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseover()
整个Grid的mouseover的原始事件。The raw mous...
整个Grid的mouseover的原始事件。The raw mouseover event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
mouseout()
整个Grid的mouseout的原始事件。The raw mouse...
整个Grid的mouseout的原始事件。The raw mouseout event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
keypress()
整个Grid的keypress的原始事件。The raw keypr...
整个Grid的keypress的原始事件。The raw keypress event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
keydown()
整个Grid的keydown的原始事件。The raw keydow...
整个Grid的keydown的原始事件。The raw keydown event for the entire grid.
侦听器会传入以下的参数：
  • None.
 GridPanel
cellmousedown()
当单元格被单击之前触发。Fires before a cell is...
当单元格被单击之前触发。Fires before a cell is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowmousedown()
当行被单击之前触发。Fires before a row is cl...
当行被单击之前触发。Fires before a row is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headermousedown()
当头部被单击之前触发。Fires before a header i...
当头部被单击之前触发。Fires before a header is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
cellclick()
当单元格被点击时触发。单击格的数据保存在Record。要在侦听器函数...
当单元格被点击时触发。单击格的数据保存在Record。要在侦听器函数内访问数据，可按照以下的办法： 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:

侦听器会传入以下的参数：

  • None.
    •
GridPanel
celldblclick()
单元格（cell）被双击时触发。Fires when a cell ...
单元格（cell）被双击时触发。Fires when a cell is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowclick()
行（row）被单击时触发。Fires when a row is c...
行（row）被单击时触发。Fires when a row is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowdblclick()
行（row）被双击时触发。Fires when a row is d...
行（row）被双击时触发。Fires when a row is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headerclick()
头部（header）被单击时触发。Fires when a head...
头部（header）被单击时触发。Fires when a header is clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headerdblclick()
头部（header）被双击时触发。Fires when a head...
头部（header）被双击时触发。Fires when a header cell is double clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
rowcontextmenu()
行（row）被右击时触发。Fires when a row is r...
行（row）被右击时触发。Fires when a row is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
cellcontextmenu()
单元格（cell）被右击时触发。Fires when a cell ...
单元格（cell）被右击时触发。Fires when a cell is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
headercontextmenu()
头部（header）被右击时触发。Fires when a head...
头部（header）被右击时触发。Fires when a header is right clicked
侦听器会传入以下的参数：
  • None.
 GridPanel
bodyscroll()
当body元素被滚动后触发。Fires when the body ...
当body元素被滚动后触发。Fires when the body element is scrolled
侦听器会传入以下的参数：
  • None.
 GridPanel
columnresize()
当用户调整某个列（column）大小时触发。Fires when t...
当用户调整某个列（column）大小时触发。Fires when the user resizes a column
侦听器会传入以下的参数：
  • None.
 GridPanel
columnmove()
当用户移动某个列（column）时触发。Fires when the...
当用户移动某个列（column）时触发。Fires when the user moves a column
侦听器会传入以下的参数：
  • None.
 GridPanel
sortchange()
当行（row）开始被拖动时触发。Fires when the gri...
当行（row）开始被拖动时触发。Fires when the grid's store sort changes
侦听器会传入以下的参数：
  • None.
 GridPanel
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.grid.PropertyRecord

包： | Extgrid
定义的文件： | PropertyGrid.js
类全称： | Ext.grid.PropertyRecord
继承自于： | Object
Ext.grid.PropertyGrid的一种特定类型，用于表示一对“名称/值”的数据。数据的格式必须是Ext.data.Record类型。典型状态下，属性记录（PropertyRecords）由于能够隐式生成而不需要直接创建， 只需要配置适当的数据配置，即通过 Ext.grid.PropertyGridsource的配置属性或是调用Ext.grid.PropertyGridsetSource的方法。然而在如需要的情况下，这些记录也可以显式创建起来，例子如下：
A specific Ext.data.Record type that represents a name/value pair and is made to work with the 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 Ext.grid.PropertyGridsource config property or by calling Ext.grid.PropertyGridsetSource. 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'))
});
// 对当前的grid加入记录 Add record to an already populated grid
grid.store.addSorted(rec);

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
PropertyRecord( Object config )
参数项：
  • config : Object
    数据对象，格式如下：{name: [name], value: [value]}。Grid会自动读取指定值的格式以决定用哪种方式来显示。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.
返回值：
  • void
PropertyRecord

公共事件

这个类没有公告事件。


类Ext.grid.PropertyStore

包： | Extgrid
定义的文件： | PropertyGrid.js
类全称： | Ext.grid.PropertyStore
继承自于： | Ext.util.Observable
一个属于Ext.grid.PropertyGrid的Ext.data.Store的制定包裹器（custom wrapper）。该类负责属于grid的自定义数据对象与这个类 Ext.grid.PropertyRecord本身格式所需store之间的映射，使得两者可兼容一起。一般情况下不需要直接使用该类——应该通过属性store从所属的store访问Grid的数据。A custom wrapper for the Ext.grid.PropertyGrid's Ext.data.Store. This class handles the mapping between the custom data source objects supported by the grid and the 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 store property.

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
PropertyStore( Ext.grid.Grid grid, Object source )
参数项：
  • grid : Ext.grid.Grid
    stroe所绑定的grid。The grid this store will be bound to
  • source : Object
    配置项对象数据源。The source data config object
返回值：
  • void
PropertyStore
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

这个类没有公告事件。


类Ext.grid.RowNumberer

包： | Extgrid
定义的文件： | RowNumberer.js
类全称： | Ext.grid.RowNumberer
继承自于： | Object
一个辅助类，用于传入到Ext.grid.ColumnModel，作为自动列数字的生成。
This is a utility class that can be passed into a 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}
 ]);

配置项

配置项 |  | 定义者
 | header : String 任何有效的HMTL片断，显示在单元格头部（缺省为''）。Any val... 任何有效的HMTL片断，显示在单元格头部（缺省为''）。Any valid text or HTML fragment to display in the header cell for the row number column (defaults to ''). | RowNumberer
 | width : Number 列的默认宽度（默认为23）。The default width in ... 列的默认宽度（默认为23）。The default width in pixels of the row number column (defaults to 23). | RowNumberer

公告属性

这个类没有公告属性。

公共方法

方法 定义者
RowNumberer( Object config )
参数项：
  • config : Object
    配置项选项 The configuration options
返回值：
  • void
RowNumberer

公共事件

这个类没有公告事件。


类Ext.grid.RowSelectionModel

包： | Extgrid
定义的文件： | RowSelectionModel.js
类全称： | Ext.grid.RowSelectionModel
继承自于： | Ext.grid.AbstractSelectionModel
Ext.grid.GridPanel的默认选区模型。它支持多选区和键盘选区/导航。getSelected方法返回选中的对象，getSelections就是多个已选择的Record（支持多选的）。
The default SelectionModel used by Ext.grid.GridPanel. It supports multiple selections and keyboard selection/navigation. The objects stored as selections and returned by getSelected, and getSelections are the Records which provide the data for the selected rows.

配置项

配置项 |  | 定义者
 | singleSelect : Boolean True表示为同时只能选单行（默认false）。True to all... True表示为同时只能选单行（默认false）。True to allow selection of only one row at a time (defaults to false) | RowSelectionModel
 | moveEditorOnEnter : Boolean False表示禁止按下回车键时就是移动到下一行，shift+回车就是网... False表示禁止按下回车键时就是移动到下一行，shift+回车就是网上移动。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. | RowSelectionModel
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
RowSelectionModel( Object config )
参数项：
  • config : Object
返回值：
  • void
RowSelectionModel
selectRecords( Array records, Boolean keepExisting )
选择多个记录。Select records.
选择多个记录。Select records.
参数项：
  • records : Array
    要选择的record。The records to select
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional)True to keep existing selections
返回值：
  • void
RowSelectionModel
getCount() : Number
获取已选择的行数。Gets the number of selecte...
获取已选择的行数。Gets the number of selected rows.
参数项：
  • None.
返回值：
  • Number
RowSelectionModel
selectFirstRow()
选择GRID的第一行。Selects the first row in...
选择GRID的第一行。Selects the first row in the grid.
参数项：
  • None.
返回值：
  • void
RowSelectionModel
selectLastRow( Boolean keepExisting )
选择最后一行。Select the last row.
选择最后一行。Select the last row.
参数项：
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional) True to keep existing selections
返回值：
  • void
RowSelectionModel
selectNext( Boolean keepExisting ) : Boolean
选取上次选取的最后一行。Selects the row immedia...
选取上次选取的最后一行。Selects the row immediately following the last selected row.
参数项：
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional)True to keep existing selections
返回值：
  • Boolean
    True if there is a next row, else false
RowSelectionModel
selectPrevious( Boolean keepExisting ) : Boolean
选取上次选取的最前一行。Selects the row that pr...
选取上次选取的最前一行。Selects the row that precedes the last selected row.
参数项：
  • keepExisting : Boolean
    （可选的）true表示为保持当前现有的选区。(optional)True to keep existing selections
返回值：
  • Boolean
    True表示为有前一行，false表示没有。True if there is a previous row, else false
RowSelectionModel
hasNext() : Boolean
若有下一个可选取的记录返回true。Returns true if t...
若有下一个可选取的记录返回true。Returns true if there is a next record to select
参数项：
  • None.
返回值：
  • Boolean
RowSelectionModel
hasPrevious() : Boolean
若有前一个可选取的记录返回true。Returns true if t...
若有前一个可选取的记录返回true。Returns true if there is a previous record to select
参数项：
  • None.
返回值：
  • Boolean
RowSelectionModel
getSelections() : Array
返回以选取的纪录。Returns the selected records
返回以选取的纪录。Returns the selected records
参数项：
  • None.
返回值：
  • Array
    已选取记录的数组。Array of selected records
RowSelectionModel
getSelected() : Record
返回选区中的第一个记录。Returns the first selec...
返回选区中的第一个记录。Returns the first selected record.
参数项：
  • None.
返回值：
  • Record
RowSelectionModel
each( Function fn, Object scope ) : Boolean
对选区执行传入函数。如果函数返回false，枚举将会中止，each函数...
对选区执行传入函数。如果函数返回false，枚举将会中止，each函数就会返回false，否则返回true。Calls the passed function with each selection. If the function returns false, iteration is stopped and this function returns false. Otherwise it returns true.
参数项：
  • fn : Function
  • scope : Object
    (optional)
返回值：
  • Boolean
    true表示为已枚举所有的记录。true if all selections were iterated
RowSelectionModel
clearSelections()
清除全部的选区。Clears all selections.
清除全部的选区。Clears all selections.
参数项：
  • None.
返回值：
  • void
RowSelectionModel
selectAll()
选择所有的行 Selects all rows.
选择所有的行 Selects all rows.
参数项：
  • None.
返回值：
  • void
RowSelectionModel
hasSelection() : Boolean
返回True表示有选中。Returns True if there i...
返回True表示有选中。Returns True if there is a selection.
参数项：
  • None.
返回值：
  • Boolean
RowSelectionModel
isSelected( Number/Record record ) : Boolean
返回True表示有特定的行是被选中的。Returns True if ...
返回True表示有特定的行是被选中的。Returns True if the specified row is selected.
参数项：
  • record : Number/Record
    Record对象或Record的id。The record or index of the record to check
返回值：
  • Boolean
RowSelectionModel
isIdSelected( String id ) : Boolean
返回True表示特定的记录是否被选中。Returns True if ...
返回True表示特定的记录是否被选中。Returns True if the specified record id is selected.
参数项：
  • id : String
    要检查的记录id。The id of record to check
返回值：
  • Boolean
RowSelectionModel
selectRows( Array rows, Boolean keepExisting )
选取多行。Selects multiple rows.
选取多行。Selects multiple rows.
参数项：
  • rows : Array
    要选取行的索引的集合。Array of the indexes of the row to select
  • keepExisting : Boolean
    （可选的）表示为保持现有的选区。(optional)True to keep existing selections (defaults to false)
返回值：
  • void
RowSelectionModel
selectRange( Number startRow, Number endRow, Boolean keepExisting )
选取某个范围内的行（rows）。所有在startRow和endRow之...
选取某个范围内的行（rows）。所有在startRow和endRow之间的行都会被选中。Selects a range of rows. All rows in between startRow and endRow are also selected.
参数项：
  • startRow : Number
    范围内的第一行之索引。The index of the first row in the range
  • endRow : Number
    范围内的最后一行之索引。The index of the last row in the range
  • keepExisting : Boolean
    （可选的）表示为保持现有的选区。(optional)True to retain existing selections
返回值：
  • void
RowSelectionModel
deselectRange( Number startRow, Number endRow )
反选某个范围内的行（rows）。所有在startRow和endRow之...
反选某个范围内的行（rows）。所有在startRow和endRow之间的行都会被选反。Deselects a range of rows. All rows in between startRow and endRow are also deselected.
参数项：
  • startRow : Number
    范围内的第一行之索引。The index of the first row in the range
  • endRow : Number
    范围内的最后一行之索引。The index of the last row in the range
返回值：
  • void
RowSelectionModel
selectRow( Number row, Boolean keepExisting )
选择一行。Selects a row.
选择一行。Selects a row.
参数项：
  • row : Number
    要选择行的索引。The index of the row to select
  • keepExisting : Boolean
    (optional) （可选的）表示为保持现有的选区。True to keep existing selections
返回值：
  • void
RowSelectionModel
deselectRow( Number row )
反选一个行。Deselects a row.
反选一个行。Deselects a row.
参数项：
  • row : Number
    反选行的索引。The index of the row to deselect
返回值：
  • void
RowSelectionModel
AbstractSelectionModel()
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
lock()
锁定多个选区。Locks the selections.
锁定多个选区。Locks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
unlock()
解锁多个选区。Unlocks the selections.
解锁多个选区。Unlocks the selections.
参数项：
  • None.
返回值：
  • void
AbstractSelectionModel
isLocked() : Boolean
返回true如果选区被锁。Returns true if the se...
返回true如果选区被锁。Returns true if the selections are locked.
参数项：
  • None.
返回值：
  • Boolean
AbstractSelectionModel
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
selectionchange()
当选区改变时触发。Fires when the selection ...
当选区改变时触发。Fires when the selection changes
侦听器会传入以下的参数：
  • None.
 RowSelectionModel
beforerowselect()
当行（row）是选中又被选择触发，返回false取消。Fires w...
当行（row）是选中又被选择触发，返回false取消。Fires when a row is being selected, return false to cancel.
侦听器会传入以下的参数：
  • None.
 RowSelectionModel
rowselect()
当行（row）被选中时触发。Fires when a row is ...
当行（row）被选中时触发。Fires when a row is selected.
侦听器会传入以下的参数：
  • None.
 RowSelectionModel
rowdeselect()
当行（row）反选时触发。Fires when a row is d...
当行（row）反选时触发。Fires when a row is deselected.
侦听器会传入以下的参数：
  • None.
 RowSelectionModel


类Ext.grid.SplitDragZone

包： | Extgrid
定义的文件： | ColumnSplitDD.js
类全称： | Ext.grid.SplitDragZone
继承自于： | Object
private This is a support class used internally by the Grid components

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


Column
    TemplateColumn

Class Ext.grid.TemplateColumn

Package: | Ext.grid
Defined In: | Column.js
Class: | TemplateColumn
Extends: | Column

A Column definition class which renders a value by processing a Record's data using a configured XTemplate. See the xtype config option of Ext.grid.ColumnModel for more details.

Config Options

Config Options Defined By
align : String
Set the CSS text-align property of the column. Defaults to undefined.
Column
css : String
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to...
An inline style definition string which is applied to all table cells in the column (excluding headers). Defaults to undefined.
Column
dataIndex : String
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's valu...
The name of the field in the grid's Ext.data.Store's Ext.data.Record definition from which to draw the column's value. If not specified, the column's index is used as an index into the Record's data Array.
Column
editable : Boolean
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The in...
Defaults to true, enabling the configured editor. Set to false to initially disable editing on this column. The initial configuration may be dynamically altered using Ext.grid.ColumnModel.setEditable().
Column
editor : Ext.form.Field
The Ext.form.Field to use when editing values in this column if editing is supported by the grid. See editable also.
Column
fixed : Boolean
true if the column width cannot be changed. Defaults to false.
Column
groupName : String
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the text with which to...
If the grid is being rendered by an 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 groupRenderer and Ext.grid.GroupingView.showGroupName.
Column
groupRenderer : Function
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to f...

If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to specify the function used to format the grouping field value for display in the group header. If a groupRenderer is not specified, the configured renderer will be called; if a renderer is also not specified the new value of the group field will be used.

The called function (either the groupRenderer or 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.

Column
groupable : Boolean
If the grid is being rendered by an Ext.grid.GroupingView, this option may be used to disable the header menu item t...
If the grid is being rendered by an 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 groupName.
Column
header : String
The header text to be used as innerHTML (html tags are accepted) to display in the Grid view.
Column
hidden : Boolean
true to hide the column. Defaults to false.
Column
hideable : Boolean
Specify as false to prevent the user from hiding this column (defaults to true). To disallow column hiding globally...
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 Ext.grid.GridPanel.enableColumnHide instead.
Column
id : String
A name which identifies this column (defaults to the column's initial ordinal position.) The id is used to create a ...
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.x-grid3-td-id
The Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this unique identifier.
Column
menuDisabled : Boolean
true to disable the column menu. Defaults to false.
Column
renderer : Mixed
For an alternative to specifying a renderer see xtype (optional) A renderer is an "interceptor" method which can be ...

For an alternative to specifying a renderer see 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 Ext.util.Format class which provides a renderer function.
  • An object specifying both the renderer function, and its execution scope (this reference) eg:
    {
    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 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 scope.
Column
resizable : Boolean
false to disable column resizing. Defaults to true.
Column
scope : Object
The scope (this reference) in which to execute the renderer. Defaults to the Column configuration object.
Column
sortable : Boolean
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether loc...
true if sorting is to be allowed on this column. Defaults to the value of the defaultSortable property. Whether local/remote sorting is used is specified in Ext.data.Store.remoteSort.
Column
tooltip : String
A text string to use as the column header's tooltip. If Quicktips are enabled, this value will be used as the text ...
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 ''.
Column
tpl : String/XTemplate
An XTemplate, or an XTemplate definition string to use to process a Record's data to produce a column's rendered val...
An XTemplate, or an XTemplate definition string to use to process a Record's data to produce a column's rendered value.
TemplateColumn
width : Number
The initial width in pixels of the column. The width of each column can also be affected if any of the following are...
The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:
  • Ext.grid.GridPanel.autoExpandColumn
  • Ext.grid.GridView.forceFit

    By specifying forceFit:true, 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.

  • Ext.grid.GridView.autoFill
  • Ext.grid.GridPanel.minColumnWidth

    • Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.scrollOffset can be modified to reduce or eliminate the reserved offset.

Column
xtype : String
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate rend...
A String which references a predefined Ext.grid.Column subclass type which is preconfigured with an appropriate renderer to be easily configured into a ColumnModel. The predefined Ext.grid.Column subclass types are:
  • gridcolumn : Ext.grid.Column (Default)

  • booleancolumn : Ext.grid.BooleanColumn

  • numbercolumn : Ext.grid.NumberColumn

  • datecolumn : Ext.grid.DateColumn

  • templatecolumn : 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 Ext.grid.DateColumn

    }, {
        ...
    }]
});
Column

Public Properties

Property Defined By
renderer : Function A function which returns displayable data when passed the following parameters: <div class="mdetail-params"><ul> <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li> <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li> </ul></div>
Column

Public Methods

Method Defined By
getCellEditor( Number rowIndex ) : Ext.Editor
Returns the editor defined for this column.
Returns the editor defined for this column.
Parameters:
  • rowIndex : Number
    The row index
Returns:
  • Ext.Editor
    The {@link Ext.Editor Editor} that was created to wrap the {@link Ext.form.Field Field} used to edit the cell.
Column

Public Events

This class has no public events.


类Ext.History

包： | Ext
定义的文件： | History.js
类全称： | Ext.History
继承自于： | 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 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

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | fieldId: String The id of the hidden field requir... The id of the hidden field required for storing the current history token. | History
 | iframeId: String The id of the iframe required by ... The id of the iframe required by IE to manage the history stack. | History

公共方法

方法 定义者
History()
参数项：
  • None.
返回值：
  • void
History
init( Boolean onReady, Object scope )
Initialize the global History insta...
Initialize the global History instance.
参数项：
  • onReady : Boolean
    (optional) A callback function that will be called once the history component is fully initialized.
  • scope : Object
    (optional) The callback scope
返回值：
  • void
History
add( String token, Boolean preventDuplicates )
Add a new token to the history stac...
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);
});
参数项：
  • token : String
    The value that defines a particular application-specific history state
  • preventDuplicates : Boolean
    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).
返回值：
  • void
History
back()
Programmatically steps back one ste...
Programmatically steps back one step in browser history (equivalent to the user pressing the Back button).
参数项：
  • None.
返回值：
  • void
History
forward()
Programmatically steps forward one ...
Programmatically steps forward one step in browser history (equivalent to the user pressing the Forward button).
参数项：
  • None.
返回值：
  • void
History
getToken() : String
Retrieves the currently-active hist...
Retrieves the currently-active history token.
参数项：
  • None.
返回值：
  • String
    The token
History
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

这个类没有公告事件。


类Ext

包： |
定义的文件： | Ext.js
类全称： | Ext
继承自于： | Object
Ext核心工具与函数 @singleton

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Boolean 默认下，Ext会自动决定浮动元素是否应该被填充。如果你在用Flash... 默认下，Ext会自动决定浮动元素是否应该被填充。如果你在用Flash那么该值很可能要设置为True。By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash, you may want to set this to true. | Ext
 | emptyFn: Function 可复用的空函数。A reusable empty function ... 可复用的空函数。A reusable empty function | Ext

公共方法

方法 定义者
apply( Object obj, Object config, Object defaults ) : Object
复制config对象的所有属性到obj（第一个参数为obj，第二个参数...
复制config对象的所有属性到obj（第一个参数为obj，第二个参数为config）。Copies all the properties of config to obj.
参数项：
  • obj : Object
    属性接受方对象。The receiver of the properties
  • config : Object
    属性源对象。The source of the properties
  • defaults : Object
    默认对象，如果该参数存在，obj将会得到那些defaults有而config没有的属性。A different object that will also be applied for default values
返回值：
  • Object
    returns obj @member Ext apply
Ext
applyIf( Object obj, Object config ) : Object
复制所有config的属性至obj，如果obj已有该属性，则不复制（第...
复制所有config的属性至obj，如果obj已有该属性，则不复制（第一个参数为obj，第二个参数为config）。Copies all the properties of config to obj if they don't already exist.
参数项：
  • obj : Object
    接受方对象。The receiver of the properties
  • config : Object
    源对象。The source of the properties
返回值：
  • Object
    returns obj
Ext
addBehaviors( Object obj )
页面被初始化完毕后，在元素上绑定事件监听。事件名在'@'符号后。App...
页面被初始化完毕后，在元素上绑定事件监听。事件名在'@'符号后。Applies event listeners to elements by selectors when the document is ready. The event name is specified with an @ suffix.

Ext.addBehaviors({
   // 为id为foo的锚点元素增加onclick事件监听。// add a listener for click on all anchors in element with id foo
   '#foo a@click' : function(e, t){
       // do something
   },

   // 为多个元素增加mouseover事件监听（在'@'前用逗号(,)分隔）。// add the same listener to multiple selectors (separated by comma BEFORE the @)
   '#foo a, #bar span.some-class@mouseover' : function(){
       // do something
   }
});
参数项：
  • obj : Object
    所绑定的事件及其行为。The list of behaviors to apply
返回值：
  • void
Ext
id( Mixed el, String prefix ) : String
对页面元素生成唯一id，如果该元素已存在id，则不会再生成。Gener...
对页面元素生成唯一id，如果该元素已存在id，则不会再生成。Generates unique ids. If the element already has an id, it is unchanged
参数项：
  • el : Mixed
    （可选的） 将要生成id的元素。(optional)The element to generate an id for
  • prefix : String
    （可选的） 该id的前缀（默认为 "ext-gen"）。(optional) Id prefix (defaults "ext-gen")
返回值：
  • String
    生成的Id。The generated Id.
Ext
extend( Function subclass, Function superclass, Object overrides ) : Function
OO继承，并由传递的值决定是否覆盖原对象的属性。返回的类对象中也增加了...
OO继承，并由传递的值决定是否覆盖原对象的属性。返回的类对象中也增加了“override()”函数，用于覆盖实例的成员。Extends one class with another class and optionally overrides members with the passed literal. This class also adds the function "override()" to the class that can be used to override members on an instance.

另外一种用法是，第一个参数不是父类（严格说是父类构造器）的话那么将会发生如下的变化（这是使用2个参数的方式）： This function also supports a 2-argument call in which the subclass's constructor is not passed as an argument. In this form, the parameters are as follows:

  • superclass
    被继承的类。The class being extended
  • overrides
    成员列表，就是将会复制到子类的prototype对象身上，——这便会让该新类的实例可共享这些成员。A literal with members which are copied into the subclass's prototype, and are therefore shared among all instances of the new class.

    注意其中可以包含一个元素为属于子类的构造器，叫constructor的成员。如果该项不指定，就意味引用父类的构造器，父类构造器就会直接接收所有的参数。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.

例如，这样创建Ext GridPanel的子类。For example, to create a subclass of the Ext GridPanel:

    MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
        constructor: function(config) {
            // 你先这样调用……（就是调用父类的构造函数）
            MyGridPanel.superclass.constructor.apply(this, arguments);
            // 然后接着是子类的代码……
        },

        yourMethod: function() {
            // ……
        }
    });

参数项：
  • subclass : Function
    子类，用于继承（该类继承了父类所有属性，并最终返回该对象）。The class inheriting the functionality
  • superclass : Function
    父类，被继承。The class being extended
  • overrides : Object
    （可选的）一个对象，将它本身携带的属性对子类进行覆盖。(optional) A literal with members which are copied into the subclass's prototype, and are therefore shared between all instances of the new class.
返回值：
  • Function
    子类的构造器。The subclass constructor.
Ext
override( Object origclass, Object overrides )
在类上添加overrides指定的方法（多个方法），同名则覆盖，例如：...
在类上添加overrides指定的方法（多个方法），同名则覆盖，例如： 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.
    }
});
参数项：
  • origclass : Object
    要override的类。The class to override
  • overrides : Object
    加入到origClass的函数列表。这应该是一个包含一个或多个方法的对象。The list of functions to add to origClass. This should be specified as an object literal containing one or more methods.
返回值：
  • void
Ext
namespace( String namespace1, String namespace2, String etc )
为变量创建其命名空间，这样类就有了“安身之所”，不是飘荡四处的“全局变...
为变量创建其命名空间，这样类就有了“安身之所”，不是飘荡四处的“全局变量”。例如： Creates namespaces to be used for scoping variables and classes so that they are not global. Usage:

Ext.namespace('Company', 'Company.data');
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
参数项：
  • namespace1 : String
    命名空间一
  • namespace2 : String
    命名空间二
  • etc : String
返回值：
  • void
Ext
urlEncode( Object o ) : String
把一个对象转换为一串以编码的URL字符。例如Ext.urlEncode...
把一个对象转换为一串以编码的URL字符。例如Ext.urlEncode({foo: 1, bar: 2});变为"foo=1&bar=2"。可选地，如果遇到属性的类型是数组的话，那么该属性对应的key就是每个数组元素的key，逐一进行“结对的”编码。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.
参数项：
  • o : Object
返回值：
  • String
Ext
urlDecode( String string, Boolean overwrite ) : Object
把一个已经encoded的URL字符串转换为对象。如Ext.urlDe...
把一个已经encoded的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"]}。Takes an encoded URL and and converts it to an object. e.g. Ext.urlDecode("foo=1&bar=2"); would return {foo: "1", bar: "2"} or Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", false); would return {foo: "1", bar: ["2", "3", "4"]}.
参数项：
  • string : String
    URL字符串
  • overwrite : Boolean
    （可选的）重复名称的就当作为数组，如果该项为true就禁止该功能（默认为false）。(optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
返回值：
  • Object
    成员实体。A literal with members
Ext
each( Array/NodeList/Mixed array, Function fn, Object scope )
迭代一个数组，数组中每个成员都将调用一次所传函数，直到函数返回fals...
迭代一个数组，数组中每个成员都将调用一次所传函数，直到函数返回false才停止执行。如果传递的数组并非一个真正的数组，所传递的函数只调用它一次。（译注：如果不是数组，就将该“数组”放入一个[]中，而且会返回一个隐藏的int参数，代表为该array调用function的次数。） Iterates an array calling the passed function with each item, stopping if your function returns false. If the passed array is not really an array, your function is called once with it. The supplied function is called with (Object item, Number index, Array allItems).
参数项：
  • array : Array/NodeList/Mixed
    数组
  • fn : Function
    函数
  • scope : Object
    作用域
返回值：
  • void
Ext
escapeRe( String str ) : String
避免传递的字符串参数被正则表达式读取。Escapes the pass...
避免传递的字符串参数被正则表达式读取。Escapes the passed string for use in a regular expression
参数项：
  • str : String
返回值：
  • String
Ext
getDom( Mixed el ) : HTMLElement
返回dom对象，参数可以是string(id)，dom node，或E...
返回dom对象，参数可以是string(id)，dom node，或Ext.Element。Return the dom node for the passed string (id), dom node, or Ext.Element
参数项：
  • el : Mixed
返回值：
  • HTMLElement
Ext
getDoc() : Ext.Element document对象。The document
返回当前HTML文档的Ext.Element类型。Returns th...
返回当前HTML文档的Ext.Element类型。Returns the current HTML document object as an Ext.Element.
参数项：
  • None.
返回值：
  • Ext.Element document对象。The document
Ext
getBody() : Ext.Element document对象。The document body
返回当前document.body的Ext.Element类型。Ret...
返回当前document.body的Ext.Element类型。Returns the current document body as an Ext.Element.
参数项：
  • None.
返回值：
  • Ext.Element document对象。The document body
Ext
getCmp( String id ) : Ext.Component
Ext.ComponentMgrget的简写方式。Shorthand ...
Ext.ComponentMgrget的简写方式。Shorthand for Ext.ComponentMgrget
参数项：
  • id : String
返回值：
  • Ext.Component
Ext
num( Mixed value, Number defaultValue ) : Number
验证某个值是否数字的一个辅助方法，若不是，返回指定的缺省值。Utili...
验证某个值是否数字的一个辅助方法，若不是，返回指定的缺省值。Utility method for validating that a value is numeric, returning the specified default value if it is not.
参数项：
  • value : Mixed
    应该是一个数字，但其它的类型的值亦可适当地处理。Should be a number, but any type will be handled appropriately
  • defaultValue : Number
    若传入的值是非数字，则返回缺省值。The value to return if the original value is non-numeric
返回值：
  • Number
    数字或缺省值Value。if numeric, else defaultValue
Ext
destroy( Mixed arg1, Mixed arg2, Mixed etc )
尝试去移除每个传入的对象，包括DOM，事件侦听者，并呼叫他们的dest...
尝试去移除每个传入的对象，包括DOM，事件侦听者，并呼叫他们的destroy方法（如果存在）。该方法主要接纳Ext.Element与Ext.Component类型的参数。但理论上任何继承自Ext.util.Observable的子类都可以做为参数传入（支持传入多参）。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 Ext.Element and Ext.Component, but any subclass of 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.
参数项：
  • arg1 : Mixed
    任意要销毁的Ext.Element或Ext.Component。An Ext.Element or Ext.Component to destroy
  • arg2 : Mixed
    （可选的）
  • etc : Mixed
    ... （可选的）
返回值：
  • void
Ext
destroyMembers( Object o, Mixed arg1, Mixed etc )
删除对象的指定属性（支持传入多参，同时删除多个属性）。Attempts...
删除对象的指定属性（支持传入多参，同时删除多个属性）。Attempts to destroy and then remove a set of named properties of the passed object.
参数项：
  • o : Object
    打算删除的对象（通常是Component类型的对象）。The object (most likely a Component) who's properties you wish to destroy.
  • arg1 : Mixed
    打算删除的属性名称。The name of the property to destroy and remove from the object.
  • etc : Mixed
    ... 其他更多要删除的属性名称。More property names to destroy and remove.
返回值：
  • void
Ext
removeNode( HTMLElement node )
移除document的DOM节点。如果是body节点的话会被忽略。Re...
移除document的DOM节点。如果是body节点的话会被忽略。Removes a DOM node from the document. The body node will be ignored if passed in.
参数项：
  • node : HTMLElement
    要移除的节点。The node to remove
返回值：
  • void
Ext
type( Mixed object ) : String
返回参数类型的详细信息。如果送入的对象是null或undefined那...
返回参数类型的详细信息。如果送入的对象是null或undefined那么返回false，又或是以下类型： 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: 如果传入的是DOM Element。If the object passed is a DOM Element
  • nodelist: 如果传入的是DOM NodeList。If the object passed is a DOM NodeList
  • textnode: 如果传入的是DOM Text，且非空或空格。If the object passed is a DOM text node and contains something other than whitespace
  • whitespace: 如果传入的是DOM Text，且是空格。If the object passed is a DOM text node and contains only whitespace
    • 参数项：
    • object : Mixed
    返回值：
    • String
Ext
isEmpty( Mixed value, Boolean allowBlank ) : Boolean
如果传入的值是null、undefined或空字符串，则返回true。...
如果传入的值是null、undefined或空字符串，则返回true。（可选的） Returns true if the passed value is null, undefined or an empty string.
参数项：
  • value : Mixed
    要验证的值。The value to test
  • allowBlank : Boolean
    （可选的） 如果该值为true，则空字符串不会当作空而返回true。(optional) true to allow empty strings (defaults to false)
返回值：
  • Boolean
Ext
value( Mixed value, Mixed defaultValue, Boolean allowBlank ) : Mixed
验证值是否非空、非null、非undefined、非空白字符的便捷方法...
验证值是否非空、非null、非undefined、非空白字符的便捷方法。如指定了默认值还会返回默认值。Utility method for validating that a value is non-empty (i.e. i) not null, ii) not undefined, and iii) not an empty string), returning the specified default value if it is.
参数项：
  • value : Mixed
    要测试的值。The value to test
  • defaultValue : Mixed
    如果原值是空的所返回的值。The value to return if the original value is empty
  • allowBlank : Boolean
    （可选的）true表示为允许空白的字符串（默认为false）。(optional) true to allow empty strings (defaults to false)
返回值：
  • Mixed
    值，若果是非空，就是defalutValue。value, if non-empty, else defaultValue
Ext
isArray( Object v ) : Boolean
返回true表名送入的对象是JavaScript的array类型对象，...
返回true表名送入的对象是JavaScript的array类型对象，否则为false。Returns true if the passed object is a JavaScript array, otherwise false.
参数项：
  • v : Object
    要测试的对象。The object to test
返回值：
  • Boolean
Ext
isDate( Object v ) : Boolean
返回true表名送入的对象是JavaScript的date类型对象，否...
返回true表名送入的对象是JavaScript的date类型对象，否则为false。Returns true if the passed object is a JavaScript date object, otherwise false.
参数项：
  • v : Object
    要测试的对象。The object to test
返回值：
  • Boolean
Ext
copyTo( Object dest, Object source, Array/String names ) : Object
复制源对象身上指定的属性到目标对象。Copies a set of n...
复制源对象身上指定的属性到目标对象。Copies a set of named properties fom the source object to the destination object.
参数项：
  • dest : Object
    目标对象。The destination object.
  • source : Object
    源对象。The source object.
  • names : Array/String
    可以是属性名称构成的数组，也可以是属性名称构成的字符串，用逗号、分号隔开。Either an Array of property names, or a comma-delimited list of property names to copy.
返回值：
  • Object
    以修改的对象。The modified object.

    例子：example:
Ext

公共事件

这个类没有公告事件。


类Ext.KeyMap

包： | Ext
定义的文件： | KeyMap.js
类全称： | Ext.KeyMap
继承自于： | Object
Ext.KeyMap类负责在某一元素上，键盘和用户动作（Actions）之间的映射。构建器可接收由addBinding定义的相同配置项对象。如果你绑定了一个KeyMap的回调函数,KeyMap会在该回调函数上提供下列参数（String key, Ext.EventObject e） 如果匹配的是组合键，回调函数也只会执行一次） KepMap能够实现以字符串来表示key
一个key可用于多个动作。用法：

 // 映射key（由keycode指定）
 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
 });

 // 映射多个动作的组合键（由字符串和code数组指定）
 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开始激活

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Boolean 如果让KeyMap来处理key，设置true的话，则停止事件上报（... 如果让KeyMap来处理key，设置true的话，则停止事件上报（event from bubbling），并阻拦默认浏览器动作（默认为false） | KeyMap

公共方法

方法 定义者
KeyMap( Mixed el, Object config, String eventName )
参数项：
  • el : Mixed
    绑定的元素
  • config : Object
    T配置项
  • eventName : String
    （可选地）绑定的事件（默认“keydown”）
返回值：
  • void
KeyMap
addBinding( Object config )
新增该KeyMap的新绑定。下列配置项（对象的属性）均被支持： ...
新增该KeyMap的新绑定。下列配置项（对象的属性）均被支持：
属性    类型             描述
----------  ---------------  ----------------------------------------------------------------------
key         String/Array      进行处理的单个keycode或keycodes组成的数组
shift       Boolean           True：只有shift按下的的同时处理key （默认false）
ctrl        Boolean           True：只有ctrl按下的的同时处理key （默认false）
handler     Function          当KeyMap找到预期的组合键时所执行的函数
alt         Boolean           True：只有alt按下的的同时处理key （默认false）
fn          Function          当组合键按下后回调函数
scope       Object            回调函数的作用域
用法：

// 创建一个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
    单个KeyMap配置
返回值：
  • void
KeyMap
on( Number/Array/Object key, Function fn, Object scope )
加入单个键侦听器的简写方式
加入单个键侦听器的简写方式
参数项：
  • key : Number/Array/Object
    既可是key code，也可以是key codes的集合，或者是下列的对象 {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
  • fn : Function
    调用的函数
  • scope : Object
    (optional) 函数的作用域
返回值：
  • void
KeyMap
isEnabled() : Boolean
KeyMap是已激活的话返回true
KeyMap是已激活的话返回true
参数项：
  • None.
返回值：
  • Boolean
KeyMap
enable()
激活KeyMap
激活KeyMap
参数项：
  • None.
返回值：
  • void
KeyMap
disable()
禁止该KeyMap
禁止该KeyMap
参数项：
  • None.
返回值：
  • void
KeyMap

公共事件

这个类没有公告事件。


类Ext.KeyNav

包： | Ext
定义的文件： | KeyNav.js
类全称： | Ext.KeyNav
继承自于： | Object

为跨浏览器的键盘方向键加上一层快捷的包装器（wrapper）。KeyNav允许你为某个功能绑定方向键，按下的时候即调用该功能。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
});

配置项

配置项 |  | 定义者
 | disabled : Boolean True表示为禁止该KeyNav的实例（默认为false） True表示为禁止该KeyNav的实例（默认为false） | KeyNav
 | defaultEventAction : String 当KeyNav拦截某键之后，所调用的Ext.EventObject方法... 当KeyNav拦截某键之后，所调用的Ext.EventObject方法。该值可以是 Ext.EventObjectstopEvent， Ext.EventObjectpreventDefault与 Ext.EventObjectstopPropagation（默认为“stopEvent”） | KeyNav
 | forceKeyDown : Boolean 以keydown事件代替keypress（默认为false）。由于IE... 以keydown事件代替keypress（默认为false）。由于IE上按下special键不能有效触发keypress事件，所以IE上会自动设置为true。然而将该项规定为true的话，则表示所以浏览器上都以以keydown事件代替keypress | KeyNav

公告属性

这个类没有公告属性。

公共方法

方法 定义者
KeyNav( Mixed el, Object config )
参数项：
  • el : Mixed
    绑定的元素
  • config : Object
    配置项
返回值：
  • void
KeyNav
enable()
激活这个KeyNav
激活这个KeyNav
参数项：
  • None.
返回值：
  • void
KeyNav
disable()
禁用这个KeyNav
禁用这个KeyNav
参数项：
  • None.
返回值：
  • void
KeyNav

公共事件

这个类没有公告事件。


类Ext.Layer

包： | Ext
定义的文件： | Layer.js
类全称： | Ext.Layer
继承自于： | Ext.Element
一个由Ext.Element扩展的对象，支持阴影和shim，受视图限制和自动修复阴影/shim位置。An extended Ext.Element object that supports a shadow and shim, constrain to viewport and automatic maintaining of shadow/shim positions.

配置项

配置项 |  | 定义者
 | shadowOffset : Number 阴影偏移的像素值（默认为3）。Number of pixels to ... 阴影偏移的像素值（默认为3）。Number of pixels to offset the shadow (defaults to 3) | Layer

公告属性

属性 |  | 定义者
 | : Number 显示模式（Visibility mode）的两个常量之一：使用Dis... 显示模式（Visibility mode）的两个常量之一：使用Display来隐藏元素 Visibility mode constant - Use display to hide element @static | Element

公共方法

方法 定义者
Layer( Object config, String/HTMLElement existingEl )
参数项：
  • config : Object
    配置项对象。An object with config options.
  • existingEl : String/HTMLElement
    （可选的）使用现有的DOM的元素。如找不到就创建一个。(optional) Uses an existing DOM element. If the element is not found it creates it.
返回值：
  • void
Layer
setZIndex( Number zindex ) : this
设置层的z-index和调整全部的阴影和垫片（shim） z-inde...
设置层的z-index和调整全部的阴影和垫片（shim） z-indexes。层本身的z-index是会自动＋2，所以它总会是在其他阴影和垫片上面（这时阴影元素会分配z-index+1，垫片的就是原本传入的z-index）。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).
参数项：
  • zindex : Number
    要设置的新z-index。The new z-index to set
返回值：
  • this
    The Layer
Layer
D( String/HTMLElement element, Boolean forceNew )
参数项：
  • element : String/HTMLElement
  • forceNew : Boolean
    （可选的） 构建函数默认会检查在Cache中是否已经有这个element实例。如果有，则返回缓存中的对象。如果设置为否，则跳过缓存的验查。设置这个布尔值会中止检查（扩展这个类时较有用）。(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).
返回值：
  • void
Element
setVisibilityMode( String visMode ) : Ext.Element
设置元素的可见模式。当通过调用setVisible()方法确定，可见模...
设置元素的可见模式。当通过调用setVisible()方法确定，可见模式（visibility mode）究竟是“可见性visibility”的还是“显示display”的。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 : String
    Element.VISIBILITY或Element.DISPLAY Element.VISIBILITY or Element.DISPLAY
返回值：
  • Ext.Element
    this
Element
enableDisplayMode( String display ) : Ext.Element
调用setVisibilityMode(Element.DISPLAY...
调用setVisibilityMode(Element.DISPLAY)的快捷方式。Convenience method for setVisibilityMode(Element.DISPLAY)
参数项：
  • display : String
    （可选的） 当可见时显示的内容。(optional) What to set display to when visible
返回值：
  • Ext.Element
    this
Element
findParent( String selector, Number/Mixed maxDepth, Boolean returnEl ) : HTMLElement
定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合...
定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符（简易选择符形如div.some-class、span:first-child）。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)
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
  • maxDepth : Number/Mixed
    （可选的） 搜索深度，可以为数字或元素（默认是10||document.body）。(optional) The max depth to
  • returnEl : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点(optional) True to return a Ext.Element object instead of DOM node
返回值：
  • HTMLElement
    匹配的DOM节点（null的话表示没有找到匹配结果）。The matching DOM node (or null if no match was found)
Element
findParentNode( String selector, Number/Mixed maxDepth, Boolean returnEl ) : HTMLElement
定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的...
定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符，简易选择符形如div.some-class、span:first-child）。Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
  • maxDepth : Number/Mixed
    （可选的） 搜索深度，可以为数字或元素（默认是10||document.body）。(optional) The max depth to
  • returnEl : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点(optional) True to return a Ext.Element object instead of DOM node
返回值：
  • HTMLElement
    匹配的DOM节点（null的话表示没有找到匹配结果）。The matching DOM node (or null if no match was found)
Element
up( String selector, Number/Mixed maxDepth ) : Ext.Element
沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的...
沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符，简易选择符形如div.some-class、span:first-child）。Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child). 这是一个便捷方法因此总是返回Ext.Element类型的节点。This is a shortcut for findParentNode() that always returns an Ext.Element.
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
  • maxDepth : Number/Mixed
    （可选的） 搜索深度，可以为数字或元素（默认是10||document.body）。(optional) The max depth to
返回值：
  • Ext.Element
    匹配的DOM节点（null的话表示没有找到匹配结果）。The matching DOM node (or null if no match was found)
Element
is( String selector ) : Boolean
如果这个元素符合传入的简易选择符的条件就返回true，简易选择符形如d...
如果这个元素符合传入的简易选择符的条件就返回true，简易选择符形如div.some-class或span:first-child。Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
参数项：
  • selector : String
    要进行测试的简易选择符。The simple selector to test
返回值：
  • Boolean
    true表示元素匹配选择符成功，否则返回false。True if this element matches the selector, else false
Element
animate( Object args, Float duration, Function onComplete, String easing, String animType ) : Ext.Element
在元素上执行动画 Perform animation on this ...
在元素上执行动画 Perform animation on this element.
参数项：
  • args : Object
    动画配置项参数。The animation control args
  • duration : Float
    （可选的） 动画持续多久（默认为 .35 秒）。(optional) How long the animation lasts in seconds (defaults to .35)
  • onComplete : Function
    （可选的） 动画完成后调用的函数。(optional) Function to call when animation completes
  • easing : String
    (optional) （可选的） 指定“收尾”的方法（默认为 'easeOut'）。Easing method to use (defaults to 'easeOut')
  • animType : String
    （可选的） 默认为'run'，可以是'color'，'motion'，或'scroll'。(optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
返回值：
  • Ext.Element
    this
Element
clean( Boolean forceReclean )
移除无用的文本节点。Removes worthless text nodes
移除无用的文本节点。Removes worthless text nodes
参数项：
  • forceReclean : Boolean
    （可选的）缺省地， 元素会追踪自己是否已被清除了，所以你可以不断地调用这个方法。然而，如果你需要更新元素而且需要强制清除，你可以传入true的参数。(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.
返回值：
  • void
Element
contains( HTMLElement/String el ) : Boolean
如果当前元素是传入元素的父辈级元素（ancestor)返回true。R...
如果当前元素是传入元素的父辈级元素（ancestor)返回true。Returns true if this element is an ancestor of the passed element
参数项：
  • el : HTMLElement/String
    要检查的元素。The element to check
返回值：
  • Boolean
    true表示这个元素是传入元素的父级元素，否则返回false。True if this element is an ancestor of el, else false
Element
isVisible( Boolean deep ) : Boolean
检查当前该元素是否都使用属性visibility和属性display来...
检查当前该元素是否都使用属性visibility和属性display来显示。Checks whether the element is currently visible using both visibility and display properties.
参数项：
  • deep : Boolean
    （可选的）True表示为沿着DOM一路看父元素是否隐藏的。(optional) True to walk the dom and see if parent elements are hidden (defaults to false)
返回值：
  • Boolean
    true表示该元素当前是可见的，否则返回false。True if the element is currently visible, else false
Element
select( String selector, Boolean unique ) : CompositeElement/CompositeElementLite
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成...
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回（因为id的元素唯一的，所以选择符不应是id的选择符）。Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    CSS选择符。The CSS selector
  • unique : Boolean
    （可选的）true表示为为每个子元素创建唯一的Ext.Element（默认为false享元的普通对象flyweight object）。(optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object)
返回值：
  • CompositeElement/CompositeElementLite
    组合元素。The composite element
Element
query( String selector ) : Array
传入一个CSS选择符的参数，然后基于该选择符选取其子节点（因为id的元...
传入一个CSS选择符的参数，然后基于该选择符选取其子节点（因为id的元素唯一的，所以选择符不应是id的选择符）。Selects child nodes based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    CSS选择符。The CSS selector
返回值：
  • Array
    匹配节点之数组。An array of the matched nodes
Element
child( String selector, Boolean returnDom ) : HTMLElement/Ext.Element
传入一个CSS选择符的参数，然后基于该选择符，不限定深度进行搜索，符合...
传入一个CSS选择符的参数，然后基于该选择符，不限定深度进行搜索，符合的话选取单个子节点（选择符不应有id）。Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    CSS选择符。The CSS selector
  • returnDom : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点。(optional) True to return the DOM node instead of Ext.Element (defaults to false)
返回值：
  • HTMLElement/Ext.Element
    子节点，Ext.Element类型（如returnDom = true则为DOM节点）。The child Ext.Element (or DOM node if returnDom = true)
Element
down( String selector, Boolean returnDom ) : HTMLElement/Ext.Element
传入一个CSS选择符的参数，然后基于该选择符，"直接"选取单个子节点（...
传入一个CSS选择符的参数，然后基于该选择符，"直接"选取单个子节点（选择符不应有id）。child based on the passed CSS selector (the selector should not contain an id).
参数项：
  • selector : String
    The CSS selector
  • returnDom : Boolean
    （可选的） True表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点。(optional) True to return the DOM node instead of Ext.Element (defaults to false)
返回值：
  • HTMLElement/Ext.Element
    子节点，Ext.Element类型。The child Ext.Element (or DOM node if returnDom = true)
Element
setVisible( Boolean visible, Boolean/Object animate ) : Ext.Element
设置元素可见性（请参阅细节）。如果visibilityMode被设置成...
设置元素可见性（请参阅细节）。如果visibilityMode被设置成常量Element.DISPLAY， 那么它会使用display属性来隐藏元素，否则它会使用visibility。默认是使用visibility属性。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.
参数项：
  • visible : Boolean
    元素是否可见的。Whether the element is visible
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
isDisplayed() : Boolean
如果属性display不是"none"就返回true。Returns ...
如果属性display不是"none"就返回true。Returns true if display is not "none"
参数项：
  • None.
返回值：
  • Boolean
Element
toggle( Boolean/Object animate ) : Ext.Element
轮换（两种状态中转换到一个状态）元素的visibility或displ...
轮换（两种状态中转换到一个状态）元素的visibility或display，取决于visibility mode。Toggles the element's visibility or display, depending on visibility mode.
参数项：
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setDisplayed( Mixed value ) : Ext.Element
设置元素在样式中的display属性。如果value为true，则使用...
设置元素在样式中的display属性。如果value为true，则使用originalDisplay。Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
参数项：
  • value : Mixed
    如果value为true，则使用originalDisplay。否则直接设置显示的字符串。Boolean value to display the element using its default display, or a string to set the display directly.
返回值：
  • Ext.Element
    this
Element
focus( Number defer ) : Ext.Element
使这个元素得到焦点。忽略任何已捕获的异常。Tries to focus...
使这个元素得到焦点。忽略任何已捕获的异常。Tries to focus the element. Any exceptions are caught and ignored.
参数项：
  • defer : Number
    （可选的） 延时执行focus的毫秒数。(optional) Milliseconds to defer the focus
返回值：
  • Ext.Element
    this
Element
blur() : Ext.Element
使这个元素失去焦点。忽略任何已捕获的异常。Tries to blur ...
使这个元素失去焦点。忽略任何已捕获的异常。Tries to blur the element. Any exceptions are caught and ignored.
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
addClass( String/Array className ) : Ext.Element
为元素添加设置CSS类（CSS Class）。重复出来的类会被忽略。A...
为元素添加设置CSS类（CSS Class）。重复出来的类会被忽略。Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
参数项：
  • className : String/Array
    要加入的CSS类或者由各类组成的数组。The CSS class to add, or an array of classes
返回值：
  • Ext.Element
    this
Element
radioClass( String/Array className ) : Ext.Element
添加一个或多个className到这个元素，并移除其所有侧边（sibl...
添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
参数项：
  • className : String/Array
    要加入的className，或者是由类组成的数组。The CSS class to add, or an array of classes
返回值：
  • Ext.Element
    this
Element
removeClass( String/Array className ) : Ext.Element
移除元素身上一个或多个的CSS类。Removes one or mor...
移除元素身上一个或多个的CSS类。Removes one or more CSS classes from the element.
参数项：
  • className : String/Array
    要加入的className，或者是由类组成的数组。The CSS class to remove, or an array of classes
返回值：
  • Ext.Element
    this
Element
toggleClass( String className ) : Ext.Element
轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的C...
轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
参数项：
  • className : String
    轮换的CSS类The CSS class to toggle
返回值：
  • Ext.Element
    this
Element
hasClass( String className ) : Boolean
检查某个CSS类是否作用于这个元素身上。Checks if the s...
检查某个CSS类是否作用于这个元素身上。Checks if the specified CSS class exists on this element's DOM node.
参数项：
  • className : String
    要检查CSS类The CSS class to check for
返回值：
  • Boolean
    true表示为类是有的，否则为falseTrue if the class exists, else false
Element
replaceClass( String oldClassName, String newClassName ) : Ext.Element
在这个元素身上替换CSS类。如果旧的CSS名称不存在，新的就会加入。R...
在这个元素身上替换CSS类。如果旧的CSS名称不存在，新的就会加入。Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
参数项：
  • oldClassName : String
    要被替换之CSS类，旧的CSS类The CSS class to replace
  • newClassName : String
    新CSS类The replacement CSS class
返回值：
  • Ext.Element
    this
Element
getStyles( String style1, String style2, String etc ) : Object
给出一些CSS属性名，得到其值。如el.getStyles('colo...
给出一些CSS属性名，得到其值。如el.getStyles('color', 'font-size', 'width')会返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}。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'}.
参数项：
  • style1 : String
    样式一A style name
  • style2 : String
    样式二A style name
  • etc : String
    .
返回值：
  • Object
    样式对象The style object
Element
getStyle( String property ) : String
统一化当前样式和计算样式。Normalizes currentStyl...
统一化当前样式和计算样式。Normalizes currentStyle and computedStyle.
参数项：
  • property : String
    返回值的那个样式属性The style property whose value is returned.
返回值：
  • String
    该元素样式属性的当前值The current value of the style property for this element.
Element
setStyle( String/Object property, String value ) : Ext.Element
设置元素的样式，也可以用一个对象参数包含多个样式。Wrapper fo...
设置元素的样式，也可以用一个对象参数包含多个样式。Wrapper for setting style properties, also takes single object parameter of multiple styles.
参数项：
  • property : String/Object
    要设置的样式属性，或是包含多个样式的对象The style property to be set, or an object of multiple styles.
  • value : String
    （可选的）样式属性的值，如果第一个参数是对象，则这个参数为null（不需要了）(optional) The value to apply to the given property, or null if an object was passed.
返回值：
  • Ext.Element
    this
Element
applyStyles( String/Object/Function styles ) : Ext.Element
setStyle的另一个版本，更能灵活地设置样式属性。More fle...
setStyle的另一个版本，更能灵活地设置样式属性。More flexible version of setStyle for setting style properties.
参数项：
  • styles : String/Object/Function
    表示样式的特定格式字符串，如“width:100px”，或是对象的形式如{width:"100px"}，或是能返回这些格式的函数。A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or a function which returns such a specification.
返回值：
  • Ext.Element
    this
Element
getX() : Number
返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有...
返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • None.
返回值：
  • Number
    元素的X位置。The X position of the element
Element
getY() : Number
返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有...
返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • None.
返回值：
  • Number
    元素的Y位置。The Y position of the element
Element
getXY() : Array
返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确...
返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • None.
返回值：
  • Array
    元素的XY位置。The XY position of the element
Element
getOffsetsTo( Mixed element ) : Array
返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分...
返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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.
参数项：
  • element : Mixed
    测距离的那个元素。The element to get the offsets from.
返回值：
  • Array
    页面会上两点的距离。The XY page offsets (e.g. [100, -200])
Element
setX( Number x, Boolean/Object animate ) : Ext.Element
设置元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有...
设置元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。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).
参数项：
  • x : Number
    元素的Y位置The X position of the element
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setY( Number The, Boolean/Object animate ) : Ext.Element
设置元素基于页面坐标的Y位置。元素必须是DOM树中的一部分才拥有页面坐...
设置元素基于页面坐标的Y位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • The : Number
    Y position of the element
  • animate : Boolean/Object
    (optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setLeft( String left ) : Ext.Element
直接使用CSS样式（代替setX），设定元素的left位置。Sets ...
直接使用CSS样式（代替setX），设定元素的left位置。Sets the element's left position directly using CSS style (instead of setX).
参数项：
  • left : String
    CSS left属性值。The left CSS property value
返回值：
  • Ext.Element
    this
Element
setTop( String top ) : Ext.Element
直接使用CSS样式（代替setY），设定元素的top位置。Sets t...
直接使用CSS样式（代替setY），设定元素的top位置。Sets the element's top position directly using CSS style (instead of setY).
参数项：
  • top : String
    CSS属性top的值。The top CSS property value
返回值：
  • Ext.Element
    this
Element
setRight( String right ) : Ext.Element
设置元素CSS Right的样式。Sets the element's...
设置元素CSS Right的样式。Sets the element's CSS right style.
参数项：
  • right : String
    Bottom CSS属性值。The right CSS property value
返回值：
  • Ext.Element
    this
Element
setBottom( String bottom ) : Ext.Element
设置元素CSS Bottom的样式。Sets the element'...
设置元素CSS Bottom的样式。Sets the element's CSS bottom style.
参数项：
  • bottom : String
    Bottom CSS属性值。The bottom CSS property value
返回值：
  • Ext.Element
    this
Element
setXY( Array pos, Boolean/Object animate ) : Ext.Element
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的...
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • pos : Array
    对于新位置（基于页面坐标）包含X & Y [x, y]的值Contains X & Y [x, y] values for new position (coordinates are page-based)
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setLocation( Number x, Number y, Boolean/Object animate ) : Ext.Element
无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一...
无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • x : Number
    新定位的X值（基于页面坐标）。X value for new position (coordinates are page-based)
  • y : Number
    新定位的Y值（基于页面坐标）。Y value for new position (coordinates are page-based)
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
moveTo( Number x, Number y, Boolean/Object animate ) : Ext.Element
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的...
无论这个元素如何定位，设置其在页面的坐标位置，。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • x : Number
    新定位的X值（基于页面坐标）。X value for new position (coordinates are page-based)
  • y : Number
    新定位的Y值（基于页面坐标）。Y value for new position (coordinates are page-based)
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) True for the default animation, or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
getRegion() : Region
返回当前元素的区域。元素必须是DOM树中的一部分才拥有页面坐标（dis...
返回当前元素的区域。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。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).
参数项：
  • None.
返回值：
  • Region
    Ext.lib.Region包含"top, left, bottom, right"成员数据A Ext.lib.Region containing "top, left, bottom, right" member data.
Element
getHeight( Boolean contentHeight ) : Number
返回元素的偏移（offset）高度。Returns the offse...
返回元素的偏移（offset）高度。Returns the offset height of the element
参数项：
  • contentHeight : Boolean
    （可选的） true表示为返回的是减去边框和内补丁（borders & padding）的宽度。(optional) true to get the height minus borders and padding
返回值：
  • Number
    The element's height
Element
getWidth( Boolean contentWidth ) : Number
返回元素的偏移（offset）宽度。
返回元素的偏移（offset）宽度。
参数项：
  • contentWidth : Boolean
    （可选的） true表示为返回的是减去边框和内补丁（borders & padding）的宽度。(optional) true to get the width minus borders and padding
返回值：
  • Number
    元素宽度The element's width
Element
getComputedHeight() : Number
当偏移值不可用时就模拟一个出来。该方法返回由padding或borde...
当偏移值不可用时就模拟一个出来。该方法返回由padding或borders调整过的元素CSS高度，也可能是偏移的高度。如果不用CSS设置高度而且是display:none的元素，可能会没有。
参数项：
  • None.
返回值：
  • Number
Element
getComputedWidth() : Number
当偏移值不可用时就模拟一个出来。该方法返回由padding或borde...
当偏移值不可用时就模拟一个出来。该方法返回由padding或borders调整过的元素CSS宽度，也可能是偏移的宽度。如果不用CSS设置宽度而且是display:none的元素，可能会没有。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.
参数项：
  • None.
返回值：
  • Number
Element
getSize( Boolean contentSize ) : Object
返回元素大小。Returns the size of the elem...
返回元素大小。Returns the size of the element.
参数项：
  • contentSize : Boolean
    （可选的） true表示为获取的是减去border和padding的宽度大小(optional) true to get the width/size minus borders and padding
返回值：
  • Object
    包含元素大小尺寸的对象An object containing the element's size {width: (element width), height: (element height)}
Element
getViewSize() : Object
返回视图的高度和宽度。Returns the width and he...
返回视图的高度和宽度。Returns the width and height of the viewport.
参数项：
  • None.
返回值：
  • Object
    包含视图大小尺寸的对象，如{width: (viewport width), height: (viewport height)}An object containing the viewport's size {width: (viewport width), height: (viewport height)}
Element
getValue( Boolean asNumber ) : String/Number
返回“值的”属性值。Returns the value of the ...
返回“值的”属性值。Returns the value of the "value" attribute
参数项：
  • asNumber : Boolean
    表示为将值解析为数字。true to parse the value as a number
返回值：
  • String/Number
Element
setWidth( Number width, Boolean/Object animate ) : Ext.Element
设置元素的宽度。Set the width of the element
设置元素的宽度。Set the width of the element
参数项：
  • width : Number
    新宽度。The new width
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setHeight( Number height, Boolean/Object animate ) : Ext.Element
设置元素的高度。Set the height of the element
设置元素的高度。Set the height of the element
参数项：
  • height : Number
    新高度。The new height
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setSize( Number width, Number height, Boolean/Object animate ) : Ext.Element
设置元素的大小尺寸。如果动画选项被打开，高度和宽度都会顺带产生变化的动...
设置元素的大小尺寸。如果动画选项被打开，高度和宽度都会顺带产生变化的动画效果。Set the size of the element. If animation is true, both width an height will be animated concurrently.
参数项：
  • width : Number
    新宽度The new width
  • height : Number
    新高度The new height
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setBounds( Number x, Number y, Number width, Number height, Boolean/Object animate ) : Ext.Element
同时设置元素的位置和大小。如果动画选项被打开，高度和宽度都会顺带产生变...
同时设置元素的位置和大小。如果动画选项被打开，高度和宽度都会顺带产生变化的动画效果。Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
参数项：
  • x : Number
    新位置上的x值（基于页面的坐标）X value for new position (coordinates are page-based)
  • y : Number
    新位置上的y值（基于页面的坐标）Y value for new position (coordinates are page-based)
  • width : Number
    新宽度The new width
  • height : Number
    新高度The new height
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
setRegion( Ext.lib.Region region, Boolean/Object animate ) : Ext.Element
设置元素的位置并调整大小到指定的位置。如果动画选项被打开，高度和宽度都...
设置元素的位置并调整大小到指定的位置。如果动画选项被打开，高度和宽度都会顺带产生变化的动画效果。Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
参数项：
  • region : Ext.lib.Region
    要填充的区域The region to fill
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性：(optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObjectFalse 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代表为下次事件触发加入一个要处理的函数，然后再移除本身。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原句柄将不会 被启用，但是新句柄会安排在其位置。Causes the handler to be scheduled to run in an 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 on is used rather than the more verbose addListener. The two are equivalent. 下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： Using the options argument, it is possible to combine different types of listeners:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Element
removeListener( String eventName, Function fn, Object scope ) : Ext.Element
从这个元素上移除一个事件处理函数。un是它的简写方式。Removes ...
从这个元素上移除一个事件处理函数。un是它的简写方式。Removes an event handler from this element. The shorthand version un is equivalent. Example:

el.removeListener('click', this.handlerFn);
// 或者
el.un('click', this.handlerFn);
参数项：
  • eventName : String
    要移除的事件处理函数的名称the type of event to remove
  • fn : Function
    事件处理器the method the event invokes
  • scope : Object
    （可选的）函数的作用域（默认这个元素）(optional) The scope (The this reference) of the handler function. Defaults to this Element.
返回值：
  • Ext.Element
    this
Element
removeAllListeners() : Ext.Element
在该元素身上移除所有已加入的侦听器。Removes all previ...
在该元素身上移除所有已加入的侦听器。Removes all previous added listeners from this element
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
relayEvent( String eventName, Object object )
创建此元素的事件句柄，由此元素接替另外的对象触发和处理事件。Creat...
创建此元素的事件句柄，由此元素接替另外的对象触发和处理事件。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).
参数项：
  • eventName : String
    要接替的事件名称The type of event to relay
  • object : Object
    任何继承自Ext.util.Observable的对象用于在上下文里触发接替的事件Any object that extends Ext.util.Observable that will provide the context for firing the relayed event
返回值：
  • void
Element
setOpacity( Float opacity, Boolean/Object animate ) : Ext.Element
设置元素的透明度。Set the opacity of the ele...
设置元素的透明度。Set the opacity of the element
参数项：
  • opacity : Float
    新的透明度。0 = 透明，.5 = 50% 可见，1 = 完全可见……The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
getLeft( Boolean local ) : Number
获取左边的X坐标。Gets the left X coordinate
获取左边的X坐标。Gets the left X coordinate
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
getRight( Boolean local ) : Number
获取元素右边的X坐标（元素X位置 + 元素宽度）。Gets the r...
获取元素右边的X坐标（元素X位置 + 元素宽度）。Gets the right X coordinate of the element (element X position + element width)
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
getTop( Boolean local ) : Number
获取顶部Y坐标。Gets the top Y coordinate
获取顶部Y坐标。Gets the top Y coordinate
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
getBottom( Boolean local ) : Number
获取元素的底部Y坐标（元素Y位置 + 元素宽度）。Gets the b...
获取元素的底部Y坐标（元素Y位置 + 元素宽度）。Gets the bottom Y coordinate of the element (element Y position + element height)
参数项：
  • local : Boolean
    True表示为获取局部CSS位置而非页面坐标。True to get the local css position instead of page coordinate
返回值：
  • Number
Element
position( String pos, Number zIndex, Number x, Number y )
初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前...
初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。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.
参数项：
  • pos : String
    （可选的） 使用"relative","absolute"或"fixed"的定位。(optional) Positioning to use "relative", "absolute" or "fixed"
  • zIndex : Number
    （可选的） z-Index值。(optional) The zIndex to apply
  • x : Number
    （可选的）设置页面X方向位置。(optional) Set the page X position
  • y : Number
    （可选的）设置页面Y方向位置。(optional) Set the page Y position
返回值：
  • void
Element
clearPositioning( String value ) : Ext.Element
当文档加载后清除位置并复位到默认。Clear positioning ...
当文档加载后清除位置并复位到默认。Clear positioning back to the default when the document was loaded
参数项：
  • value : String
    （可选的） 用于left,right,top,bottom的值，默认为''(空白字符串)。你可使用'auto'。(optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
返回值：
  • Ext.Element
    this
Element
getPositioning() : Object
返回一个包含CSS定位信息的对象。有用的技巧：连同setPostion...
返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。Gets an object with all CSS positioning properties. Useful along with setPostioning to get snapshot before performing an update and then restoring the element.
参数项：
  • None.
返回值：
  • Object
Element
getBorderWidth( String side ) : Number
返回指定边（side(s)）的padding宽度。Gets the w...
返回指定边（side(s)）的padding宽度。Gets the width of the border(s) for the specified side(s)
参数项：
  • side : String
    可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到(l)eft padding +(r)ight padding。Can be t, l, r, b or any combination of those to add multiple values. For example, passing lr would get the border (l)eft width + the border (r)ight width.
返回值：
  • Number
    四边的padding之和。The width of the sides passed added together
Element
getPadding( String side ) : Number
获取指定方位（side(s)）的padding宽度。Gets the ...
获取指定方位（side(s)）的padding宽度。Gets the width of the padding(s) for the specified side(s)
参数项：
  • side : String
    可以是t, l, r, b或是任何组合，例如，传入lr的参数会得到(l)eft padding +(r)ight padding。Can be t, l, r, b or any combination of those to add multiple values. For example, passing lr would get the padding (l)eft + the padding (r)ight.
返回值：
  • Number
    四边的padding之和The padding of the sides passed added together
Element
setPositioning( Object posCfg ) : Ext.Element
由getPositioning()返回的对象去进行定位。Set pos...
由getPositioning()返回的对象去进行定位。Set positioning with an object returned by getPositioning().
参数项：
  • posCfg : Object
返回值：
  • Ext.Element
    this
Element
setLeftTop( String left, String top ) : Ext.Element
快速设置left和top（采用默认单位）。Quick set left...
快速设置left和top（采用默认单位）。Quick set left and top adding default units
参数项：
  • left : String
    CSS的left属性值The left CSS property value
  • top : String
    CSS的top属性值The top CSS property value
返回值：
  • Ext.Element
    this
Element
move( String direction, Number distance, Boolean/Object animate ) : Ext.Element
移动这个元素到相对于当前的位置。Move this element r...
移动这个元素到相对于当前的位置。Move this element relative to its current position.
参数项：
  • direction : String
    允许的值：Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
  • distance : Number
    元素移动有多远（像素）How far to move the element in pixels
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
clip() : Ext.Element
保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使...
保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip来移除。Store the current overflow setting and clip overflow on the element - use unclip to remove
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
unclip() : Ext.Element
在调用clip()之前，返回原始的裁剪部分（溢出的）。Return c...
在调用clip()之前，返回原始的裁剪部分（溢出的）。Return clipping (overflow) to original clipping before clip() was called
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
clearOpacity() : Ext.Element
清除这个元素的透明度设置。IE有时候会用到。Clears any op...
清除这个元素的透明度设置。IE有时候会用到。Clears any opacity settings from this element. Required in some cases for IE.
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
hide( Boolean/Object animate ) : Ext.Element
隐藏此元素-使用display mode来决定用"display"抑或...
隐藏此元素-使用display mode来决定用"display"抑或"visibility"。请参阅setVisible。Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
参数项：
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
show( Boolean/Object animate ) : Ext.Element
显示此元素-使用display mode来决定用"display"抑或...
显示此元素-使用display mode来决定用"display"抑或"visibility"。请参阅setVisible。Show this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.
参数项：
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
update( String html, Boolean loadScripts, Function callback ) : Ext.Element
更新该元素的innerHTML属性，有时遇到脚本便可以执行。Updat...
更新该元素的innerHTML属性，有时遇到脚本便可以执行。Update the innerHTML of this element, optionally searching for and processing scripts
参数项：
  • html : String
    新的HTMLThe new HTML
  • loadScripts : Boolean
    （可选的） true表示为遇到脚本要执行(optional) True to look for and process scripts (defaults to false)
  • callback : Function
    当更新完成后，你加载一个异步函数执行它，以得知更新完成。(optional) For async script loading you can be notified when the update completes
返回值：
  • Ext.Element
    this
Element
load() : Ext.Element
直接访问Updater的Ext.Updaterupdate方法（相同的...
直接访问Updater的Ext.Updaterupdate方法（相同的参数）。参数与Ext.Updaterupdate方法的一致。Direct access to the Updater Ext.Updaterupdate method. The method takes the same object parameter as Ext.Updaterupdate
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
getUpdater() : Ext.Updater
获取这个元素的UpdateManager。Gets this elem...
获取这个元素的UpdateManager。Gets this element's Updater
参数项：
  • None.
返回值：
  • Ext.Updater
    The Updater
Element
unselectable() : Ext.Element
禁止该元素的文本可被选择（可跨浏览器）。Disables text s...
禁止该元素的文本可被选择（可跨浏览器）。Disables text selection for this element (normalized across browsers)
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
getCenterXY() : Array
返回该元素的x，y到屏幕中心的值 Calculates the x, ...
返回该元素的x，y到屏幕中心的值 Calculates the x, y to center this element on the screen
参数项：
  • None.
返回值：
  • Array
    The x, y values [x, y]
Element
center( Mixed centerIn )
在视图或其他元素中，居中元素。Centers the Element ...
在视图或其他元素中，居中元素。Centers the Element in either the viewport, or another Element.
参数项：
  • centerIn : Mixed
    （可选的）视图或其他元素(optional) The element in which to center the element.
返回值：
  • void
Element
isBorderBox() : Boolean
测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。...
测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。Tests various css rules/browsers to determine if this element uses a border box
参数项：
  • None.
返回值：
  • Boolean
Element
getBox( Boolean contentBox, Boolean local ) : Object
返回一个BOX对象，形如{x, y, width, height}，可...
返回一个BOX对象，形如{x, y, width, height}，可用于设置其他与之匹配的元素的大小/位置。Return a box {x, y, width, height} that can be used to set another elements size/location to match this element.
参数项：
  • contentBox : Boolean
    （可选的）true表示为返回元素内容的BOX(optional)。If true a box for the content of the element is returned.
  • local : Boolean
    （可选的） true表示为返回元素的left和top代替页面的x/y。(optional) If true the element's left and top are returned instead of page x/y.
返回值：
  • Object
    box BOX对象，形如{x, y, width, height}
Element
getFrameWidth( String sides ) : Number
传入的“side”的参数，统计边框和内补丁（padding & bor...
传入的“side”的参数，统计边框和内补丁（padding & borders）的宽度并返回该值。参阅getBorderWidth()以得到更多sides的资料。Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth() for more information about the sides.
参数项：
  • sides : String
返回值：
  • Number
Element
setBox( Object box, Boolean adjust, Boolean/Object animate ) : Ext.Element
设置元素之Box。使用getBox() 在其他对象身上获取box对象。...
设置元素之Box。使用getBox() 在其他对象身上获取box对象。如果动画为true，那么高度和宽度都会同时出现动画效果。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.
参数项：
  • box : Object
    填充的Box {x, y, width, height}The box to fill {x, y, width, height}
  • adjust : Boolean
    （可选的） 是否自动调整由“箱子”问题引起的高度和宽度设置(optional) Whether to adjust for box-model issues automatically
  • animate : Boolean/Object
    （可选的）true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象(optional) true for the default animation or a standard Element animation config object
返回值：
  • Ext.Element
    this
Element
repaint() : Ext.Element
强制浏览器重新渲染该元素。Forces the browser to ...
强制浏览器重新渲染该元素。Forces the browser to repaint this element
参数项：
  • None.
返回值：
  • Ext.Element
    this
Element
getMargins( String sides ) : Object/Number
返回该元素的top、left、right和bottom属性，以表示ma...
返回该元素的top、left、right和bottom属性，以表示margin（外补丁）除非有side参数。若有sides参数传入，即返回已计算好的sides宽度（参见getPading）。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)
参数项：
  • sides : String
    （可选的） 任何 l, r, t, b的组合，以获取该sides的统计。(optional) Any combination of l, r, t, b to get the sum of those sides
返回值：
  • Object/Number
Element
createProxy( String/Object config, String/HTMLElement renderTo, Boolean matchBox ) : Ext.Element
创建当前元素的代理（Proxy）元素。Creates a proxy ...
创建当前元素的代理（Proxy）元素。Creates a proxy element of this element
参数项：
  • config : String/Object
    代理元素的class名称或是DomHelper配置项对象The class name of the proxy element or a DomHelper config object
  • renderTo : String/HTMLElement
    （可选的） 成为代理的元素或是元素ID（默认为 document.body）(optional) The element or element id to render the proxy to (defaults to document.body)
  • matchBox : Boolean
    (optional) （可选的） true表示为立即与代理对齐和设置大小（默认为false）True to align and size the proxy to this element now (defaults to false)
返回值：
  • Ext.Element
    新代理元素The new proxy element
Element
mask( String msg, String msgCls ) : Element
在元素身上遮上一个蒙板（mask），以禁止用户操作。须依赖core.c...
在元素身上遮上一个蒙板（mask），以禁止用户操作。须依赖core.css文件。这个方法只能作用于接受子节点（child nodes）的元素。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.
参数项：
  • msg : String
    （可选的） 蒙板作用时显示的信息(optional) A message to display in the mask
  • msgCls : String
    （可选的） 蒙板元素的CSS类(optional) A css class to apply to the msg element
返回值：
  • Element
    蒙板元素The mask element
Element
unmask()
移除之前用过的蒙板。Removes a previously appl...
移除之前用过的蒙板。Removes a previously applied mask.
参数项：
  • None.
返回值：
  • void
Element
isMasked() : Boolean
返回true表示为这个元素应用了蒙板。Returns true if ...
返回true表示为这个元素应用了蒙板。Returns true if this element is masked
参数项：
  • None.
返回值：
  • Boolean
Element
createShim() : Ext.Element
创建一个“iframe垫片”来使得select和其他windowed对...
创建一个“iframe垫片”来使得select和其他windowed对象在该元素显示之下。Creates an iframe shim for this element to keep selects and other windowed objects from showing through.
参数项：
  • None.
返回值：
  • Ext.Element
    新垫片元素The new shim element
Element
remove()
从DOM里面移除当前元素，并从缓存中删除。Removes this e...
从DOM里面移除当前元素，并从缓存中删除。Removes this element from the DOM and deletes it from the cache
参数项：
  • None.
返回值：
  • void
Element
hover( Function overFn, Function outFn, Object scope ) : Ext.Element
设置事件句柄，当鼠标在此元素之上作用的Css样式类。自动过滤因mous...
设置事件句柄，当鼠标在此元素之上作用的Css样式类。自动过滤因mouseout事件引起在子元素上的轻移（Flicker） Sets up event handlers to call the passed functions when the mouse is over this element. Automatically filters child element mouse events.
参数项：
  • overFn : Function
  • outFn : Function
  • scope : Object
    (optional)
返回值：
  • Ext.Element
    this
Element
addClassOnOver( String className ) : Ext.Element
数组当鼠标位于元素上方时作用的CSS样式类。Sets up event...
数组当鼠标位于元素上方时作用的CSS样式类。Sets up event handlers to add and remove a css class when the mouse is over this element
参数项：
  • className : String
返回值：
  • Ext.Element
    this
Element
addClassOnFocus( String className ) : Ext.Element
设置当元素得到焦点（focus）时作用的CSS样式类。Sets up ...
设置当元素得到焦点（focus）时作用的CSS样式类。Sets up event handlers to add and remove a css class when this element has the focus
参数项：
  • className : String
返回值：
  • Ext.Element
    this
Element
addClassOnClick( String className ) : Ext.Element
当鼠标在该元素上面按下接着松开（即单击效果），设置事件处理器来添加和移...
当鼠标在该元素上面按下接着松开（即单击效果），设置事件处理器来添加和移除css类。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)
参数项：
  • className : String
返回值：
  • Ext.Element
    this
Element
swallowEvent( String/Array eventName, Boolean preventDefault ) : Ext.Element
事件上报（bubbling）的过程中停止特定的事件，阻止默认动作（可选...
事件上报（bubbling）的过程中停止特定的事件，阻止默认动作（可选的）。Stops the specified event(s) from bubbling and optionally prevents the default action
参数项：
  • eventName : String/Array
    要在上报过程中停止的事件或事件构成的数组an event / array of events to stop from bubbling
  • preventDefault : Boolean
    （可选的）true表示阻止默认动作(optional) true to prevent the default action too
返回值：
  • Ext.Element
    this
Element
parent( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
返回当前节点的那个父节点，可选地可送入一个期待的选择符。Gets th...
返回当前节点的那个父节点，可选地可送入一个期待的选择符。Gets the parent node for this element, optionally chaining up trying to match a selector
参数项：
  • selector : String
    (optional) 通过简易选择符来查找父节点Find a parent node that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    父节点或是null
Element
next( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取下一个侧边节点，跳过文本节点。Gets the next sibl...
获取下一个侧边节点，跳过文本节点。Gets the next sibling, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找下一个侧边节点(optional) Find the next sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    下一个侧边节点或nullThe next sibling or null
Element
prev( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取上一个侧边节点，跳过文本节点。Gets the previous ...
获取上一个侧边节点，跳过文本节点。Gets the previous sibling, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找上一个侧边节点(optional) Find the previous sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    上一个侧边节点或nullThe previous sibling or null
Element
first( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取第一个子元素，跳过文本节点。Gets the first chil...
获取第一个子元素，跳过文本节点。Gets the first child, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找第一个子元素(optional) Find the next sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    第一个子元素或nullThe first child or null
Element
last( String selector, Boolean returnDom ) : Ext.Element/HTMLElement
获取最后一个子元素，跳过文本节点。Gets the last chil...
获取最后一个子元素，跳过文本节点。Gets the last child, skipping text nodes
参数项：
  • selector : String
    （可选的） 通过简易选择符来查找最后一个元素(optional) Find the previous sibling that matches the passed simple selector
  • returnDom : Boolean
    （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素(optional) True to return a raw dom node instead of an Ext.Element
返回值：
  • Ext.Element/HTMLElement
    最后一个元素或nullThe last child or null
Element
createChild( Object config, HTMLElement insertBefore, Boolean returnDom ) : Ext.Element
传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。C...
传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
参数项：
  • config : Object
    DomHelper元素配置项对象。如果没有传入特定的要求，如{tag:'input'}，那么将自动用DIV去创建，并附有一些属性。DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be automatically generated with the specified attributes.
  • insertBefore : HTMLElement
    （可选的） 该元素的子元素(optional) a child element of this element
  • returnDom : Boolean
    (optional) （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素true to return the dom node instead of creating an Element
返回值：
  • Ext.Element
    新的子元素The new child element
Element
wrap( Object config, Boolean returnDom ) : HTMLElement/Element
创建一个新的元素，包裹在当前元素外面。Creates and wrap...
创建一个新的元素，包裹在当前元素外面。Creates and wraps this element with another element
参数项：
  • config : Object
    （可选的） 包裹元素（null的话则是一个空白的div）的DomHelper配置项对象(optional) DomHelper element config object for the wrapper element or null for an empty div
  • returnDom : Boolean
    (optional) （可选的） true表示为返回原始过的DOM元素，而非Ext.Element类型的元素True to return the raw DOM element instead of Ext.Element
返回值：
  • HTMLElement/Element
    刚创建好的包裹元素The newly created wrapper element
Element
insertHtml( String where, String html, Boolean returnEl ) : HTMLElement/Ext.Element
插入HTML片断到这个元素。Inserts an html fragm...
插入HTML片断到这个元素。Inserts an html fragment into this element
参数项：
  • where : String
    要插入的html放在元素的哪里。-Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
  • html : String
    HTML片断。The HTML fragment
  • returnEl : Boolean
    true表示为返回一个Ext.Element类型的DOM对象。(optional) True to return an Ext.Element (defaults to false)
返回值：
  • HTMLElement/Ext.Element
    被插入之节点（或最近的，如果超过一处插入的话）。The inserted node (or nearest related if more than 1 inserted)
Element
set( Object o, Boolean useSet ) : Ext.Element
传入属性（attributes）的参数，使之成为该元素的属性（一个样式...
传入属性（attributes）的参数，使之成为该元素的属性（一个样式的属性可以是字符串，对象或函数function）。Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
参数项：
  • o : Object
    属性对象。The object with the attributes
  • useSet : Boolean
    （可选的） false表示为用expandos来重写默认的setAttribute。(optional) false to override the default setAttribute to use expandos.
返回值：
  • Ext.Element
    this
Element
translatePoints( Number/Array x, Number y ) : Object
送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。T...
送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。Translates the passed page coordinates into left/top css values for this element
参数项：
  • x : Number/Array
    页面x or 数组 [x, y]The page x or an array containing [x, y]
  • y : Number
    （可选的）如x不是数组那必须指定y(optional) The page y, required if x is not an array
返回值：
  • Object
    包含left、top属性的对象，如 {left: (值), top: (值)}An object with left and top properties. e.g. {left: (value), top: (value)}
Element
getScroll() : Object
返回元素当前滚动的位置。Returns the current scr...
返回元素当前滚动的位置。Returns the current scroll position of the element.
参数项：
  • None.
返回值：
  • Object
    包含滚动位置的对象，格式如 {left: (scrollLeft), top: (scrollTop)}An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
Element
getColor( String attr, String defaultValue, String prefix )
为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值...
为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values。
参数项：
  • attr : String
    CSS属性The css attribute
  • defaultValue : String
    当找不到有效的颜色时所用的默认值。The default value to use when a valid color isn't found
  • prefix : String
    （可选的） 默认为#。当应用到颜色动画时须为空白字串符。Use an empty string when working with color anims.
返回值：
  • void
Element
usage( String class ) : Ext.Element
将指定的元素打包到一个特定的样式/markup块，渲染成为斜纹背景、圆...
将指定的元素打包到一个特定的样式/markup块，渲染成为斜纹背景、圆角和四边投影的灰色容器。用法举例：

//
Ext.get("foo").boxWrap();

Ext.get("foo").boxWrap().addClass("x-box-blue");
参数项：
  • class : String
    （可选的）一个CSS基类，应用到包裹元素（默认为'x-box'）。注意有许多依赖该CSS规则来产生整体的效果。所以你提供一个交替的基样式，必须保证你所提供的都是所需的规则。
返回值：
  • Ext.Element
    this
Element
boxWrap( String class ) : Ext.Element
Wrap()的高级版本。Wrap将指定的元素打包到一个特定的样式/ma...
Wrap()的高级版本。Wrap将指定的元素打包到一个特定的样式/markup块，产生斜纹背景、圆角和四边投影的灰色容器。用法举例： Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a gradient background, rounded corners and a 4-way shadow. Example usage:

// 基本box打包Basic box wrap
Ext.get("foo").boxWrap();

// 你也可以加入新的CSS样式类来定义box的外观。You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue'是内建的参考项。看看例子中是怎么创建一个自定义的样式。'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");
参数项：
  • class : String
    （可选的）一个CSS基类，应用到包裹元素（默认为'x-box'）(optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box'). 注意这里须要依赖一些CSS样式规则来产生整体的效果。所以你提供一个交替的基样式，必须保证你所提供的都是所需的规则。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.
返回值：
  • Ext.Element
    this
Element
getAttributeNS( String namespace, String name ) : String
在DOM节点中的某个元素，返回其一个命名空间属性的值。Returns ...
在DOM节点中的某个元素，返回其一个命名空间属性的值。Returns the value of a namespaced attribute from the element's underlying DOM node.
参数项：
  • namespace : String
    要查找属性所在的命名空间The namespace in which to look for the attribute
  • name : String
    属性名称The attribute name
返回值：
  • String
    属性值The attribute value
Element
on( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数（addListener的简写方式）Appends...
加入一个事件处理函数（addListener的简写方式）Appends an event handler (shorthand for addListener).
参数项：
  • eventName : String
    事件处理函数的名称The type of event to handle
  • fn : Function
    事件处理函数The handler function the event invokes
  • scope : Object
    （可选的）函数的作用域（默认这个元素）(optional) The scope (this element) of the handler function
  • options : Object
    （可选的）标准的事件addListener 配置项对象(optional) An object containing standard addListener options @member Ext.Element
返回值：
  • void
Element
un( String eventName, Function fn, Object scope ) : Ext.Element
从这个元素上移除一个事件处理函数（removeListener的简写方...
从这个元素上移除一个事件处理函数（removeListener的简写方式）。Removes an event handler from this element (shorthand for removeListener).
参数项：
  • eventName : String
    要移除的事件处理函数的名称the type of event to remove
  • fn : Function
    事件处理器the method the event invokes
  • scope : Object
    （可选的）函数的作用域（默认这个元素）(optional) The scope (The this reference) of the handler function. Defaults to this Element.
返回值：
  • Ext.Element
    this @member Ext.Element
Element
autoBoxAdjust()
true表示为自动调整由box-mode问题引起的高度和宽度设置（默认...
true表示为自动调整由box-mode问题引起的高度和宽度设置（默认true）。true to automatically adjust width and height settings for box-model issues (default to true)
参数项：
  • None.
返回值：
  • void
Element
get( Mixed el ) : Element
获取元素对象的静态方法。Static method to retrie...
获取元素对象的静态方法。Static method to retrieve Ext.Element objects.

这个方法并非能获取Component。 这是一个对DOM元素进行Ext.Element类型的封装方法。要获取组件，请使用Ext.ComponentMgrget方法。This method retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentMgrget.

如果是相同的对象的话，只是从缓存中提取。Uses simple caching to consistently return the same object. 如果通过AJAX或DOM再创建对象，那么它是同一个ID，这里会自动修正。Automatically fixes if an object was recreated with the same id via AJAX or DOM.

参数项：
  • el : Mixed
    节点的id，一个DOM节点或是已存在的元素The id of the node, a DOM Node or an existing Element.
返回值：
  • Element
    Element类型的元素对象（null的话就代表没有找到元素）The Element object (or null if no matching element was found) @member Ext
Element
fly( String/HTMLElement el, String named ) : Element
获取享元的元素，传入的节点会成为活动元素。这里不会保存该元素的引用（r...
获取享元的元素，传入的节点会成为活动元素。这里不会保存该元素的引用（reference）－可由其它代码重写dom节点。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.
参数项：
  • el : String/HTMLElement
    Dom节点或idThe dom node or id
  • named : String
    （可选的） 为避免某些冲突（如在ext内部的“_internal”），可另外起一个名字。(optional) Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_internal") @static
返回值：
  • Element
    共享的Element对象（null表示为找不到元素）The shared Element object (or null if no matching element was found)
Element

公共事件

这个类没有公告事件。


类Ext.layout.AbsoluteLayout

包： | Extlayout
定义的文件： | AbsoluteLayout.js
类全称： | Ext.layout.AbsoluteLayout
继承自于： | Ext.layout.AnchorLayout

此类是Ext.layout.AnchorLayout的子类，它增加了通过标准的x、y的配置项来定位的能力。
Inherits the anchoring of Ext.layout.AnchorLayout and adds the ability for x/y positioning using the standard x and y component config options.

应通过继承此类或设置Ext.Containerlayout的配置layout:'absolute'的方式创建该类，一般很少通过关键字new直接使用该类。
This class is intended to be extended or created via the layout configuration property. See Ext.Containerlayout 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
    }]
});

配置项

配置项 定义者
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
AbsoluteLayout()
参数项：
  • None.
返回值：
  • void
AbsoluteLayout
AnchorLayout()
参数项：
  • None.
返回值：
  • void
AnchorLayout

公共事件

这个类没有公告事件。


类Ext.layout.Accordion

包： | Extlayout
定义的文件： | AccordionLayout.js
类全称： | Ext.layout.Accordion
继承自于： | Ext.layout.FitLayout

此layout包含了多个像卡片垂直方向堆栈的面板。在某一时间，只有一个卡片（面板）是可见的。每个面板都支持内建的展开和闭合功能。应通过继承此类或设置Ext.Containerlayout的配置layout:'accordion'的方式创建，而一般很少通过关键字new直接使用。
This is a layout that contains multiple panels in an expandable accordion style such that only one panel can be open at any given time. Each panel has built-in support for expanding and collapsing. This class is intended to be extended or created via the layout:'accordion' Ext.Containerlayout config, and should generally not need to be created directly via the new keyword.

注意必须通过Ext.ContainerlayoutConfig属性对象来指定属于此布局的配置，以便传入到layout的内部。
Note that when creating a layout via config, the layout-specific config properties must be passed in via the Ext.ContainerlayoutConfig object which will then be applied internally to the layout. 用法举例：Example usage:

var accordion = new Ext.Panel({
    title: 'Accordion Layout',
    layout:'accordion',
    defaults: {
        // 作用每个面板上applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layoutConfig: {
        // layout特定的配置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>'
    }]
});

配置项

配置项 定义者
fill : Boolean
True表示为调整活动的面板以填充整个容器的空白空间，false表示使...
True表示为调整活动的面板以填充整个容器的空白空间，false表示使用当前的高度，或不声明即表示自动高度（缺省为true）。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).
Accordion
autoWidth : Boolean
True表示为设置每个容器的宽度为‘auto’，false表示用子项当...
True表示为设置每个容器的宽度为‘auto’，false表示用子项当前的宽度（缺省为true）。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 grid, will not function properly within layouts if they have auto width, so in such cases this config should be set to false.
Accordion
titleCollapse : Boolean
True表示为单击标题栏上任意的位置就允许展开、闭合每个子面板，fal...
True表示为单击标题栏上任意的位置就允许展开、闭合每个子面板，false表示为只能从工具条上轮换的按钮来展开、闭合面板（缺省为true）。当设置为fasle,hideCollapseTool也必须为fasle。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, hideCollapseTool should be false also.
Accordion
hideCollapseTool : Boolean
True表示为隐藏包含面板上闭合、展开轮换按钮，false表示为显示（...
True表示为隐藏包含面板上闭合、展开轮换按钮，false表示为显示（默认为true）， 当设置为true,hideCollapseTool也必须为true。True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false). When set to true, titleCollapse should be true also.
Accordion
collapseFirst : Boolean
True表示为确保展开闭合的轮换按钮总是排在第一个的位置渲染（从左算起...
True表示为确保展开闭合的轮换按钮总是排在第一个的位置渲染（从左算起），false表示为放在最后显示（默认为fasle）。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).
Accordion
animate : Boolean
True表示为当展开、闭合面板时附有动画效果以滑动打开和关闭面板。注意...
True表示为当展开、闭合面板时附有动画效果以滑动打开和关闭面板。注意：要在每个面板上设置特定延时的配置项，必须在layout级别上设置为undefined。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.
Accordion
sequence : Boolean
Experimental　如打开动画，会按顺序地执行动画。. If...
Experimental　如打开动画，会按顺序地执行动画。. If animate is set to true, this will result in each animation running in sequence.
Accordion
activeOnTop : Boolean
True表示为交换每个面板的位置，以便成为容器上的第一项，false表...
True表示为交换每个面板的位置，以便成为容器上的第一项，false表示为保持原有渲染的顺序， "animate:true"时该项不兼容(缺省为false)。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).
Accordion
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
Accordion()
参数项：
  • None.
返回值：
  • void
Accordion
setActiveItem( String/Number item )
让布局中某一项设为活动的（或展开的）。Sets the active ...
让布局中某一项设为活动的（或展开的）。Sets the active (expanded) item in the layout.
参数项：
  • item : String/Number
    组件id的字符串或tab面板的数字索引。The string component id or numeric index of the item to activate
返回值：
  • void
Accordion
FitLayout()
参数项：
  • None.
返回值：
  • void
FitLayout

公共事件

这个类没有公告事件。


ContainerLayout
    FitLayout
      AccordionLayout

Class Ext.layout.AccordionLayout

Package: | Ext.layout
Defined In: | AccordionLayout.js
Class: | AccordionLayout
Extends: | FitLayout

This is a layout that contains multiple panels in an expandable accordion style such that only one panel can be open at any given time. Each panel has built-in support for expanding and collapsing.

This class is intended to be extended or created via the layout configuration property. See 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>'
    }]
});

Config Options

Config Options Defined By
activeOnTop : Boolean
True to swap the position of each panel as it is expanded so that it becomes the first item in the container, false ...
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).
AccordionLayout
animate : Boolean
True to slide the contained panels open and closed during expand/collapse using animation, false to open and close d...
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.
AccordionLayout
autoWidth : Boolean
True to set each contained item's width to 'auto', false to use the item's current width (defaults to true). Note th...
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 grid, will not function properly within layouts if they have auto width, so in such cases this config should be set to false.
AccordionLayout
collapseFirst : Boolean
True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the con...
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).
AccordionLayout
extraCls : String
An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to t...

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
fill : Boolean
True to adjust the active item's height to fill the available space in the container, false to use the item's curren...
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).
AccordionLayout
hideCollapseTool : Boolean
True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false). When s...
True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false). When set to true, titleCollapse should be true also.
AccordionLayout
renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout
sequence : Boolean
Experimental. If animate is set to true, this will result in each animation running in sequence.
AccordionLayout
titleCollapse : Boolean
True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow expand/c...
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, hideCollapseTool should be false also.
AccordionLayout

Public Properties

Property Defined By
activeItem : Ext.Component
A reference to the Ext.Component that is active. For example, if(myPanel.layout.activeItem.id == 'item-1') { ... } a...
A reference to the 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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
The Ext.Template used by Field rendering layout classes (such as Ext.layout.FormLayout) to create the DOM structure o...
The Ext.Template used by Field rendering layout classes (such as 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 Ext.layout.FormLayout.getTemplateArgs.
ContainerLayout

Public Methods

Method Defined By
setActiveItem( String/Number item ) : void
Sets the active (expanded) item in the layout.
Sets the active (expanded) item in the layout.
Parameters:
  • item : String/Number
    The string component id or numeric index of the item to activate
Returns:
  • void
AccordionLayout

Public Events

This class has no public events.


类Ext.layout.AnchorLayout

包： | Extlayout
定义的文件： | AnchorLayout.js
类全称： | Ext.layout.AnchorLayout
继承自于： | Ext.layout.ContainerLayout

这是一种相对于容器四周的尺寸大小，对其包含在内的元素进行定位式（Anchoring）的布局。如果容器大小发生变化，所有已固定的项都会随着定位规则而变化（按照规则自动渲染）。应通过继承此类或设置Ext.Containerlayout的配置layout:'anchor' 的方式创建，一般很少通过关键字new直接使用。
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 anchor rules. This class is intended to be extended or created via the layout:'anchor' Ext.Containerlayout config, and should generally not need to be created directly via the new keyword.

AnchorLayout不存在任何直接的配置项。不过使用这种AnchorLayot的布局就可使用针对该布局的anchorSize配置项属性进行设置。缺省下，AnchorLayout会基于其自身容器的大小来计算出定位的尺寸数值，但若指定了anchorSize的值，AnchorLayout就会 按照该尺寸生成一个虚拟的容器，在这个虚拟容器上计算出定位尺寸，使得定位逻辑和父容器相分离，可实现独立调节大小。
AnchorLayout does not have any direct config options (other than inherited ones). However, the container using the AnchorLayout can supply an anchoring-specific config property of anchorSize. By default, AnchorLayout will calculate anchor measurements based on the size of the container itself. However, 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.

AnchorLayout所添加的子类都支持anchorSize的配置项属性，这是一个字符串，包含两种值：水平定位值和垂直定位值（例如，'100% 50%'）。这个值便是告知子项应该怎么在容器内定位。可使用的定位值有下列类型：
The items added to an AnchorLayout can also supply 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%'). This value is what tells the layout how the item should be anchored to the container. The following types of anchor values are supported:

  • Percentage: 1到100的任意百分比值。第一个值是容器作用下子项的宽度百分比，第二个值是高度。例如'100% 50%'就是生成完整的宽度和一半高度的子项。如果指定的是单独的值就意味着高度和宽度都是这个值。
    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. Example: '100% 50%' would render an item the complete width of the container and 1/2 its height. If only one anchor value is supplied it is assumed to be the width value and the height will default to auto.
  • Offsets: 任意整数值，可为正数或负数。第一个值是相当于容器右边缘的便宜值，第二个是相当于底部边缘的偏移值。例如'-50 -100'即表示生成的容器在宽度和高度分别减去50象素和100象素。若只是指定一个值，那这个值将应用到右偏移而下偏移则缺省为0。
    Any positive or negative integer value. The first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. Example: '-50 -100' would render an item the complete width of the container minus 50 pixels and the complete height minus 100 pixels. If only one anchor value is supplied it is assumed to be the right offset value and the bottom offset will default to 0.
  • Sides: 有效的值是'right'（或'r'）和'bottom'（或'b'）。要么在容器上设置一个固定的值，要么在渲染时候指定好anchorSize的配置项，才能有正确的效果。
    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.

可灵活设置定位的值。如'-50 75%'就表明这是距离右边缘50像素、容器75%的高度。
Anchor values can also be mixed as needed. For example, '-50 75%' would render the width offset from the container right edge by 50 pixels and 75% of the container's height.

配置项

配置项 定义者
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
AnchorLayout()
参数项：
  • None.
返回值：
  • void
AnchorLayout

公共事件

这个类没有公告事件。


类Ext.layout.BorderLayout

包： | Extlayout
定义的文件： | BorderLayout.js
类全称： | Ext.layout.BorderLayout
继承自于： | Ext.layout.ContainerLayout

这是一种多面板，面向应用程序UI的布局风格，可支持多个套嵌面板，各区域间自动分隔和扩展/收缩功能。应通过继承此类或设置Ext.Containerlayout的配置layout:'border' 的方式创建，一般很少通过关键字new直接使用。
This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic split bars between regions and built-in expanding and collapsing of regions. This class is intended to be extended or created via the layout:'border' Ext.Containerlayout config, and should generally not need to be created directly via the new keyword.

BorderLayout不存在任何直接的配置项（不同于继承）。所有为BorderLayout可制定的配置均位于Ext.layout.BorderLayout.Region和Ext.layout.BorderLayout.SplitRegion。
BorderLayout does not have any direct config options (other than inherited ones). All configs available for customizing the BorderLayout are at the Ext.layout.BorderLayout.Region and Ext.layout.BorderLayout.SplitRegion levels.

BorderLayout具有固定性，渲染之后就不会任意变动或改变格局。中央区域（center region）在BorderLayout设定中不可或缺。假使没有其它的区域，中央布局便会就是该布局的全部区域。
The regions of a BorderLayout are fixed at render time and thereafter, no regions may be removed or added.The BorderLayout must have a center region, which will always fill the remaining space not used by the other regions in the layout.

用法举例：Example usage:

var border = new Ext.Panel({
    title: 'Border布局Border Layout',
    layout:'border',
    items: [{
        title: '南部面板South Panel',
        region: 'south',
        height: 100,
        minSize: 75,
        maxSize: 250,
        margins: '0 5 5 5'
    },{
        title: '西部面板West Panel',
        region:'west',
        margins: '5 0 0 5',
        cmargins: '5 5 0 5',
        width: 200,
        minSize: 100,
        maxSize: 300
    },{
        title: '主面板Main Content',
        region:'center',
        margins: '5 5 0 0'
    }]
});

配置项

配置项 定义者
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
BorderLayout()
参数项：
  • None.
返回值：
  • void
BorderLayout

公共事件

这个类没有公告事件。


类Ext.layout.BorderLayout.Region

包： | ExtlayoutBorderLayout
定义的文件： | BorderLayout.js
类全称： | Ext.layout.BorderLayout.Region
继承自于： | Object
这是属于BorderLayout的区域，用作布局内的子容器。每一个区域都有自己的布局，并可容纳BorderLayout，或是任意类型的Ext布局类型。区域的大小是自动管理并且不能由用户改变--关于可变化大小的区域，参阅Ext.layout.BorderLayout.SplitRegion。This is a region of a BorderLayout that acts as a subcontainer within the layout. Each region has its own layout that is independent of other regions and the containing BorderLayout, and can be any of the valid Ext layout types. Region size is managed automatically and cannot be changed by the user -- for resizable regions, see Ext.layout.BorderLayout.SplitRegion.

配置项

配置项 |  | 定义者
 | animFloat : Boolean 当一个已关闭的区域上的工具条被点击时，一旦用户的鼠标移开时面板会再次关... 当一个已关闭的区域上的工具条被点击时，一旦用户的鼠标移开时面板会再次关闭（或在外面点击，若autoHide=false的话）。设置animFloat为fasle会阻止这些浮动的面板以动画的方式打开和关闭（默认为true）。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 autoHide = false). Setting animFloat to false will prevent the open and close of these floated panels from being animated (defaults to true). | Region
 | autoHide : Boolean 当一个已关闭的区域上的工具条被点击时，区域的面板会显示为浮动的面板。如... 当一个已关闭的区域上的工具条被点击时，区域的面板会显示为浮动的面板。如果autoHide为true，用户鼠标移开面板时会自动隐藏面板。若autoHide为false，面板会一直显示除非用户点击了面板以外的区域（默认为true）。When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel. If autoHide is true, the panel will automatically hide after the user mouses out of the panel. If autoHide is false, the panel will continue to display until the user clicks outside of the panel (defaults to true). | Region
 | collapseMode : String 默认下，可关闭的区域是通过点击区域标题条上的工具按钮来控制区域是否关闭... 默认下，可关闭的区域是通过点击区域标题条上的工具按钮来控制区域是否关闭的。可选的，当collapseMdoe被设置为'mini'时，区域的分隔条中间仍然会有一个小小的关闭按钮。在'mini'模式下区域会闭合成为一个比常规模式下更细小的水平条。默认下collapseMode是设置为undefined，支持两种值undefined和'mini'。注意如果可关闭的区域如果没有标题条，那么collapseMode必须设置为'mini'以便即使工具按钮没有渲染也可以由用户来关闭区域。By default, collapsible regions are collapsed by clicking the expand/collapse tool button that renders into the region's title bar. 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. By default collapseMode is undefined, and the only two supported values are undefined and 'mini'. Note that if a collapsible region does not have a title bar, then collapseMode must be set to 'mini' in order for the region to be collapsible by the user as the tool button will not be rendered. | Region
 | margins : Object 作用在区域上的外补丁对象，对象的格式如{left: （左边距）, to... 作用在区域上的外补丁对象，对象的格式如{left: （左边距）, top: （上边距）, right: （右边距）, bottom: （下边距）}。An object containing margins to apply to the region in the format {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)} | Region
 | cmargins : Object 作用在区域闭合元素上的外补丁对象，对象的格式如{left: （左边距）... 作用在区域闭合元素上的外补丁对象，对象的格式如{left: （左边距）, top: （上边距）, right: （右边距）, bottom: （下边距）}。An object containing margins to apply to the region's collapsed element in the format {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)} | Region
 | collapsible : Boolean True表示为允许用户闭合此区域（默认为false）。如为true，区... True表示为允许用户闭合此区域（默认为false）。如为true，区域上的title bar将会渲染出“展开/收缩”的按钮，否则将不会显示。注意title bar需要显示的是一个轮换按钮－－如不指定区域的title，那么只有当collapseMode设为'mini'时，区域才能收缩。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 toggle button -- if no region title is specified, the region will only be collapsible if collapseMode is set to 'mini'. | Region
 | split : Boolean True表示为显示在此区域与旁边区域显示Ext.SplitBar，可允... True表示为显示在此区域与旁边区域显示Ext.SplitBar，可允许用户动态调节区域的大小（缺省为false）。当split=true，通常需要指定区域的minSize和maxSize。True to display a Ext.SplitBar between this region and its neighbor, allowing the user to resize the regions dynamically (defaults to false). When split == true, it is common to specify a minSize and maxSize for the BoxComponent representing the region. These are not native configs of BoxComponent, and are used only by this class. | Region
 | floatable : Boolean true表示为可通过单击收缩区域条状就能显示整个区域的面板，浮动在布局... true表示为可通过单击收缩区域条状就能显示整个区域的面板，浮动在布局上。false表示为限制用户只能通过单击“展开expand”按钮才能展开收缩的区域。（缺省为true） 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). | Region
 | minWidth : Number 此区域可允许的最小宽度象素值（缺省为50）。The minimum a... 此区域可允许的最小宽度象素值（缺省为50）。The minimum allowable width in pixels for this region (defaults to 50) | Region
 | minHeight : Number 此区域可允许的最大宽度象素值（缺省为50）。The minimum a... 此区域可允许的最大宽度象素值（缺省为50）。The minimum allowable height in pixels for this region (defaults to 50) | Region

公告属性

属性 |  | 定义者
 | isCollapsed: Boolean True表示为该区域可收缩的。只读的。True if this re... True表示为该区域可收缩的。只读的。True if this region is collapsed. Read-only. | Region
 | panel: Ext.Panel 此区域的面板。只读的。This region's panel. R... 此区域的面板。只读的。This region's panel. Read-only. | Region
 | layout: Layout 此区域的布局。只读的。This region's layout. ... 此区域的布局。只读的。This region's layout. Read-only. | Region
 | position: String 此区域布局的位置（north, south, east, west或... 此区域布局的位置（north, south, east, west或center）。只读的。This region's layout position (north, south, east, west or center). Read-only. | Region

公共方法

方法 定义者
Region( Layout layout, Object config, String position )
参数项：
  • layout : Layout
    任何有效Ext布局类。Any valid Ext layout class
  • config : Object
    配置项对象。The configuration options
  • position : String
    区域的位置。有效的值是：north, south, east, west和center。每个BorderLayout不能缺少center区域作为主要的内容，其它区域是可选的。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.
返回值：
  • void
Region
isVisible() : Boolean
True表示为当前区域已隐藏，反之为false。True if thi...
True表示为当前区域已隐藏，反之为false。True if this region is currently visible, else false.
参数项：
  • None.
返回值：
  • Boolean
Region
getMargins() : Object
返回当前区域的外补丁。如果区域是闭合的，就返回cmargins（col...
返回当前区域的外补丁。如果区域是闭合的，就返回cmargins（collapsed margins）值。Returns the current margins for this region. If the region is collapsed, the cmargins (collapsed margins) value will be returned, otherwise the margins value will be returned.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象： {left: （左边距）, top: （上边距）, right: （右边距）, bottom: （下边距）} An object containing the element's margins: {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)}
Region
getSize() : Object
返回此区域的当前大小尺寸。如果区域是闭合的，那么就返回collapse...
返回此区域的当前大小尺寸。如果区域是闭合的，那么就返回collapsedEl的大小。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.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象： {width: （元素宽度）, height:（元素高度）} An object containing the element's size: {width: (element width), height: (element height)}
Region
setPanel( Ext.Panel panel )
指定一个面板作为此区域的容器元素 Sets the specified...
指定一个面板作为此区域的容器元素 Sets the specified panel as the container element for this region.
参数项：
  • panel : Ext.Panel
    新面板The new panel
返回值：
  • void
Region
getMinWidth() : Number
返回此区域可允许的最小宽度。Returns the minimum a...
返回此区域可允许的最小宽度。Returns the minimum allowable width for this region.
参数项：
  • None.
返回值：
  • Number
    最小宽度The minimum width
Region
getMinHeight() : Number
返回此区域可允许的最小高度。Returns the minimum a...
返回此区域可允许的最小高度。Returns the minimum allowable height for this region.
参数项：
  • None.
返回值：
  • Number
    最小高度The minimum height
Region

公共事件

这个类没有公告事件。


类Ext.layout.BorderLayout.SplitRegion

包： | ExtlayoutBorderLayout
定义的文件： | BorderLayout.js
类全称： | Ext.layout.BorderLayout.SplitRegion
继承自于： | Ext.layout.BorderLayout.Region
这是为用户调节区域大小而内置的Ext.SplitBar的特殊类型BorderLayout区域。This is a specialized type of BorderLayout region that has a built-in Ext.SplitBar for user resizing of regions.

配置项

配置项 |  | 定义者
 | splitTip : String 当用户鼠标悬浮到一个非闭合的区域分隔条上提示文本（缺省为"Drag t... 当用户鼠标悬浮到一个非闭合的区域分隔条上提示文本（缺省为"Drag to resize."）。只当useSplitTips = true时有效。The tooltip to display when the user hovers over a non-collapsible region's split bar (defaults to "Drag to resize."). Only applies if useSplitTips = true. | SplitRegion
 | collapsibleSplitTip : String 当用户鼠标悬浮到已闭合的区域分隔条上提示文本（缺省为"Drag to ... 当用户鼠标悬浮到已闭合的区域分隔条上提示文本（缺省为"Drag to resize. Double click to hide."）。只当useSplitTips = true时有效。The tooltip to display when the user hovers over a collapsible region's split bar (defaults to "Drag to resize. Double click to hide."). Only applies if useSplitTips = true. | SplitRegion
 | useSplitTips : Boolean True表示为当用户悬浮在区域splitBar上时显示的提示信息（缺省... True表示为当用户悬浮在区域splitBar上时显示的提示信息（缺省为false）。tooltip的文本以相应是splitTip或collapsibleSplitTip的值。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 splitTip or collapsibleSplitTip as appropriate. | SplitRegion
 | animFloat : Boolean 当一个已关闭的区域上的工具条被点击时，一旦用户的鼠标移开时面板会再次关... 当一个已关闭的区域上的工具条被点击时，一旦用户的鼠标移开时面板会再次关闭（或在外面点击，若autoHide=false的话）。设置animFloat为fasle会阻止这些浮动的面板以动画的方式打开和关闭（默认为true）。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 autoHide = false). Setting animFloat to false will prevent the open and close of these floated panels from being animated (defaults to true). | Region
 | autoHide : Boolean 当一个已关闭的区域上的工具条被点击时，区域的面板会显示为浮动的面板。如... 当一个已关闭的区域上的工具条被点击时，区域的面板会显示为浮动的面板。如果autoHide为true，用户鼠标移开面板时会自动隐藏面板。若autoHide为false，面板会一直显示除非用户点击了面板以外的区域（默认为true）。When a collapsed region's bar is clicked, the region's panel will be displayed as a floated panel. If autoHide is true, the panel will automatically hide after the user mouses out of the panel. If autoHide is false, the panel will continue to display until the user clicks outside of the panel (defaults to true). | Region
 | collapseMode : String 默认下，可关闭的区域是通过点击区域标题条上的工具按钮来控制区域是否关闭... 默认下，可关闭的区域是通过点击区域标题条上的工具按钮来控制区域是否关闭的。可选的，当collapseMdoe被设置为'mini'时，区域的分隔条中间仍然会有一个小小的关闭按钮。在'mini'模式下区域会闭合成为一个比常规模式下更细小的水平条。默认下collapseMode是设置为undefined，支持两种值undefined和'mini'。注意如果可关闭的区域如果没有标题条，那么collapseMode必须设置为'mini'以便即使工具按钮没有渲染也可以由用户来关闭区域。By default, collapsible regions are collapsed by clicking the expand/collapse tool button that renders into the region's title bar. 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. By default collapseMode is undefined, and the only two supported values are undefined and 'mini'. Note that if a collapsible region does not have a title bar, then collapseMode must be set to 'mini' in order for the region to be collapsible by the user as the tool button will not be rendered. | Region
 | margins : Object 作用在区域上的外补丁对象，对象的格式如{left: （左边距）, to... 作用在区域上的外补丁对象，对象的格式如{left: （左边距）, top: （上边距）, right: （右边距）, bottom: （下边距）}。An object containing margins to apply to the region in the format {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)} | Region
 | cmargins : Object 作用在区域闭合元素上的外补丁对象，对象的格式如{left: （左边距）... 作用在区域闭合元素上的外补丁对象，对象的格式如{left: （左边距）, top: （上边距）, right: （右边距）, bottom: （下边距）}。An object containing margins to apply to the region's collapsed element in the format {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)} | Region
 | collapsible : Boolean True表示为允许用户闭合此区域（默认为false）。如为true，区... True表示为允许用户闭合此区域（默认为false）。如为true，区域上的title bar将会渲染出“展开/收缩”的按钮，否则将不会显示。注意title bar需要显示的是一个轮换按钮－－如不指定区域的title，那么只有当collapseMode设为'mini'时，区域才能收缩。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 toggle button -- if no region title is specified, the region will only be collapsible if collapseMode is set to 'mini'. | Region
 | split : Boolean True表示为显示在此区域与旁边区域显示Ext.SplitBar，可允... True表示为显示在此区域与旁边区域显示Ext.SplitBar，可允许用户动态调节区域的大小（缺省为false）。当split=true，通常需要指定区域的minSize和maxSize。True to display a Ext.SplitBar between this region and its neighbor, allowing the user to resize the regions dynamically (defaults to false). When split == true, it is common to specify a minSize and maxSize for the BoxComponent representing the region. These are not native configs of BoxComponent, and are used only by this class. | Region
 | floatable : Boolean true表示为可通过单击收缩区域条状就能显示整个区域的面板，浮动在布局... true表示为可通过单击收缩区域条状就能显示整个区域的面板，浮动在布局上。false表示为限制用户只能通过单击“展开expand”按钮才能展开收缩的区域。（缺省为true） 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). | Region
 | minWidth : Number 此区域可允许的最小宽度象素值（缺省为50）。The minimum a... 此区域可允许的最小宽度象素值（缺省为50）。The minimum allowable width in pixels for this region (defaults to 50) | Region
 | minHeight : Number 此区域可允许的最大宽度象素值（缺省为50）。The minimum a... 此区域可允许的最大宽度象素值（缺省为50）。The minimum allowable height in pixels for this region (defaults to 50) | Region

公告属性

属性 |  | 定义者
 | isCollapsed: Boolean True表示为该区域可收缩的。只读的。True if this re... True表示为该区域可收缩的。只读的。True if this region is collapsed. Read-only. | Region
 | panel: Ext.Panel 此区域的面板。只读的。This region's panel. R... 此区域的面板。只读的。This region's panel. Read-only. | Region
 | layout: Layout 此区域的布局。只读的。This region's layout. ... 此区域的布局。只读的。This region's layout. Read-only. | Region
 | position: String 此区域布局的位置（north, south, east, west或... 此区域布局的位置（north, south, east, west或center）。只读的。This region's layout position (north, south, east, west or center). Read-only. | Region

公共方法

方法 定义者
SplitRegion( Layout layout, Object config, String position )
参数项：
  • layout : Layout
    任意有效的EXT布局类。Any valid Ext layout class
  • config : Object
    配置选项。The configuration options
  • position : String
    区域位置。有效的值是： north, south, east, west and center。每个BorderLayout必须有一个center区域以便摆放主要内容－－其他的就属于可选。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.
返回值：
  • void
SplitRegion
getSplitBar() : Ext.SplitBar
返回此区域SplitBar引用。Returns a reference...
返回此区域SplitBar引用。Returns a reference to the split bar in use by this region.
参数项：
  • None.
返回值：
  • Ext.SplitBar
    SplitBar对象。The split bar
SplitRegion
Region( Layout layout, Object config, String position )
参数项：
  • layout : Layout
    任何有效Ext布局类。Any valid Ext layout class
  • config : Object
    配置项对象。The configuration options
  • position : String
    区域的位置。有效的值是：north, south, east, west和center。每个BorderLayout不能缺少center区域作为主要的内容，其它区域是可选的。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.
返回值：
  • void
Region
isVisible() : Boolean
True表示为当前区域已隐藏，反之为false。True if thi...
True表示为当前区域已隐藏，反之为false。True if this region is currently visible, else false.
参数项：
  • None.
返回值：
  • Boolean
Region
getMargins() : Object
返回当前区域的外补丁。如果区域是闭合的，就返回cmargins（col...
返回当前区域的外补丁。如果区域是闭合的，就返回cmargins（collapsed margins）值。Returns the current margins for this region. If the region is collapsed, the cmargins (collapsed margins) value will be returned, otherwise the margins value will be returned.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象： {left: （左边距）, top: （上边距）, right: （右边距）, bottom: （下边距）} An object containing the element's margins: {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)}
Region
getSize() : Object
返回此区域的当前大小尺寸。如果区域是闭合的，那么就返回collapse...
返回此区域的当前大小尺寸。如果区域是闭合的，那么就返回collapsedEl的大小。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.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象： {width: （元素宽度）, height:（元素高度）} An object containing the element's size: {width: (element width), height: (element height)}
Region
setPanel( Ext.Panel panel )
指定一个面板作为此区域的容器元素 Sets the specified...
指定一个面板作为此区域的容器元素 Sets the specified panel as the container element for this region.
参数项：
  • panel : Ext.Panel
    新面板The new panel
返回值：
  • void
Region
getMinWidth() : Number
返回此区域可允许的最小宽度。Returns the minimum a...
返回此区域可允许的最小宽度。Returns the minimum allowable width for this region.
参数项：
  • None.
返回值：
  • Number
    最小宽度The minimum width
Region
getMinHeight() : Number
返回此区域可允许的最小高度。Returns the minimum a...
返回此区域可允许的最小高度。Returns the minimum allowable height for this region.
参数项：
  • None.
返回值：
  • Number
    最小高度The minimum height
Region

公共事件

这个类没有公告事件。


类Ext.layout.Box

包： | Extlayout
定义的文件： | BoxLayout.js
类全称： | Ext.layout.Box
继承自于： | Ext.layout.ContainerLayout
Ext.layout.Box类

配置项

配置项 |  | 定义者
 | extraCls : String 一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器... 一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。 An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
 | renderHidden : Boolean True表示为在渲染时隐藏包含的每一项（缺省为false）。 True... True表示为在渲染时隐藏包含的每一项（缺省为false）。 True to hide each contained item on render (defaults to false).

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.Container#activeItem关联。 一个已激活... 与Ext.Container#activeItem关联。 一个已激活Ext.Component的引用。 例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。 Related to Ext.Container#activeItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.Container#activeItem. |

公共方法

方法 定义者
Box()
参数项：
  • None.
返回值：
  • void
monitorResize()
与Ext.Container#activeItem关联。 一个已激活E...
与Ext.Container#activeItem关联。 一个已激活Ext.Component的引用。 例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。 Related to Ext.Container#activeItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.Container#activeItem.
参数项：
  • None.
返回值：
  • void

公共事件

这个类没有公告事件。


类Ext.layout.BoxLayout

包： | Extlayout
定义的文件： | BoxLayout.js
类全称： | Ext.layout.BoxLayout
继承自于： | Ext.layout.ContainerLayout

Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.

配置项

配置项 定义者
defaultMargins : Object
If the individual contained items d...

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:
BoxLayout
padding : String
Defaults to '0'. Sets the padding t...
Defaults to '0'. Sets the padding to be applied to all child items managed by this container's layout.
BoxLayout
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
BoxLayout()
参数项：
  • None.
返回值：
  • void
BoxLayout

公共事件

这个类没有公告事件。


类Ext.layout.CardLayout

包： | Extlayout
定义的文件： | CardLayout.js
类全称： | Ext.layout.CardLayout
继承自于： | Ext.layout.FitLayout

此布局包含的多个面板，里面的每个面板都会填充整个容器，而在同一时候只有一个面板是被显示的。此布局比较常见的应用场合是Wizards（向导式对话框）、Tab标签页这些的实现等等。应通过继承此类或设置Ext.Containerlayout的配置layout:'card'的方式创建，一般很少通过关键字new直接使用。
This layout contains multiple panels, each fit to the container, where only a single panel 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' Ext.Containerlayout config, and should generally not need to be created directly via the new keyword.

CardLayout的重点方法是setActiveItem。在某一时刻，只有一个面板显示，而负责移动到下一面板的方法便是这个setActiveItem方法。方法执行时会有下一个面板的id或索引作为参数传入，布局本身并没有为下一步、上一步的导航提供直接的处理机制，所有这方面的功能应由开发者提供。
The CardLayout's focal method is setActiveItem. Since only one panel is displayed at a time, the only way to move from one panel 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 mechanism for handling this navigation, so that functionality must be provided by the developer.

在下面的例子中，就演示了一个简单的用法，在包含的面板的底部键入了一组用于导航路由的按钮。由于自定义的逻辑是未知的，所以例子中的路由这部分的具体实现是省略的。注意CradLayout其他的用法（如Tab控件）会是另外一种不同的实现。对于一些真正的使用场合，应通过扩展此类以提供更多自定义的功能。用法举例：
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){
    // 每当切换卡片时就会执行这个函数。// 这里可按照实际情况调用setActiveItem方法，处理任何有分支的判断，包括一些可能的动作包括“取消”或“完结卡片”等等。// 一个真实的向导根据其设计的情况，可能很复杂，最好就是创建一个子类的完成其设计。// 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, // 激活的item不能缺少 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: '后退',
            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: '祝贺！
Step 3 of 3 - 完成！<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    }]
});

配置项

配置项 定义者
deferredRender : Boolean
True表示为处于激活的状态时才渲染每个子项，False表示为在布局渲...
True表示为处于激活的状态时才渲染每个子项，False表示为在布局渲染出来时就逐个渲染子项（缺省为fasle）。如果这里有相当多数量的内容或包含重型控件需要渲染到面板而又不是等一时间显示的时候，设置为true以提示性能。
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.
CardLayout
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
CardLayout()
参数项：
  • None.
返回值：
  • void
CardLayout
setActiveItem( String/Number item, String/Number item )
设置布局中某项为活动项（可见的项）。
设置布局中某项为活动项（可见的项）。
参数项：
  • item : String/Number
    要激活项的id或字符串索引 Sets the active (visible) item in the layout.
  • item : String/Number
    The string component id or numeric index of the item to activate
返回值：
  • void
CardLayout
FitLayout()
参数项：
  • None.
返回值：
  • void
FitLayout

公共事件

这个类没有公告事件。


类Ext.layout.ColumnLayout

包： | Extlayout
定义的文件： | ColumnLayout.js
类全称： | Ext.layout.ColumnLayout
继承自于： | Ext.layout.ContainerLayout

这是为构建多个垂直式结构而准备的布局，当中包含已指定宽度的多个列，列的宽度可以是固定值，也可以是可伸缩的百分比宽度，但里面的内容就是自适应高度了。应通过继承此类或设置Ext.Containerlayout的配置layout:'column'的方式创建该类，一般很少通过关键字new直接使用该类。
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' Ext.Containerlayout config, and should generally not need to be created directly via the new keyword.

虽然ColumnLayout没有直接的配置项（不同于继承），但是ColumnLayout的任意一个子面板都支持特殊的配置项属性columnWidth。可采用width（像素）或columnWidth（百分比）的方式来决定面板的尺寸大小，如不为面板指定width或columnWidth，那么将缺省为面板的自动宽度。
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).

属性width总是以象素（pixles）来固定宽度，并必须是数字大于或等于1；属性columnWidth是百分比相对单位，并必须是百分比字符串区间是大于0小于1（像.25）。
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).

分配列宽度的基本规则非常简单。UI逻辑会将所包含的一组面板分成两类： 第一类是宽度固定值或不指定的（设置为auto）面板，当此类面板传入到布局时，先不立即渲染，但它们的宽度就会从容器的总宽度减去； 第二类是以百分比指定的面板，百分比的含义时在基于剩下宽度中计算的百分比。当传入布局时，会将这些百分比转换为宽度的固定数字值，分配到面板上。换句话讲，百分比的面板的用途填充由固定值宽度或AUTO宽度面板占据后所留下的空间。因此，虽然你可以以不同的百分比来分配列，但columnWidth加起来必须是等于1（或100%）。否则的话，渲染出来的布局可能出现不正常。用法举例：
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:

// 所有的列都是百分比单位，加起来就应该是1 All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
    title: '列布局 - 百分比Only',
    layout:'column',
    items: [{
        title: '列一',
        columnWidth: .25
    },{
        title: '列二',
        columnWidth: .6
    },{
        title: '列三',
        columnWidth: .15
    }]
});

// width的配置项和columnWidth的配置项两者都可以混合使用，但columnWidth的值加起来就一定要是1。Mix of width and columnWidth -- all columnWidth values must add up
// to 1. 例子的第一列就精确指明120px，剩余的两个列就自适应了容器内余下的部分。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
    }]
});

配置项

配置项 定义者
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
ColumnLayout()
参数项：
  • None.
返回值：
  • void
ColumnLayout

公共事件

这个类没有公告事件。


类Ext.layout.ContainerLayout

包： | Extlayout
定义的文件： | ContainerLayout.js
类全称： | Ext.layout.ContainerLayout
继承自于： | Object

每个Container都委托布局管理器来渲染其子组件Component。至于哪一种布局管理器就取决于容器的configured配置项。某些布局也有提供大小控制和子元件的布局控制。
Every delegates the rendering of its childs to a layout manager class which must be into the Container. Some layouts also provide sizing and positioning of child Components.

ContainerLayout是其它布局类的子类，它提供了基础性的逻辑。在Ext中，它只是把子元件负责渲染到容器中去，与大小尺寸和定位等的功能没有关系。应通过继承该类的方式使用，一般很少通过关键字new直接使用。
The ContainerLayout class is the default layout manager used when no layout is configured into a Container. It provides the basic foundation for all other layout classes in Ext. It simply renders all child Components into the Container, performing no sizing os positioning services. This class is intended to be extended and should generally not need to be created directly via the new keyword.

配置项

配置项 定义者
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.layout.FitLayout

包： | Extlayout
定义的文件： | FitLayout.js
类全称： | Ext.layout.FitLayout
继承自于： | Ext.layout.ContainerLayout

这是包含单个项布局的基类，这种布局会在容器上自动铺开以填充整个容器。应通过继承此类或设置Ext.Containerlayout的配置layout:'fit' 的方式创建，一般很少通过关键字new直接使用。
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' Ext.Containerlayout config, and should generally not need to be created directly via the new keyword.

FitLayout没有直接的配置选项（不同于继承），要采用FitLayout填充容器的面板，只需设置容器的layout:'fit'和加入一个面板。即使容器指定了多个面板，只会渲染第一个面板。用法举例：
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: '内层面板'title: 'Inner Panel',
        html: '<p>这是内层面板的内容</p>',
        border: false
    }
});

配置项

配置项 定义者
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
FitLayout()
参数项：
  • None.
返回值：
  • void
FitLayout

公共事件

这个类没有公告事件。


类Ext.layout.FormLayout

包： | Extlayout
定义的文件： | FormLayout.js
类全称： | Ext.layout.FormLayout
继承自于： | Ext.layout.AnchorLayout

这是用来创建一个表单的布局，负责渲染和其部件内的子元件。渲染出来的Field是能够支持HTML label元素的用户体验设计。
This layout manager is specifically designed for rendering and managing child Components of forms. It is responsible for rendering the labels of s.

此类可以被继承或通过配置项layout:'form'Ext.Containerlayout来创建，而不像通常情况下使用关键字new来创建。可是在应用中，一般我们会选择使用Ext.form.FormPanel（自动使用FormLayout作为布局类），而且它还提供了内建的读取、效验和提交表单的函数。
This layout manager is used when a Container is configured with the layout:'form' layout config, and should generally not need to be created directly via the new keyword. In an application, it will usually be preferrable to use a FormPanel (which automatically uses FormLayout as its layout class) since it also provides built-in functionality for loading, validating and submitting the form.

需要注意的是，当通过配置项来创建布局的时候，布局的属性必须通过Ext.ContainerlayoutConfig对象来指定。
Note that when creating a layout via config, the layout-specific config properties must be passed in via the layoutConfig object which will then be applied internally to the layout.

使用Container布局的容器，也支持以下配置属性： The Container using the FormLayout can also accept the following layout-specific config properties:

  • hideLabels: (Boolean)
    值为true则隐藏字段的标签（默认为 false）。True to hide field labels by default (defaults to false)
  • labelAlign: (String)
    添加到每个字段标签和字段元素之外的封装 DIV 之上的 CSS 类（默认类为 'x-form-item' 并且 itemCls 会附加在其后）。The default label alignment. The default value is empty string '' for left alignment, but specifying 'top' will align the labels above the fields.
  • labelPad: (Number)
    默认的以像素表示的字段标签的padding值（默认为5）。只有在指定了labelWidth的时候labelPad有效，否则被忽略。The default padding in pixels for field labels (defaults to 5). labelPad only applies if labelWidth is also specified, otherwise it will be ignored.
  • labelWidth: (Number)
    默认的以像素表示的字段标签的宽度（默认为100）。The default width in pixels of field labels (defaults to 100)

任意类型的组件都能被添加到FormLayout中，但是继承自Ext.form.Field的项还支持下列配置项属性：
Any type of components can be added to a FormLayout, but items that inherit from Ext.form.Field can also supply the following field-specific config properties:

  • clearCls: (String)
    添加到每个表单字段封装DIV的上用于实现clear效果的CSS类（默认为'x-form-clear-left'）。
    The CSS class to apply to the special clearing div rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
  • fieldLabel: (String)
    显示的字段标签（label）文本（默认为''）。
    The text to display as the label for this field (defaults to '')
  • hideLabel: (Boolean)
    值为true则隐藏字段的标签和分隔符（默认为 false）。
    True to hide the label and separator for this field (defaults to false).
  • itemCls: (String)
    添加到每个字段标签和字段元素之外的封装DIV之上的CSS样式类（默认类为'x-form-item'，并且itemCls会附加在其后）。如果提供了，则字段级的itemCls将会覆盖容器级的。
    A CSS class to add to the 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.
  • labelSeparator: (String)
    每个表格标签之后显示的文本分隔符（默认为':'或者labelSeparator指定的值）。要隐藏分隔符则设置为 ''。
    The separator to display after the text of the label for this field (defaults to a colon ':' or the layout's value for labelSeparator). To hide the separator use empty string ''.
  • labelStyle: (String)
    一个 CSS 样式字串用于此布局中的所有字段的标签上（默认为''或者labelStyle指定的值）。
    A CSS style specification string to add to the field label for this field (defaults to '' or the layout's value for labelStyle).

使用示例：Example usage:

// 如果要显示效验信息则必需 Required if showing validation messages
Ext.QuickTips.init();

// 虽然你也可以创建一个包含 layout:'form' 的 Panel，但是我们建议使用 FormPanel 来代替，因为它自带 FormLayout 布局。// 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({
    labelWidth: 75,
    title: 'Form Layout',
    bodyStyle:'padding:15px',
    width: 350,
    labelPad: 10,
    defaultType: 'textfield',
    defaults: {
        // 应用于每个被包含的项 applied to each contained item
        width: 230,
        msgTarget: 'side'
    },
    layoutConfig: {
        // 这里是布局配置项 layout-specific configs go here
        labelSeparator: ''
    },
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        },{
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }
    ],
    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

配置项

配置项 定义者
labelSeparator : String
每个表格标签之后显示的文本分隔符（默认为 ':'）。要关闭此布局中的所...
每个表格标签之后显示的文本分隔符（默认为 ':'）。要关闭此布局中的所有字段的分隔符，可以设置该字串为 '' （如果在字段的设置里面指定了分隔符，仍然会被显示）。
The standard separator to display after the text of each form label (defaults to a colon ':'). To turn off separators for all fields in this layout by default specify empty string '' (if the labelSeparator value is explicitly set at the field level, those will still be displayed).
FormLayout
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
FormLayout()
参数项：
  • None.
返回值：
  • void
FormLayout
AnchorLayout()
参数项：
  • None.
返回值：
  • void
AnchorLayout

公共事件

这个类没有公告事件。


类Ext.layout.HBoxLayout

包： | Extlayout
定义的文件： | BoxLayout.js
类全称： | Ext.layout.HBoxLayout
继承自于： | Ext.layout.BoxLayout
A layout that arranges items horizontally

配置项

配置项 定义者
align : String
Controls how the child items of the...
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 left side of the container
  • middle :
    child items are aligned vertically at the mid-height of the container
  • stretch :
    child items are stretched vertically to fill the height of the container
  • stretchmax :
    child items are stretched vertically to the size of the largest item.
 HBoxLayout
pack : String
Controls how the child items of the...
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
 HBoxLayout
flex : Number
This configuation option is to be a...
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).
HBoxLayout
defaultMargins : Object
If the individual contained items d...

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:
BoxLayout
padding : String
Defaults to '0'. Sets the padding t...
Defaults to '0'. Sets the padding to be applied to all child items managed by this container's layout.
BoxLayout
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
HBoxLayout()
参数项：
  • None.
返回值：
  • void
HBoxLayout
BoxLayout()
参数项：
  • None.
返回值：
  • void
BoxLayout

公共事件

这个类没有公告事件。


ContainerLayout
    MenuLayout

Class Ext.layout.MenuLayout

Package: | Ext.layout
Defined In: | Menu.js
Class: | MenuLayout
Extends: | ContainerLayout

Layout manager used by Ext.menu.Menu. Generally this class should not need to be used directly.

Config Options

Config Options Defined By
extraCls : String
An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to t...

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout

Public Properties

Property Defined By
activeItem : Ext.Component
A reference to the Ext.Component that is active. For example, if(myPanel.layout.activeItem.id == 'item-1') { ... } a...
A reference to the 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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
The Ext.Template used by Field rendering layout classes (such as Ext.layout.FormLayout) to create the DOM structure o...
The Ext.Template used by Field rendering layout classes (such as 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 Ext.layout.FormLayout.getTemplateArgs.
ContainerLayout

Public Methods

This class has no public methods.

Public Events

This class has no public events.


类Ext.layout.TableLayout

包： | Extlayout
定义的文件： | TableLayout.js
类全称： | Ext.layout.TableLayout
继承自于： | Ext.layout.ContainerLayout

这种布局可以让你把内容轻易地渲染到一个HTML表格。可指定列的总数，而属性：跨行（rowspan）与跨列（colspan）就用于创建表格复杂的布局。应通过继承此类或设置Ext.Containerlayout的配置layout:'table'的方式创建，一般很少通过关键字new直接使用。
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' Ext.Containerlayout config, and should generally not need to be created directly via the new keyword.

注意必须通过Ext.ContainerlayoutConfig属性对象来指定属于此布局的配置，以便传入到layout的内部。就TableLayout而言，它只有一个配置项属性那便是columns。不过，属于TableLayout内的每一项可设置以下针对表格的配置项属性：
Note that when creating a layout via config, the layout-specific config properties must be passed in via the Ext.ContainerlayoutConfig object which will then be applied internally to the layout. In the case of TableLayout, the only valid layout config property is columns. However, the items added to a TableLayout can supply the following table-specific config properties:

  • rowspan 该项会在单元格上生效的rowspan。Applied to the table cell containing the item.
  • colspan 该项会在单元格上生效的colspan。Applied to the table cell containing the item.
  • cellId 该项会在单元格上生效的id。An id applied to the table cell containing the item.
  • cellCls 添加到表格单元格内的CSS样式名称。A CSS class name added to the table cell containing the item.

构建一个TableLayout布局的基本概念与构建一个标准HTML表格在原理上非常相似。加入子面板时，无论使用哪一种的方式（指定属性rowspan或colspan）进行跨单元格处理时，都与HTML相同。比较起在HTML中创建何嵌套行或列，这种方式显得更为简单。你只需在layoutConfig中指定好列的数量 跟着按照正常的顺序从左到右，由上到下地加入面板，布局就会自动计算相应的列数、是否跨行，跨列和怎么在单元格内定位。与HTML表格的要求差不多，必须从整体布局上正确设置好rowspans和colspans，否则表格不能补全或突出多余的单元格。用法举例：
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>'
    }]
});

配置项

配置项 定义者
columns : Number
为此布局里面的表格指定一个要创建列的数量。如不指定，所有加入到这个布局...
为此布局里面的表格指定一个要创建列的数量。如不指定，所有加入到这个布局里的面板都会渲染单行单列的面板 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.
TableLayout
tableAttrs : Object
以DomHelper专有的形式，指定<table>元素...

以DomHelper专有的形式，指定<table>元素是如何创建的。举例： An object containing properties which are added to the DomHelper specification used to create the layout's <table> element. Example:
TableLayout
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
TableLayout()
参数项：
  • None.
返回值：
  • void
TableLayout

公共事件

这个类没有公告事件。


类Ext.layout.ToolbarLayout

包： | Extlayout
定义的文件： | Toolbar.js
类全称： | Ext.layout.ToolbarLayout
继承自于： | Ext.layout.ContainerLayout

配置项

配置项 定义者
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
ToolbarLayout()
参数项：
  • None.
返回值：
  • void
ToolbarLayout

公共事件

这个类没有公告事件。


类Ext.layout.VBoxLayout

包： | Extlayout
定义的文件： | BoxLayout.js
类全称： | Ext.layout.VBoxLayout
继承自于： | Ext.layout.BoxLayout
A layout that arranges items vertically

配置项

配置项 定义者
align : String
Controls how the child items of the...
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.
 VBoxLayout
pack : String
Controls how the child items of the...
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
 VBoxLayout
flex : Number
This configuation option is to be a...
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).
VBoxLayout
defaultMargins : Object
If the individual contained items d...

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:
BoxLayout
padding : String
Defaults to '0'. Sets the padding t...
Defaults to '0'. Sets the padding to be applied to all child items managed by this container's layout.
BoxLayout
extraCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。
An optional extra CSS class that will be added to the container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True表示为在渲染时隐藏包含的每一项（缺省为false）。True ...
True表示为在渲染时隐藏包含的每一项（缺省为false）。True to hide each contained item on render (defaults to false).
ContainerLayout

公告属性

属性 |  | 定义者
 | activeItem: {Ext.Component} 与Ext.ContaineractiveItem关联。一个已激活Ex... 与Ext.ContaineractiveItem关联。一个已激活Ext.Component的引用。例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。activeItem只会作用在布局样式上。（像Ext.layout.Accordion，Ext.layout.CardLayout和Ext.layout.FitLayout）。只读的。Related to Ext.ContaineractiveItem. A reference to the 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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.ContaineractiveItem. | ContainerLayout

公共方法

方法 定义者
VBoxLayout()
参数项：
  • None.
返回值：
  • void
VBoxLayout
BoxLayout()
参数项：
  • None.
返回值：
  • void
BoxLayout

公共事件

这个类没有公告事件。


Observable
    ListView.ColumnResizer

Class Ext.ListView.ColumnResizer

Package: | Ext
Defined In: | ColumnResizer.js
Class: | ListView.ColumnResizer
Extends: | Observable

Supporting Class for Ext.ListView.

Config Options

Config Options Defined By
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

Note: While some Observable classes export selected DOM events (eg "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement listeners must be added to the 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;
    },

    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() {
            c.el.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'
});

Observable
minPct : Number
The minimum percentage to allot for any column (defaults to .05)
ListView.ColumnResizer

Public Properties

This class has no public properties.

Public Methods

Method Defined By
ListView.ColumnResizer( Object config )
Parameters:
  • config : Object
Returns:
  • void
ListView.ColumnResizer
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
    });
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

This class has no public events.


Observable
    Component
      BoxComponent
        DataView
          ListView

Class Ext.ListView

Package: | Ext
Defined In: | ListView.js
Class: | ListView
Extends: | DataView
xtype: | listview

Built using the Ext.XTemplate Class, Ext.ListView offers a fast and light-weight implentation of a Grid like view with resizable columns. This view has no horizontal scrolling as column widths are initially proportioned by percentage based on the container width and number of columns.

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

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use the An...

Note: this config is only used when this Component is rendered by a Container which has been configured to use the AnchorLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'anchor').

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (defaults to false). Note: Although many components inherit thi...
True to use height:'auto', false to use fixed height (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.
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (defaults to false). Note: Although many components inherit this ...
True to use width:'auto', false to use fixed width (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.
BoxComponent
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
columnResize : Boolean/Object
Specify true or specify a configuration object for Ext.ListView.ColumnResizer to enable the columns to be resizable ...
Specify true or specify a configuration object for Ext.ListView.ColumnResizer to enable the columns to be resizable (defaults to true).
ListView
columnSort : Boolean/Object
Specify true or specify a configuration object for Ext.ListView.Sorter to enable the columns to be sortable (default...
Specify true or specify a configuration object for Ext.ListView.Sorter to enable the columns to be sortable (defaults to true).
ListView
columns : Array
An array of column configuration objects, for example: { align: 'right', dataIndex: 'size', header: '...
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 Ext.grid.Column. dataIndex for details.
  • header : String
    See Ext.grid.Column. header for details.
  • tpl : String
    Specify a string to pass as the configuration string for Ext.XTemplate. By default an 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.
ListView
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
deferEmptyText : Boolean
True to defer emptyText being applied until the store's first load
DataView
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
emptyText : String
The text to display in the view when there is no data to display (defaults to '').
DataView
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
height : Number
The height of this component in pixels (defaults to auto).
BoxComponent
hidden : Boolean
Render this component hidden (default is false).
Component
hideHeaders : Boolean
true to hide the header row (defaults to false so the header row will be shown).
ListView
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset p...

How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 see itemId.

Note: to access the container of an item see ownerCt.

Component
internalTpl : String/Array
The template to be used for the header row. See tpl for more details.
ListView
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id.

Note: to access the container of an item see ownerCt.

Component
itemSelector : String
Defaults to 'dl' to work with the preconfigured tpl. This setting specifies the CSS selector (e.g. div.some-class or...
Defaults to 'dl' to work with the preconfigured 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.
ListView
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (eg, Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

Note: While some Observable classes export selected DOM events (eg "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement listeners must be added to the 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;
    },

    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() {
            c.el.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'
});

Observable
loadingText : String
A string to display during data load operations (defaults to undefined). If specified, this text will be displayed i...
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.
DataView
multiSelect : Boolean
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 ...
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 singleSelect (defaults to false).
DataView
overClass : String
The CSS class applied when over a row (defaults to 'x-list-over'). An example overriding the default styling: ....
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;}
ListView
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (eg. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

  • Notes :
      When using this config, a call to render() is not required.
      Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render its child items.

See render also.

Component
reserveScrollOffset : Boolean
By default will defer accounting for the configured scrollOffset for 10 milliseconds. Specify true to account for t...
By default will defer accounting for the configured scrollOffset for 10 milliseconds. Specify true to account for the configured scrollOffset immediately.
ListView
scrollOffset : Number
The amount of space to reserve for the scrollbar (defaults to 19 pixels)
ListView
selectedClass : String
The CSS class applied to a selected row (defaults to 'x-list-selected'). An example overriding the default styling: ...
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;}
ListView
simpleSelect : Boolean
True to enable multiselection by clicking on multiple items without requiring the user to hold Shift or Ctrl, false t...
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).
DataView
singleSelect : Boolean
True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false). Note t...
True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false). Note that if multiSelect = true, this value will be ignored.
DataView
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

To set the state provider for the current page:

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

A stateful Component attempts to save state when one of the events listed in the 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the (@link #stateId}, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events

Component
store : Ext.data.Store
The Ext.data.Store to bind this DataView to.
DataView
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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/Array
The HTML fragment or an array of fragments that will make up the template used by this DataView. This should be spec...
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 Ext.XTemplate.
DataView
trackOver : Boolean
True to enable mouseenter and mouseleave events
DataView
width : Number
The width of this component in pixels (defaults to auto).
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disableHeaders : Boolean
Set this property to true to disable the header click handler disabling sort (defaults to false).
ListView
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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), perform the adding of the listener in a render event listener:

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

See also getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
ListView( Object config )
Parameters:
  • config : Object
Returns:
  • void
xtype: listview
ListView
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
    });
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bindStore( Store store ) : void
Changes the data store bound to this view and refreshes it.
Changes the data store bound to this view and refreshes it.
Parameters:
  • store : Store
    The store to bind to this view
Returns:
  • void
DataView
clearSelections( [Boolean suppressEvent] ) : void
Clears all selections.
Clears all selections.
Parameters:
  • suppressEvent : Boolean
    (optional) True to skip firing of the selectionchange event
Returns:
  • void
DataView
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collectData( Array records, Number startIndex ) : Object
Function which can be overridden which returns the data object passed to this view's template to render the whole Li...

Function which can be overridden which returns the data object passed to this view's template to render the whole ListView. The returned object shall contain the following properties:

  • columns : String
    See columns
  • rows : String
    See Ext.DataView.collectData
Parameters:
  • records : Array
    An Array of Ext.data.Records to be rendered into the DataView.
  • startIndex : Number
    the index number of the Record being prepared for rendering.
Returns:
  • Object
    A data object containing properties to be processed by a repeating XTemplate as described above.
ListView
deselect( HTMLElement/Number node ) : void
Deselects a node.
Deselects a node.
Parameters:
  • node : HTMLElement/Number
    The node to deselect
Returns:
  • void
DataView
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component.
Disable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component.
Enable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findItemFromChild( HTMLElement node ) : HTMLElement
Returns the template node the passed child belongs to, or null if it doesn't belong to one.
Returns the template node the passed child belongs to, or null if it doesn't belong to one.
Parameters:
  • node : HTMLElement
Returns:
  • HTMLElement
    The template node
DataView
findParentBy( Function fcn, [Object scope] ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
Parameters:
  • fcn : Function
  • scope : Object
    (optional)
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 autoEl config.

The 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), perform the adding of the listener in a one-off render event listener:

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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or generates an id:"ext-comp-" + (++Ext.Component.AUTO_ID)
Returns the id of this component or generates an id:
"ext-comp-" + (++Ext.Component.AUTO_ID)
Parameters:
  • None.
Returns:
  • String
Component
getItemId() : String
Returns the item id of this component.
Returns the item id of this component.
Parameters:
  • None.
Returns:
  • String
Component
getNode( HTMLElement/String/Number nodeInfo ) : HTMLElement
Gets a template node.
Gets a template node.
Parameters:
  • nodeInfo : HTMLElement/String/Number
    An HTMLElement template node, index of a template node or the id of a template node
Returns:
  • HTMLElement
    The node or null if it wasn't found
DataView
getNodes( [Number start], [Number end] ) : Array
Gets a range nodes.
Gets a range nodes.
Parameters:
  • start : Number
    (optional) The index of the first node in the range
  • end : Number
    (optional) The index of the last node in the range
Returns:
  • Array
    An array of nodes
DataView
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRecord( HTMLElement node ) : Record
Gets a record from a node
Gets a record from a node
Parameters:
  • node : HTMLElement
    The node to evaluate
Returns:
  • Record
    record The {@link Ext.data.Record} object
DataView
getRecords( Array nodes ) : Array
Gets an array of the records from an array of nodes
Gets an array of the records from an array of nodes
Parameters:
  • nodes : Array
    The nodes to evaluate
Returns:
  • Array
    records The {@link Ext.data.Record} objects
DataView
getSelectedIndexes() : Array
Gets the indexes of the selected nodes.
Gets the indexes of the selected nodes.
Parameters:
  • None.
Returns:
  • Array
    An array of numeric indexes
DataView
getSelectedNodes() : Array
Gets the currently selected nodes.
Gets the currently selected nodes.
Parameters:
  • None.
Returns:
  • Array
    An array of HTMLElements
DataView
getSelectedRecords() : Array
Gets an array of the selected records
Gets an array of the selected records
Parameters:
  • None.
Returns:
  • Array
    An array of {@link Ext.data.Record} objects
DataView
getSelectionCount() : Number
Gets the number of selected nodes.
Gets the number of selected nodes.
Parameters:
  • None.
Returns:
  • Number
    The node count
DataView
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getStore() : Ext.data.Store
Returns the store associated with this DataView.
Returns the store associated with this DataView.
Parameters:
  • None.
Returns:
  • Ext.data.Store
    The store
DataView
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component.
Hide this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
indexOf( HTMLElement/String/Number nodeInfo ) : Number
Finds the index of the passed node.
Finds the index of the passed node.
Parameters:
  • nodeInfo : HTMLElement/String/Number
    An HTMLElement template node, index of a template node or the id of a template node
Returns:
  • Number
    The index of the node or -1
DataView
isSelected( HTMLElement/Number node ) : Boolean
Returns true if the passed node is selected, else false.
Returns true if the passed node is selected, else false.
Parameters:
  • node : HTMLElement/Number
    The node or node index to check
Returns:
  • Boolean
    True if selected, else false
DataView
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
prepareData( Array/Object data, Number recordIndex, Record record ) : Array/Object
Function which can be overridden to provide custom formatting for each Record that is used by this DataView's templat...
Function which can be overridden to provide custom formatting for each Record that is used by this DataView's template to render each node.
Parameters:
  • data : Array/Object
    The raw data object that was used to create the Record.
  • recordIndex : Number
    the index number of the Record being prepared for rendering.
  • record : Record
    The Record being prepared for rendering.
Returns:
  • 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'}))
DataView
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
refresh() : void
Refreshes the view by reloading the data from the store and re-rendering the template.
Refreshes the view by reloading the data from the store and re-rendering the template.
Parameters:
  • None.
Returns:
  • void
DataView
refreshNode( Number index ) : void
Refreshes an individual node's data from the store.
Refreshes an individual node's data from the store.
Parameters:
  • index : Number
    The item's data index in the store
Returns:
  • void
DataView
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
select( Array/HTMLElement/String/Number nodeInfo, [Boolean keepExisting], [Boolean suppressEvent] ) : void
Selects a set of nodes.
Selects a set of nodes.
Parameters:
  • nodeInfo : Array/HTMLElement/String/Number
    An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
  • keepExisting : Boolean
    (optional) true to keep existing selections
  • suppressEvent : Boolean
    (optional) true to skip firing of the selectionchange vent
Returns:
  • void
DataView
selectRange( Number start, Number end, [Boolean keepExisting] ) : void
Selects a range of nodes. All nodes between start and end are selected.
Selects a range of nodes. All nodes between start and end are selected.
Parameters:
  • start : Number
    The index of the first node in the range
  • end : Number
    The index of the last node in the range
  • keepExisting : Boolean
    (optional) True to retain existing selections
Returns:
  • void
DataView
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setStore( Store store ) : void
Changes the data store bound to this view and refreshes it. (deprecated in favor of bindStore)
Changes the data store bound to this view and refreshes it. (deprecated in favor of bindStore)
Parameters:
  • store : Store
    The store to bind to this view
Returns:
  • void
DataView
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component.
Show this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished.
Fires after the component rendering is finished.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeclick : ( Ext.DataView this, Number index, HTMLElement node, Ext.EventObject e )
Fires before a click is processed. Returns false to cancel the default action.
Fires before a click is processed. Returns false to cancel the default action.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
DataView
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false to stop the destroy.
Fires before the component is destroyed. Return false to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden. Return false to stop the hide.
Fires before the component is hidden. Return false to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false to stop the render.
Fires before the component is rendered. Return false to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeselect : ( Ext.DataView this, HTMLElement node, Array selections )
Fires before a selection is made. If any handlers return false, the selection is cancelled.
Fires before a selection is made. If any handlers return false, the selection is cancelled.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • node : HTMLElement
    The node to be selected
  • selections : Array
    Array of currently selected nodes
DataView
beforeshow : ( Ext.Component this )
Fires before the component is shown. Return false to stop the show.
Fires before the component is shown. Return false to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false to stop the restore.
Fires before the state of the component is restored. Return false to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
click : ( Ext.DataView this, Number index, HTMLElement node, Ext.EventObject e )
Fires when a template node is clicked.
Fires when a template node is clicked.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
DataView
containerclick : ( Ext.DataView this, Ext.EventObject e )
Fires when a click occurs and it is not on a template node.
Fires when a click occurs and it is not on a template node.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • e : Ext.EventObject
    The raw event object
DataView
containercontextmenu : ( Ext.DataView this, Ext.EventObject e )
Fires when a right click occurs that is not on a template node.
Fires when a right click occurs that is not on a template node.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • e : Ext.EventObject
    The raw event object
DataView
contextmenu : ( Ext.DataView this, Number index, HTMLElement node, Ext.EventObject e )
Fires when a template node is right clicked.
Fires when a template node is right clicked.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
DataView
dblclick : ( Ext.DataView this, Number index, HTMLElement node, Ext.EventObject e )
Fires when a template node is double clicked.
Fires when a template node is double clicked.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
DataView
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden.
Fires after the component is hidden.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
mouseenter : ( Ext.DataView this, Number index, HTMLElement node, Ext.EventObject e )
Fires when the mouse enters a template node. trackOver:true or an overCls must be set to enable this event.
Fires when the mouse enters a template node. trackOver:true or an overCls must be set to enable this event.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
DataView
mouseleave : ( Ext.DataView this, Number index, HTMLElement node, Ext.EventObject e )
Fires when the mouse leaves a template node. trackOver:true or an overCls must be set to enable this event.
Fires when the mouse leaves a template node. trackOver:true or an overCls must be set to enable this event.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
DataView
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
selectionchange : ( Ext.DataView this, Array selections )
Fires when the selected nodes change.
Fires when the selected nodes change.
Listeners will be called with the following arguments:
  • this : Ext.DataView
  • selections : Array
    Array of the selected nodes
DataView
show : ( Ext.Component this )
Fires after the component is shown.
Fires after the component is shown.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


Observable
    ListView.Sorter

Class Ext.ListView.Sorter

Package: | Ext
Defined In: | Sorter.js
Class: | ListView.Sorter
Extends: | Observable

Supporting Class for Ext.ListView.

Config Options

Config Options Defined By
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

Note: While some Observable classes export selected DOM events (eg "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement listeners must be added to the 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;
    },

    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() {
            c.el.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'
});

Observable
sortClasses : Array
The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"])
ListView.Sorter

Public Properties

This class has no public properties.

Public Methods

Method Defined By
ListView.Sorter( Object config )
Parameters:
  • config : Object
Returns:
  • void
ListView.Sorter
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
    });
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

This class has no public events.


类Ext.LoadMask

包： | Ext
定义的文件： | LoadMask.js
类全称： | Ext.LoadMask
继承自于： | Object
一个简单的工具类，用于在加载数据时为元素做出类似于遮罩的效果。对于有可用的Ext.data.Store，可将效果与Store的加载达到同步，而mask本身会被缓存以备复用。而对于其他元素，这个遮照类会替换元素本身的UpdateManager加载指示器，并在初始化完毕后销毁。A simple utility class for generically masking elements while loading data. If the 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();

配置项

配置项 |  | 定义者
 | store : Ext.data.Store 可选地你可以为该蒙板绑定一个Store对象。当Store的load请求... 可选地你可以为该蒙板绑定一个Store对象。当Store的load请求被发起就显示该蒙版，不论load成功或失败之后都隐藏该蒙板。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. | LoadMask
 | removeMask : Boolean True表示为一次性使用，即加载之后自动销毁（页面加载时有用），fal... True表示为一次性使用，即加载之后自动销毁（页面加载时有用），false表示为多次使用模版效果，保留这个mask（例如，页面上数据的加载）。默认为false。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. | LoadMask
 | msg : String 加载信息中显示文字（默认为'Loading...'）。The text... 加载信息中显示文字（默认为'Loading...'）。The text to display in a centered loading message box (defaults to 'Loading...') | LoadMask
 | msgCls : String 加载信息元素的样式（默认为"x-mask-loading"）。The ... 加载信息元素的样式（默认为"x-mask-loading"）。The CSS class to apply to the loading message element (defaults to "x-mask-loading") | LoadMask

公告属性

属性 |  | 定义者
 | : Boolean 只读的。True表示为mask已被禁止，所以不会显示出来（默认为fa... 只读的。True表示为mask已被禁止，所以不会显示出来（默认为false）。Read-only. True if the mask is currently disabled so that it will not be displayed (defaults to false) | LoadMask

公共方法

方法 定义者
LoadMask( Mixed el, Object config )
参数项：
  • el : Mixed
    元素、DOM节点或id。The element or DOM node, or its id
  • config : Object
    配置项对象。The config object
返回值：
  • void
LoadMask
disable()
禁用遮罩致使遮罩不会被显示。Disables the mask to ...
禁用遮罩致使遮罩不会被显示。Disables the mask to prevent it from being displayed
参数项：
  • None.
返回值：
  • void
LoadMask
enable()
启用遮罩以显示。Enables the mask so that it...
启用遮罩以显示。Enables the mask so that it can be displayed
参数项：
  • None.
返回值：
  • void
LoadMask
show()
在已配置元素之前显示LoadMask。Show this LoadMa...
在已配置元素之前显示LoadMask。Show this LoadMask over the configured Element.
参数项：
  • None.
返回值：
  • void
LoadMask
hide()
隐藏此LoadMask。Hide this LoadMask.
隐藏此LoadMask。Hide this LoadMask.
参数项：
  • None.
返回值：
  • void
LoadMask

公共事件

这个类没有公告事件。


类Ext.menu.Adapter

包： | Extmenu
定义的文件： | Adapter.js
类全称： | Ext.menu.Adapter
继承自于： | Ext.menu.BaseItem
一个公共的基类，用来使原本无菜单的组件能够被菜单选项封装起来并被添加到菜单中去。它提供了菜单组件所必须的基本的渲染、活动管理和启用/禁用逻辑功能。

配置项

配置项 定义者
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Adapter( Ext.Component component, Object config )
参数项：
  • component : Ext.Component
    渲染到菜单的那个组件
  • config : Object
    配置选项对象
返回值：
  • void
Adapter
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.menu.BaseItem

包： | Extmenu
定义的文件： | BaseItem.js
类全称： | Ext.menu.BaseItem
继承自于： | Ext.Component
菜单组件中包含的所有选项的基类。BaseItem 提供默认的渲染、活动状态管理和由菜单组件共享的基本配置。

配置项

配置项 定义者
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.menu.CheckItem

包： | Extmenu
定义的文件： | CheckItem.js
类全称： | Ext.menu.CheckItem
继承自于： | Ext.menu.Item
添加一个默认为多选框的菜单选项，也可以是单选框组中的一个组员。

配置项

配置项 定义者
group : String
所有 group 设置相同的选择项将被自动地组织到一个单选按钮组中（默...
所有 group 设置相同的选择项将被自动地组织到一个单选按钮组中（默认为 ''）
CheckItem
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
groupClass : String
单选框组中选择项使用的默认CSS样式类（默认为 "x-menu-gro...
单选框组中选择项使用的默认CSS样式类（默认为 "x-menu-group-item"）
CheckItem
checked : Boolean
值为 True 时该选项初始为选中状态（默认为 false）。注意：如...
值为 True 时该选项初始为选中状态（默认为 false）。注意：如果选择项为单选框组中的一员（group 为 true时）则只有最后的选择项才被初始为选中状态。
CheckItem
icon : String
指定该菜单项显示的图标的路径（默认为 Ext.BLANK_IMAGE_...
指定该菜单项显示的图标的路径（默认为 Ext.BLANK_IMAGE_URL）如果icon指定了iconCls就不应存在
Item
iconCls : String
定义了背景图的CSS样式类，用于该项的图标显示。(默认为 '') 如果...
定义了背景图的CSS样式类，用于该项的图标显示。(默认为 '') 如果iconCls指定了icon就不应存在
Item
text : String
此项显示的文本 (默认为 '').
此项显示的文本 (默认为 '').
Item
href : String
要使用的那个连接的href属性 (默认为 '#').
要使用的那个连接的href属性 (默认为 '#').
Item
hrefTarget : String
要使用的那个连接的target属性 (defaults to '').
要使用的那个连接的target属性 (defaults to '').
Item
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
showDelay : Number
菜单项显示之前的延时时间（默认为200）
菜单项显示之前的延时时间（默认为200）
Item
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
CheckItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
CheckItem
itemCls( Ext.menu.CheckItem this, Boolean checked )
为checkchange事件准备的函数。缺省下这个函数是不存在的，如实...
为checkchange事件准备的函数。缺省下这个函数是不存在的，如实例有提供这个函数那么将登记到checkchange事件中，一触发该事件就会执行这个函数。
参数项：
  • this : Ext.menu.CheckItem
  • checked : Boolean
    是否选中
返回值：
  • void
CheckItem
setChecked( Boolean checked, Boolean suppressEvent )
设置该选项的 checked 属性状态
设置该选项的 checked 属性状态
参数项：
  • checked : Boolean
    新的 checked 属性值
  • suppressEvent : Boolean
    （可选项） 值为 True 时将阻止 checkchange 事件的触发（默认为 false）
返回值：
  • void
CheckItem
Item( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Item
setText( String text )
设置该菜单项显示的文本
设置该菜单项显示的文本
参数项：
  • text : String
    显示的文本
返回值：
  • void
Item
setIconClass( String cls )
把CSS样式类得效果应用在items的图标元素上
把CSS样式类得效果应用在items的图标元素上
参数项：
  • cls : String
    The CSS class to apply
返回值：
  • void
Item
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforecheckchange()
在 checked 属性被设定之前触发，提供一次取消的机会（如果需要的话）
在 checked 属性被设定之前触发，提供一次取消的机会（如果需要的话）
侦听器会传入以下的参数：
  • None.
 CheckItem
checkchange()
checked 属性被设置后触发
checked 属性被设置后触发
侦听器会传入以下的参数：
  • None.
 CheckItem
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.menu.ColorItem

包： | Extmenu
定义的文件： | ColorItem.js
类全称： | Ext.menu.ColorItem
继承自于： | Ext.menu.Adapter
一个通过封装 Ext.ColorPalette 组件而成的菜单项。

配置项

配置项 定义者
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : Ext.ColorPalette The Ext.ColorPalette object The Ext.ColorPalette object | ColorItem
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
ColorItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
ColorItem
Adapter( Ext.Component component, Object config )
参数项：
  • component : Ext.Component
    渲染到菜单的那个组件
  • config : Object
    配置选项对象
返回值：
  • void
Adapter
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.menu.ColorMenu

包： | Extmenu
定义的文件： | ColorMenu.js
类全称： | Ext.menu.ColorMenu
继承自于： | Ext.menu.Menu
一个包含 Ext.menu.ColorItem 组件的菜单（提供了基本的颜色选择器）。

配置项

配置项 |  | 定义者
 | defaults : Object 作用到全体item的配置项对象，无论是通过items定义的抑或是add... 作用到全体item的配置项对象，无论是通过items定义的抑或是add方法加入的。默认配置项可以是任意数量的name/value组合，只要是能够被菜单使用的项就可以。 | Menu
 | items : Mixed 添加到菜单的Item，类型为Array。参阅 add了解有效的类型。 添加到菜单的Item，类型为Array。参阅 add了解有效的类型。 | Menu
 | minWidth : Number 以象素为单位设置的菜单最小宽度值（默认为 120） 以象素为单位设置的菜单最小宽度值（默认为 120） | Menu
 | shadow : Boolean/String 当值为 True 或者 "sides" 时为默认效果，"frame" ... 当值为 True 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影，"drop" 时为右下角有阴影（默认为 "sides"） | Menu
 | subMenuAlign : String 该菜单中子菜单的 Ext.ElementalignTo 定位锚点的值（... 该菜单中子菜单的 Ext.ElementalignTo 定位锚点的值（默认为 "tl-tr?"） | Menu
 | defaultAlign : String 该菜单相对于它的原始元素的 {@link Ext.Element#al... 该菜单相对于它的原始元素的 {@link Ext.Element#alignTo) 定位锚点的默认值（默认为 "tl-bl?"） | Menu
 | allowOtherMenus : Boolean 值为 True 时允许同时显示多个菜单（默认为 false） 值为 True 时允许同时显示多个菜单（默认为 false） | Menu
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | : {Boolean} 只读。如果当前显示的是该菜单则返回 true，否则返回 false。... 只读。如果当前显示的是该菜单则返回 true，否则返回 false。 | Menu

公共方法

方法 定义者
ColorMenu( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
ColorMenu
Menu( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Menu
show( Mixed element, String position, Ext.menu.Menu parentMenu )
相对于其他元素显示该菜单
相对于其他元素显示该菜单
参数项：
  • element : Mixed
    要对齐到的元素
  • position : String
    （可选） 对齐元素时使用的Ext.ElementalignTo 定位锚点（默认为 this.defaultAlign）
  • parentMenu : Ext.menu.Menu
    （可选） 该菜单的父级菜单，如果有的话（默认为 undefined）
返回值：
  • void
Menu
showAt( Array xyPosition, Ext.menu.Menu parentMenu )
在指定的位置显示该菜单
在指定的位置显示该菜单
参数项：
  • xyPosition : Array
    显示菜单时所用的包含 X 和 Y [x, y] 的坐标值（坐标是基于页面的）
  • parentMenu : Ext.menu.Menu
    （可选） 该菜单的父级菜单，如果有的话（默认为 undefined）
返回值：
  • void
Menu
hide( Boolean deep )
隐藏该菜单及相关连的父级菜单
隐藏该菜单及相关连的父级菜单
参数项：
  • deep : Boolean
    （可选） 值为 True 时则递归隐藏所有父级菜单，如果有的话（默认为 false）
返回值：
  • void
Menu
add( Mixed args ) : Ext.menu.Item
添加一个或多个 Menu 类支持的菜单项，或者可以被转换为菜单项的对象...
添加一个或多个 Menu 类支持的菜单项，或者可以被转换为菜单项的对象。满足下列任一条件即可：
  • 任何基于 Ext.menu.Item 的菜单项对象
  • 可以被转换为菜单项的 HTML 元素对象
  • 可以被创建为一个菜单项对象的菜单项配置选项对象
  • 任意字符串对象，值为 '-' 或 'separator' 时会在菜单中添加一个分隔栏，其他的情况下会被转换成为一个 Ext.menu.TextItem 对象并被添加到菜单中
用法：

// 创建一个菜单
var menu = new Ext.menu.Menu();

// 通过构造方法创建一个菜单项
var menuItem = new Ext.menu.Item({ text: 'New Item!' });

// 通过不同的方法一次添加一组菜单项。// 最后被添加的菜单项才会被返回。var item = menu.add(
    menuItem,                // 添加一个已经定义过的菜单项
    'Dynamic Item',          // 添加一个 TextItem 对象
    '-',                     // 添加一个分隔栏
    { text: 'Config Item' }  // 由配置选项对象生成的菜单项
);
参数项：
  • args : Mixed
    一个或多个菜单项，菜单项配置选项或其他可以被转换为菜单项的对象
返回值：
  • Ext.menu.Item
    被添加的菜单项，或者多个被添加的菜单项中的最后一个
Menu
getEl() : Ext.Element
返回该菜单所基于的 Ext.Element 对象
返回该菜单所基于的 Ext.Element 对象
参数项：
  • None.
返回值：
  • Ext.Element
    元素对象
Menu
addSeparator() : Ext.menu.Item
添加一个分隔栏到菜单
添加一个分隔栏到菜单
参数项：
  • None.
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addElement( Mixed el ) : Ext.menu.Item
添加一个 Ext.Element 对象到菜单
添加一个 Ext.Element 对象到菜单
参数项：
  • el : Mixed
    被添加的元素或者 DOM 节点，或者它的ID
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addItem( Ext.menu.Item item ) : Ext.menu.Item
添加一个已经存在的基于 Ext.menu.Item 的对象到菜单
添加一个已经存在的基于 Ext.menu.Item 的对象到菜单
参数项：
  • item : Ext.menu.Item
    被添加的菜单项
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addMenuItem( Object config ) : Ext.menu.Item
根据给出的配置选项创建一个 Ext.menu.Item 对象并添加到菜单
根据给出的配置选项创建一个 Ext.menu.Item 对象并添加到菜单
参数项：
  • config : Object
    菜单配置选项对象
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addText( String text ) : Ext.menu.Item
根据给出的文本创建一个 Ext.menu.Item 对象并添加到菜单
根据给出的文本创建一个 Ext.menu.Item 对象并添加到菜单
参数项：
  • text : String
    菜单项中显示的文本
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
insert( Number index, Ext.menu.Item item ) : Ext.menu.Item
在指定的位置插入一个已经存在的基于 Ext.menu.Item 的对象到菜单
在指定的位置插入一个已经存在的基于 Ext.menu.Item 的对象到菜单
参数项：
  • index : Number
    要插入的对象在菜单中菜单项列表的位置的索引值
  • item : Ext.menu.Item
    要添加的菜单项
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
remove( Ext.menu.Item item )
从菜单中删除并销毁一个 Ext.menu.Item 对象
从菜单中删除并销毁一个 Ext.menu.Item 对象
参数项：
  • item : Ext.menu.Item
    要删除的菜单项
返回值：
  • void
Menu
removeAll()
从菜单中删除并销毁所有菜单项
从菜单中删除并销毁所有菜单项
参数项：
  • None.
返回值：
  • void
Menu
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
()
侦听器会传入以下的参数：
  • None.
 ColorMenu
beforeshow()
在该菜单显示之前触发
在该菜单显示之前触发
侦听器会传入以下的参数：
  • None.
 Menu
beforehide()
在该菜单隐藏之前触发
在该菜单隐藏之前触发
侦听器会传入以下的参数：
  • None.
 Menu
show()
在该菜单显示之后触发
在该菜单显示之后触发
侦听器会传入以下的参数：
  • None.
 Menu
hide()
在该菜单隐藏之后触发
在该菜单隐藏之后触发
侦听器会传入以下的参数：
  • None.
 Menu
click()
当点击该菜单时触发（或者当该菜单处于活动状态且回车键被按下时触发）
当点击该菜单时触发（或者当该菜单处于活动状态且回车键被按下时触发）
侦听器会传入以下的参数：
  • None.
 Menu
mouseover()
当鼠标经过该菜单时触发
当鼠标经过该菜单时触发
侦听器会传入以下的参数：
  • None.
 Menu
mouseout()
当鼠标离开该菜单时触发
当鼠标离开该菜单时触发
侦听器会传入以下的参数：
  • None.
 Menu
itemclick()
当此菜单的子菜单被点击时触发。
当此菜单的子菜单被点击时触发。
侦听器会传入以下的参数：
  • None.
 Menu


类Ext.menu.DateItem

包： | Extmenu
定义的文件： | DateItem.js
类全称： | Ext.menu.DateItem
继承自于： | Ext.menu.Adapter
一个通过封装 Ext.DatPicker 组件而成的菜单项。

配置项

配置项 定义者
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : Ext.DatePicker The Ext.DatePicker object The Ext.DatePicker object | DateItem
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
DateItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
DateItem
Adapter( Ext.Component component, Object config )
参数项：
  • component : Ext.Component
    渲染到菜单的那个组件
  • config : Object
    配置选项对象
返回值：
  • void
Adapter
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.menu.DateMenu

包： | Extmenu
定义的文件： | DateMenu.js
类全称： | Ext.menu.DateMenu
继承自于： | Ext.menu.Menu
一个包含 Ext.menu.DateItem 组件的菜单（提供了日期选择器）。

配置项

配置项 |  | 定义者
 | defaults : Object 作用到全体item的配置项对象，无论是通过items定义的抑或是add... 作用到全体item的配置项对象，无论是通过items定义的抑或是add方法加入的。默认配置项可以是任意数量的name/value组合，只要是能够被菜单使用的项就可以。 | Menu
 | items : Mixed 添加到菜单的Item，类型为Array。参阅 add了解有效的类型。 添加到菜单的Item，类型为Array。参阅 add了解有效的类型。 | Menu
 | minWidth : Number 以象素为单位设置的菜单最小宽度值（默认为 120） 以象素为单位设置的菜单最小宽度值（默认为 120） | Menu
 | shadow : Boolean/String 当值为 True 或者 "sides" 时为默认效果，"frame" ... 当值为 True 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影，"drop" 时为右下角有阴影（默认为 "sides"） | Menu
 | subMenuAlign : String 该菜单中子菜单的 Ext.ElementalignTo 定位锚点的值（... 该菜单中子菜单的 Ext.ElementalignTo 定位锚点的值（默认为 "tl-tr?"） | Menu
 | defaultAlign : String 该菜单相对于它的原始元素的 {@link Ext.Element#al... 该菜单相对于它的原始元素的 {@link Ext.Element#alignTo) 定位锚点的默认值（默认为 "tl-bl?"） | Menu
 | allowOtherMenus : Boolean 值为 True 时允许同时显示多个菜单（默认为 false） 值为 True 时允许同时显示多个菜单（默认为 false） | Menu
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | : {Boolean} 只读。如果当前显示的是该菜单则返回 true，否则返回 false。... 只读。如果当前显示的是该菜单则返回 true，否则返回 false。 | Menu

公共方法

方法 定义者
DateMenu( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
DateMenu
Menu( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Menu
show( Mixed element, String position, Ext.menu.Menu parentMenu )
相对于其他元素显示该菜单
相对于其他元素显示该菜单
参数项：
  • element : Mixed
    要对齐到的元素
  • position : String
    （可选） 对齐元素时使用的Ext.ElementalignTo 定位锚点（默认为 this.defaultAlign）
  • parentMenu : Ext.menu.Menu
    （可选） 该菜单的父级菜单，如果有的话（默认为 undefined）
返回值：
  • void
Menu
showAt( Array xyPosition, Ext.menu.Menu parentMenu )
在指定的位置显示该菜单
在指定的位置显示该菜单
参数项：
  • xyPosition : Array
    显示菜单时所用的包含 X 和 Y [x, y] 的坐标值（坐标是基于页面的）
  • parentMenu : Ext.menu.Menu
    （可选） 该菜单的父级菜单，如果有的话（默认为 undefined）
返回值：
  • void
Menu
hide( Boolean deep )
隐藏该菜单及相关连的父级菜单
隐藏该菜单及相关连的父级菜单
参数项：
  • deep : Boolean
    （可选） 值为 True 时则递归隐藏所有父级菜单，如果有的话（默认为 false）
返回值：
  • void
Menu
add( Mixed args ) : Ext.menu.Item
添加一个或多个 Menu 类支持的菜单项，或者可以被转换为菜单项的对象...
添加一个或多个 Menu 类支持的菜单项，或者可以被转换为菜单项的对象。满足下列任一条件即可：
  • 任何基于 Ext.menu.Item 的菜单项对象
  • 可以被转换为菜单项的 HTML 元素对象
  • 可以被创建为一个菜单项对象的菜单项配置选项对象
  • 任意字符串对象，值为 '-' 或 'separator' 时会在菜单中添加一个分隔栏，其他的情况下会被转换成为一个 Ext.menu.TextItem 对象并被添加到菜单中
用法：

// 创建一个菜单
var menu = new Ext.menu.Menu();

// 通过构造方法创建一个菜单项
var menuItem = new Ext.menu.Item({ text: 'New Item!' });

// 通过不同的方法一次添加一组菜单项。// 最后被添加的菜单项才会被返回。var item = menu.add(
    menuItem,                // 添加一个已经定义过的菜单项
    'Dynamic Item',          // 添加一个 TextItem 对象
    '-',                     // 添加一个分隔栏
    { text: 'Config Item' }  // 由配置选项对象生成的菜单项
);
参数项：
  • args : Mixed
    一个或多个菜单项，菜单项配置选项或其他可以被转换为菜单项的对象
返回值：
  • Ext.menu.Item
    被添加的菜单项，或者多个被添加的菜单项中的最后一个
Menu
getEl() : Ext.Element
返回该菜单所基于的 Ext.Element 对象
返回该菜单所基于的 Ext.Element 对象
参数项：
  • None.
返回值：
  • Ext.Element
    元素对象
Menu
addSeparator() : Ext.menu.Item
添加一个分隔栏到菜单
添加一个分隔栏到菜单
参数项：
  • None.
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addElement( Mixed el ) : Ext.menu.Item
添加一个 Ext.Element 对象到菜单
添加一个 Ext.Element 对象到菜单
参数项：
  • el : Mixed
    被添加的元素或者 DOM 节点，或者它的ID
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addItem( Ext.menu.Item item ) : Ext.menu.Item
添加一个已经存在的基于 Ext.menu.Item 的对象到菜单
添加一个已经存在的基于 Ext.menu.Item 的对象到菜单
参数项：
  • item : Ext.menu.Item
    被添加的菜单项
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addMenuItem( Object config ) : Ext.menu.Item
根据给出的配置选项创建一个 Ext.menu.Item 对象并添加到菜单
根据给出的配置选项创建一个 Ext.menu.Item 对象并添加到菜单
参数项：
  • config : Object
    菜单配置选项对象
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addText( String text ) : Ext.menu.Item
根据给出的文本创建一个 Ext.menu.Item 对象并添加到菜单
根据给出的文本创建一个 Ext.menu.Item 对象并添加到菜单
参数项：
  • text : String
    菜单项中显示的文本
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
insert( Number index, Ext.menu.Item item ) : Ext.menu.Item
在指定的位置插入一个已经存在的基于 Ext.menu.Item 的对象到菜单
在指定的位置插入一个已经存在的基于 Ext.menu.Item 的对象到菜单
参数项：
  • index : Number
    要插入的对象在菜单中菜单项列表的位置的索引值
  • item : Ext.menu.Item
    要添加的菜单项
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
remove( Ext.menu.Item item )
从菜单中删除并销毁一个 Ext.menu.Item 对象
从菜单中删除并销毁一个 Ext.menu.Item 对象
参数项：
  • item : Ext.menu.Item
    要删除的菜单项
返回值：
  • void
Menu
removeAll()
从菜单中删除并销毁所有菜单项
从菜单中删除并销毁所有菜单项
参数项：
  • None.
返回值：
  • void
Menu
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
()
侦听器会传入以下的参数：
  • None.
 DateMenu
beforeshow()
在该菜单显示之前触发
在该菜单显示之前触发
侦听器会传入以下的参数：
  • None.
 Menu
beforehide()
在该菜单隐藏之前触发
在该菜单隐藏之前触发
侦听器会传入以下的参数：
  • None.
 Menu
show()
在该菜单显示之后触发
在该菜单显示之后触发
侦听器会传入以下的参数：
  • None.
 Menu
hide()
在该菜单隐藏之后触发
在该菜单隐藏之后触发
侦听器会传入以下的参数：
  • None.
 Menu
click()
当点击该菜单时触发（或者当该菜单处于活动状态且回车键被按下时触发）
当点击该菜单时触发（或者当该菜单处于活动状态且回车键被按下时触发）
侦听器会传入以下的参数：
  • None.
 Menu
mouseover()
当鼠标经过该菜单时触发
当鼠标经过该菜单时触发
侦听器会传入以下的参数：
  • None.
 Menu
mouseout()
当鼠标离开该菜单时触发
当鼠标离开该菜单时触发
侦听器会传入以下的参数：
  • None.
 Menu
itemclick()
当此菜单的子菜单被点击时触发。
当此菜单的子菜单被点击时触发。
侦听器会传入以下的参数：
  • None.
 Menu


类Ext.menu.Item

包： | Extmenu
定义的文件： | Item.js
类全称： | Ext.menu.Item
继承自于： | Ext.menu.BaseItem
所有与菜单功能相关的（如：子菜单）以及非静态显示的菜单项的基类。Item 类继承了 Ext.menu.BaseItem 类的基本功能，并添加了菜单所特有的动作和点击事件的处理方法

配置项

配置项 定义者
icon : String
指定该菜单项显示的图标的路径（默认为 Ext.BLANK_IMAGE_...
指定该菜单项显示的图标的路径（默认为 Ext.BLANK_IMAGE_URL）如果icon指定了iconCls就不应存在
Item
iconCls : String
定义了背景图的CSS样式类，用于该项的图标显示。(默认为 '') 如果...
定义了背景图的CSS样式类，用于该项的图标显示。(默认为 '') 如果iconCls指定了icon就不应存在
Item
text : String
此项显示的文本 (默认为 '').
此项显示的文本 (默认为 '').
Item
href : String
要使用的那个连接的href属性 (默认为 '#').
要使用的那个连接的href属性 (默认为 '#').
Item
hrefTarget : String
要使用的那个连接的target属性 (defaults to '').
要使用的那个连接的target属性 (defaults to '').
Item
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
showDelay : Number
菜单项显示之前的延时时间（默认为200）
菜单项显示之前的延时时间（默认为200）
Item
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Item( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Item
setText( String text )
设置该菜单项显示的文本
设置该菜单项显示的文本
参数项：
  • text : String
    显示的文本
返回值：
  • void
Item
setIconClass( String cls )
把CSS样式类得效果应用在items的图标元素上
把CSS样式类得效果应用在items的图标元素上
参数项：
  • cls : String
    The CSS class to apply
返回值：
  • void
Item
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.menu.Menu

包： | Extmenu
定义的文件： | Menu.js
类全称： | Ext.menu.Menu
继承自于： | Ext.util.Observable
一个菜单对象。它是所有你添加的菜单项的容器。Menu 类也可以当作是你根据其他组件生成的菜单的基类（例如：Ext.menu.DateMenu）。

配置项

配置项 |  | 定义者
 | defaults : Object 作用到全体item的配置项对象，无论是通过items定义的抑或是add... 作用到全体item的配置项对象，无论是通过items定义的抑或是add方法加入的。默认配置项可以是任意数量的name/value组合，只要是能够被菜单使用的项就可以。 | Menu
 | items : Mixed 添加到菜单的Item，类型为Array。参阅 add了解有效的类型。 添加到菜单的Item，类型为Array。参阅 add了解有效的类型。 | Menu
 | minWidth : Number 以象素为单位设置的菜单最小宽度值（默认为 120） 以象素为单位设置的菜单最小宽度值（默认为 120） | Menu
 | shadow : Boolean/String 当值为 True 或者 "sides" 时为默认效果，"frame" ... 当值为 True 或者 "sides" 时为默认效果，"frame" 时为4方向有阴影，"drop" 时为右下角有阴影（默认为 "sides"） | Menu
 | subMenuAlign : String 该菜单中子菜单的 Ext.ElementalignTo 定位锚点的值（... 该菜单中子菜单的 Ext.ElementalignTo 定位锚点的值（默认为 "tl-tr?"） | Menu
 | defaultAlign : String 该菜单相对于它的原始元素的 {@link Ext.Element#al... 该菜单相对于它的原始元素的 {@link Ext.Element#alignTo) 定位锚点的默认值（默认为 "tl-bl?"） | Menu
 | allowOtherMenus : Boolean 值为 True 时允许同时显示多个菜单（默认为 false） 值为 True 时允许同时显示多个菜单（默认为 false） | Menu
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | : {Boolean} 只读。如果当前显示的是该菜单则返回 true，否则返回 false。... 只读。如果当前显示的是该菜单则返回 true，否则返回 false。 | Menu

公共方法

方法 定义者
Menu( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Menu
show( Mixed element, String position, Ext.menu.Menu parentMenu )
相对于其他元素显示该菜单
相对于其他元素显示该菜单
参数项：
  • element : Mixed
    要对齐到的元素
  • position : String
    （可选） 对齐元素时使用的Ext.ElementalignTo 定位锚点（默认为 this.defaultAlign）
  • parentMenu : Ext.menu.Menu
    （可选） 该菜单的父级菜单，如果有的话（默认为 undefined）
返回值：
  • void
Menu
showAt( Array xyPosition, Ext.menu.Menu parentMenu )
在指定的位置显示该菜单
在指定的位置显示该菜单
参数项：
  • xyPosition : Array
    显示菜单时所用的包含 X 和 Y [x, y] 的坐标值（坐标是基于页面的）
  • parentMenu : Ext.menu.Menu
    （可选） 该菜单的父级菜单，如果有的话（默认为 undefined）
返回值：
  • void
Menu
hide( Boolean deep )
隐藏该菜单及相关连的父级菜单
隐藏该菜单及相关连的父级菜单
参数项：
  • deep : Boolean
    （可选） 值为 True 时则递归隐藏所有父级菜单，如果有的话（默认为 false）
返回值：
  • void
Menu
add( Mixed args ) : Ext.menu.Item
添加一个或多个 Menu 类支持的菜单项，或者可以被转换为菜单项的对象...
添加一个或多个 Menu 类支持的菜单项，或者可以被转换为菜单项的对象。满足下列任一条件即可：
  • 任何基于 Ext.menu.Item 的菜单项对象
  • 可以被转换为菜单项的 HTML 元素对象
  • 可以被创建为一个菜单项对象的菜单项配置选项对象
  • 任意字符串对象，值为 '-' 或 'separator' 时会在菜单中添加一个分隔栏，其他的情况下会被转换成为一个 Ext.menu.TextItem 对象并被添加到菜单中
用法：

// 创建一个菜单
var menu = new Ext.menu.Menu();

// 通过构造方法创建一个菜单项
var menuItem = new Ext.menu.Item({ text: 'New Item!' });

// 通过不同的方法一次添加一组菜单项。// 最后被添加的菜单项才会被返回。var item = menu.add(
    menuItem,                // 添加一个已经定义过的菜单项
    'Dynamic Item',          // 添加一个 TextItem 对象
    '-',                     // 添加一个分隔栏
    { text: 'Config Item' }  // 由配置选项对象生成的菜单项
);
参数项：
  • args : Mixed
    一个或多个菜单项，菜单项配置选项或其他可以被转换为菜单项的对象
返回值：
  • Ext.menu.Item
    被添加的菜单项，或者多个被添加的菜单项中的最后一个
Menu
getEl() : Ext.Element
返回该菜单所基于的 Ext.Element 对象
返回该菜单所基于的 Ext.Element 对象
参数项：
  • None.
返回值：
  • Ext.Element
    元素对象
Menu
addSeparator() : Ext.menu.Item
添加一个分隔栏到菜单
添加一个分隔栏到菜单
参数项：
  • None.
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addElement( Mixed el ) : Ext.menu.Item
添加一个 Ext.Element 对象到菜单
添加一个 Ext.Element 对象到菜单
参数项：
  • el : Mixed
    被添加的元素或者 DOM 节点，或者它的ID
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addItem( Ext.menu.Item item ) : Ext.menu.Item
添加一个已经存在的基于 Ext.menu.Item 的对象到菜单
添加一个已经存在的基于 Ext.menu.Item 的对象到菜单
参数项：
  • item : Ext.menu.Item
    被添加的菜单项
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addMenuItem( Object config ) : Ext.menu.Item
根据给出的配置选项创建一个 Ext.menu.Item 对象并添加到菜单
根据给出的配置选项创建一个 Ext.menu.Item 对象并添加到菜单
参数项：
  • config : Object
    菜单配置选项对象
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
addText( String text ) : Ext.menu.Item
根据给出的文本创建一个 Ext.menu.Item 对象并添加到菜单
根据给出的文本创建一个 Ext.menu.Item 对象并添加到菜单
参数项：
  • text : String
    菜单项中显示的文本
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
insert( Number index, Ext.menu.Item item ) : Ext.menu.Item
在指定的位置插入一个已经存在的基于 Ext.menu.Item 的对象到菜单
在指定的位置插入一个已经存在的基于 Ext.menu.Item 的对象到菜单
参数项：
  • index : Number
    要插入的对象在菜单中菜单项列表的位置的索引值
  • item : Ext.menu.Item
    要添加的菜单项
返回值：
  • Ext.menu.Item
    被添加的菜单项
Menu
remove( Ext.menu.Item item )
从菜单中删除并销毁一个 Ext.menu.Item 对象
从菜单中删除并销毁一个 Ext.menu.Item 对象
参数项：
  • item : Ext.menu.Item
    要删除的菜单项
返回值：
  • void
Menu
removeAll()
从菜单中删除并销毁所有菜单项
从菜单中删除并销毁所有菜单项
参数项：
  • None.
返回值：
  • void
Menu
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeshow()
在该菜单显示之前触发
在该菜单显示之前触发
侦听器会传入以下的参数：
  • None.
 Menu
beforehide()
在该菜单隐藏之前触发
在该菜单隐藏之前触发
侦听器会传入以下的参数：
  • None.
 Menu
show()
在该菜单显示之后触发
在该菜单显示之后触发
侦听器会传入以下的参数：
  • None.
 Menu
hide()
在该菜单隐藏之后触发
在该菜单隐藏之后触发
侦听器会传入以下的参数：
  • None.
 Menu
click()
当点击该菜单时触发（或者当该菜单处于活动状态且回车键被按下时触发）
当点击该菜单时触发（或者当该菜单处于活动状态且回车键被按下时触发）
侦听器会传入以下的参数：
  • None.
 Menu
mouseover()
当鼠标经过该菜单时触发
当鼠标经过该菜单时触发
侦听器会传入以下的参数：
  • None.
 Menu
mouseout()
当鼠标离开该菜单时触发
当鼠标离开该菜单时触发
侦听器会传入以下的参数：
  • None.
 Menu
itemclick()
当此菜单的子菜单被点击时触发。
当此菜单的子菜单被点击时触发。
侦听器会传入以下的参数：
  • None.
 Menu


类Ext.menu.MenuMgr

包： | Extmenu
定义的文件： | MenuMgr.js
类全称： | Ext.menu.MenuMgr
继承自于： | Object
提供一个页面中所有菜单项的公共注册表，以便于能够很容易地通过ID来访问这些菜单对象。@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
hideAll()
隐藏所有当前可见的菜单
隐藏所有当前可见的菜单
参数项：
  • None.
返回值：
  • void
MenuMgr
get( String/Object menu ) : Ext.menu.Menu
返回一个 Ext.menu.Menu 对象
返回一个 Ext.menu.Menu 对象
参数项：
  • menu : String/Object
    如果值为字符串形式的菜单ID，则返回存在的对象引用。如果是 Menu 类的配置选项对象，则被用来生成并返回一个新的 Menu 实例。
返回值：
  • Ext.menu.Menu
    指定的菜单
MenuMgr

公共事件

这个类没有公告事件。


类Ext.menu.Separator

包： | Extmenu
定义的文件： | Separator.js
类全称： | Ext.menu.Separator
继承自于： | Ext.menu.BaseItem
添加一个分隔栏到菜单中，用来区分菜单项的逻辑分组。通常你可以在调用 add()方法时或者在菜单项的配置选项中使用 "-" 参数直接创建一个分隔栏。

配置项

配置项 定义者
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Separator( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Separator
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.menu.TextItem

包： | Extmenu
定义的文件： | TextItem.js
类全称： | Ext.menu.TextItem
继承自于： | Ext.menu.BaseItem
添加一个静态文本到菜单中，通常用来作为标题或者组分隔符。

配置项

配置项 定义者
text : String
此项所显示的文本（默认为''）
此项所显示的文本（默认为''）
TextItem
hideOnClick : Boolean
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
值为 True 时该选项单击后隐藏所包含的菜单（默认为 true）
BaseItem
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
handler : Function
用来处理该选项单击事件的函数（默认为 undefined）
用来处理该选项单击事件的函数（默认为 undefined）
BaseItem
scope : Object
句柄函数内的作用域会被调用
句柄函数内的作用域会被调用
BaseItem
canActivate : Boolean
值为 True 时该选项能够在可见的情况下被激活
值为 True 时该选项能够在可见的情况下被激活
BaseItem
activeClass : String
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-i...
当该选项成为激活状态时所使用的CSS样式类（默认为 "x-menu-item-active"）
BaseItem
hideDelay : Number
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
以毫秒为单位表示的单击后隐藏的延迟时间（默认为 100）
BaseItem
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TextItem( String text )
参数项：
  • text : String
    要显示的文本
返回值：
  • void
TextItem
BaseItem( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
BaseItem
setHandler( Function handler, Object scope )
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如...
为该项设置单击事件的句柄（相当于传入一个handler配置项属性） 如果该句柄以登记，那么先会把它卸掉。
参数项：
  • handler : Function
    单击时所执行的函数
  • scope : Object
    句柄所在的作用域
返回值：
  • void
BaseItem
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
click()
当该选项被点击时触发
当该选项被点击时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
activate()
当该选项被激活时触发
当该选项被激活时触发
侦听器会传入以下的参数：
  • None.
 BaseItem
deactivate()
当该选项被释放里触发
当该选项被释放里触发
侦听器会传入以下的参数：
  • None.
 BaseItem
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.MessageBox

包： | Ext
定义的文件： | MessageBox.js
类全称： | Ext.MessageBox
继承自于： | Object

用来生成不同样式的消息框的实用类。还可以使用它的别名Ext.Msg。Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.

需要注意的是 MessageBox 对象是异步的。不同于 JavaScript中原生的alert（它会暂停浏览器的执行），显示 MessageBox 不会中断代码的运行。由于这个原因，如果你的代码需要在用户对 MessageBox 做出反馈之后执行，则必须用到回调函数（详情可见show方法中的function参数）。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 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

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Object 一个包含默认的按钮文本字串的对象，为本地化支持时可以被覆写。可用的属... 一个包含默认的按钮文本字串的对象，为本地化支持时可以被覆写。可用的属性有：ok、cancel、yes 和 no。通常情况下你可以通过包含一个本地资源文件来实现整个框架的本地化。像这样就可以定制默认的文本：Ext.MessageBox.buttonText.yes = "是"; //中文 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 | MessageBox

公共方法

方法 定义者
getDialog() : Ext.Window
返回Ext.Window对象的元素的引用。Returns a refe...
返回Ext.Window对象的元素的引用。Returns a reference to the underlying Ext.Window element
参数项：
  • None.
返回值：
  • Ext.Window
    The window 对象
MessageBox
updateText( String text ) : Ext.MessageBox
更新消息框中body元素的文本。Updates the message...
更新消息框中body元素的文本。Updates the message box body text
参数项：
  • text : String
    （可选）使用指定的文本替换消息框中元素的 innerHTML （默认为XHTML兼容的非换行空格字符 '&#160;'）。(optional) Replaces the message box element's innerHTML with the specified string (defaults to the XHTML-compliant non-breaking space character '&#160;')
返回值：
  • Ext.MessageBox
    this
MessageBox
updateProgress( Number value, String progressText, String msg ) : Ext.MessageBox
更新带有进度条的消息框中的文本和进度条。仅仅是由通过 Ext.Mess...
更新带有进度条的消息框中的文本和进度条。仅仅是由通过 Ext.MessageBoxprogress方法或者是在调用Ext.MessageBoxshow方法时使用参数progress: true显示的消息框中可用。Updates a progress-style message box's text and progress bar. Only relevant on message boxes initiated via Ext.MessageBoxprogress or Ext.MessageBoxwait, or by calling Ext.MessageBoxshow with progress: true.
参数项：
  • value : Number
    0 到 1 之间的任意数字（例如： .5，默认为 0）。Any number between 0 and 1 (e.g., .5, defaults to 0)
  • progressText : String
    进度条中显示的文本（默认为 ''）。The progress text to display inside the progress bar (defaults to '')
  • msg : String
    用于替换消息框中 body 元素内容的文本（默认为 undefined，因此如果没有指定该参数则 body 中任何现存的文本将不会被覆写）。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)
返回值：
  • Ext.MessageBox
    this
MessageBox
isVisible() : Boolean
如果消息框当前可见则返回true。Returns true if th...
如果消息框当前可见则返回true。Returns true if the message box is currently displayed
参数项：
  • None.
返回值：
  • Boolean
    如果消息框当前可见则返回 true，否则返回 false。True if the message box is visible, else false
MessageBox
hide() : Ext.MessageBox
如果消息框当前可见则返回true，否则返回false。Hides th...
如果消息框当前可见则返回true，否则返回false。Hides the message box if it is displayed
参数项：
  • None.
返回值：
  • Ext.MessageBox
    this
MessageBox
show( Object config ) : Ext.MessageBox
基于给定的配置选项显示一个消息框，或者重新初始一个现存的消息框。Mes...
基于给定的配置选项显示一个消息框，或者重新初始一个现存的消息框。MessageBox 对象的所有显示函数（例如：prompt、alert、等等）均为内部调用此函数， 虽然这些调用均为此方法的简单的快捷方式并且不提供所有的下列配置选项。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.
参数项：
  • config : Object
    可支持的配置项参数：The following config options are supported:
    • animEl : String/Element
      消息框显示和关闭时动画展现的目标元素，或它的 ID（默认为 undefined）。An id or Element from which the message box should animate as it opens and closes (defaults to undefined)
    • buttons : Object/Boolean
      Button 配置对象（例如：Ext.MessageBox.OKCANCEL 或者 {ok:'Foo',cancel:'Bar'}），或者 false 表示不显示任何按钮（默认为 false）。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 则隐藏右上角的关闭按钮（默认为 true）。注意由于 progress 和 wait 对话框只能通过程序关闭，因此它们将忽略此参数并总是隐藏关闭按钮。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
      应用到消息框容器元素中的自定义 CSS 类。A custom CSS class to apply to the message box's container element
    • defaultTextHeight : Number
      以像素为单位表示的默认消息框的文本域高度，如果有的话（默认为 75）。The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
    • fn : Function
      当对话框关闭后执行的回调函数。参数包括按钮（被点击的按钮的名字，如果可用，如："ok"），文本（活动的文本框的值，如果可用）。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 和 wait 对话框将忽略此选项，因为它们不会回应使用者的动作，并且只能在程序中被关闭，所以任何必须的函数都可以放在关闭对话框的代码中调用。以下是送入的参数： 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
        按下按钮的id，可以是：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
      一个指定了背景图片地址的 CSS 类名用于对话框显示图标（例如：Ext.MessageBox.WARNING 或者 'custom-class'，默认这 ''）。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
      作用在头版图标的标准Ext.WindowiconCls（默认为''）。The standard Ext.WindowiconCls to add an optional header icon (defaults to '')
    • maxWidth : Number
      以像素为单位表示的消息框的最大宽度（默认为 600）。The maximum width in pixels of the message box (defaults to 600)
    • minWidth : Number
      以像素为单位表示的消息框的最小宽度（默认为 100）。The minimum width in pixels of the message box (defaults to 100)
    • modal : Boolean
      值为 false 时允许用户在消息框在显示时交互（默认为 true） False to allow user interaction with the page while the message box is displayed (defaults to true)
    • msg : String
      使用指定的文本替换消息框中元素的 innerHTML （默认为XHTML兼容的非换行空格字符 '&#160;'） A string that will replace the existing message box body text (defaults to the XHTML-compliant non-breaking space character '&#160;')
    • multiline : Boolean
      值为 true 时显示一个提示用户输入多行文本的对话框（默认为 false）。True to prompt the user to enter multi-line text (defaults to false)
    • progress : Boolean
      值为 true 时显示一个进度条（默认为 false）。True to display a progress bar (defaults to false)
    • progressText : String
      当 progress = true 时进度条内显示的文本（默认为 ''）。The text to display inside the progress bar if progress = true (defaults to '')
    • prompt : Boolean
      值为 true 时显示一个提示用户输入单行文本的对话框（默认为 false）。True to prompt the user to enter single-line text (defaults to false)
    • proxyDrag : Boolean
      值为 true 则在拖拽的时候显示一个轻量级的代理（默认为 false）。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时显示一个进度条（默认为 false）。True to display a progress bar (defaults to false)
    • waitConfig : Object
      Ext.ProgressBarwaitConfig对象（仅在 wait = true 时可用）。A Ext.ProgressBarwaitConfig object (applies only if wait = true)
    • width : Number
      以像素为单位表示的对话框的宽度。The width of the dialog in pixels
    用法示例： Example usage:
返回值：
  • Ext.MessageBox
    this
MessageBox
setIcon( String icon ) : Ext.MessageBox
添加指定的图标到对话框中。默认情况下，'ext-mb-icon' 被应...
添加指定的图标到对话框中。默认情况下，'ext-mb-icon' 被应用于默认的样式，给定的样式类需要指定背景图片地址。如果要清除图标则给定一个空字串（''）。下面是提供的内建图标样式类，当然你也可以给定一个自定义的类： 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. 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
参数项：
  • icon : String
    一个指定了背景图片地址的 CSS 类名，或者一个空字串表示清除图标。A CSS classname specifying the icon's background image url, or empty string to clear the icon
返回值：
  • Ext.MessageBox
    this
MessageBox
progress( String title, String msg, String progressText ) : Ext.MessageBox
显示一个带有进度条的消息框。此消息框没有按钮并且无法被用户关闭。你必须...
显示一个带有进度条的消息框。此消息框没有按钮并且无法被用户关闭。你必须通过Ext.MessageBoxupdateProgress方法更新进度条，并当进度完成时关闭消息框。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 Ext.MessageBoxupdateProgress and closing the message box when the process is complete.
参数项：
  • title : String
    标题文本。The title bar text
  • msg : String
    消息框body文本。The message box body text
  • progressText : String
    进度条显示的文本（默认为 ''）。(optional) The text to display inside the progress bar (defaults to '')
返回值：
  • Ext.MessageBox
    this
MessageBox
wait( String msg, String title, Object config ) : Ext.MessageBox
显示一个带有不断自动更新的进度条的消息框。这个可以被用在一个长时间运行...
显示一个带有不断自动更新的进度条的消息框。这个可以被用在一个长时间运行的进程中防止用户交互。你需要在进程完成的时候关闭消息框。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.
参数项：
  • msg : String
    消息框 body 文本 The message box body text
  • title : String
    （可选） 标题文本。(optional) The title bar text
  • config : Object
    （可选） Ext.ProgressBarwaitConfig对象。(optional) A Ext.ProgressBarwaitConfig object
返回值：
  • Ext.MessageBox
    this
MessageBox
alert( String title, String msg, Function fn, Object scope ) : Ext.MessageBox
显示一个标准的带有确认按钮的只读消息框（类似于 JavaScript原...
显示一个标准的带有确认按钮的只读消息框（类似于 JavaScript原生的 alert函数、prompt函数）。如果给定了回调函数，则会在用户点击按钮后执行，并且被点击的按钮的 ID 会当做唯一的参数传入到回调函数中（也有可能是右上角的关闭按钮）。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).
参数项：
  • title : String
    标题文本。The title bar text
  • msg : String
    消息框body文本。The message box body text
  • fn : Function
    （可选）消息框被关闭后调用的回调函数。(optional) The callback function invoked after the message box is closed
  • scope : Object
    （可选）回调函数的作用域。(optional)The scope of the callback function
返回值：
  • Ext.MessageBox
    this
MessageBox
confirm( String title, String msg, Function fn, Object scope ) : Ext.MessageBox
显示一个带有是和否按钮的确认消息框（等同与JavaScript 原生的...
显示一个带有是和否按钮的确认消息框（等同与JavaScript 原生的confirm函数）。如果给定了回调函数，则会在用户点击按钮后执行，并且被点击的按钮的ID会当做唯一的参数传入到回调函数中（也有可能是右上角的关闭按钮）。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).
参数项：
  • title : String
    标题文本。The title bar text
  • msg : String
    消息框body文本。The message box body text
  • fn : Function
    （可选）消息框被关闭后调用的回调函数。(optional) The callback function invoked after the message box is closed
  • scope : Object
    （可选）回调函数的作用域。(optional)The scope of the callback function
返回值：
  • Ext.MessageBox
    this
MessageBox
prompt( String title, String msg, Function fn, Object scope, Boolean/Number multiline, String value ) : Ext.MessageBox
显示一个带有确认和取消按钮的提示框，并接受用户输入文本（等同与Java...
显示一个带有确认和取消按钮的提示框，并接受用户输入文本（等同与JavaScript原生的prompt函数）。提示框可以是一个单行或多行文本框。如果给定了回调函数，则在用户点击任意一个按钮后执行回调函数， 并且被点击的按钮的ID（有可能是右上角的关闭按钮）和用户输入的文本都将被当做参数传给回调函数。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.
参数项：
  • title : String
    标题文本。The title bar text
  • msg : String
    消息框body文本。The message box body text
  • fn : Function
    （可选的）消息框被关闭后调用的回调函数。(optional)The callback function invoked after the message box is closed
  • scope : Object
    （可选的）回调函数的作用域。(optional)The scope of the callback function
  • multiline : Boolean/Number
    （可选的）值为true时则创建一个defaultTextHeight值指定行数的文本域，或者一个以像素为单位表示的高度（默认为 false，表示单行）。(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)
  • value : String
    （可选的）text输入元素的默认值（默认为''）。(optional) Default value of the text input element (defaults to '')
返回值：
  • Ext.MessageBox
    this
MessageBox
Msg()
Ext.MessageBox 的缩写。Shorthand for Ex...
Ext.MessageBox 的缩写。Shorthand for Ext.MessageBox
参数项：
  • None.
返回值：
  • void
MessageBox

公共事件

这个类没有公告事件。


类Ext.PagingToolbar

包： | Ext
定义的文件： | PagingToolbar.js
类全称： | Ext.PagingToolbar
继承自于： | Ext.Toolbar

一个要和Ext.data.Store参与绑定并且自动提供翻页控制的工具栏。A specialized toolbar that is bound to a Ext.data.Store and provides automatic paging control. This Component loads blocks of data into the Store passing parameters who's names are specified by the store's paramNames property.

配置项

配置项 定义者
store : Ext.data.Store
翻页工具栏应该使用Ext.data.Store作为它的数据源（在需要的...
翻页工具栏应该使用Ext.data.Store作为它的数据源（在需要的时候）。The Ext.data.Store the paging toolbar should use as its data source (required).
PagingToolbar
displayInfo : Boolean
为true时展示展现信息（默认为false）。True to disp...
为true时展示展现信息（默认为false）。True to display the displayMsg (defaults to false)
PagingToolbar
pageSize : Number
每页要展现的记录数（默认为 20）。The number of rec...
每页要展现的记录数（默认为 20）。The number of records to display per page (defaults to 20)
PagingToolbar
prependButtons : Boolean
True表示为在分页按钮之前随便插入可配置的条目。默认为false。T...
True表示为在分页按钮之前随便插入可配置的条目。默认为false。True to insert any configured items before the paging buttons. Defaults to false.
PagingToolbar
displayMsg : String
用来显示翻页的情况信息 (默认为"Displaying {0} - {...
用来显示翻页的情况信息 (默认为"Displaying {0} - {1} of {2}"). 注意这个字符串里大括号中的数字是一种标记,其中的数字分别代表起始值,结束值和总数.当重写这个字符串的时候如果这些值是要显示的,那么这些标识应该被保留下来 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.
PagingToolbar
emptyMsg : String
没有数据记录的时候所展示的信息（默认为"No data to disp...
没有数据记录的时候所展示的信息（默认为"No data to display"）。The message to display when no records are found (defaults to "No data to display")
PagingToolbar
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : String 可定制的默认翻页文本 (defaults to "Refresh")... 可定制的默认翻页文本 (defaults to "Refresh")。Customizable piece of the default paging text (defaults to "Refresh") | PagingToolbar
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
T( Object config )
参数项：
  • config : Object
    配置对象。The config object
返回值：
  • void
PagingToolbar
paramNames()
加载调用时的参数名对象映射（默认为 {start: 'start', ...
加载调用时的参数名对象映射（默认为 {start: 'start', limit: 'limit'}）。Object mapping of parameter names for load calls (defaults to {start: 'start', limit: 'limit'})
参数项：
  • None.
返回值：
  • void
PagingToolbar
changePage( Integer page )
改变活动的页码。Change the active page
改变活动的页码。Change the active page
参数项：
  • page : Integer
    要显示的页码。The page to display
返回值：
  • void
PagingToolbar
unbind( Ext.data.Store store )
从指定的Ext.data.Store数据源解除翻页工具栏绑定。Unbi...
从指定的Ext.data.Store数据源解除翻页工具栏绑定。Unbinds the paging toolbar from the specified Ext.data.Store
参数项：
  • store : Ext.data.Store
    要解除绑定的数据源。The data store to unbind
返回值：
  • void
PagingToolbar
bind( Ext.data.Store store )
在数据源Ext.data.Store上绑定指定翻页工具栏。Binds ...
在数据源Ext.data.Store上绑定指定翻页工具栏。Binds the paging toolbar to the specified Ext.data.Store
参数项：
  • store : Ext.data.Store
    要绑定的数据源。The data store to bind
返回值：
  • void
PagingToolbar
Toolbar( Object/Array config )
参数项：
  • config : Object/Array
    要添加的一个配置对象或者一个要按钮数组 A config object or an array of buttons to add
返回值：
  • void
Toolbar
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
addSeparator() : Ext.Toolbar.Item
添加一个分隔符。Adds a separator
添加一个分隔符。Adds a separator
参数项：
  • None.
返回值：
  • Ext.Toolbar.Item
    分隔符项 The separator item
Toolbar
addSpacer() : Ext.Toolbar.Spacer
添加一个空白分隔符。Adds a spacer element
添加一个空白分隔符。Adds a spacer element
参数项：
  • None.
返回值：
  • Ext.Toolbar.Spacer
    空白项 The spacer item
Toolbar
addFill()
使得后来添加的元素都像CSS样式：float:right那般向右靠拢。...
使得后来添加的元素都像CSS样式：float:right那般向右靠拢。Forces subsequent additions into the float:right toolbar
参数项：
  • None.
返回值：
  • void
Toolbar
addElement( Mixed el ) : Ext.Toolbar.Item
在工具栏上添加任何一个标准的HTML元素。Adds any stand...
在工具栏上添加任何一个标准的HTML元素。Adds any standard HTML element to the toolbar
参数项：
  • el : Mixed
    要加入的元素本身或元素其。id The element or id of the element to add
返回值：
  • Ext.Toolbar.Item
    元素项。The element's item
Toolbar
addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
添加任何一个Toolbar.Item或者其子类。Adds any To...
添加任何一个Toolbar.Item或者其子类。Adds any Toolbar.Item or subclass
参数项：
  • item : Ext.Toolbar.Item
    元素项
返回值：
  • Ext.Toolbar.Item
    元素项 The item
Toolbar
addButton( Object/Array config ) : Ext.Toolbar.Button/Array
添加一个按钮(或者一组按钮)。可以查看Ext.Toolbar.Butt...
添加一个按钮(或者一组按钮)。可以查看Ext.Toolbar.Button获取更多的配置信息。Adds a button (or buttons). See Ext.Toolbar.Button for more info on the config.
参数项：
  • config : Object/Array
    按钮的配置项或配置项的数组。A button config or array of configs
返回值：
  • Ext.Toolbar.Button/Array
Toolbar
addText( String text ) : Ext.Toolbar.Item
在工具栏上添加文本。Adds text to the toolbar
在工具栏上添加文本。Adds text to the toolbar
参数项：
  • text : String
    添加的文本。The text to add
返回值：
  • Ext.Toolbar.Item
    元素。The element's item
Toolbar
insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Toolbar.Button/Array item ) : Ext.Toolbar.Button/Item
在指定的索引位置那里插入任何一个Ext.Toolbar.Item/Ex...
在指定的索引位置那里插入任何一个Ext.Toolbar.Item/Ext.Toolbar.Button项。Inserts any Ext.Toolbar.Item/Ext.Toolbar.Button at the specified index.
参数项：
  • index : Number
    item插入的地方（索引值） The index where the item is to be inserted
  • item : Object/Ext.Toolbar.Item/Ext.Toolbar.Button/Array
    要插入的按钮本身或按钮其配置项，或配置项的数组 item The button, or button config object to be inserted, or an array of buttons/configs.
返回值：
  • Ext.Toolbar.Button/Item
Toolbar
addDom( Object config ) : Ext.Toolbar.Item
在工具栏上添加一个从Ext.DomHelper配置传递过来的元素。Ad...
在工具栏上添加一个从Ext.DomHelper配置传递过来的元素。Adds a new element to the toolbar from the passed Ext.DomHelper config
参数项：
  • config : Object
返回值：
  • Ext.Toolbar.Item
    元素 The element's item
Toolbar
addField( Ext.form.Field field ) : Ext.Toolbar.Item
添加一个动态的可展现的 Ext.form field（TextFiel...
添加一个动态的可展现的 Ext.form field（TextField、ComboBox等等）。注意:这个域应该还没有被展现。对于一个已经被展现了的域，应使用addElement。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 addElement.
参数项：
  • field : Ext.form.Field
返回值：
  • Ext.Toolbar.Item
Toolbar
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
change()
当页数改变后触发。Fires after the active pag...
当页数改变后触发。Fires after the active page has been changed.
侦听器会传入以下的参数：
  • None.
 PagingToolbar
beforechange()
当页数改变之前就触发。返回false就取消页数的变换。Fires ju...
当页数改变之前就触发。返回false就取消页数的变换。Fires just before the active page is changed. Return false to prevent the active page from being changed.
侦听器会传入以下的参数：
  • None.
 PagingToolbar
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.Panel

包： | Ext
定义的文件： | Panel.js
类全称： | Ext.Panel
继承自于： | Ext.Container
面板是一种面向用户界面构建应用程序最佳的单元块，一种特定功能和结构化组件。面板包含有底部和顶部的工具条，连同单独的头部、底部和body部分。它提供内建都得可展开和可闭合的行为，连同多个内建的可制定的行为的工具按钮。面板可简易地置入任意的容器或布局，而面板和渲染管线（rendering pipeline）则由框架完全控制。
Panel is a container that has specific functionality and structural components that make it the perfect building block for application-oriented user interfaces. The Panel contains bottom and top toolbars, along with separate header, footer and body sections. It also provides built-in expandable and collapsible behavior, along with a variety of prebuilt tool buttons that can be wired up to provide other customized behavior. Panels can be easily dropped into any Container or layout, and the layout and rendering pipeline is completely managed by the framework.

配置项

配置项 定义者
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.ProgressBar

包： | Ext
定义的文件： | ProgressBar.js
类全称： | Ext.ProgressBar
继承自于： | Ext.BoxComponent

可更新进度条的组件。进度条支持两种不同的模式：手动的和自动的。
An updateable progress bar component. The progress bar supports two different modes: manual and automatic.

手动模式下，进度条的显示、更新（通过updateProgress）和清除这些任务便需要你代码的去完成。此方法最适用于可实现预测点的操作显示进度条。
In manual mode, you are responsible for showing, updating (via 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.

自动模式下，你只需要调用wait并让进度条不停地运行下去，然后直到操作完成后停止进度条。另外一种用法是你让进度条显示一定的时间（wait方法），wait一定时间后停止显示进度。自动模式最适用于已知时间的操作或不需要标识实际进度的异步操作。
In automatic mode, you simply call 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.

配置项

配置项 定义者
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
baseCls : String
进度条外层元素所使用的CSS样式类基类（默认为'x-progress'...
进度条外层元素所使用的CSS样式类基类（默认为'x-progress'）。The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
ProgressBar
animate : Boolean
True表示为变化过程中将有动画效果（默认为false）。True t...
True表示为变化过程中将有动画效果（默认为false）。True to animate the progress bar during transitions (defaults to false)
ProgressBar
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
ProgressBar()
参数项：
  • None.
返回值：
  • void
ProgressBar
updateProgress( Float value, String text, Boolean animate ) : Ext.ProgressBar
更新进度条的刻度值，也可以更新提示文本。如果文本的参数没传入，那么当前...
更新进度条的刻度值，也可以更新提示文本。如果文本的参数没传入，那么当前的文本将不会有变化。要取消当前文本，传入''。注意即使进度条的值溢出（大于1），也不会自动复位，这样你就要确定进度是何时完成然后调用reset停止或隐藏控件。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 reset to clear and/or hide the control.
参数项：
  • value : Float
    （可选的）介乎0与1之间浮点数（如.5，默认为零）。(optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0)
  • text : String
    （可选的）显示在进度条提示文本元素的字符串（默认为''）。(optional) The string to display in the progress text element (defaults to '')
  • animate : Boolean
    （可选的）True表示为变化过程中将有动画效果（默认为false）。如果不制定值那就使用默认当前类所使用着的。(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)
返回值：
  • Ext.ProgressBar
    this
ProgressBar
wait( Object config ) : Ext.ProgressBar
初始化一个自动更新的进度条。如果有duration的参数传入，那么代表...
初始化一个自动更新的进度条。如果有duration的参数传入，那么代表进度条会运行到一定的时间后停止（自动调用reset方法），并若然有指定一个回调函数，也会执行。如果duration的参数不传入，那么进度条将会不停地运行下去，这样你就要调用reset的方法停止他。wait方法可接受以下属性的配置对象： 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 reset. The wait method accepts a config object with the following properties:
Property   Type          Description
属性        类型          内容
---------- ------------  ----------------------------------------------------------------------
duration   Number        进度条运作时间的长度，单位是毫秒，跑完后执行自身的复位方法（默认为undefined，即不断地运行除非执行reset方法结束）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        每次更新的间隔周期（默认为1000毫秒）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        进度条每次更新的幅度大小（默认为10）。如果进度条达到最后，那么它会回到原点。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      当进度条完成自动更新后执行的回调函数。该函数没有参数。如不指定duration该项自动忽略，这样进度条只能写代码结束更新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        回调函数的作用域（只当duration与fn两项都传入时有效）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!');
});
参数项：
  • config : Object
    (optional)（可选的）配置项对象 Configuration options
返回值：
  • Ext.ProgressBar
    this
ProgressBar
isWaiting() : Boolean
返回进度条当前是否在wait的操作中。Returns true if ...
返回进度条当前是否在wait的操作中。Returns true if the progress bar is currently in a wait operation
参数项：
  • None.
返回值：
  • Boolean
    True表示在等待，false反之。True if waiting, else false
ProgressBar
updateText( String text ) : Ext.ProgressBar
更新进度条的提示文本。如传入text参数，textEl会更新其内容，否...
更新进度条的提示文本。如传入text参数，textEl会更新其内容，否则进度条本身会显示已更新的文本。Updates the progress bar text. If specified, textEl will be updated, otherwise the progress bar itself will display the updated text.
参数项：
  • text : String
    （可选的）显示的字符串（默认为''）。(optional)The string to display in the progress text element (defaults to '')
返回值：
  • Ext.ProgressBar
    this
ProgressBar
syncProgressBar()
按照进度条当前的value，同步接度条的内宽，与外组件宽度自适应。如果...
按照进度条当前的value，同步接度条的内宽，与外组件宽度自适应。如果进度条是自适应某个部件的，那么该方法会自动调用，但若此进度条渲染为自动的宽度，那么该方法会根据别的resize来酌情调用。Synchronizes the inner bar width to the proper proportion of the total componet width based on the current progress 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.
参数项：
  • None.
返回值：
  • void
ProgressBar
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
reset( Boolean hide ) : Ext.ProgressBar
将进度条的刻度复位为零，并将提示文本设置为空白字符串。如果hide=t...
将进度条的刻度复位为零，并将提示文本设置为空白字符串。如果hide=true，那么进度条会被隐藏（根据在内部的hideMode属性）。Resets the progress bar value to 0 and text to empty string. If hide = true, the progress bar will also be hidden (using the hideMode property internally).
参数项：
  • hide : Boolean
    （可选的）True表示隐藏进度条（默认为false）。(optional) True to hide the progress bar (defaults to false)
返回值：
  • Ext.ProgressBar
    this
ProgressBar
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
update()
每一次更新就触发该事件。Fires after each updat...
每一次更新就触发该事件。Fires after each update interval
侦听器会传入以下的参数：
  • None.
 ProgressBar
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.QuickTip

包： | Ext
定义的文件： | QuickTip.js
类全称： | Ext.QuickTip
继承自于： | Ext.ToolTip
一个专门的tooltip类 for tooltips that can be specified in markup and automatically managed by the 全局 Ext.QuickTips instance. 更多信息请参看QuickTips类 header for 附带的例子和详细用法.

配置项

配置项 定义者
target : Mixed
HTMLElement目标元素，既可是Ext.Element或是与这个...
HTMLElement目标元素，既可是Ext.Element或是与这个快捷提示相关联的id。
ToolTip
interceptTitles : Boolean
为True表示如果DOM的title值可用时则使用此值 (默认为fal...
为True表示如果DOM的title值可用时则使用此值 (默认为false).
QuickTip
autoHide : Boolean
值为 true 时在鼠标移出目标元素自动隐藏快捷提示(默认为 true...
值为 true 时在鼠标移出目标元素自动隐藏快捷提示(默认为 true)。与dismissDelay协同生效（默认为true）。若closable，一个关闭的按钮会出现在快捷提示的开头。
ToolTip
showDelay : Number
以毫秒表示的当鼠标进入目标元素后显示快捷提示的延迟时间(默认为 500)
以毫秒表示的当鼠标进入目标元素后显示快捷提示的延迟时间(默认为 500)
ToolTip
hideDelay : Number
以毫秒表示的隐藏快捷提示的延迟时间。设置为0立即隐藏快捷提示。
以毫秒表示的隐藏快捷提示的延迟时间。设置为0立即隐藏快捷提示。
ToolTip
dismissDelay : Number
以毫秒表示的隐藏快捷提示的延迟时间, 仅在 autoDismiss =...
以毫秒表示的隐藏快捷提示的延迟时间, 仅在 autoDismiss = true 时生效(默认为 5000)。要禁止隐藏，设置dismissDelay ＝ 0
ToolTip
mouseOffset : Array
Tooltip显示时，距离鼠标位置一定的XY偏移（默认[15,18]）。
Tooltip显示时，距离鼠标位置一定的XY偏移（默认[15,18]）。
ToolTip
trackMouse : Boolean
值为 true 时当鼠标经过目标对象时快捷提示将跟随鼠标移动(默认为 ...
值为 true 时当鼠标经过目标对象时快捷提示将跟随鼠标移动(默认为 false)
ToolTip
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
minWidth : Number
以像素为单位表示的提示的最小宽度（默认为 40）。
以像素为单位表示的提示的最小宽度（默认为 40）。
Tip
maxWidth : Number
以像素为单位表示的提示的最大宽度（默认为 300）。
以像素为单位表示的提示的最大宽度（默认为 300）。
Tip
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
defaultAlign : String
试验性的。默认为 Ext.ElementalignTo 锚点定位值，用...
试验性的。默认为 Ext.ElementalignTo 锚点定位值，用来让该提示定位到它所属元素的关联位置（默认为 "tl-bl?"）。
Tip
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
QuickTip( Object config )
参数项：
  • config : Object
    配置选项
返回值：
  • void
QuickTip
register( Object config )
配置一个新的quick tip实例并将其分配到一个目标元素.支持下列各...
配置一个新的quick tip实例并将其分配到一个目标元素.支持下列各项配置值 (用法参见 Ext.QuickTips 类的header):
  • autoHide
  • cls
  • dismissDelay (overrides the singleton value)
  • target (required)
  • text (required)
  • title
  • width
参数项：
  • config : Object
    配置对象
返回值：
  • void
QuickTip
unregister( String/HTMLElement/Element el )
从元素中移除quick tip并且销毁它.
从元素中移除quick tip并且销毁它.
参数项：
  • el : String/HTMLElement/Element
    将要被移除的quick tip的所属元素
返回值：
  • void
QuickTip
ToolTip( Object config )
参数项：
  • config : Object
    配置项对象
返回值：
  • void
ToolTip
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
Tip( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Tip
showAt( Array xy )
在指定的 XY 坐标处显示该提示。用法示例： // 在 x:50...
在指定的 XY 坐标处显示该提示。用法示例：

// 在 x:50、y:100 处显示提示
tip.showAt([50,100]);
参数项：
  • xy : Array
    一个由 x、y 坐标组成的数组
返回值：
  • void
Tip
showBy( Mixed el, String position )
试验性的。根据标准的 Ext.ElementalignTo 锚点定位值...
试验性的。根据标准的 Ext.ElementalignTo 锚点定位值在另一个元素的关联位置上显示该提示。用法示例：

// 在默认位置显示该提示 ('tl-br?')
tip.showBy('my-el');

// 将该提示的左上角对齐到元素的右上角
tip.showBy('my-el', 'tl-tr');
参数项：
  • el : Mixed
    一个 HTMLElement、Ext.Element 或者要对齐的目标元素的 ID 文本
  • position : String
    （可选）一个有效的 Ext.ElementalignTo 锚点定位值（默认为 'tl-br?' 或者 defaultAlign 中指定的值，如果设置过该值的话）。
返回值：
  • void
Tip
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.QuickTips

包： | Ext
定义的文件： | QuickTips.js
类全称： | Ext.QuickTips
继承自于： | Object

为所有元素提供有吸引力和可定制的工具提示。QuickTips 是一个单态（singleton）类，被用来为多个元素的提示进行通用地、全局地配置和管理。想要最大化地定制一个工具提示，你可以考虑使用 Ext.Tip 或者 Ext.ToolTip。

Quicktips 对象可以直接通过标签的属性来配置，或者在程序中通过 register 方法注册提示。

单态的 Ext.QuickTip 对象实例可以通过 getQuickTip 方法得到，并且提供所有的方法和所有 Ext.QuickTip 对象中的配置属性。这些设置会被应用于所有显示的工具提示。

下面是可用的配置属性的汇总。详细的说明可以参见 getQuickTip

QuickTips 单态配置项（所有均为可选项）

  • dismissDelay
  • hideDelay
  • maxWidth
  • minWidth
  • showDelay
  • trackMouse

目标元素配置项（除有说明的均为可选项）

  • autoHide
  • cls
  • dismissDelay （将覆写单态同名选项值）
  • target （必须）
  • text （必须）
  • 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：指定为 "user" 等同于设置 autoHide = false。其他任何值则相当于 autoHide = true。
  • qclass：应用于快捷提示的 CSS 类（等同于目标元素中的 'cls' 配置）。
  • qtip （必须）：快捷提示的文本（等同于目标元素中的 '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>
@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
init()
初始化全局 QuickTips 实例
初始化全局 QuickTips 实例
参数项：
  • None.
返回值：
  • void
QuickTips
enable()
打开全局快速提示功能.
打开全局快速提示功能.
参数项：
  • None.
返回值：
  • void
QuickTips
disable()
关闭全局快速提示功能.
关闭全局快速提示功能.
参数项：
  • None.
返回值：
  • void
QuickTips
isEnabled() : Boolean
获取一个值,该值指示此quick tips是否可以对用户交互作出响应。
获取一个值,该值指示此quick tips是否可以对用户交互作出响应。
参数项：
  • None.
返回值：
  • Boolean
QuickTips
getQuickTip()
获得全局QuickTips实例.
获得全局QuickTips实例.
参数项：
  • None.
返回值：
  • void
QuickTips
register( Object config )
配置一个新的quick tip实例并将其分配到一个目标元素. 详细信息...
配置一个新的quick tip实例并将其分配到一个目标元素. 详细信息请查看 Ext.QuickTipregister.
参数项：
  • config : Object
    配置对象
返回值：
  • void
QuickTips
unregister( String/HTMLElement/Element el )
从目标元素中移除并销毁所有已注册的quick tip
从目标元素中移除并销毁所有已注册的quick tip
参数项：
  • el : String/HTMLElement/Element
    将要被移除的quick tip的所属元素.
返回值：
  • void
QuickTips
tips( Object config )
register的别名.
register的别名.
参数项：
  • config : Object
    配置对象
返回值：
  • void
QuickTips

公共事件

这个类没有公告事件。


类Ext.Resizable

包： | Ext
定义的文件： | Resizable.js
类全称： | Ext.Resizable
继承自于： | Ext.util.Observable

在元素上应用拖动柄以使其支持缩放。拖动柄是嵌入在元素内部的且采用了绝对定位。某些元素, 如文本域或图片, 不支持这种做法。为了克服这种情况, 你可以把文本域打包在一个 Div 内, 并把 "resizeChild" 属性设为 true(或者指向元素的 ID), 或者在配置项中设置 wrap 属性为 true, 元素就会被自动打包了。

下面是有效的拖动柄的值列表:

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)

下面是展示的是创建一个典型的 Resizable 对象的例子: 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);

想要隐藏某个缩放柄, 可以将它的CSS样式中的 display 属性设为 none, 或者通过脚本来实现: To hide a particular handle, set its display to none in CSS, or through script:
resizer.east.setDisplayed(false);

配置项

配置项 |  | 定义者
 | draggable : Boolean 便利的初始化拖移的方法(默认为 false)。Convenience ... 便利的初始化拖移的方法(默认为 false)。Convenience to initialize drag drop (defaults to false) | Resizable
 | constrainTo : Mixed 强制缩放到一个指定的元素。Constrain the resize t... 强制缩放到一个指定的元素。Constrain the resize to a particular element | Resizable
 | resizeRegion : Ext.lib.Region 强制缩放到一个指定区域。Constrain the resize to... 强制缩放到一个指定区域。Constrain the resize to a particular region | Resizable
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | proxy: Ext.Element. 调节期间，代替真实元素的那个代理元素。有时可能要Ext.Eleme... 调节期间，代替真实元素的那个代理元素。有时可能要Ext.ElementgetBox方法提供相应的新区域。The proxy Element that is resized in place of the real Element during the resize operation. This may be queried using Ext.ElementgetBox to provide the new area to resize to. Read only. | Resizable

公共方法

方法 定义者
Resizable( Mixed el, Object config )
参数项：
  • el : Mixed
    要缩放的对象的 id 或 element 对象。The id or element to resize
  • config : Object
    配置项对象。configuration options
返回值：
  • void
Resizable
resizeTo( Number width, Number height )
执行手动缩放。Perform a manual resize
执行手动缩放。Perform a manual resize
参数项：
  • width : Number
  • height : Number
返回值：
  • void
Resizable
resizeElement()
对相关的元素进行大小调节。该方法是类的内部方法，不该由用户的代码所...

对相关的元素进行大小调节。该方法是类的内部方法，不该由用户的代码所调用。Performs resizing of the associated Element. This method is called internally by this class, and should not be called by user code.

如果Resizable用于一个复杂的UI的组件之元素，如Panel， 那么该方法可能由实作来重写，以便在最后的mouseup事件有特殊的操作，例如对Panel面板的大小调节，就取决于Panel的内容。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.

调节过后的新区域可以通过检查proxy元素状态的情况而得知。例如： The new area to be resized to is available by examining the state of the 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();
参数项：
  • None.
返回值：
  • void
Resizable
getEl() : Ext.Element
返回此组件绑定的element对象。Returns the eleme...
返回此组件绑定的element对象。Returns the element this component is bound to.
参数项：
  • None.
返回值：
  • Ext.Element
Resizable
getResizeChild() : Ext.Element
返回resizeChild属性指定的element对象（如果没有则返回...
返回resizeChild属性指定的element对象（如果没有则返回null）。Returns the resizeChild element (or null).
参数项：
  • None.
返回值：
  • Ext.Element
Resizable
destroy( Boolean removeEl )
销毁此resizable对象。如果元素被打包且 removeEl 属性...
销毁此resizable对象。如果元素被打包且 removeEl 属性不为 true 则元素会保留。Destroys this resizable. If the element was wrapped and removeEl is not true then the element remains.
参数项：
  • removeEl : Boolean
    （可选的）设为 true 则从 DOM 中删除此元素。(optional) true to remove the element from the DOM
返回值：
  • void
Resizable
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeresize()
在缩放被实施之前触发。设置 enabled 为 false 可以取消...
在缩放被实施之前触发。设置 enabled 为 false 可以取消缩放。Fired before resize is allowed. Set enabled to false to cancel resize.
侦听器会传入以下的参数：
  • None.
 Resizable
resize()
缩放之后触发。Fired after a resize.
缩放之后触发。Fired after a resize.
侦听器会传入以下的参数：
  • None.
 Resizable


类Ext.Shadow

包： | Ext
定义的文件： | Shadow.js
类全称： | Ext.Shadow
继承自于： | Object
为所有元素提供投影效果的一个简易类。注意元素必须为绝对定位，而且投影并没有填充的效果（shimming）。这只是适用简单的场合——如想提供更高阶的投影效果，请参阅Ext.Layer类。
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 Ext.Layer class.

配置项

配置项 |  | 定义者
 | mode : String 投影显示的模式。有下列选项：The shadow display mo... 投影显示的模式。有下列选项：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 (default) | Shadow
 | offset : String 元素和投影之间的偏移象素值（默认为4）。The number of p... 元素和投影之间的偏移象素值（默认为4）。The number of pixels to offset the shadow from the element (defaults to 4) | Shadow

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Shadow( Object config )
参数项：
  • config : Object
    配置项对象 The config object
返回值：
  • void
Shadow
show( Mixed targetEl )
在目标元素上显示投影。Displays the shadow unde...
在目标元素上显示投影。Displays the shadow under the target element
参数项：
  • targetEl : Mixed
    指定要显示投影的那个元素。The id or element under which the shadow should display
返回值：
  • void
Shadow
isVisible()
返回投影是否在显示。Returns true if the shado...
返回投影是否在显示。Returns true if the shadow is visible, else false
参数项：
  • None.
返回值：
  • void
Shadow
realign( Number left, Number top, Number width, Number height )
当值可用时直接对称位置。Show方法必须至少在调用realign方法之...
当值可用时直接对称位置。Show方法必须至少在调用realign方法之前调用一次，以保证能够初始化。Direct alignment when values are already available. Show must be called at least once before calling this method to ensure it is initialized.
参数项：
  • left : Number
    目标元素left位置。The target element left position
  • top : Number
    目标元素top位置。The target element top position
  • width : Number
    目标元素宽度。The target element width
  • height : Number
    目标元素高度。The target element height
返回值：
  • void
Shadow
hide()
隐藏投影。Hides this shadow
隐藏投影。Hides this shadow
参数项：
  • None.
返回值：
  • void
Shadow
setZIndex( Number zindex )
调整该投影的z-index。Adjust the z-index of...
调整该投影的z-index。Adjust the z-index of this shadow
参数项：
  • zindex : Number
    新z-index。The new z-index
返回值：
  • void
Shadow

公共事件

这个类没有公告事件。


类Ext.Slider

包： | Ext
定义的文件： | Slider.js
类全称： | Ext.Slider
继承自于： | Ext.BoxComponent
滑动条控件支持垂直或水平方向滑动，通过键盘方向键调整滑动，配置捕捉点，在滑动轴上点击调整并有动画显示。可以作为item被添加到任何容器中。使用示例：
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
});

配置项

配置项 定义者
value : Number
滑动条的初始值。默认值为 minValue。The value to ...
滑动条的初始值。默认值为 minValue。The value to initialize the slider with. Defaults to minValue.
Slider
vertical : Boolean
控制滑动条的垂直或水平方向，默认值为 false 表示水平方向。Ori...
控制滑动条的垂直或水平方向，默认值为 false 表示水平方向。Orient the Slider vertically rather than horizontally, defaults to false.
Slider
minValue : Number
滑动条的最小值。默认值为 0。The minimum value fo...
滑动条的最小值。默认值为 0。The minimum value for the Slider. Defaults to 0.
Slider
maxValue : Number
滑动条的最大值。默认值为 100。The maximum value ...
滑动条的最大值。默认值为 100。The maximum value for the Slider. Defaults to 100.
Slider
decimalPrecision : Number/Boolean
. 小数点位数。滑动条的值再进行四舍五入时的小数点位数。默认值为 0。...
. 小数点位数。

滑动条的值再进行四舍五入时的小数点位数。默认值为 0。The number of decimal places to which to round the Slider's value. Defaults to 0.

禁用四舍五入，配置为 false。To disable rounding, configure as false.

 Slider
keyIncrement : Number
方向键调整滑动条时，每次改变的数值。默认值为 1。如果配置大于默认值，...
方向键调整滑动条时，每次改变的数值。默认值为 1。如果配置大于默认值，将使用配置后的数值。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.
Slider
increment : Number
拖放调整滑动条时，每次改变的数值。配置此属性来启用“捕捉”功能。How...
拖放调整滑动条时，每次改变的数值。配置此属性来启用“捕捉”功能。How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
Slider
clickToChange : Boolean
确定是否要在滑动轴上点击调整。默认值为 true。Determines...
确定是否要在滑动轴上点击调整。默认值为 true。Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
Slider
animate : Boolean
开启或关闭动画。默认值为 true。Turn on or off an...
开启或关闭动画。默认值为 true。Turn on or off animation. Defaults to true
Slider
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : boolean 当滑动时此属性为True。True while the thumb... 当滑动时此属性为True。True while the thumb is in a drag operation | Slider
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Slider()
参数项：
  • None.
返回值：
  • void
Slider
setValue( Number value, Boolean animate )
编程方式设置滑动条的数值。确保设置的数值在最小值和最大值之间。Prog...
编程方式设置滑动条的数值。确保设置的数值在最小值和最大值之间。Programmatically sets the value of the Slider. Ensures that the value is constrained within the minValue and maxValue.
参数项：
  • value : Number
    设置滑动条的数值，（ value 受到 minValue 和 maxValue 属性的约束）。The value to set the slider to. (This will be constrained within minValue and maxValue)
  • animate : Boolean
    开启或关闭动画，默认值为 true。Turn on or off animation, defaults to true
返回值：
  • void
Slider
syncThumb()
Synchronizes the thumb position to ...
Synchronizes the thumb position to the proper proportion of the total component width based on the current slider 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.
参数项：
  • None.
返回值：
  • void
Slider
getValue() : Number
返回滑动条的当前值 Returns the current valu...
返回滑动条的当前值 Returns the current value of the slider
参数项：
  • None.
返回值：
  • Number
    The current value of the slider
Slider
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforechange()
当滑动条的值改变前触发此事件。您可以取消该活动，并防止滑块改变，通过...
当滑动条的值改变前触发此事件。您可以取消该活动，并防止滑块改变，通过事件处理器（event handler）返回false，您可以取消该事件，并阻止滑动条改变。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.
侦听器会传入以下的参数：
  • None.
 Slider
change()
当滑动条的值改变后触发此事件。Fires when the slid...
当滑动条的值改变后触发此事件。Fires when the slider value is changed.
侦听器会传入以下的参数：
  • None.
 Slider
changecomplete()
当用户改变滑动条的值和任何拖动操作完成时触发此事件。Fires wh...
当用户改变滑动条的值和任何拖动操作完成时触发此事件。Fires when the slider value is changed by the user and any drag operations have completed.
侦听器会传入以下的参数：
  • None.
 Slider
dragstart()
当拖动操作开始后触发此事件。Fires after a drag o...
当拖动操作开始后触发此事件。Fires after a drag operation has started.
侦听器会传入以下的参数：
  • None.
 Slider
drag()
拖动操作过程中当鼠标正在移动时触发此事件。Fires continu...
拖动操作过程中当鼠标正在移动时触发此事件。Fires continuously during the drag operation while the mouse is moving.
侦听器会传入以下的参数：
  • None.
 Slider
dragend()
当拖动操作结束后触发此事件。Fires after the drag...
当拖动操作结束后触发此事件。Fires after the drag operation has completed.
侦听器会传入以下的参数：
  • None.
 Slider
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


Observable
    Component
      BoxComponent
        Spacer

Class Ext.Spacer

Package: | Ext
Defined In: | BoxComponent.js
Class: | Spacer
Extends: | BoxComponent

Used to provide a sizable space in a layout.

Config Options

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use the An...

Note: this config is only used when this Component is rendered by a Container which has been configured to use the AnchorLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'anchor').

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (defaults to false). Note: Although many components inherit thi...
True to use height:'auto', false to use fixed height (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.
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (defaults to false). Note: Although many components inherit this ...
True to use width:'auto', false to use fixed width (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.
BoxComponent
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (eg. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
height : Number
The height of this component in pixels (defaults to auto).
BoxComponent
hidden : Boolean
Render this component hidden (default is false).
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset p...

How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 see itemId.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (eg, Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

Note: While some Observable classes export selected DOM events (eg "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement listeners must be added to the 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;
    },

    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() {
            c.el.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'
});

Observable
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (eg. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

  • Notes :
      When using this config, a call to render() is not required.
      Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render its child items.

See render also.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

To set the state provider for the current page:

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

A stateful Component attempts to save state when one of the events listed in the 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the (@link #stateId}, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
width : Number
The width of this component in pixels (defaults to auto).
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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), perform the adding of the listener in a render event listener:

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

See also getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
Spacer( Object config )
Parameters:
  • config : Object
Returns:
  • void
Spacer
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
    });
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component.
Disable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component.
Enable this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fcn, [Object scope] ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
Parameters:
  • fcn : Function
  • scope : Object
    (optional)
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 autoEl config.

The 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), perform the adding of the listener in a one-off render event listener:

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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or generates an id:"ext-comp-" + (++Ext.Component.AUTO_ID)
Returns the id of this component or generates an id:
"ext-comp-" + (++Ext.Component.AUTO_ID)
Parameters:
  • None.
Returns:
  • String
Component
getItemId() : String
Returns the item id of this component.
Returns the item id of this component.
Parameters:
  • None.
Returns:
  • String
Component
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component.
Hide this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component.
Show this component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished.
Fires after the component rendering is finished.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false to stop the destroy.
Fires before the component is destroyed. Return false to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden. Return false to stop the hide.
Fires before the component is hidden. Return false to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false to stop the render.
Fires before the component is rendered. Return false to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown. Return false to stop the show.
Fires before the component is shown. Return false to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false to stop the restore.
Fires before the state of the component is restored. Return false to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden.
Fires after the component is hidden.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown.
Fires after the component is shown.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


类Ext.SplitBar.AbsoluteLayoutAdapter

包： | ExtSplitBar
定义的文件： | SplitBar.js
类全称： | Ext.SplitBar.AbsoluteLayoutAdapter
继承自于： | Ext.SplitBar.BasicLayoutAdapter
是分割控件与缩放元素对其的适配器。使用绝对定位的分割控件的时候使用。Adapter that moves the splitter element to align with the resized sizing element. Used with an absolute positioned SplitBar.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Number 定位常量 - 缩放元素在分割控件的下面。Placement con... 定位常量 - 缩放元素在分割控件的下面。Placement constant - The resizing element is positioned under splitter element @static | AbsoluteLayoutAdapter

公共方法

方法 定义者
AbsoluteLayoutAdapter( Mixed container )
参数项：
  • container : Mixed
    包围绝对定位的分割控件的容器。如果该容器是document.body一定要给该控件指定一个ID。The container that wraps around the absolute positioned content. If it's document.body, make sure you assign an id to the body element.
返回值：
  • void
AbsoluteLayoutAdapter
getElementSize( Ext.SplitBar s )
在拖拽操作前调用，用于获取被缩放的元素的当前大小。Called bef...
在拖拽操作前调用，用于获取被缩放的元素的当前大小。Called before drag operations to get the current size of the resizing element.
参数项：
  • s : Ext.SplitBar
    使用该适配器的SplitBar对象。The SplitBar using this adapter
返回值：
  • void
BasicLayoutAdapter
setElementSize( Ext.SplitBar s, Number newSize, Function onComplete )
在拖拽操作后调用，用于设置被缩放的元素的大小。Called after...
在拖拽操作后调用，用于设置被缩放的元素的大小。Called after drag operations to set the size of the resizing element.
参数项：
  • s : Ext.SplitBar
    使用该适配器的SplitBar对象。The SplitBar using this adapter
  • newSize : Number
    要设置的新尺寸。The new size to set
  • onComplete : Function
    缩放完成后调用的函数。A function to be invoked when resizing is complete
返回值：
  • void
BasicLayoutAdapter

公共事件

这个类没有公告事件。


类Ext.SplitBar.BasicLayoutAdapter

包： | ExtSplitBar
定义的文件： | SplitBar.js
类全称： | Ext.SplitBar.BasicLayoutAdapter
继承自于： | Object
默认的适配器。假设分割组件和可伸缩组件没有被预先定位，并且只能获取/设置元素的宽度。一般用于基于table到布局。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.

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
getElementSize( Ext.SplitBar s )
在拖拽操作前调用，用于获取被缩放的元素的当前大小。Called bef...
在拖拽操作前调用，用于获取被缩放的元素的当前大小。Called before drag operations to get the current size of the resizing element.
参数项：
  • s : Ext.SplitBar
    使用该适配器的SplitBar对象。The SplitBar using this adapter
返回值：
  • void
BasicLayoutAdapter
setElementSize( Ext.SplitBar s, Number newSize, Function onComplete )
在拖拽操作后调用，用于设置被缩放的元素的大小。Called after...
在拖拽操作后调用，用于设置被缩放的元素的大小。Called after drag operations to set the size of the resizing element.
参数项：
  • s : Ext.SplitBar
    使用该适配器的SplitBar对象。The SplitBar using this adapter
  • newSize : Number
    要设置的新尺寸。The new size to set
  • onComplete : Function
    缩放完成后调用的函数。A function to be invoked when resizing is complete
返回值：
  • void
BasicLayoutAdapter

公共事件

这个类没有公告事件。


类Ext.SplitBar

包： | Ext
定义的文件： | SplitBar.js
类全称： | Ext.SplitBar
继承自于： | Ext.util.Observable
由DOM元素创建可拖拽的分割控件(可以拖拽和改变的大小的元素)。
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);

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | tickSize: Number 移动该SplitBar的步长值，单位是像素。undefined的话... 移动该SplitBar的步长值，单位是像素。undefined的话，表示SplitBar移动的比较顺滑。The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly. | SplitBar
 | : Boolean 拖拽到时候是否在页面上生成透明层。允许跨iframes拖拽。Whe... 拖拽到时候是否在页面上生成透明层。允许跨iframes拖拽。Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes. | SplitBar

公共方法

方法 定义者
SplitBar( Mixed dragElement, Mixed resizingElement, Number orientation, Number placement )
参数项：
  • dragElement : Mixed
    拖拽到元素，作为分割控件被拖拽到元素。The element to be dragged and act as the SplitBar.
  • resizingElement : Mixed
    根据SplitBar到拖拽缩放大小的元素。The element to be resized based on where the SplitBar element is dragged
  • orientation : Number
    （可选的）Ext.SplitBar.HORIZONTAL或者Ext.SplitBar.VERTICAL方向（默认为 HORIZONTAL）。(optional)Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
  • placement : Number
    （可选的）水平方向上，Ext.SplitBar.LEFT或者Ext.SplitBar.RIGHT垂直方向上， Ext.SplitBar.TOP或Ext.SplitBar.BOTTOM（默认的会根据SplitBar初始化的位置自己决定）。(optional)Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
返回值：
  • void
SplitBar
getAdapter() : 适配器对象。The adapter object
获取分割控件的适配器。Get the adapter this Spl...
获取分割控件的适配器。Get the adapter this SplitBar uses
参数项：
  • None.
返回值：
  • 适配器对象。The adapter object
SplitBar
setAdapter( Object adapter )
设置分割控件的适配器。Set the adapter this Spl...
设置分割控件的适配器。Set the adapter this SplitBar uses
参数项：
  • adapter : Object
    SplitBar适配器对象。A SplitBar adapter object
返回值：
  • void
SplitBar
getMinimumSize() : Number
  获取该元素可缩放的最小值。Gets the minimum size...
  获取该元素可缩放的最小值。Gets the minimum size for the resizing element
参数项：
  • None.
返回值：
  • Number
    最小尺寸。The minimum size
SplitBar
setMinimumSize( Number minSize )
设置该元素可缩放的最小值。Sets the minimum size ...
设置该元素可缩放的最小值。Sets the minimum size for the resizing element
参数项：
  • minSize : Number
    最小的尺寸值。The minimum size
返回值：
  • void
SplitBar
getMaximumSize() : Number
获取该元素可缩放的最大值。Gets the maximum size ...
获取该元素可缩放的最大值。Gets the maximum size for the resizing element
参数项：
  • None.
返回值：
  • Number
    最大尺寸值。The maximum size
SplitBar
setMaximumSize( Number maxSize )
设置该元素可缩放的最大值。Sets the maximum size ...
设置该元素可缩放的最大值。Sets the maximum size for the resizing element
参数项：
  • maxSize : Number
    最大尺寸值。The maximum size
返回值：
  • void
SplitBar
setCurrentSize( Number size )
设置该元素初始化可缩放值。Sets the initialize si...
设置该元素初始化可缩放值。Sets the initialize size for the resizing element
参数项：
  • size : Number
    初始化值。The initial size
返回值：
  • void
SplitBar
destroy( Boolean removeEl )
毁分割控件发。Destroy this splitbar.
毁分割控件发。Destroy this splitbar.
参数项：
  • removeEl : Boolean
      一处分割控件。True to remove the element
返回值：
  • void
SplitBar
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
resize()
当分割控件移动的时候激发（{@link #event-moved}的...
当分割控件移动的时候激发（{@link #event-moved}的别名）。Fires when the splitter is moved (alias for moved)
侦听器会传入以下的参数：
  • None.
 SplitBar
moved()
当分割控件移动的时候激发。Fires when the splitt...
当分割控件移动的时候激发。Fires when the splitter is moved
侦听器会传入以下的参数：
  • None.
 SplitBar
beforeresize()
当分割控件被拖拽的时候激发。Fires before the spl...
当分割控件被拖拽的时候激发。Fires before the splitter is dragged
侦听器会传入以下的参数：
  • None.
 SplitBar


类Ext.SplitButton

包： | Ext
定义的文件： | SplitButton.js
类全称： | Ext.SplitButton
继承自于： | Ext.Button
一个提供了内建下拉箭头的分割按钮，该箭头还可以触发按钮默认的click 之外的事件。典型的应用场景是，用来显示一个为主按钮提供附加选项的下拉菜单，并且可以为arrowclick事件设置单独一个的处理函数。
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', // 容器的id 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
});

配置项

配置项 定义者
arrowTooltip : String
箭头的title属性。The title attribute of t...
箭头的title属性。The title attribute of the arrow
SplitButton
repeat : Boolean/Object
触发函数是否可以重复触发。默认为false，也可以为Ext.util....
触发函数是否可以重复触发。默认为false，也可以为Ext.util.ClickRepeater的参数对象。while the mouse is down.True to repeat fire the click event while the mouse is down. This can also be
Button
tabIndex : Number
按钮的DOM焦点序号即tab键时候得到焦点的序号（默认为undefin...
按钮的DOM焦点序号即tab键时候得到焦点的序号（默认为undefined）。Set a DOM tabIndex for this button (defaults to undefined)
Button
allowDepress : Boolean
False表示不允许按钮“固定按下的状态”，（默认为undefined...
False表示不允许按钮“固定按下的状态”，（默认为undefined）。当enableToggle激活时，该项才有效。False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when enableToggle is true.
Button
enableToggle : Boolean
True 是否在 pressed/not pressed 这两个状态间...
True 是否在 pressed/not pressed 这两个状态间切换 （默认为false）。True to enable pressed/not pressed toggling (defaults to false)
Button
toggleHandler : Function
当enableToggle激活时，该项才有效。这是点击的处理函数。会送...
当enableToggle激活时，该项才有效。这是点击的处理函数。会送入两个参数： Function called when a Button with enableToggle set to true is clicked. Two arguments are passed:
  • button : Ext.Button
    Button对象。this Button object
  • state : Boolean
    按钮的已发生的状态，true表示按了。The next state if the Button, true means pressed.
 Button
menu : Mixed
标准menu属性 可设置为menu的引用 或者menu的id 或者me...
标准menu属性 可设置为menu的引用 或者menu的id 或者menu的参数对象 （默认为undefined）。Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
Button
menuAlign : String
菜单的对齐方式（参阅Ext.ElementalignTo以了解个中细节...
菜单的对齐方式（参阅Ext.ElementalignTo以了解个中细节，默认为'tl-bl?'）。The position to align the menu to (see Ext.ElementalignTo for more details, defaults to 'tl-bl?').
Button
iconCls : String
用来指定背景图片的样式类。A css class which sets...
用来指定背景图片的样式类。A css class which sets a background image to be used as the icon for this button
Button
type : String
按钮的三种类型（submit、reset、button），默认为'bu...
按钮的三种类型（submit、reset、button），默认为'button'。submit, reset or button - defaults to 'button'
Button
clickEvent : String
handler 处理函数触发事件（默认是单击）。The type of...
handler 处理函数触发事件（默认是单击）。The type of event to map to the button's event handler (defaults to 'click')
Button
handleMouseEvents : Boolean
是否启用mouseover，mouseout与mousedown鼠标事...
是否启用mouseover，mouseout与mousedown鼠标事件（默认为true）。False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
Button
tooltipType : String
tooltip 的显示方式 既可是'qtip'（默认），也可是设置ti...
tooltip 的显示方式 既可是'qtip'（默认），也可是设置title属性的“标题”。The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
Button
buttonSelector : String
（可选的） 分辨DOM结构其中的激活、可点击元素的DomQuery。...

（可选的） 分辨DOM结构其中的激活、可点击元素的DomQuery。(Optional) A DomQuery selector which is used to extract the active, clickable element from the DOM structure created.

当定义了template，你必须保证该选择符的结果限于一个可以获得焦点的元素。When a custom template is used, you must ensure that this selector results in the selection of a focussable element.

默认为"button:first-child"。Defaults to "button:first-child".

 Button
scale : String
（可选的）元素的大小。可允许有这三种的值： (Optional) T...

（可选的）元素的大小。可允许有这三种的值： (Optional) The size of the Button. Three values are allowed:

  • "small"
    按钮元素是16px的高度。Results in the button element being 16px high.
  • "medium"
    按钮元素是24px的高度。Results in the button element being 24px high.
  • "large"
    按钮元素是32px的高度。Results in the button element being 32px high.

默认为"small"。Defaults to "small".

 Button
iconAlign : String
（可选的）渲染图标的按钮方向。可允许有这四种的值： (Optional...

（可选的）渲染图标的按钮方向。可允许有这四种的值： (Optional)The side of the Button box to render the icon. Four values are allowed:

  • "top"
  • "right"
  • "bottom"
  • "left"

默认为"left"。Defaults to "left".

 Button
arrowAlign : String
（可选的）渲染图标的箭头方向，如果有关联menu的话。可允许有这两种的...

（可选的）渲染图标的箭头方向，如果有关联menu的话。可允许有这两种的值： (Optional) The side of the Button box to render the arrow if the button has an associated menu. Two values are allowed:

  • "right"
  • "bottom"

Defaults to "right".

 Button
template : Ext.Template
（可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文...
（可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文本.修改这个属性要主意相关参数不能缺失。(Optional)A 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 getTemplateArgs.
Button
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | : Boolean Read-only. 如果按钮是按下状态（仅当enableTogg... Read-only. 如果按钮是按下状态（仅当enableToggle = true时）。True if this button is pressed (only if enableToggle = true) | Button
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | template: Ext.Template @cfg {Ext.Template} template （可选配... @cfg {Ext.Template} template （可选配置） 如果设置了可用来生成按钮的主要元素。第一个占位符为按钮文本.修改这个属性要主意相关参数不能缺失。(Optional)A 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 getTemplateArgs. | Button
 | btnEl: Ext.Element 一个对Button可点击元素的封装。默认下这是<button&... 一个对Button可点击元素的封装。默认下这是<button>元素的引用。只读的。An Element encapsulating the Button's clickable element. By default, this references a <button> element. Read only. | Button
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
SplitButton( Object config )
参数项：
  • config : Object
    配置选项对象。The config object
返回值：
  • void
SplitButton
setArrowHandler( Function handler, Object scope )
设置按钮的箭头点击处理函数。Sets this button's ar...
设置按钮的箭头点击处理函数。Sets this button's arrow click handler.
参数项：
  • handler : Function
    点击箭头时调用的函数。The function to call when the arrow is clicked
  • scope : Object
    （可选的）处理函数的作用域。(optional) Scope for the function passed above
返回值：
  • void
SplitButton
Button( Object config )
参数项：
  • config : Object
    参数对象。The config object
返回值：
  • void
Button
getTemplateArgs() : Object
这个方法返回一个提供可替换参数的对象，供Template所使用以创建...

这个方法返回一个提供可替换参数的对象，供Template所使用以创建按钮的DOM结构。TemplateThis method returns an object which provides substitution parameters for the Template used to create this Button's DOM structure.

实例或子类如果在模板上面有变化的话，可提供一个新的该方法之实现，以适应新模板创建不同的DOM结构。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 template returns an Array containing the following items:

  • 按钮的文本text。The Button's text
  • <button>的类型type。The <button>'s type
  • <button> element按钮元素的iconCls。The iconCls applied to the <button> element
  • The cls applied to the Button's main Element
  • 控制Button的scale与icon alignment的CSS样式名称。A CSS class name controlling the Button's scale and icon alignment
  • 若已设menu给Button所设的CSS样式名称。A CSS class name which applies an arrow to the Button if configured with a menu
参数项：
  • None.
返回值：
  • Object
    模板的替换数据。Substitution data for a Template.
Button
setIconClass( String cls ) : Ext.Button
替换按钮针对背景图片的css类。连动替换按钮参数对象中的该属性。Set...
替换按钮针对背景图片的css类。连动替换按钮参数对象中的该属性。Sets the CSS class that provides a background image to use as the button's icon. This method also changes the value of the iconCls config internally.
参数项：
  • cls : String
    图标的CSS样式类。The CSS class providing the icon image
返回值：
  • Ext.Button
    this
Button
setTooltip( String/Object tooltip ) : Ext.Button
设置该按钮的tooltip动态提示。Sets the tooltip ...
设置该按钮的tooltip动态提示。Sets the tooltip for this Button.
参数项：
  • tooltip : String/Object
    . This may be:
    • String : 用于在Tooltip显示的文本，由于分配到innerHTML属性因此可以是HTML标签的。A string to be used as innerHTML (html tags are accepted) to show in a tooltip
    • Object : Ext.QuickTipsregister的配置对象。A configuration object for Ext.QuickTipsregister.
返回值：
  • Ext.Button
    this
Button
setHandler( Function handler, Object scope ) : Ext.Button
增加按钮事件句柄触发函数的方法。Assigns this Button...
增加按钮事件句柄触发函数的方法。Assigns this Button's click handler
参数项：
  • handler : Function
    当按钮按下执行的函数。The function to call when the button is clicked
  • scope : Object
    （可选的）传入参数的作用域。(optional) Scope for the function passed in
返回值：
  • Ext.Button
    this
Button
setText( String text ) : Ext.Button
设置按钮文本。Sets this Button's text
设置按钮文本。Sets this Button's text
参数项：
  • text : String
    按钮的文字。The button text
返回值：
  • Ext.Button
    this
Button
getText() : String
获取按钮的文字。Gets the text for this Button
获取按钮的文字。Gets the text for this Button
参数项：
  • None.
返回值：
  • String
    按钮的文字。The button text
Button
toggle( Boolean state, Boolean supressEvent ) : Ext.Button
如果有传入state的参数，就按照state的参数设置否则当前的sta...
如果有传入state的参数，就按照state的参数设置否则当前的state就会轮换。If a state it passed, it becomes the pressed state otherwise the current state is toggled.
参数项：
  • state : Boolean
    （可选的）指定特定的状态。(optional) Force a particular state
  • supressEvent : Boolean
    （可选的）表示为调用该方法时不触发事件。(optional) True to stop events being fired when calling this method.
返回值：
  • Ext.Button
    this
Button
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
showMenu()
显示按钮附带的菜单（如果有的话）。Show this button's...
显示按钮附带的菜单（如果有的话）。Show this button's menu (if it has one)
参数项：
  • None.
返回值：
  • void
Button
hideMenu()
隐藏按钮附带的菜单（如果有的话）。Hide this button's...
隐藏按钮附带的菜单（如果有的话）。Hide this button's menu (if it has one)
参数项：
  • None.
返回值：
  • void
Button
hasVisibleMenu() : Boolean
若按钮附有菜单并且是显示着的就返回true。eturns true i...
若按钮附有菜单并且是显示着的就返回true。eturns true if the button has a menu and it is visible
参数项：
  • None.
返回值：
  • Boolean
Button
getPressed( String group ) : Button
在已按下的组中返回这些按钮。没有就null。Gets the pres...
在已按下的组中返回这些按钮。没有就null。Gets the pressed button in the passed group or null
参数项：
  • group : String
返回值：
  • Button
Button
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
arrowclick()
当点击按钮的箭头时触发。Fires when this button...
当点击按钮的箭头时触发。Fires when this button's arrow is clicked
侦听器会传入以下的参数：
  • None.
 SplitButton
click()
单击触发事件。Fires when this button is cl...
单击触发事件。Fires when this button is clicked
侦听器会传入以下的参数：
  • None.
 Button
toggle()
按钮按下状态切换触发事件（仅当enableToggle = true时...
按钮按下状态切换触发事件（仅当enableToggle = true时）。Fires when the "pressed" state of this button changes (only if enableToggle = true)
侦听器会传入以下的参数：
  • None.
 Button
mouseover()
鼠标居上触发事件。Fires when the mouse hover...
鼠标居上触发事件。Fires when the mouse hovers over the button
侦听器会传入以下的参数：
  • None.
 Button
mouseout()
鼠标离开事件。Fires when the mouse exits t...
鼠标离开事件。Fires when the mouse exits the button
侦听器会传入以下的参数：
  • None.
 Button
menushow()
有menu的时候 menu显示触发事件。If this button ...
有menu的时候 menu显示触发事件。If this button has a menu, this event fires when it is shown
侦听器会传入以下的参数：
  • None.
 Button
menuhide()
有menu的时候 menu隐藏触发事件。If this button ...
有menu的时候 menu隐藏触发事件。If this button has a menu, this event fires when it is hidden
侦听器会传入以下的参数：
  • None.
 Button
menutriggerover()
有menu的时候 menu焦点转移到菜单项时触发事件。If this ...
有menu的时候 menu焦点转移到菜单项时触发事件。If this button has a menu, this event fires when the mouse enters the menu triggering element
侦听器会传入以下的参数：
  • None.
 Button
menutriggerout()
有menu的时候 menu焦点离开菜单项时触发事件。If this b...
有menu的时候 menu焦点离开菜单项时触发事件。If this button has a menu, this event fires when the mouse leaves the menu triggering element
侦听器会传入以下的参数：
  • None.
 Button
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.state.CookieProvider

包： | Extstate
定义的文件： | CookieProvider.js
类全称： | Ext.state.CookieProvider
继承自于： | Ext.state.Provider
通过cookies保存state的Provider之默认实现。
用法:

   var cp = new Ext.state.CookieProvider({
       path: "/cgi-bin/",
30)); //30天
       domain: "extjs.com"
   })
   Ext.state.Manager.setProvider(cp);

配置项

配置项 |  | 定义者
 | secure : Boolean True表示为网站使用SSL加密（默认false） True表示为网站使用SSL加密（默认false） | CookieProvider
 | path : String 激活cookie之路径（默认是根目录”/“，对该网站下所有的页面激活） 激活cookie之路径（默认是根目录”/“，对该网站下所有的页面激活） | CookieProvider
 | expires : Date 过期的日子（默认七日之后） 过期的日子（默认七日之后） | CookieProvider

公告属性

这个类没有公告属性。

公共方法

方法 定义者
CookieProvider( Object config )
参数项：
  • config : Object
    配置项对象
返回值：
  • void
CookieProvider
get( String name, Mixed defaultValue ) : Mixed
返回当前的键值（value for a key）
返回当前的键值（value for a key）
参数项：
  • name : String
    键名称
  • defaultValue : Mixed
    若键值找不到的情况下，返回的默认值
返回值：
  • Mixed
    State数据
Provider
clear( String name )
清除某个state的值
清除某个state的值
参数项：
  • name : String
    键名称
返回值：
  • void
Provider
set( String name, Mixed value )
设置键值
设置键值
参数项：
  • name : String
    键名称
  • value : Mixed
    设置值
返回值：
  • void
Provider
decodeValue( String value ) : Mixed
对之前用过的 encodeValue字符串解码。
对之前用过的 encodeValue字符串解码。
参数项：
  • value : String
    要解码的值
返回值：
  • Mixed
    已解码的值
Provider
encodeValue( Mixed value ) : String
针对某些类型的编码，可用 decodeValue解码。
针对某些类型的编码，可用 decodeValue解码。
参数项：
  • value : Mixed
    要编码的值
返回值：
  • String
    以编码值
Provider

公共事件

事件 定义者
statechange()
当state发生改变时触发
当state发生改变时触发
侦听器会传入以下的参数：
  • None.
 Provider


类Ext.state.Manager

包： | Extstate
定义的文件： | StateManager.js
类全称： | Ext.state.Manager
继承自于： | Object
这是个全局state管理器。默认情况下，所有的组件都能“感知state”该类以获得state信息，无须传入一个自定义state provider。要实现这个类，必须在应用程序初始化时连同provider一起初始。

// 在你的初始化函数中
init : function(){
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
   ...
   //假设这是 Ext.BorderLayout
   var layout = new Ext.BorderLayout(...);
   layout.restoreState();
   // 或者{Ext.BasicDialog}
   var dialog = new Ext.BasicDialog(...);
   dialog.restoreState();
@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
setProvider( Provider stateProvider )
针对应用程序配置默认的state provider
针对应用程序配置默认的state provider
参数项：
  • stateProvider : Provider
    要设置的state provider
返回值：
  • void
Manager
get( String name, Mixed defaultValue ) : Mixed
返回当前的键值（value for a key）
返回当前的键值（value for a key）
参数项：
  • name : String
    键名称
  • defaultValue : Mixed
    若键值找不到的情况下，返回的默认值
返回值：
  • Mixed
    State数据
Manager
set( String name, Mixed value )
设置键值
设置键值
参数项：
  • name : String
    键名称
  • value : Mixed
    设置值
返回值：
  • void
Manager
clear( String name )
清除某个state的值
清除某个state的值
参数项：
  • name : String
    键名称
返回值：
  • void
Manager
getProvider() : Provider
获取当前已配置的state provider
获取当前已配置的state provider
参数项：
  • None.
返回值：
  • Provider
    state provider
Manager

公共事件

这个类没有公告事件。


类Ext.state.Provider

包： | Extstate
定义的文件： | Provider.js
类全称： | Ext.state.Provider
继承自于： | Object
为State Provider的实现提供一个抽象基类。该类对某些类型的变量提供了编码、解码方法，包括日期和定义Provider的接口。

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
get( String name, Mixed defaultValue ) : Mixed
返回当前的键值（value for a key）
返回当前的键值（value for a key）
参数项：
  • name : String
    键名称
  • defaultValue : Mixed
    若键值找不到的情况下，返回的默认值
返回值：
  • Mixed
    State数据
Provider
clear( String name )
清除某个state的值
清除某个state的值
参数项：
  • name : String
    键名称
返回值：
  • void
Provider
set( String name, Mixed value )
设置键值
设置键值
参数项：
  • name : String
    键名称
  • value : Mixed
    设置值
返回值：
  • void
Provider
decodeValue( String value ) : Mixed
对之前用过的 encodeValue字符串解码。
对之前用过的 encodeValue字符串解码。
参数项：
  • value : String
    要解码的值
返回值：
  • Mixed
    已解码的值
Provider
encodeValue( Mixed value ) : String
针对某些类型的编码，可用 decodeValue解码。
针对某些类型的编码，可用 decodeValue解码。
参数项：
  • value : Mixed
    要编码的值
返回值：
  • String
    以编码值
Provider

公共事件

事件 定义者
statechange()
当state发生改变时触发
当state发生改变时触发
侦听器会传入以下的参数：
  • None.
 Provider


类Ext.StoreMgr

包： | Ext
定义的文件： | StoreMgr.js
类全称： | Ext.StoreMgr
继承自于： | Ext.util.MixedCollection
store组管理器。这是全局的、并且是缺省的。
The default global group of stores. @singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
StoreMgr()
参数项：
  • None.
返回值：
  • void
StoreMgr
register( Ext.data.Store store1, Ext.data.Store store2, Ext.data.Store etc )
登记更多的Store对象到StoreMgr。一般情况下你不需要手动加入...
登记更多的Store对象到StoreMgr。一般情况下你不需要手动加入。任何透过Ext.data.StorestoreId初始化的Store都会自动登记。Registers one or more Stores with the StoreMgr. You do not normally need to register stores manually. Any store initialized with a Ext.data.StorestoreId will be auto-registered.
参数项：
  • store1 : Ext.data.Store
    Store实例。A Store instance
  • store2 : Ext.data.Store
    （可选的）Store实例2。(optional)
  • etc : Ext.data.Store
    ... （可选的）Store实例x……。(optional)
返回值：
  • void
StoreMgr
unregister( String/Object id1, String/Object id2, String/Object etc )
注销一个或多个Stores。Unregisters one or mo...
注销一个或多个Stores。Unregisters one or more Stores with the StoreMgr
参数项：
  • id1 : String/Object
    Store的id或是Store对象The id of the Store, or a Store instance
  • id2 : String/Object
    （可选的）Store实例2。(optional)
  • etc : String/Object
    ... （可选的）Store实例x……。(optional)
返回值：
  • void
StoreMgr
lookup( String/Object id ) : Ext.data.Store
由id返回一个已登记的Store。Gets a registered ...
由id返回一个已登记的Store。Gets a registered Store by id
参数项：
  • id : String/Object
    Store的id或是Store对象。The id of the Store, or a Store instance
返回值：
  • Ext.data.Store
StoreMgr
MixedCollection( Boolean allowFunctions, Function keyFn )
参数项：
  • allowFunctions : Boolean
    True表示为允许加入函数的引用到集合内（默认为false）
  • keyFn : Function
    对于一个在该Mixed集合中已保存类型的item，可用这个函数返回对应item的键值。执行MixedCollection方法时不需要特定传入一个key参数便可查找出键值。传入这个参数等同于实现了getKey方法。
返回值：
  • void
MixedCollection
add( String key, Object o ) : Object
加入一个item到集合中。
加入一个item到集合中。
参数项：
  • key : String
    item的键名称
  • o : Object
    加入的item
返回值：
  • Object
    已加入的item
MixedCollection
getKey( Object o ) : Object
如果你执行getKey的方法，MixedCollection有一个通用...
如果你执行getKey的方法，MixedCollection有一个通用的方法来取得keys。默认的实现只是简单地返回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);
参数项：
  • o : Object
    根据item找到key
返回值：
  • Object
    传入item的key
MixedCollection
replace( String key, Object o ) : Object
替换集合中的item。完成后触发replace事件。
替换集合中的item。完成后触发replace事件。
参数项：
  • key : String
    要替换item所关联的那个key，或是item。
  • o : Object
    （可选的）如果传入的第一个参数是key，那么item就是key的键名称。
返回值：
  • Object
    新的item。
MixedCollection
addAll( Object/Array objs )
将数组中或是对象中的所有元素加入到集合中。
将数组中或是对象中的所有元素加入到集合中。
参数项：
  • objs : Object/Array
    对象中包含的所有属性，或是数组中所有的值，都分别逐一加入集合中。
返回值：
  • void
MixedCollection
each( Function fn, Object scope )
在集合中执行每个Item的指定函数。函数执行时，会有下列的参数： i...
在集合中执行每个Item的指定函数。函数执行时，会有下列的参数：
  • item : Mixed

    集合中的item

  • index : Number

    item的索引

  • length : Number

    集合中的items的总数

那个函数应该要返回一个布尔值。若函数返回false便终止枚举。
参数项：
  • fn : Function
    每个item要执行的函数
  • scope : Object
    (optional) 函数执行时的作用域
返回值：
  • void
MixedCollection
eachKey( Function fn, Object scope )
传入一个函数类型的参数，然后在集合中的每个Item执行。key和其相关...
传入一个函数类型的参数，然后在集合中的每个Item执行。key和其相关的item都作为头两个参数传入。
参数项：
  • fn : Function
    每个item要执行的函数。
  • scope : Object
    （可选的）执行函数的作用域
返回值：
  • void
MixedCollection
find( Function fn, Object scope ) : Object
根据传入的函数，执行该函数若返回true便说明这是要找到的那个item。
根据传入的函数，执行该函数若返回true便说明这是要找到的那个item。
参数项：
  • fn : Function
    每个item要执行的查询函数。
  • scope : Object
    （可选的）执行函数的作用域
返回值：
  • Object
    根据规则函数在集合中第一个找到的item
MixedCollection
insert( Number index, String key, Object o ) : {Object}以插入的item
指定集合中的某个索引然后插入一个Item
指定集合中的某个索引然后插入一个Item
参数项：
  • index : Number
    要插入item的索引。
  • key : String
    包含新item的key名称，或item本身
  • o : Object
    (可选的) 如果第二个参数是key,新item
返回值：
  • {Object}以插入的item
MixedCollection
remove( Object o ) : Object
从集合中移除Item
从集合中移除Item
参数项：
  • o : Object
    移除的item
返回值：
  • Object
    被移除的Item
MixedCollection
removeAt( Number index ) : Object
从集合中移除由index指定的Item。完成后触发remove事件。
从集合中移除由index指定的Item。完成后触发remove事件。
参数项：
  • index : Number
    移除item的索引
返回值：
  • Object
    被移除的item或是false就代表没有移除。
MixedCollection
removeKey( String key ) : Object
根据传入参数key，从集合中移除相关的item
根据传入参数key，从集合中移除相关的item
参数项：
  • key : String
    要移除item的key
返回值：
  • Object
    被移除的item或是false就代表没有移除。
MixedCollection
getCount() : Number
返回集合中的item总数。
返回集合中的item总数。
参数项：
  • None.
返回值：
  • Number
    item总数
MixedCollection
indexOf( Object o ) : Number
传入一个对象，返回它的索引。
传入一个对象，返回它的索引。
参数项：
  • o : Object
    要寻找索引的item
返回值：
  • Number
    item的索引。返回－1表示找不到。
MixedCollection
indexOfKey( String key ) : Number
传入一个Key，返回它的索引。
传入一个Key，返回它的索引。
参数项：
  • key : String
    寻找索引的key
返回值：
  • Number
    key的索引
MixedCollection
item( String/Number key ) : Object
根据key或索引（index）返回item。key的优先权高于索引。这...
根据key或索引（index）返回item。key的优先权高于索引。这个方法相当于先调用key，如不匹配在调用itemAt。
参数项：
  • key : String/Number
    或者是item的索引
返回值：
  • Object
    传入key所关联的item
MixedCollection
itemAt( Number index ) : Object
根据索引找到item
根据索引找到item
参数项：
  • index : Number
    item的索引index
返回值：
  • Object
    指定索引的item
MixedCollection
key( String/Number key ) : Object
根据key找到item
根据key找到item
参数项：
  • key : String/Number
    item的key
返回值：
  • Object
    key所关联的item
MixedCollection
contains( Object o ) : Boolean
若在集合中找到传入的item，则返回true。
若在集合中找到传入的item，则返回true。
参数项：
  • o : Object
    要在集合中查找的对象
返回值：
  • Boolean
    True表示为在集合中找到该item
MixedCollection
containsKey( Object o ) : Boolean
若在集合中找到传入的key，则返回true。
若在集合中找到传入的key，则返回true。
参数项：
  • o : Object
    要在集合中查找的对象
返回值：
  • Boolean
    True表示为在集合中找到该key
MixedCollection
clear()
清除集合中所有item
清除集合中所有item
参数项：
  • None.
返回值：
  • void
MixedCollection
first() : Object
返回集合中第一个item
返回集合中第一个item
参数项：
  • None.
返回值：
  • Object
    集合中第一个item
MixedCollection
last() : Object
返回集合中最后一个item
返回集合中最后一个item
参数项：
  • None.
返回值：
  • Object
    集合中最后一个item
MixedCollection
sort( String dir, Function fn )
按传入的函数排列集合
按传入的函数排列集合
参数项：
  • dir : String
    方向（可选的） "ASC" 或 "DESC"
  • fn : Function
    （可选的）一个供参照的function
返回值：
  • void
MixedCollection
keySort( String dir, Function fn )
按key顺序排列集合
按key顺序排列集合
参数项：
  • dir : String
    方向（可选的） "ASC" 或 "DESC"
  • fn : Function
    （可选的）一个参照的function（默认为非敏感字符串）
返回值：
  • void
MixedCollection
getRange( Number startIndex, Number endIndex ) : Array
返回这个集合中的某个范围内的items
返回这个集合中的某个范围内的items
参数项：
  • startIndex : Number
    （可选的） 默认为 0
  • endIndex : Number
    （可选的） 默认为最后的item
返回值：
  • Array
    items数组
MixedCollection
filter( String property, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性过滤集合中的对象。返回以过滤后的新集合。
由指定的属性过滤集合中的对象。返回以过滤后的新集合。
参数项：
  • property : String
    你对象身上的属性
  • value : String/RegExp
    也可以是属性开始的值或对于这个属性的正则表达式
  • anyMatch : Boolean
    (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    (optional) True for case sensitive comparison (defaults to False).
返回值：
  • MixedCollection
    过滤后的新对象
MixedCollection
filterBy( Function fn, Object scope ) : MixedCollection
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个...
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个对象执行。如果函数返回true，则value会被包含否则会被过滤、
参数项：
  • fn : Function
    被调用的函数，会接收o(object)和k (the key)参数
  • scope : Object
    （可选的）函数的作用域（默认为 this）
返回值：
  • MixedCollection
    过滤后的新对象
MixedCollection
findIndex( String property, String/RegExp value, Number start, Boolean anyMatch, Boolean caseSensitive ) : Number
由指定的属性/值查找集合中的第一个匹配对象。这个对象是过滤后的新集合
由指定的属性/值查找集合中的第一个匹配对象。这个对象是过滤后的新集合
参数项：
  • property : String
    当前对象下的属性名称
  • value : String/RegExp
    代表属性值的字符串，也可以是一个正则表达式以测试属性。y.
  • start : Number
    （可选的）从第几个字符开始搜索（默认为0）
  • anyMatch : Boolean
    （可选的）True表示为匹配字符串的任意一部分，不只是开始的部分
  • caseSensitive : Boolean
    （可选的）True表示为打开大小写敏感
返回值：
  • Number
    匹配的索引或-1
MixedCollection
findIndexBy( Function fn, Object scope, Number start ) : MixedCollection
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个...
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个对象执行。如果函数返回true，则value会被包含否则会被过滤、
参数项：
  • fn : Function
    被调用的函数，会接收o(object)和k (the key)参数
  • scope : Object
    （可选的）函数的作用域（默认为 this）
  • start : Number
    （可选的）从第几个字符开始搜索（默认为0）
返回值：
  • MixedCollection
    匹配的索引或-1
MixedCollection
clone() : MixedCollection
创建该集合的浅表副本shallow copy（shallow copy）
创建该集合的浅表副本shallow copy（shallow copy）
参数项：
  • None.
返回值：
  • MixedCollection
MixedCollection
get( String/Number key ) : Object
根据key或索引返回item。key的优先权高于索引。
根据key或索引返回item。key的优先权高于索引。
参数项：
  • key : String/Number
    或者是item的索引
返回值：
  • Object
    传入key所关联的item
MixedCollection

公共事件

事件 定义者
clear()
当集合被清除后触发。
当集合被清除后触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection
add()
当item被加入到集合之后触发。
当item被加入到集合之后触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection
replace()
集合中的item被替换后触发。
集合中的item被替换后触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection
remove()
当item被移除集合时触发。
当item被移除集合时触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection


类Ext.TabPanel

包： | Ext
定义的文件： | TabPanel.js
类全称： | Ext.TabPanel
继承自于： | Ext.Panel

一种基础性的tab容器。Tab面板可用像标准Ext.Panel一样参与布局，亦可将多个面板归纳为一组tabs之特殊用途。
A basic tab container. TabPanels can be used exactly like a standard Ext.Panel for layout purposes, but also have special support for containing child Components that are managed using a CardLayout layout manager, and displayed as seperate tabs.

Note: TabPanels use their header or footer element (depending on the 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 tools. To display a header, embed the TabPanel in a Panel which uses {@link Ext.Container#layout layout: 'fit'}.

Note: It is advisable to configure all child items of a TabPanel (and any Container which uses a CardLayout) with {@link Ext.Component#hideMode hideMode: 'offsets'} to avoid rendering errors in child components hidden using the CSS display style.

这里没有单独而设的tab类—，每一张tab便是一个Ext.Panel。然而，在当Panel放进TabPanel里面的时候，它作为子面板渲染的同时会额外增加若干事件，而这些事件一般的Panel是没有的，如下列出：
There is no actual tab class each tab is simply a Component such as a 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 Component. These are:

  • activate: 当面板变成为活动时触发。Fires when this Component becomes the active tab.
    侦听器（Listeners）调用时会有下列的参数： Listeners will be called with the following arguments:
    • tab : Panel
      被激活的tab对象。The tab that was activated
  • deactivate: 当活动的面板变成为不活动的状态触发。Fires when the Component that was the active tab becomes deactivated.
    侦听器（Listeners）调用时会有下列的参数： Listeners will be called with the following arguments:
    • tab : Panel
      取消活动状态的tab对象。The tab that was deactivated

要让服务端控制生成新的组件，必须要让服务编能够输出代码。To add Components to a TabPanel which are generated dynamically on the server, it is necessary to create a server script to generate the Javascript to create the Component required.

例如，在一个中TabPanel加入一个GridPanel，这是基于服务端所产生的某些参数，你就要先执行Ajax一个的请求，在返回的response对象中得出渲染的内容向TabPanel加入。For example, to add a GridPanel to a TabPanel where the GridPanel is generated by the server based on certain parameters, you would need to execute an Ajax request to invoke your the script, and process the response object to add it to the TabPanel:

Ext.Ajax.request({
    url: 'gen-invoice-grid.php',
    params: {
        startDate = Ext.getCmp('start-date').getValue(),
        endDate = Ext.getCmp('end-date').getValue()
    },
    success: function(xhr) {
        var newComponent = eval(xhr.responseText);
        myTabPanel.add(newComponent);
        myTabPanel.setActiveTab(newComponent);
    },
    failure: function() {
        Ext.Msg.alert("Grid create failed", "Server communication failure");
    }
});

如上便是服务端所返回的代码，通过eval()执行就返回一个的xtype配置对象，或组件的实例。如下例： The server script would need to return an executable Javascript statement which, when processed using eval() will return either a config object with an xtype, or an instantiated Component. 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',
            id: '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;
})();

由于同样是服务端生成的代码，Store这里的baseParams就是当前Store所配置的参数。Record布局所必需的元数据、ColumnModel信息在服务器上都是已知的，因此这样便可以一次性的输出到代码。Since that code is generated by a server script, the baseParams for the Store can be configured into the Store. The metadata to allow generation of the Record layout, and the ColumnModel is also known on the server, so these can be generated into the code.

Ajax请求成功的处理函数中，就可以用eval处理这些代码片断，由Javascript解析器执行，然后匿名函数返回，生成Grid。When that 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 grid.

有几种途径可生成Tab面板本身,下面演示的是纯粹通过代码来创建和渲染tabs。There are several other methods available for creating TabPanels. The output of the following examples should produce exactly the same appearance. The tabs 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'
    }]
});
整个TabPanel对象也可以由标签，分别几个途径来创建。请参阅autoTabs的例子了解由标签创建的全部过程。这些标签必须是符合TabPanel的要求的（div作为容器，然后内含一个或多个'x-tab'样式类的div表示每个标签页）。同时你也可以通过指定id方式来选择哪个是容器的div、哪个是标签页的div，该方式下，标签页的内容会从页面上不同元素中提取，而不需要考虑页面的分配结构，自由度较高。注意该例中class属性为'x-hide-display'的div表示延时渲染标签页，不会导致标签页在TabPanel外部的区域渲染显示出来。你可选择设置deferredRender为false表示所有的内容在页面加载时就渲染出来。例如： TabPanels can also be rendered from pre-existing markup in a couple of ways. See the autoTabs example for rendering entirely from markup that is already structured correctly as a TabPanel (a container div with one or more nested tab divs with class 'x-tab'). You can also render 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. 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 deferredRender to false to render all content tabs on page load. For example:

var tabs = new Ext.TabPanel({
    renderTo: 'my-tabs',
    activeTab: 0,
    items:[
        {contentEl:'tab1', title:'Tab 1'},
        {contentEl:'tab2', title:'Tab 2'}
    ]
});

// 注意tab没有被容器套着（尽管也是可以套着的）。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>

配置项

配置项 定义者
layoutOnTabChange : Boolean
True表示为每当Tab切换时就绘制一次布局。Set to true ...
True表示为每当Tab切换时就绘制一次布局。Set to true to do a layout of tab items as tabs are changed.
TabPanel
tabCls : String
此配置项应用于该Tab子组件的样式。This config optio...
此配置项应用于该Tab子组件的样式。This config option is used on child Components of this TabPanel. 赋予各个候选栏的CSS样式，表示这是子组件。A CSS class name applied to the tab strip item representing the child Component, allowing special styling to be applied.
TabPanel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
deferredRender : Boolean
内置地，Tab面板是采用Ext.layout.CardLayout的方...
内置地，Tab面板是采用Ext.layout.CardLayout的方法管理tabs。此属性的值将会传递到布局的Ext.layout.CardLayoutdeferredRender配置值中， 以决定tab面板是否只有在第一次访问时才渲染（缺省为true）。Internally, the TabPanel uses a Ext.layout.CardLayout to manage its tabs. This property will be passed on to the layout as its Ext.layout.CardLayoutdeferredRender config value, determining whether or not each tab is rendered only when first accessed (defaults to true).

注意如果将deferredRender设为true的话， 又使用form的话，那表示只有在tab激活之后，全部的表单域（Fields）才会被渲染出来， 也就是说不管是提交表单抑或是执行getValues或setValues都是无用。Be aware that leaving deferredRender as true means that, if the TabPanel is within a form, then until a tab is activated, any Fields within that tab will not be rendered, and will therefore not be submitted and will not be available to either getValues or setValues.

 TabPanel
tabWidth : Number
每一张新tab的初始宽度，单位为象素（缺省为120）。The init...
每一张新tab的初始宽度，单位为象素（缺省为120）。The initial width in pixels of each new tab (defaults to 120).
TabPanel
minTabWidth : Number
每张tab宽度的最小值，仅当resizeTabs = true有效（缺...
每张tab宽度的最小值，仅当resizeTabs = true有效（缺省为30）。The minimum width in pixels for each tab when resizeTabs = true (defaults to 30).
TabPanel
resizeTabs : Boolean
True表示为自动调整各个标签页的宽度，以便适应当前TabPanel的...
True表示为自动调整各个标签页的宽度，以便适应当前TabPanel的候选栏的宽度（默认为false）。这样设置的话，那么每个标签页都可能会一个规定的宽度，原先标签页的宽度将不会保留以便适应显示（尽管minTabWidth依然作用）。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 minTabWidth will always be honored).
TabPanel
enableTabScroll : Boolean
有时标签页会超出TabPanel的整体宽度。为防止此情况下溢出的标签页...
有时标签页会超出TabPanel的整体宽度。为防止此情况下溢出的标签页不可见，就需要将此项设为true以出现标签页可滚动的功能。只当标签页位于上方的位置时有效（默认为false）。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).
TabPanel
scrollIncrement : Number
每次滚动按钮按下时，被滚动的标签页所移动的距离 （单位是像素，默认为1...
每次滚动按钮按下时，被滚动的标签页所移动的距离 （单位是像素，默认为100，若resizeTabs=true，那么默认值将是计算好的标签页宽度）。仅当enableTabScroll = true时有效。The number of pixels to scroll each time a tab scroll button is pressed (defaults to 100, or if resizeTabs = true, the calculated tab width). Only applies when enableTabScroll = true.
TabPanel
scrollRepeatInterval : Number
当标签页滚动按钮不停地被按下时，两次执行滚动的间隔的毫秒数（默认为40...
当标签页滚动按钮不停地被按下时，两次执行滚动的间隔的毫秒数（默认为400）。Number of milliseconds between each scroll while a tab scroll button is continuously pressed (defaults to 400).
TabPanel
scrollDuration : Float
每次滚动所产生动画会持续多久（单位毫秒，默认为0.35）。只当anim...
每次滚动所产生动画会持续多久（单位毫秒，默认为0.35）。只当animScroll = true时有效。The number of milliseconds that each scroll animation should last (defaults to .35). Only applies when animScroll = true.
TabPanel
animScroll : Boolean
True 表示为tab滚动时出现动画效果以使tab在视图中消失得更平滑...
True 表示为tab滚动时出现动画效果以使tab在视图中消失得更平滑（缺省为true）。只当 enableTabScroll = true时有效。True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults to true). Only applies when enableTabScroll = true.
TabPanel
tabPosition : String
Tab候选栏渲染的位置（默认为 'top'）。其它可支持值是'bott...
Tab候选栏渲染的位置（默认为 'top'）。其它可支持值是'bottom'。注意tab滚动（tab scrolling）只支持'top'的位置。The position where the tab strip should be rendered (defaults to 'top'). The only other supported value is 'bottom'. Note that tab scrolling is only supported for position 'top'.
TabPanel
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
autoTabs : Boolean
Tru 表示为查询DOM中任何带"x-tab'样式类的div元素,转...

Tru 表示为查询DOM中任何带"x-tab'样式类的div元素,转化为tab加入到此面板中（默认为false）。注意查询的执行范围仅限于容器元素内（这样独立的话同一页面内多个tab就不会相冲突了） 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).

此时要求markup（装饰元素）结构（即在容器内嵌有'x-tab'类的div元素）才有效。要解除这种限制。或从页面上其它元素的内容拉到tab中，可参阅由markup生成tab的第一个示例。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:

  • 当使用autoTabs的时候（与 不同的tab配置传入到tabPanelitems集合的方法相反），你同时必须使用applyTo正确地指明tab容器的id。AutoTabs 方法把现有的内容替换为TabPanel组件。When using the autoTabs config (as opposed to passing individual tab configs in the TabPanel's items collection), you must use applyTo to correctly use the specified id as the tab container. The autoTabs method replaces existing content with the TabPanel components.
  • 确保已设deferredRender为false，使得每个tab中的内容元素能在页面加载之后立即渲染到TabPanel， 否则的话激活tab也不能成功渲染。Make sure that you set deferredRender to 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:
TabPanel
autoTabSelector : String
用于搜索tab的那个CSS选择符，当autoTabs时有效（默认为 '...
用于搜索tab的那个CSS选择符，当autoTabs时有效（默认为 'div.x-tab'）。此值可以是Ext.DomQueryselect的任意有效值。注意： 选择过程只会在tab的范围内进行（这样独立的话同一页面内多个tab就不会相冲突了）。The CSS selector used to search for tabs in existing markup when autoTabs = true (defaults to 'div.x-tab'). This can be any valid selector supported by Ext.DomQueryselect. 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).
TabPanel
activeTab : String/Number
一个字符串或数字(索引)表示，渲染后就活动的那个tab（默认为没有）。...
一个字符串或数字(索引)表示，渲染后就活动的那个tab（默认为没有）。A string id or the numeric index of the tab that should be initially activated on render (defaults to none).
TabPanel
tabMargin : Number
此象素值参与大小调整和卷动时的运算，以计算空隙的象素值。如果你在CSS...
此象素值参与大小调整和卷动时的运算，以计算空隙的象素值。如果你在CSS中改变了margin（外补丁），那么这个值也要随着更改，才能正确地计算值（默认为2）。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 resizeTabs or scrolling tabs. (defaults to 2)
TabPanel
plain : Boolean
True表示为不渲染tab候选栏上背景容器图片（默认为false）。T...
True表示为不渲染tab候选栏上背景容器图片（默认为false）。True to render the tab strip without a background container image (defaults to false).
TabPanel
wheelIncrement : Number
对于可滚动的tabs，鼠标滚轮翻页一下的步长值，单位为象素（缺省为20...
对于可滚动的tabs，鼠标滚轮翻页一下的步长值，单位为象素（缺省为20）。For scrolling tabs, the number of pixels to increment on mouse wheel scrolling (defaults to 20).
TabPanel
itemTpl : Template/XTemplate
（可选的） 要处理候选栏上可点击的那些元素，应该在getTempla...

（可选的） 要处理候选栏上可点击的那些元素，应该在getTemplateArgs返回一个数据对像，其类型是Template或XTemplate (Optional) A Template or XTemplate which may be provided to process the data object returned from getTemplateArgs to produce a clickable selector element in the tab strip.

主要元素该是<li>元素。为了能使目标元素与其对应子项连接上，TabPanel的原生方法必须传入目标元素id。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 getTemplateArgs.

标题文字所在的子元素是须要有x-tab-strip-inner的样式。The child element which contains the title text must be marked by the CSS class x-tab-strip-inner.

要出现“关闭”按钮的，就要有x-tab-strip-close样式。To enable closability, the created element should contain an element marked by the CSS class x-tab-strip-close.

若要自定义特别的外观，应制定itemTpl。下面是一个怎样创建tab子项选择符的例子： 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:
TabPanel
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TabPanel( Object config )
参数项：
  • config : Object
    配置项对象。The configuration options
返回值：
  • void
TabPanel
readTabs( Boolean removeExisting )
True表示为使用autoTabSelector选择符来扫描此tab面...
True表示为使用autoTabSelector选择符来扫描此tab面板内的markup，以准备autoTabs的特性。True to scan the markup in this tab panel for autoTabs using the autoTabSelector
参数项：
  • removeExisting : Boolean
    True表示为移除现有的tabs。True to remove existing tabs
返回值：
  • void
TabPanel
getTemplateArgs( BoxComponent item ) : Object
为在tab候选栏中渲染tab选择符，产生模板参数。Provides ...

为在tab候选栏中渲染tab选择符，产生模板参数。Provides template arguments for rendering a tab selector item in the tab strip.

该方法返回对象将会为TabPanel的itemTpl所用，用于创建符合格式的，可点击的tab选择符元素。必须返回形如以下的对象： This method returns an object hash containing properties used by the TabPanel's itemTpl to create a formatted, clickable tab selector element. The properties which must be returned are:

  • id : String
    关联项的Id。A unique identifier which links to the item
  • text : String
    显示文本。The text to display
  • cls : String
    CSS样式名称。The CSS class name
  • iconCls : String
    为设置图标的CSS样式名称。A CSS class to provide appearance for an icon.
参数项：
  • item : BoxComponent
    产生tab候选栏中的选择元素BoxComponent。The BoxComponent for which to create a selector element in the tab strip.
返回值：
  • Object
    包含要进行渲染的选择符元素的对象。An object hash containing the properties required to render the selector element.
TabPanel
getTabEl( Panel/Number tab ) : HTMLElement
指定一个子面板，返回此面板在tab候选栏上的DOM元素。访问DOM元素...
指定一个子面板，返回此面板在tab候选栏上的DOM元素。访问DOM元素可以修改一些可视化效果，例如更改CSS样式类的名称。Gets the DOM element for 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.
参数项：
  • tab : Panel/Number
    tab对象。The tab component, or the tab's index
返回值：
  • HTMLElement
    DOM节点。The DOM node
TabPanel
beginUpdate()
暂停一切内置的运算或卷动好让扩充操作（bulk operation）进...
暂停一切内置的运算或卷动好让扩充操作（bulk operation）进行。请参阅endUpdate。Suspends any internal calculations or scrolling while doing a bulk operation. See endUpdate
参数项：
  • None.
返回值：
  • void
TabPanel
endUpdate()
结束扩充操作（bulk operation）后，重新开始一切内置的运算...
结束扩充操作（bulk operation）后，重新开始一切内置的运算或滚动效果。请参阅beginUpdate。Resumes calculations and scrolling at the end of a bulk operation. See beginUpdate
参数项：
  • None.
返回值：
  • void
TabPanel
hideTabStripItem( Number/String/Panel item )
隐藏Tab候选栏以传入tab。Hides the tab strip ...
隐藏Tab候选栏以传入tab。Hides the tab strip item for the passed tab
参数项：
  • item : Number/String/Panel
    tab索引、id或item对象。The tab index, id or item
返回值：
  • void
TabPanel
unhideTabStripItem( Number/String/Panel item )
取消Tab候选栏隐藏的状态以传入tab。Unhides the tab...
取消Tab候选栏隐藏的状态以传入tab。Unhides the tab strip item for the passed tab
参数项：
  • item : Number/String/Panel
    item tab索引、id或item对象。The tab index, id or item
返回值：
  • void
TabPanel
setActiveTab( String/Panel tab )
设置特定的tab为活动面板。此方法触发beforetabchange事...
设置特定的tab为活动面板。此方法触发beforetabchange事件，若处理函数返回false则取消tab切换。Sets the specified tab as the active tab. This method fires the beforetabchange event which can return false to cancel the tab change.
参数项：
  • tab : String/Panel
    活动面板或其id。The id or tab Panel to activate
返回值：
  • void
TabPanel
getActiveTab() : Panel
返回当前活动的Tab。Gets the currently activ...
返回当前活动的Tab。Gets the currently active tab.
参数项：
  • None.
返回值：
  • Panel
    活动的Tab。The active tab
TabPanel
getItem( String id ) : Panel
根据id获取指定tab。Gets the specified tab ...
根据id获取指定tab。Gets the specified tab by id.
参数项：
  • id : String
    Tab的ID。The tab id
返回值：
  • Panel
    The tab
TabPanel
scrollToTab( Panel item, Boolean animate )
滚动到指定的TAB（前提是scrolling要激活）。Scrolls ...
滚动到指定的TAB（前提是scrolling要激活）。Scrolls to a particular tab if tab scrolling is enabled
参数项：
  • item : Panel
    要滚动到项。The item to scroll to
  • animate : Boolean
    True表示有动画效果。True to enable animations
返回值：
  • void
TabPanel
activate( String/Panel tab )
设置特定的tab为活动面板。此方法触发beforetabchange事...
设置特定的tab为活动面板。此方法触发beforetabchange事件若返回false则取消tab切换。Sets the specified tab as the active tab. This method fires the beforetabchange event which can return false to cancel the tab change.
参数项：
  • tab : String/Panel
    活动面板或其id。The id or tab Panel to activate
返回值：
  • void
TabPanel
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforetabchange()
当活动tab改变时触发。若句柄返回false则取消tab的切换。Fir...
当活动tab改变时触发。若句柄返回false则取消tab的切换。Fires before the active tab changes. Handlers can return false to cancel the tab change.
侦听器会传入以下的参数：
  • None.
 TabPanel
tabchange()
当活动tab改变后触发。Fires after the active ...
当活动tab改变后触发。Fires after the active tab has changed.
侦听器会传入以下的参数：
  • None.
 TabPanel
contextmenu()
当原始浏览器的右键事件在tab元素上触发时，连动到此事件。Relays...
当原始浏览器的右键事件在tab元素上触发时，连动到此事件。Relays the contextmenu event from a tab selector element in the tab strip.
侦听器会传入以下的参数：
  • None.
 TabPanel
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.TaskMgr

包： | Ext
定义的文件： | TaskMgr.js
类全称： | Ext.TaskMgr
继承自于： | Object
A static Ext.util.TaskRunner instance that can be used to start and stop arbitrary tasks. See 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);
@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.Template

包： | Ext
定义的文件： | Template.js
类全称： | Ext.Template
继承自于： | Object
将一段Html片段呈现为模板。可将模板编译以获取更高的性能。针对格式化的函数的可用列表,请参阅Ext.util.Format.
用法：

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
    '</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Boolean Ture表示为禁止格式化功能（默认为false） Ture表示为禁止格式化功能（默认为false） | Template
 | re: RegExp 匹配模板变量的正则表达式。 匹配模板变量的正则表达式。 | Template

公共方法

方法 定义者
Template( String/Array html )
参数项：
  • html : String/Array
    HTML片断或是片断的数组(用于join(''))或多个参数(会执行join(''))。
返回值：
  • void
Template
applyTemplate( Object/Array values ) : String
返回HTML片段,这块片断是由数据填充模板之后而成的。
返回HTML片段,这块片断是由数据填充模板之后而成的。
参数项：
  • values : Object/Array
    模板填充值。该参数可以是一个数组(如果参数是数值型,如{0},或是一个对象,如{foo: 'bar'}.
返回值：
  • String
    HTML片段
Template
set( String html, Boolean compile ) : Ext.Template
使得某段HTML可作用模板使用,也可将其编译
使得某段HTML可作用模板使用,也可将其编译
参数项：
  • html : String
  • compile : Boolean
    （可选的） ture表示为编译模板（默认为undefined）
返回值：
  • Ext.Template
    this
Template
compile() : Ext.Template
将模板编译成内置调用函数,消除刚才的正则表达式
将模板编译成内置调用函数,消除刚才的正则表达式
参数项：
  • None.
返回值：
  • Ext.Template
    this
Template
insertFirst( Mixed el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element
填充模板的数据,形成为一个或多个新节点，作为首个子节点插入到e1。
填充模板的数据,形成为一个或多个新节点，作为首个子节点插入到e1。
参数项：
  • el : Mixed
    上下文的元素
  • values : Object/Array
    模板填充值。该参数可以是一个数组(如果参数是数值型,如{0},或是一个对象,如{foo: 'bar'}.
  • returnElement : Boolean
    （可选的）true表示为返回 Ext.Element (默认为undefined)
返回值：
  • HTMLElement/Ext.Element
    新节点或元素
Template
insertBefore( Mixed el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element
填充模板的数据,形成为一个或多个新节点，并位于el之前的位置插入。
填充模板的数据,形成为一个或多个新节点，并位于el之前的位置插入。
参数项：
  • el : Mixed
    上下文的元素
  • values : Object/Array
    模板填充值。该参数可以是一个数组(如果参数是数值型,如{0},或是一个对象,如{foo: 'bar'}.
  • returnElement : Boolean
    （可选的）true表示为返回 Ext.Element (默认为undefined)
返回值：
  • HTMLElement/Ext.Element
    新节点或元素
Template
insertAfter( Mixed el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element
填充模板的数据,形成为一个或多个新节点，并位于el之后的位置插入。
填充模板的数据,形成为一个或多个新节点，并位于el之后的位置插入。
参数项：
  • el : Mixed
    上下文的元素
  • values : Object/Array
    模板填充值。该参数可以是一个数组(如果参数是数值型,如{0},或是一个对象,如{foo: 'bar'}.
  • returnElement : Boolean
    （可选的）true表示为返回 Ext.Element (默认为undefined)
返回值：
  • HTMLElement/Ext.Element
    新节点或元素
Template
append( Mixed el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element
填充模板的数据,形成为一个或多个新节点，并追加到e1。
填充模板的数据,形成为一个或多个新节点，并追加到e1。
参数项：
  • el : Mixed
    上下文的元素
  • values : Object/Array
    模板填充值。该参数可以是一个数组(如果参数是数值型,如{0},或是一个对象,如{foo: 'bar'}.
  • returnElement : Boolean
    （可选的）true表示为返回 Ext.Element (默认为undefined)
返回值：
  • HTMLElement/Ext.Element
    新节点或元素
Template
overwrite( Mixed el, Object/Array values, Boolean returnElement ) : HTMLElement/Ext.Element
填充模板的数据,形成为一个或多个新节点，对el的内容进行覆盖。
填充模板的数据,形成为一个或多个新节点，对el的内容进行覆盖。
参数项：
  • el : Mixed
    正文元素
  • values : Object/Array
    模板填充值。该参数可以是一个数组(如果参数是数值型,如{0},或是一个对象,如{foo: 'bar'}.
  • returnElement : Boolean
    （可选的）true表示为返回 Ext.Element（默认为undefined）
返回值：
  • HTMLElement/Ext.Element
    新节点或元素
Template
apply()
applyTemplate的简写方式
applyTemplate的简写方式
参数项：
  • None.
返回值：
  • void
Template
from( String/HTMLElement DOM, Object config ) : Ext.Template
传入一个元素的值的参数,用于创建模板,（推荐display:none ...
传入一个元素的值的参数,用于创建模板,（推荐display:none textarea）或innerHTML.
参数项：
  • DOM : String/HTMLElement
    元素或某id
  • config : Object
    一个配置项对象
返回值：
  • Ext.Template
    创建好的模板 @static
Template

公共事件

这个类没有公告事件。


类Ext.Tip

包： | Ext
定义的文件： | Tip.js
类全称： | Ext.Tip
继承自于： | Ext.Panel
这是 Ext.QuickTip 和 Ext.Tooltip 对象的基类，提供了所有基于提示的类所必须的基础布局和定位。这个类可以直接用于简单的、静态定位、需要编程显示的提示，还可以提供实现自定义扩展的提示。

配置项

配置项 定义者
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
minWidth : Number
以像素为单位表示的提示的最小宽度（默认为 40）。
以像素为单位表示的提示的最小宽度（默认为 40）。
Tip
maxWidth : Number
以像素为单位表示的提示的最大宽度（默认为 300）。
以像素为单位表示的提示的最大宽度（默认为 300）。
Tip
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
defaultAlign : String
试验性的。默认为 Ext.ElementalignTo 锚点定位值，用...
试验性的。默认为 Ext.ElementalignTo 锚点定位值，用来让该提示定位到它所属元素的关联位置（默认为 "tl-bl?"）。
Tip
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Tip( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Tip
showAt( Array xy )
在指定的 XY 坐标处显示该提示。用法示例： // 在 x:50...
在指定的 XY 坐标处显示该提示。用法示例：

// 在 x:50、y:100 处显示提示
tip.showAt([50,100]);
参数项：
  • xy : Array
    一个由 x、y 坐标组成的数组
返回值：
  • void
Tip
showBy( Mixed el, String position )
试验性的。根据标准的 Ext.ElementalignTo 锚点定位值...
试验性的。根据标准的 Ext.ElementalignTo 锚点定位值在另一个元素的关联位置上显示该提示。用法示例：

// 在默认位置显示该提示 ('tl-br?')
tip.showBy('my-el');

// 将该提示的左上角对齐到元素的右上角
tip.showBy('my-el', 'tl-tr');
参数项：
  • el : Mixed
    一个 HTMLElement、Ext.Element 或者要对齐的目标元素的 ID 文本
  • position : String
    （可选）一个有效的 Ext.ElementalignTo 锚点定位值（默认为 'tl-br?' 或者 defaultAlign 中指定的值，如果设置过该值的话）。
返回值：
  • void
Tip
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.Toolbar.Fill

包： | ExtToolbar
定义的文件： | Toolbar.js
类全称： | Ext.Toolbar.Fill
继承自于： | 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'
    ]
});

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Fill()
参数项：
  • None.
返回值：
  • void
Fill
Spacer()
参数项：
  • None.
返回值：
  • void
Spacer
Item( HTMLElement el )
参数项：
  • el : HTMLElement
返回值：
  • void
Item

公共事件

这个类没有公告事件。


类Ext.Toolbar

包： | Ext
定义的文件： | Toolbar.js
类全称： | Ext.Toolbar
继承自于： | Ext.Container
基本工具栏类。工具栏元素可以通过它们的构造函数明确地被创建，或者通过它们的xtype类型来实现。也有一些简单的字符串代表特定的对象，用于创建各种工具条。Basic Toolbar class. Toolbar elements can be created explicitly via their constructors, or implicitly via their xtypes. Some items also have shortcut strings for creation.

配置项

配置项 定义者
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Toolbar( Object/Array config )
参数项：
  • config : Object/Array
    要添加的一个配置对象或者一个要按钮数组 A config object or an array of buttons to add
返回值：
  • void
Toolbar
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
addSeparator() : Ext.Toolbar.Item
添加一个分隔符。Adds a separator
添加一个分隔符。Adds a separator
参数项：
  • None.
返回值：
  • Ext.Toolbar.Item
    分隔符项 The separator item
Toolbar
addSpacer() : Ext.Toolbar.Spacer
添加一个空白分隔符。Adds a spacer element
添加一个空白分隔符。Adds a spacer element
参数项：
  • None.
返回值：
  • Ext.Toolbar.Spacer
    空白项 The spacer item
Toolbar
addFill()
使得后来添加的元素都像CSS样式：float:right那般向右靠拢。...
使得后来添加的元素都像CSS样式：float:right那般向右靠拢。Forces subsequent additions into the float:right toolbar
参数项：
  • None.
返回值：
  • void
Toolbar
addElement( Mixed el ) : Ext.Toolbar.Item
在工具栏上添加任何一个标准的HTML元素。Adds any stand...
在工具栏上添加任何一个标准的HTML元素。Adds any standard HTML element to the toolbar
参数项：
  • el : Mixed
    要加入的元素本身或元素其。id The element or id of the element to add
返回值：
  • Ext.Toolbar.Item
    元素项。The element's item
Toolbar
addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
添加任何一个Toolbar.Item或者其子类。Adds any To...
添加任何一个Toolbar.Item或者其子类。Adds any Toolbar.Item or subclass
参数项：
  • item : Ext.Toolbar.Item
    元素项
返回值：
  • Ext.Toolbar.Item
    元素项 The item
Toolbar
addButton( Object/Array config ) : Ext.Toolbar.Button/Array
添加一个按钮(或者一组按钮)。可以查看Ext.Toolbar.Butt...
添加一个按钮(或者一组按钮)。可以查看Ext.Toolbar.Button获取更多的配置信息。Adds a button (or buttons). See Ext.Toolbar.Button for more info on the config.
参数项：
  • config : Object/Array
    按钮的配置项或配置项的数组。A button config or array of configs
返回值：
  • Ext.Toolbar.Button/Array
Toolbar
addText( String text ) : Ext.Toolbar.Item
在工具栏上添加文本。Adds text to the toolbar
在工具栏上添加文本。Adds text to the toolbar
参数项：
  • text : String
    添加的文本。The text to add
返回值：
  • Ext.Toolbar.Item
    元素。The element's item
Toolbar
insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Toolbar.Button/Array item ) : Ext.Toolbar.Button/Item
在指定的索引位置那里插入任何一个Ext.Toolbar.Item/Ex...
在指定的索引位置那里插入任何一个Ext.Toolbar.Item/Ext.Toolbar.Button项。Inserts any Ext.Toolbar.Item/Ext.Toolbar.Button at the specified index.
参数项：
  • index : Number
    item插入的地方（索引值） The index where the item is to be inserted
  • item : Object/Ext.Toolbar.Item/Ext.Toolbar.Button/Array
    要插入的按钮本身或按钮其配置项，或配置项的数组 item The button, or button config object to be inserted, or an array of buttons/configs.
返回值：
  • Ext.Toolbar.Button/Item
Toolbar
addDom( Object config ) : Ext.Toolbar.Item
在工具栏上添加一个从Ext.DomHelper配置传递过来的元素。Ad...
在工具栏上添加一个从Ext.DomHelper配置传递过来的元素。Adds a new element to the toolbar from the passed Ext.DomHelper config
参数项：
  • config : Object
返回值：
  • Ext.Toolbar.Item
    元素 The element's item
Toolbar
addField( Ext.form.Field field ) : Ext.Toolbar.Item
添加一个动态的可展现的 Ext.form field（TextFiel...
添加一个动态的可展现的 Ext.form field（TextField、ComboBox等等）。注意:这个域应该还没有被展现。对于一个已经被展现了的域，应使用addElement。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 addElement.
参数项：
  • field : Ext.form.Field
返回值：
  • Ext.Toolbar.Item
Toolbar
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.Toolbar.Item

包： | ExtToolbar
定义的文件： | Toolbar.js
类全称： | Ext.Toolbar.Item
继承自于： | Object
被其他类所继承的基类，以获取一些基本的工具栏项功能。The base class that other non-ineracting Toolbar Item classes should extend in order to get some basic common toolbar item functionality.

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Item( HTMLElement el )
参数项：
  • el : HTMLElement
返回值：
  • void
Item

公共事件

这个类没有公告事件。


类Ext.Toolbar.Separator

包： | ExtToolbar
定义的文件： | Toolbar.js
类全称： | Ext.Toolbar.Separator
继承自于： | Ext.Toolbar.Item
在项与项之间添加一个垂直的分隔符。用法举例： A simple class that adds a vertical separator bar between toolbar items. Example usage:

new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbseparator'}, // or '-'
        'Item 2'
    ]
});

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Separator()
参数项：
  • None.
返回值：
  • void
Separator
Item( HTMLElement el )
参数项：
  • el : HTMLElement
返回值：
  • void
Item

公共事件

这个类没有公告事件。


类Ext.Toolbar.Spacer

包： | ExtToolbar
定义的文件： | Toolbar.js
类全称： | Ext.Toolbar.Spacer
继承自于： | Ext.Toolbar.Item
在项与项之间添加一个水平的空白位置。A simple element that adds extra horizontal space between items in a toolbar.

new Ext.Panel({
    tbar : [
        'Item 1',
        {xtype: 'tbspacer'}, // or ' '
        'Item 2'
    ]
});

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
Spacer()
参数项：
  • None.
返回值：
  • void
Spacer
Item( HTMLElement el )
参数项：
  • el : HTMLElement
返回值：
  • void
Item

公共事件

这个类没有公告事件。


类Ext.Toolbar.TextItem

包： | ExtToolbar
定义的文件： | Toolbar.js
类全称： | Ext.Toolbar.TextItem
继承自于： | Ext.Toolbar.Item
只是简单地渲染一段文本字符串。A simple class that renders text directly into a toolbar.

new Ext.Panel({
    tbar : [
        {xtype: 'tbtext', text: 'Item 1'} // 或简单地就是 or simply 'Item 1'
    ]
});

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
TextItem( String/Object text )
参数项：
  • text : String/Object
    文本字符串，或是一个包含text属性的配置对象 A text string, or a config object containing a text property
返回值：
  • void
TextItem
Item( HTMLElement el )
参数项：
  • el : HTMLElement
返回值：
  • void
Item

公共事件

这个类没有公告事件。


类Ext.ToolTip

包： | Ext
定义的文件： | ToolTip.js
类全称： | Ext.ToolTip
继承自于： | Ext.Tip
一个标准的快捷提示实现，用于悬浮在目标元素之上时出现的提示信息。

配置项

配置项 定义者
target : Mixed
HTMLElement目标元素，既可是Ext.Element或是与这个...
HTMLElement目标元素，既可是Ext.Element或是与这个快捷提示相关联的id。
ToolTip
autoHide : Boolean
值为 true 时在鼠标移出目标元素自动隐藏快捷提示(默认为 true...
值为 true 时在鼠标移出目标元素自动隐藏快捷提示(默认为 true)。与dismissDelay协同生效（默认为true）。若closable，一个关闭的按钮会出现在快捷提示的开头。
ToolTip
showDelay : Number
以毫秒表示的当鼠标进入目标元素后显示快捷提示的延迟时间(默认为 500)
以毫秒表示的当鼠标进入目标元素后显示快捷提示的延迟时间(默认为 500)
ToolTip
hideDelay : Number
以毫秒表示的隐藏快捷提示的延迟时间。设置为0立即隐藏快捷提示。
以毫秒表示的隐藏快捷提示的延迟时间。设置为0立即隐藏快捷提示。
ToolTip
dismissDelay : Number
以毫秒表示的隐藏快捷提示的延迟时间, 仅在 autoDismiss =...
以毫秒表示的隐藏快捷提示的延迟时间, 仅在 autoDismiss = true 时生效(默认为 5000)。要禁止隐藏，设置dismissDelay ＝ 0
ToolTip
mouseOffset : Array
Tooltip显示时，距离鼠标位置一定的XY偏移（默认[15,18]）。
Tooltip显示时，距离鼠标位置一定的XY偏移（默认[15,18]）。
ToolTip
trackMouse : Boolean
值为 true 时当鼠标经过目标对象时快捷提示将跟随鼠标移动(默认为 ...
值为 true 时当鼠标经过目标对象时快捷提示将跟随鼠标移动(默认为 false)
ToolTip
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
minWidth : Number
以像素为单位表示的提示的最小宽度（默认为 40）。
以像素为单位表示的提示的最小宽度（默认为 40）。
Tip
maxWidth : Number
以像素为单位表示的提示的最大宽度（默认为 300）。
以像素为单位表示的提示的最大宽度（默认为 300）。
Tip
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
defaultAlign : String
试验性的。默认为 Ext.ElementalignTo 锚点定位值，用...
试验性的。默认为 Ext.ElementalignTo 锚点定位值，用来让该提示定位到它所属元素的关联位置（默认为 "tl-bl?"）。
Tip
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
ToolTip( Object config )
参数项：
  • config : Object
    配置项对象
返回值：
  • void
ToolTip
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
Tip( Object config )
参数项：
  • config : Object
    配置选项对象
返回值：
  • void
Tip
showAt( Array xy )
在指定的 XY 坐标处显示该提示。用法示例： // 在 x:50...
在指定的 XY 坐标处显示该提示。用法示例：

// 在 x:50、y:100 处显示提示
tip.showAt([50,100]);
参数项：
  • xy : Array
    一个由 x、y 坐标组成的数组
返回值：
  • void
Tip
showBy( Mixed el, String position )
试验性的。根据标准的 Ext.ElementalignTo 锚点定位值...
试验性的。根据标准的 Ext.ElementalignTo 锚点定位值在另一个元素的关联位置上显示该提示。用法示例：

// 在默认位置显示该提示 ('tl-br?')
tip.showBy('my-el');

// 将该提示的左上角对齐到元素的右上角
tip.showBy('my-el', 'tl-tr');
参数项：
  • el : Mixed
    一个 HTMLElement、Ext.Element 或者要对齐的目标元素的 ID 文本
  • position : String
    （可选）一个有效的 Ext.ElementalignTo 锚点定位值（默认为 'tl-br?' 或者 defaultAlign 中指定的值，如果设置过该值的话）。
返回值：
  • void
Tip
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.tree.AsyncTreeNode

包： | Exttree
定义的文件： | AsyncTreeNode.js
类全称： | Ext.tree.AsyncTreeNode
继承自于： | Ext.tree.TreeNode

配置项

配置项 |  | 定义者
 | loader : TreeLoader 加载这个节点使用的TreeLoader（默认是加载该节点所在树的Tre... 加载这个节点使用的TreeLoader（默认是加载该节点所在树的TreeLoader） | AsyncTreeNode
 | editable : Boolean False表示该节点不能够编辑的。Ext.tree.TreeEdito... False表示该节点不能够编辑的。Ext.tree.TreeEditor不能用（默认为true）。False to not allow this node to be edited by an Ext.tree.TreeEditor (defaults to true) | TreeNode
 | id : String 该节点的Id。如不指定一个，会生成一个。The id for this... 该节点的Id。如不指定一个，会生成一个。The id for this node. If one is not specified, one is generated. | Node
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | loader: Ext.tree.TreeLoader 节点使用的Loader（默认使用tree定义的loader） ... 节点使用的Loader（默认使用tree定义的loader） | AsyncTreeNode
 | text: String 只读属性，该节点所显示的文本.可以用setText方法改变。Rea... 只读属性，该节点所显示的文本.可以用setText方法改变。Read-only. The text for this node. To change it use setText(). | TreeNode
 | disabled: Boolean 如果该节点为disabled那为true。True if this... 如果该节点为disabled那为true。True if this node is disabled. | TreeNode
 | hidden: Boolean True表示该节点市隐藏的。True if this node i... True表示该节点市隐藏的。True if this node is hidden. | TreeNode
 | ui: TreeNodeUI 这个节点的UI。Read-only. The UI for thi... 这个节点的UI。Read-only. The UI for this node | TreeNode
 | attributes: Object 节点属性。你可以在此添加任意的自定义的属性。The attribu... 节点属性。你可以在此添加任意的自定义的属性。The attributes supplied for the node. You can use this property to access any custom attributes you supplied. | Node
 | id: String 节点ID。The node id. 节点ID。The node id. | Node
 | childNodes: Array 此节点的所有子节点。All child nodes of this... 此节点的所有子节点。All child nodes of this node. | Node
 | parentNode: Node 此节点的父节点。The parent node for this ... 此节点的父节点。The parent node for this node. | Node
 | firstChild: Node 该节点下面最前一个子节点（直属的），null的话就表示这是没有子节... 该节点下面最前一个子节点（直属的），null的话就表示这是没有子节点的。The first direct child node of this node, or null if this node has no child nodes. | Node
 | lastChild: Node 该节点下面最后一个子节点（直属的），null的话就表示这是没有子节... 该节点下面最后一个子节点（直属的），null的话就表示这是没有子节点的。The last direct child node of this node, or null if this node has no child nodes. | Node
 | previousSibling: Node 该节点前面一个节点，同级的，null的话就表示这没有侧边节点。Th... 该节点前面一个节点，同级的，null的话就表示这没有侧边节点。The node immediately preceding this node in the tree, or null if there is no sibling node. | Node
 | nextSibling: Node 该节点后面一个节点，同级的，null的话就表示这没有侧边节点。Th... 该节点后面一个节点，同级的，null的话就表示这没有侧边节点。The node immediately following this node in the tree, or null if there is no sibling node. | Node

公共方法

方法 定义者
AsyncTreeNode( Object/String attributes )
参数项：
  • attributes : Object/String
    该节点的属性/配置对象，也可以是带有文本的一个字符串
返回值：
  • void
AsyncTreeNode
isLoading() : Boolean
如果该节点正在被加载则返回true。
如果该节点正在被加载则返回true。
参数项：
  • None.
返回值：
  • Boolean
AsyncTreeNode
isLoaded() : Boolean
如果该节点被加载过则返回true。
如果该节点被加载过则返回true。
参数项：
  • None.
返回值：
  • Boolean
AsyncTreeNode
reload( Function callback )
重新加载该节点。
重新加载该节点。
参数项：
  • callback : Function
返回值：
  • void
AsyncTreeNode
TreeNode( Object/String attributes )
参数项：
  • attributes : Object/String
    该节点的属性/配置对象，也可以是带有文本的一个字符串。The attributes/config for the node or just a string with the text for the node
返回值：
  • void
TreeNode
isExpanded() : Boolean
如果该节点被展开则返回true。Returns true if thi...
如果该节点被展开则返回true。Returns true if this node is expanded
参数项：
  • None.
返回值：
  • Boolean
TreeNode
getUI() : TreeNodeUI
返回该节点的UI对象。Returns the UI object fo...
返回该节点的UI对象。Returns the UI object for this node.
参数项：
  • None.
返回值：
  • TreeNodeUI
    树节点的用户界面对象。除非有另外指定uiProvider，否则这就是一个Ext.tree.TreeNodeUI实例。The object which is providing the user interface for this tree node. Unless otherwise specified in the uiProvider, this will be an instance of Ext.tree.TreeNodeUI
TreeNode
setText( String text )
设置该节点的显示文本。Sets the text for this node
设置该节点的显示文本。Sets the text for this node
参数项：
  • text : String
返回值：
  • void
TreeNode
select()
选取该节点所在树选择的选区模型。Triggers selection ...
选取该节点所在树选择的选区模型。Triggers selection of this node
参数项：
  • None.
返回值：
  • void
TreeNode
unselect()
取消选择该节点所在树的选区模型。Triggers deselectio...
取消选择该节点所在树的选区模型。Triggers deselection of this node
参数项：
  • None.
返回值：
  • void
TreeNode
isSelected() : Boolean
如果该节点被选中则返回true。Returns true if thi...
如果该节点被选中则返回true。Returns true if this node is selected
参数项：
  • None.
返回值：
  • Boolean
TreeNode
expand( Boolean deep, Boolean anim, Function callback )
展开这个节点。Expand this node.
展开这个节点。Expand this node.
参数项：
  • deep : Boolean
    （可选的）如果为true展开所有的子节点。(optional)True to expand all children as well
  • anim : Boolean
    （可选的）如果为false不启用动画效果。(optional)false to cancel the default animation
  • callback : 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.
返回值：
  • void
TreeNode
collapse( Boolean deep, Boolean anim )
展开该节点。Collapse this node.
展开该节点。Collapse this node.
参数项：
  • deep : Boolean
    （可选的）为true则也展开所有的子结点。(optional)True to collapse all children as well
  • anim : Boolean
    （可选的）如果为false不启用动画效果。(optional)false to cancel the default animation
返回值：
  • void
TreeNode
toggle()
轮回该节点的展开/收回状态。Toggles expanded/coll...
轮回该节点的展开/收回状态。Toggles expanded/collapsed state of the node
参数项：
  • None.
返回值：
  • void
TreeNode
ensureVisible( Function callback )
确保所有的父节点都被展开了（没理解这个函数的作用）。Ensures a...
确保所有的父节点都被展开了（没理解这个函数的作用）。Ensures all parent nodes are expanded, and if necessary, scrolls the node into view.
参数项：
  • callback : Function
    （可选的）节点隐藏后调用的函数。(optional) A function to call when the node has been made visible.
返回值：
  • void
TreeNode
expandChildNodes( Boolean deep )
展开所有的子节点。Expand all child nodes
展开所有的子节点。Expand all child nodes
参数项：
  • deep : Boolean
    如果为true，子节点如果还有子节点也将被展开。(optional)true if the child nodes should also expand their child nodes
返回值：
  • void
TreeNode
collapseChildNodes( Boolean deep )
收回所有的子节点。Collapse all child nodes
收回所有的子节点。Collapse all child nodes
参数项：
  • deep : Boolean
    如果为true，子节点如果还有子节点也将被收回。(optional)true if the child nodes should also collapse their child nodes
返回值：
  • void
TreeNode
disable()
禁用这个节点。Disables this node
禁用这个节点。Disables this node
参数项：
  • None.
返回值：
  • void
TreeNode
enable()
启用该节点。Enables this node
启用该节点。Enables this node
参数项：
  • None.
返回值：
  • void
TreeNode
Node( Object attributes )
参数项：
  • attributes : Object
    节点的属性/配置项。The attributes/config for the node
返回值：
  • void
Node
isLeaf() : Boolean
若节点是叶子节点的话返回true。Returns true if th...
若节点是叶子节点的话返回true。Returns true if this node is a leaf
参数项：
  • None.
返回值：
  • Boolean
Node
isLast() : Boolean
如果这个节点是其父节点下面的最后一个节点的话返回true。Return...
如果这个节点是其父节点下面的最后一个节点的话返回true。Returns true if this node is the last child of its parent
参数项：
  • None.
返回值：
  • Boolean
Node
isFirst() : Boolean
如果这个节点是其父节点下面的第一个节点的话返回true。Returns...
如果这个节点是其父节点下面的第一个节点的话返回true。Returns true if this node is the first child of its parent
参数项：
  • None.
返回值：
  • Boolean
Node
hasChildNodes() : Boolean
如果有子节点返回true。Returns true if this n...
如果有子节点返回true。Returns true if this node has one or more child nodes, else false.
参数项：
  • None.
返回值：
  • Boolean
Node
isExpandable() : Boolean
如果该节点有一个或多个的子节点，或其节点可展开的属性是明确制定为tru...
如果该节点有一个或多个的子节点，或其节点可展开的属性是明确制定为true的话返回true。Returns true if this node has one or more child nodes, or if the expandable node attribute is explicitly specified as true (see attributes), otherwise returns false.
参数项：
  • None.
返回值：
  • Boolean
Node
appendChild( Node/Array node ) : Node
在该节点里面最后的位置上插入节点，可以多个。Insert node(s...
在该节点里面最后的位置上插入节点，可以多个。Insert node(s) as the last child node of this node.
参数项：
  • node : Node/Array
    要加入的节点或节点数组。The node or Array of nodes to append
返回值：
  • Node
    如果是单个节点，加入后返回true，如果是数组返回null。The appended node if single append, or null if an array was passed
Node
removeChild( Node node ) : Node
从该节点中移除一个子节点。Removes a child node f...
从该节点中移除一个子节点。Removes a child node from this node.
参数项：
  • node : Node
    要移除的节点。The node to remove
返回值：
  • Node
    移除后的节点。The removed node
Node
insertBefore( Node node, Node refNode ) : Node
在当前节点的子节点的集合中，位于第二个节点之前插入节点（第一个参数）。...
在当前节点的子节点的集合中，位于第二个节点之前插入节点（第一个参数）。Inserts the first node before the second node in this nodes childNodes collection.
参数项：
  • node : Node
    要插入的节点。he node to insert
  • refNode : Node
    前面插入的节点（如果为null表示节点是追加的）。The node to insert before (if null the node is appended)
返回值：
  • Node
    插入的节点。The inserted node
Node
remove() : Node
从父节点上移除子节点。Removes this node from i...
从父节点上移除子节点。Removes this node from its parent
参数项：
  • None.
返回值：
  • Node
    this
Node
item( Number index ) : Node
指定索引，在自节点中查找匹配索引的节点。Returns the chi...
指定索引，在自节点中查找匹配索引的节点。Returns the child node at the specified index.
参数项：
  • index : Number
返回值：
  • Node
Node
replaceChild( Node newChild, Node oldChild ) : Node
把下面的某个子节点替换为其他节点。Replaces one child...
把下面的某个子节点替换为其他节点。Replaces one child node in this node with another.
参数项：
  • newChild : Node
    进来的节点。The replacement node
  • oldChild : Node
    去掉的节点。The node to replace
返回值：
  • Node
    去掉的节点。The replaced node
Node
indexOf( Node node ) : Number
返回某个子节点的索引。Returns the index of a c...
返回某个子节点的索引。Returns the index of a child node
参数项：
  • node : Node
    节点
返回值：
  • Number
    节点的索引或是-1表示找不到。The index of the node or -1 if it was not found
Node
getOwnerTree() : Tree
返回节点所在的树对象。Returns the tree this no...
返回节点所在的树对象。Returns the tree this node is in.
参数项：
  • None.
返回值：
  • Tree
Node
getDepth() : Number
返回该节点的深度（根节点的深度是0）。Returns depth of...
返回该节点的深度（根节点的深度是0）。Returns depth of this node (the root node has a depth of 0)
参数项：
  • None.
返回值：
  • Number
Node
setId( String id )
改变该节点的id Changes the id of this node.
改变该节点的id Changes the id of this node.
参数项：
  • id : String
    节点的新id。The new id for the node.
返回值：
  • void
Node
getPath( String attr ) : String
返回该节点的路径，以方便控制这个节点展开或选择。Returns the...
返回该节点的路径，以方便控制这个节点展开或选择。Returns the path for this node. The path can be used to expand or select this node programmatically.
参数项：
  • attr : String
    （可选的）路径采用的属性（默认为节点的id）。(optional) The attr to use for the path (defaults to the node's id)
返回值：
  • String
    路径。The path
Node
bubble( Function fn, Object scope, Array args )
从该节点开始逐层上报(Bubbles up)节点，上报过程中对每个节点...
从该节点开始逐层上报(Bubbles up)节点，上报过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数在某一个层次上返回false，上升将会停止。Bubbles up the tree from this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认为当前节点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional)The args to call the function with (default to passing the current node)
返回值：
  • void
Node
cascade( Function fn, Object scope, Array args )
从该节点开始逐层下报(Bubbles up)节点，上报过程中对每个节点...
从该节点开始逐层下报(Bubbles up)节点，上报过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数在某一个层次上返回false，下升到那个分支的位置将会停止。Cascades down the tree from this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的） 函数的作用域（默认为当前节点）。(optional) The scope of the function (defaults to current node)
  • args : Array
    （可选的） 调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional) The args to call the function with (default to passing the current node)
返回值：
  • void
Node
eachChild( Function fn, Object scope, Array args )
遍历该节点下的子节点，枚举过程中对每个节点执行指定的函数。函数的作用域...
遍历该节点下的子节点，枚举过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数走到某处地方返回false，遍历将会停止。Interates the child nodes of this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的） 函数的作用域（默认为当前节点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的） 调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional)The args to call the function with (default to passing the current node)
返回值：
  • void
Node
findChild( String attribute, Mixed value ) : Node
根据送入的值，如果子节点身上指定属性的值是送入的值，就返回那个节点。F...
根据送入的值，如果子节点身上指定属性的值是送入的值，就返回那个节点。Finds the first child that has the attribute with the specified value.
参数项：
  • attribute : String
    属性名称。The attribute name
  • value : Mixed
    要查找的值。The value to search for
返回值：
  • Node
    已找到的子节点或null表示找不到。The found child or null if none was found
Node
findChildBy( Function fn, Object scope ) : Node
通过自定义的函数查找子节点，找到第一个合适的就返回。要求的条件是函数返...
通过自定义的函数查找子节点，找到第一个合适的就返回。要求的条件是函数返回true。Finds the first child by a custom function. The child matches if the function passed returns true.
参数项：
  • fn : Function
    函数
  • scope : Object
    函数作用域（可选的）。(optional)
返回值：
  • Node
    找到的子元素或null就代表没找到。The found child or null if none was found
Node
sort( Function fn, Object scope )
用自定义的排序函数对节点的子函数进行排序。Sorts this nod...
用自定义的排序函数对节点的子函数进行排序。Sorts this nodes children using the supplied sort function
参数项：
  • fn : Function
    函数
  • scope : Object
    函数（可选的）。(optional)
返回值：
  • void
Node
contains( Node node ) : Boolean
返回true表示为该节点是送入节点的祖先节点（无论在哪那一级的）。Re...
返回true表示为该节点是送入节点的祖先节点（无论在哪那一级的）。Returns true if this node is an ancestor (at any point) of the passed node.
参数项：
  • node : Node
    节点
返回值：
  • Boolean
Node
isAncestor( Node node ) : Boolean
返回true表示为送入的节点是该的祖先节点（无论在哪那一级的）。Ret...
返回true表示为送入的节点是该的祖先节点（无论在哪那一级的）。Returns true if the passed node is an ancestor (at any point) of this node.
参数项：
  • node : Node
    节点
返回值：
  • Boolean
Node
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeload()
节点加载之前触发，返回false则取消。
节点加载之前触发，返回false则取消。
侦听器会传入以下的参数：
  • None.
 AsyncTreeNode
load()
此节点加载完毕后触发
此节点加载完毕后触发
侦听器会传入以下的参数：
  • None.
 AsyncTreeNode
textchange()
当这个节点的显示文本被改变时触发。Fires when the te...
当这个节点的显示文本被改变时触发。Fires when the text for this node is changed
侦听器会传入以下的参数：
  • None.
 TreeNode
beforeexpand()
当该节点被展开之前触发，返回false将取消事件。Fires bef...
当该节点被展开之前触发，返回false将取消事件。Fires before this node is expanded, return false to cancel.
侦听器会传入以下的参数：
  • None.
 TreeNode
beforecollapse()
当该节点被收回之前触发，返回false将取消事件。Fires bef...
当该节点被收回之前触发，返回false将取消事件。Fires before this node is collapsed, return false to cancel.
侦听器会传入以下的参数：
  • None.
 TreeNode
expand()
当该节点被展开时触发。Fires when this node is...
当该节点被展开时触发。Fires when this node is expanded
侦听器会传入以下的参数：
  • None.
 TreeNode
disabledchange()
当该节点的disabled状态被改变时触发。Fires when t...
当该节点的disabled状态被改变时触发。Fires when the disabled status of this node changes
侦听器会传入以下的参数：
  • None.
 TreeNode
collapse()
当该节点被收回时触发。Fires when this node is...
当该节点被收回时触发。Fires when this node is collapsed
侦听器会传入以下的参数：
  • None.
 TreeNode
beforeclick()
单击处理之前触发，返回false将停止默认的动作。Fires bef...
单击处理之前触发，返回false将停止默认的动作。Fires before click processing. Return false to cancel the default action.
侦听器会传入以下的参数：
  • None.
 TreeNode
click()
当节点被点击时触发。Fires when this node is ...
当节点被点击时触发。Fires when this node is clicked
侦听器会传入以下的参数：
  • None.
 TreeNode
checkchange()
当节点的checkbox的状态被改变时触发。Fires when a...
当节点的checkbox的状态被改变时触发。Fires when a node with a checkbox's checked property changes
侦听器会传入以下的参数：
  • None.
 TreeNode
dblclick()
当节点被双点击时触发。Fires when this node is...
当节点被双点击时触发。Fires when this node is double clicked
侦听器会传入以下的参数：
  • None.
 TreeNode
contextmenu()
当该节点被右击的时候触发。Fires when this node ...
当该节点被右击的时候触发。Fires when this node is right clicked
侦听器会传入以下的参数：
  • None.
 TreeNode
beforechildrenrendered()
当节点的子节点被渲染之前触发。Fires right before ...
当节点的子节点被渲染之前触发。Fires right before the child nodes for this node are rendered
侦听器会传入以下的参数：
  • None.
 TreeNode
append()
当有新的子节点添加时触发。Fires when a new chil...
当有新的子节点添加时触发。Fires when a new child node is appended
侦听器会传入以下的参数：
  • None.
 Node
remove()
当有子节点被移出的时候触发。Fires when a child n...
当有子节点被移出的时候触发。Fires when a child node is removed
侦听器会传入以下的参数：
  • None.
 Node
move()
当该节点移动到树中的新位置触发。Fires when this no...
当该节点移动到树中的新位置触发。Fires when this node is moved to a new location in the tree
侦听器会传入以下的参数：
  • None.
 Node
insert()
当有子节点被插入的触发。Fires when a new child...
当有子节点被插入的触发。Fires when a new child node is inserted.
侦听器会传入以下的参数：
  • None.
 Node
beforeappend()
当有新的子节点被添加时触发，返回false就取消添加。Fires b...
当有新的子节点被添加时触发，返回false就取消添加。Fires before a new child is appended, return false to cancel the append.
侦听器会传入以下的参数：
  • None.
 Node
beforeremove()
当有子节点被移出的时候触发，返回false就取消移出。Fires b...
当有子节点被移出的时候触发，返回false就取消移出。Fires before a child is removed, return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Node
beforemove()
当该节点移动到树下面的另外一个新位置的时候触发。返回false就取消...
当该节点移动到树下面的另外一个新位置的时候触发。返回false就取消移动。Fires before this node is moved to a new location in the tree. Return false to cancel the move.
侦听器会传入以下的参数：
  • None.
 Node
beforeinsert()
当有新的节点插入时触发，返回false就取消插入。Fires bef...
当有新的节点插入时触发，返回false就取消插入。Fires before a new child is inserted, return false to cancel the insert.
侦听器会传入以下的参数：
  • None.
 Node


类Ext.tree.DefaultSelectionModel

包： | Exttree
定义的文件： | TreeSelectionModel.js
类全称： | Ext.tree.DefaultSelectionModel
继承自于： | Ext.util.Observable
默认是一个单选择区的TreePanel

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
DefaultSelectionModel()
参数项：
  • None.
返回值：
  • void
DefaultSelectionModel
select( TreeNode node ) : TreeNode
Select a node. 如果该节点不在选择区，则该节点放入选择区
Select a node. 如果该节点不在选择区，则该节点放入选择区
参数项：
  • node : TreeNode
    要选择的节点
返回值：
  • TreeNode
    选择的节点
DefaultSelectionModel
unselect( TreeNode node )
如果该节点在选择区中，则将该节点移除选择区
如果该节点在选择区中，则将该节点移除选择区
参数项：
  • node : TreeNode
    被移除的节点
返回值：
  • void
DefaultSelectionModel
clearSelections()
清空选择区，并返回选择区中的节点
清空选择区，并返回选择区中的节点
参数项：
  • None.
返回值：
  • void
DefaultSelectionModel
getSelectedNode() : TreeNode
得到选择区中的节点
得到选择区中的节点
参数项：
  • None.
返回值：
  • TreeNode
    选中的节点
DefaultSelectionModel
isSelected( TreeNode node ) : Boolean
如果节点在选择区中则返回true
如果节点在选择区中则返回true
参数项：
  • node : TreeNode
    待检查的节点
返回值：
  • Boolean
DefaultSelectionModel
selectPrevious() : TreeNode 新选区
将选择区中的节点在这棵树中上一个节点放入选择区，而且是智能的检索。
将选择区中的节点在这棵树中上一个节点放入选择区，而且是智能的检索。
参数项：
  • None.
返回值：
  • TreeNode 新选区
DefaultSelectionModel
selectNext() : TreeNode 新选区
将选择区中的节点在这棵树中下一个节点放入选择区，而且是智能的检索。
将选择区中的节点在这棵树中下一个节点放入选择区，而且是智能的检索。
参数项：
  • None.
返回值：
  • TreeNode 新选区
DefaultSelectionModel
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
selectionchange()
当选中的选区有变动时触发
当选中的选区有变动时触发
侦听器会传入以下的参数：
  • None.
 DefaultSelectionModel
beforeselect()
选中的节点加载之前触发，返回false则取消。
选中的节点加载之前触发，返回false则取消。
侦听器会传入以下的参数：
  • None.
 DefaultSelectionModel


类Ext.tree.MultiSelectionModel

包： | Exttree
定义的文件： | Ext.tree.MultiSelectionModel.js
类全称： | Ext.tree.MultiSelectionModel
继承自于： | Ext.util.Observable
一个多选择区的TreePanel。

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
MultiSelectionModel()
参数项：
  • None.
返回值：
  • void
MultiSelectionModel
select( TreeNode node, EventObject e, Boolean keepExisting ) : TreeNode
将节点放入选择区
将节点放入选择区
参数项：
  • node : TreeNode
    要放入的节点
  • e : EventObject
    为选择区分配的event对象
  • keepExisting : Boolean
    如果为true,则保存选择区中已存在的节点
返回值：
  • TreeNode
    选中的节点
MultiSelectionModel
unselect( TreeNode node )
如果传入的节点在选择区则从中删除
如果传入的节点在选择区则从中删除
参数项：
  • node : TreeNode
    待删除的节点
返回值：
  • void
MultiSelectionModel
clearSelections()
清理选择区中的节点
清理选择区中的节点
参数项：
  • None.
返回值：
  • void
MultiSelectionModel
isSelected( TreeNode node ) : Boolean
如果节点已经在选择区中则返回true
如果节点已经在选择区中则返回true
参数项：
  • node : TreeNode
    检查的节点
返回值：
  • Boolean
MultiSelectionModel
getSelectedNodes() : Array
返回选择区中所有的节点
返回选择区中所有的节点
参数项：
  • None.
返回值：
  • Array
MultiSelectionModel
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
selectionchange()
当选中的选区有变动时触发
当选中的选区有变动时触发
侦听器会传入以下的参数：
  • None.
 MultiSelectionModel


类Ext.tree.RootTreeNodeUI

包： | Exttree
定义的文件： | Ext.tree.RootTreeNodeUI.js
类全称： | Ext.tree.RootTreeNodeUI
继承自于： | Object
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.TreeDragZone

包： | Exttree
定义的文件： | TreeDragZone.js
类全称： | Ext.tree.TreeDragZone
继承自于： | Ext.dd.DragZone

配置项

配置项 |  | 定义者
 | ddGroup : String 该对象隶属于组的名称。如果已指定组，那该对象只会与同组下其他拖放成员相... 该对象隶属于组的名称。如果已指定组，那该对象只会与同组下其他拖放成员相交互（默认为“TreeDD”）。 | TreeDragZone
 | containerScroll : Boolean 设为True 用来将此容器在Scrollmanager上注册,使得在拖... 设为True 用来将此容器在Scrollmanager上注册,使得在拖动操作发生时可以自动卷动。True to register this container with the Scrollmanager for auto scrolling during drag operations. | DragZone
 | hlColor : String 第二个参数:hlColor 用于在一次失败的拖动操作后调用afterR... 第二个参数:hlColor 用于在一次失败的拖动操作后调用afterRepair方法会用在此设定的颜色(默认颜色为亮蓝"c3daf9")来标识可见的拽源 The color to use when visually highlighting the drag source in the afterRepair method after a failed drop (defaults to "c3daf9" - light blue) | DragZone
 | dropAllowed : String 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 当落下被允许的时候返回到拖动源的样式（默认为"x-dd-drop-ok"）。 | DragSource
 | dropNotAllowed : String 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-no... 当落下不允许的时候返回到拖动源的样式（默认为"x-dd-drop-nodrop"）。 | DragSource

公告属性

属性 |  | 定义者
 | tree: Ext.tree.TreePanel The TreePanel for this drag zone ... The TreePanel for this drag zone | TreeDragZone
 | dragData: Object This property contains the data r... This property contains the data representing the dragged object. This data is set up by the implementation of the getDragData method. It must contain a ddel property, but can contain any other data according to the application's needs. | DragZone

公共方法

方法 定义者
TreeDragZone( String/HTMLElement/Element tree, Object config )
参数项：
  • tree : String/HTMLElement/Element
    要进行拖动的Ext.tree.TreePanel
  • config : Object
    配置项对象
返回值：
  • void
TreeDragZone
DragZone( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DragZone
getDragData() : Object
返回与拖动源关联的数据对象
返回与拖动源关联的数据对象
参数项：
  • None.
返回值：
  • Object
    data 包含自定义数据的对象
DragSource
onInitDrag( Number x, Number y ) : Boolean
该方法在拖拽动作开始，初始化代理元素时调用，默认情况下，它克隆了thi...
该方法在拖拽动作开始，初始化代理元素时调用，默认情况下，它克隆了this.dragData.ddel。Called once drag threshold has been reached to initialize the proxy element. By default, it clones the this.dragData.ddel.
参数项：
  • x : Number
    被点击的拖拽对象的X坐标The x position of the click on the dragged object
  • y : Number
    被点击的拖拽对象的y坐标The y position of the click on the dragged object
返回值：
  • Boolean
    该方法返回一个布尔常量,当返回true时,表示继续(保持)拖拽,返回false时,表示取消拖拽true to continue the drag, false to cancel
DragZone
afterRepair( Event e, String id )
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的无效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
getRepairXY( Object target, Event e, String id )
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义...
默认是一个空函数，在由实现促成的有效落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Object
    DD目标
  • e : Event
    事件对象
  • id : String
    落下元素的id
返回值：
  • void
DragSource
DragSource( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DragSource
beforeDragEnter( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。...
默认是一个空函数，在拖动项进入落下目标时，你应该提供一个自定义的动作。该动作可被取消onDragEnter。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragOver( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动...
默认是一个空函数，在拖动项位于落下目标上方时，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
cachedTarget( Ext.dd.DragDrop target, Event e, String id )
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • void
DragSource
beforeDragOut( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义...
默认是一个空函数，在拖动项离开目标而没有落下之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeDragDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作...
默认是一个空函数，在拖动项被放下到目标之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    被拖动元素之id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
beforeInvalidDrop( Ext.dd.DragDrop target, Event e, String id ) : Boolean
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
默认是一个空函数，在一次无效的落下发生之后，你应该提供一个自定义的动作。
参数项：
  • target : Ext.dd.DragDrop
    落下目标
  • e : Event
    事件对象
  • id : String
    拖动元素的id
返回值：
  • Boolean
    isValid true的话说明拖动事件是有效的，false代表取消
DragSource
onBeforeDrag( Object data, Event e ) : Boolean
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该...
默认是一个空函数，在初始化拖动事件之前，你应该提供一个自定义的动作。该动作可被取消。
参数项：
  • data : Object
    与落下目标共享的自定义数据对象
  • e : Event
    事件对象
返回值：
  • Boolean
    isValid True的话拖动事件有效，否则false取消
DragSource
onStartDrag( Number x, Number y )
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在...
默认是一个空函数，一旦拖动事件开始，你应该提供一个自定义的动作。不能在该函数中取消拖动。
参数项：
  • x : Number
    在拖动对象身上单击点的x值
  • y : Number
    在拖动对象身上单击点的y值
返回值：
  • void
DragSource
getProxy() : Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
返回拖动源所在的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • Ext.dd.StatusProxy
    proxy StatusProxy对象
DragSource
hideProxy()
隐藏拖动源的Ext.dd.StatusProxy
隐藏拖动源的Ext.dd.StatusProxy
参数项：
  • None.
返回值：
  • void
DragSource

公共事件

这个类没有公告事件。


类Ext.tree.TreeDropZone

包： | Exttree
定义的文件： | TreeDropZone.js
类全称： | Ext.tree.TreeDropZone
继承自于： | Ext.dd.DropZone

配置项

配置项 |  | 定义者
 | allowParentInsert : Boolean Allow inserting a dragged node betw... 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) | TreeDropZone
 | allowContainerDrop : String True if drops on the tree container... True if drops on the tree container (outside of a specific tree node) are allowed (defaults to false) | TreeDropZone
 | appendOnly : String True if the tree should only allow ... True if the tree should only allow append drops (use for trees which are sorted, defaults to false) | TreeDropZone
 | ddGroup : String 该对象隶属于组的名称。如果已指定组，那该对象只会与同组下其他拖放成员相... 该对象隶属于组的名称。如果已指定组，那该对象只会与同组下其他拖放成员相交互（默认为“TreeDD”）。 | TreeDropZone
 | expandDelay : String 在拖动到一个可落下的节点时，到目标上方，距离展开树节点 等待的毫秒数。... 在拖动到一个可落下的节点时，到目标上方，距离展开树节点 等待的毫秒数。（默认为1000） | TreeDropZone
 | overClass : String 当拖动源到达落下目标上方时的CSS class。 当拖动源到达落下目标上方时的CSS class。 | DropTarget
 | dropAllowed : String 当可以被落下时拖动源的样式（默认为"x-dd-drop-ok"）。 当可以被落下时拖动源的样式（默认为"x-dd-drop-ok"）。 | DropTarget
 | dropNotAllowed : String 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 当不可以被落下时拖动源的样式（默认为"x-dd-drop-nodrop"）。 | DropTarget

公告属性

属性 |  | 定义者
 | tree: Ext.tree.TreePanel The TreePanel for this drop zone ... The TreePanel for this drop zone | TreeDropZone
 | dragOverData: Ext.tree.TreePanel Arbitrary data that can be associ... 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 {}) | TreeDropZone

公共方法

方法 定义者
TreeDropZone( String/HTMLElement/Element tree, Object config )
参数项：
  • tree : String/HTMLElement/Element
    要允许落下的Ext.tree.TreePanel
  • config : Object
返回值：
  • void
TreeDropZone
DropZone( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DropZone
getTargetFromEvent( Event e ) : Object
返回一个自定义数据对象，与事件对象的那个DOM节点关联。默认地，该方法...
返回一个自定义数据对象，与事件对象的那个DOM节点关联。默认地，该方法会在事件目标Ext.dd.Registry中查找对象，但是你亦可以根据自身的需求，重写该方法。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 Ext.dd.Registry, although you can override this method to provide your own custom lookup.
参数项：
  • e : Event
    事件对象The event
返回值：
  • Object
    data 自定义数据The custom data
DropZone
onNodeEnter( Object nodeData, Ext.dd.DragSource source, Event e, Object data )
当DropZone确定有一个Ext.dd.DragSource，已经进...
当DropZone确定有一个Ext.dd.DragSource，已经进入一个已登记的落下节点（drop node）的范围内，就会调用。该方法没有默认的实现。如需为某些指定的节点处理，则要重写该方法。Called when the DropZone determines that a Ext.dd.DragSource has entered a drop node that has either been registered or detected by a configured implementation of getTargetFromEvent. This method has no default implementation and should be overridden to provide node-specific processing if necessary.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • void
DropZone
onNodeOver( Object nodeData, Ext.dd.DragSource source, Event e, Object data ) : String
当DropZone确定有一个Ext.dd.DragSource，已经位...
当DropZone确定有一个Ext.dd.DragSource，已经位于一个已登记的落下节点（drop node）的上方时，就会调用。默认的实现是返回this.dropAllowed。因此应该重写它以便提供合适的反馈。Called while the DropZone determines that a Ext.dd.DragSource is over a drop node that has either been registered or detected by a configured implementation of getTargetFromEvent. The default implementation returns this.dropNotAllowed, so it should be overridden to provide the proper feedback.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。The CSS class that communicates the drop status back to the source so that the underlying Ext.dd.StatusProxy can be updated
DropZone
onNodeOut( Object nodeData, Ext.dd.DragSource source, Event e, Object data )
当DropZone确定有一个Ext.dd.DragSource， 已...
当DropZone确定有一个Ext.dd.DragSource， 已经离开一个已登记的落下节点（drop node）的范围内，就会调用。该方法没有默认的实现。如需为某些指定的节点处理，则要重写该方法。Called when the DropZone determines that a 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.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • void
DropZone
onNodeDrop( Object nodeData, Ext.dd.DragSource source, Event e, Object data ) : Boolean
当DropZone确定有一个Ext.dd.DragSource， 已...
当DropZone确定有一个Ext.dd.DragSource， 已经在一个已登记的落下节点（drop node）落下的时候，就会调用。默认的方法返回false，应提供一个合适的实现来处理落下的事件，重写该方法， 并返回true值，说明拖放行为有效，拖动源的修复动作便不会进行。Called when the DropZone determines that a 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.
参数项：
  • nodeData : Object
    自定义数据对象，包含有落下节点（drop node）的内容（其节点的内容与用getTargetFromEvent方法得到的值一样）The custom data associated with the drop node (this is the same value returned from getTargetFromEvent for this node)
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • Boolean
    有效的落下返回true否则为falseTrue if the drop was valid, else false
DropZone
onContainerOver( Ext.dd.DragSource source, Event e, Object data ) : String
当DrapZone发现有一个Ext.dd.DragSource正处于其...
当DrapZone发现有一个Ext.dd.DragSource正处于其上方时，但是没有放下任何落下的节点时调用。默认的实现是返回this.dropNotAllowed，如需提供一些合适的反馈，应重写该函数。Called while the DropZone determines that a 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.
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • String
    status 由落下状态反馈到源的CSS class，使得所在的Ext.dd.StatusProxy可被更新。The CSS class that communicates the drop status back to the source so that the underlying Ext.dd.StatusProxy can be updated
DropZone
onContainerDrop( Ext.dd.DragSource source, Event e, Object data ) : Boolean
当DrapZone确定Ext.dd.DragSource落下的动作已经...
当DrapZone确定Ext.dd.DragSource落下的动作已经执行，但是没有放下任何落下的节点时调用。欲将DropZone本身也可接收落下的行为，应提供一个合适的实现来处理落下的事件，重写该方法，并返回true值， 说明拖放行为有效，拖动源的修复动作便不会进行。默认的实现返回false。Called when the DropZone determines that a 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.
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源The drag source that was dragged over this drop zone
  • e : Event
    事件对象The event
  • data : Object
    由拖动源规定格式的数据对象An object containing arbitrary data supplied by the drag source
返回值：
  • Boolean
    有效的落下返回true否则为falseTrue if the drop was valid, else false
DropZone
notifyEnter( Ext.dd.DragSource source, Event e, Object data ) : String
当源Ext.dd.DragSource进入到目标的范围内，它执行通知落...
当源Ext.dd.DragSource进入到目标的范围内，它执行通知落下目标的那个函数。默认的实现是，如存在overClass（或其它）的样式,将其加入到落下元素（drop element），并返回dropAllowed配置的值。如需对落下验证（drop validation）的话可重写该方法。
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。
DropTarget
notifyOver( Ext.dd.DragSource source, Event e, Object data ) : String
当源Ext.dd.DragSource进入到目标的范围内，每一下移动鼠...
当源Ext.dd.DragSource进入到目标的范围内，每一下移动鼠标，它不断执行通知落下目标的那个函数。默认的实现是返回dropAllowed配置值而已
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • String
    status 由落下状态反馈到源的CSS class,使得所在的Ext.dd.StatusProxy可被更新。
DropTarget
notifyOut( Ext.dd.DragSource dd, Event e, Object data )
. 当源Ext.dd.DragSource移出落下目标的范围后，...
. 当源Ext.dd.DragSource移出落下目标的范围后，它执行通知落下目标的那个函数。默认的实现仅是移除由overClass（或其它）指定的CSS class。
参数项：
  • dd : Ext.dd.DragSource
    处于落下目标上方的拖动源
  • e : Event
    事件对象
  • data : Object
    由拖动源规定格式的数据对象
返回值：
  • void
DropTarget
notifyDrop( Ext.dd.DragSource source, Event e, Object data ) : Boolean
当源Ext.dd.DragSource在落下目标身上完成落下动作后，它...
当源Ext.dd.DragSource在落下目标身上完成落下动作后，它执行通知落下目标的那个函数。该方法没有默认的实现并返回false，所以你必须提供处理落下事件的实现并返回true，才能修复拖动源没有运行的动作。
参数项：
  • source : Ext.dd.DragSource
    处于落下目标上方的拖动源。
  • e : Event
    事件对象。
  • data : Object
    由拖动源规定格式的数据对象。
返回值：
  • Boolean
    True 有效的落下返回true否则为false。
DropTarget
DropTarget( Mixed el, Object config )
参数项：
  • el : Mixed
    容器元素
  • config : Object
返回值：
  • void
DropTarget

公共事件

这个类没有公告事件。


类Ext.tree.TreeEditor

包： | Exttree
定义的文件： | TreeEditor.js
类全称： | Ext.tree.TreeEditor
继承自于： | Ext.Editor
为树节点提供即时的编辑功能，所有合法Ext.form.Field都可作为其编辑字段。Provides editor functionality for inline tree node editing. Any valid Ext.form.Field can be used as the editor field.

配置项

配置项 定义者
alignment : String
对齐的位置（参见Ext.ElementalignTo了解详细，默认为"...
对齐的位置（参见Ext.ElementalignTo了解详细，默认为"c-c?"）。The position to align to (see Ext.ElementalignTo for more details, defaults to "c-c?").
Editor
hideEl : Boolean
False表示为当编辑器显示时，保持绑定的元素可见（默认为true）。...
False表示为当编辑器显示时，保持绑定的元素可见（默认为true）。False to keep the bound element visible while the editor is displayed (defaults to true)
Editor
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
shim : Boolean
如果要避免有select元素或iframe元素遮挡编辑器显示，就使用一...
如果要避免有select元素或iframe元素遮挡编辑器显示，就使用一个“垫片（shim）”来提供显示（默认为false）。True to shim the editor if selects/iframes could be displayed beneath it (defaults to false)
TreeEditor
maxWidth : Number
编辑器最大的宽度，单位是橡树。注意如果最大尺寸超过放置树元素的尺寸，那...
编辑器最大的宽度，单位是橡树。注意如果最大尺寸超过放置树元素的尺寸，那么将自动为你适应容器的尺寸，包括滚动条和client offsets into account prior to each edit。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.
TreeEditor
editDelay : Number
该节点点击一开始，持续多久才等级双击的事件（双击的事件执行时会翻转当前...
该节点点击一开始，持续多久才等级双击的事件（双击的事件执行时会翻转当前的编辑模式，默认为350）。如果在同一个节点上，两次点击都是发生在该时间（time span），那么节点的编辑器将会显示，否则它将被作为规则点击处理。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.
TreeEditor
field : Ext.form.Field
Field字段对象（或祖先）或field的配置项对象。The Fiel...
Field字段对象（或祖先）或field的配置项对象。The Field object (or descendant) or config object for field
Editor
autoSize : Boolean/String
True表示为编辑器的大小尺寸自适应到所属的字段，设置“width”表...
True表示为编辑器的大小尺寸自适应到所属的字段，设置“width”表示单单适应宽度，设置“height”表示单单适应高度（默认为fasle）。True for the editor to automatically adopt the size of the element being edited, "width" to adopt the width only, or "height" to adopt the height only (defaults to false)
Editor
revertInvalid : Boolean
True表示为当用户完成编辑但字段验证失败后，自动恢复原始值，然后取消...
True表示为当用户完成编辑但字段验证失败后，自动恢复原始值，然后取消这次编辑（默认为true）。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)
Editor
ignoreNoChange : Boolean
True表示为如果用户完成一次编辑但值没有改变时，中止这次编辑的操作（...
True表示为如果用户完成一次编辑但值没有改变时，中止这次编辑的操作（不保存，不触发事件）（默认为false）。只对字符类型的值有效，其它编辑的数据类型将会被忽略。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.
Editor
value : Mixed
所属字段的日期值（默认为""）。The data value of t...
所属字段的日期值（默认为""）。The data value of the underlying field (defaults to "")
Editor
shadow : Boolean/String
属性为"sides"是四边都是向上阴影，"frame"表示四边外发光，...
属性为"sides"是四边都是向上阴影，"frame"表示四边外发光，"drop"表示从右下角开始投影（默认为"frame"）。"sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "frame")
Editor
constrain : Boolean
表示为约束编辑器到视图。True to constrain the e...
表示为约束编辑器到视图。True to constrain the editor to the viewport
Editor
swallowKeys : Boolean
处理keydown/keypress事件使得不会上报（propagat...
处理keydown/keypress事件使得不会上报（propagate），（默认为true）。Handle the keydown/keypress events so they don't propagate (defaults to true)
Editor
completeOnEnter : Boolean
True表示为回车按下之后就完成编辑（默认为false）。True t...
True表示为回车按下之后就完成编辑（默认为false）。True to complete the edit when the enter key is pressed (defaults to false)
Editor
cancelOnEsc : Boolean
True表示为escape键按下之后便取消编辑（默认为false）。T...
True表示为escape键按下之后便取消编辑（默认为false）。True to cancel the edit when the escape key is pressed (defaults to false)
Editor
updateEl : Boolean
True表示为当更新完成之后同时更新绑定元素的innerHTML（默认...
True表示为当更新完成之后同时更新绑定元素的innerHTML（默认为false）。True to update the innerHTML of the bound element when the update completes (defaults to false)
Editor
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TreeEditor( TreePanel tree, Object config )
参数项：
  • tree : TreePanel
  • config : Object
    Either a prebuilt Ext.form.Field instance or a Field config object 既可以是内建的Ext.form.Field实例也可以Field的配置项对象
返回值：
  • void
TreeEditor
Editor( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Editor
startEdit( Mixed el, String value )
进入编辑状态并显示编辑器。Starts the editing pro...
进入编辑状态并显示编辑器。Starts the editing process and shows the editor.
参数项：
  • el : Mixed
    要编辑的元素。The element to edit
  • value : String
    编辑器初始化的值，如不设置该值便是元素的innerHTML。(optional) A value to initialize the editor with. If a value is not provided, it defaults to the innerHTML of el.
返回值：
  • void
Editor
setSize( Number width, Number height )
设置编辑器高、宽。Sets the height and width ...
设置编辑器高、宽。Sets the height and width of this editor.
参数项：
  • width : Number
    新宽度。The new width
  • height : Number
    新高度。The new height
返回值：
  • void
Editor
realign()
按照当前的最齐设置，把编辑器重新对齐到所绑定的字段。Realigns ...
按照当前的最齐设置，把编辑器重新对齐到所绑定的字段。Realigns the editor to the bound field based on the current alignment config value.
参数项：
  • None.
返回值：
  • void
Editor
completeEdit( Boolean remainVisible )
结束编辑状态，提交变化的内容到所属的字段，并隐藏编辑器。Ends th...
结束编辑状态，提交变化的内容到所属的字段，并隐藏编辑器。Ends the editing process, persists the changed value to the underlying field, and hides the editor.
参数项：
  • remainVisible : Boolean
    让编辑过后仍然显示编辑器，这是重写默认的动作（默认为false）。Override the default behavior and keep the editor visible after edit (defaults to false)
返回值：
  • void
Editor
cancelEdit( Boolean remainVisible )
取消编辑状态并返回到原始值，不作任何的修改。Cancels the e...
取消编辑状态并返回到原始值，不作任何的修改。Cancels the editing process and hides the editor without persisting any changes. The field value will be reverted to the original starting value.
参数项：
  • remainVisible : Boolean
    让编辑过后仍然显示编辑器，这是重写默认的动作（默认为false）。Override the default behavior and keep the editor visible after cancel (defaults to false)
返回值：
  • void
Editor
setValue( Mixed value )
设置编辑器的数据。Sets the data value of the...
设置编辑器的数据。Sets the data value of the editor
参数项：
  • value : Mixed
    所属field可支持的任意值。Any valid value supported by the underlying field
返回值：
  • void
Editor
getValue() : Mixed
获取编辑器的数据。Gets the data value of the...
获取编辑器的数据。Gets the data value of the editor
参数项：
  • None.
返回值：
  • Mixed
    数据值。The data value
Editor
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforestartedit()
编辑器开始初始化，但在修改值之前触发。若事件句柄返回false则取消整...
编辑器开始初始化，但在修改值之前触发。若事件句柄返回false则取消整个编辑事件。Fires when editing is initiated, but before the value changes. Editing can be canceled by returning false from the handler of this event.
侦听器会传入以下的参数：
  • None.
 Editor
startedit()
当编辑器显示时触发。Fires when this editor is...
当编辑器显示时触发。Fires when this editor is displayed
侦听器会传入以下的参数：
  • None.
 Editor
beforecomplete()
修改已提交到字段，但修改未真正反映在所属的字段上之前触发。若事件句柄返...
修改已提交到字段，但修改未真正反映在所属的字段上之前触发。若事件句柄返回false则取消整个编辑事件。注意如果值没有变动的话并且ignoreNoChange = true的情况下， 编辑依然会结束但因为没有真正的编辑所以不会触发事件。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.
侦听器会传入以下的参数：
  • None.
 Editor
complete()
当编辑完成过后，任何的改变写入到所属字段时触发。Fires after...
当编辑完成过后，任何的改变写入到所属字段时触发。Fires after editing is complete and any changed value has been written to the underlying field.
侦听器会传入以下的参数：
  • None.
 Editor
canceledit()
当编辑器取消后和编辑器复位之后触发。Fires after editi...
当编辑器取消后和编辑器复位之后触发。Fires after editing has been canceled and the editor's value has been reset.
侦听器会传入以下的参数：
  • None.
 Editor
specialkey()
用于导航的任意键被按下触发（arrows、tab、enter、esc等...
用于导航的任意键被按下触发（arrows、tab、enter、esc等等）。你可检查Ext.EventObjectgetKey以确定哪个键被按了。Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can check Ext.EventObjectgetKey to determine which key was pressed.
侦听器会传入以下的参数：
  • None.
 Editor
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.tree.TreeEventModel

包： | Exttree
定义的文件： | TreeEventModel.js
类全称： | Ext.tree.TreeEventModel
继承自于： | Object
Ext.tree.TreeEventModel类。

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.tree.TreeFilter

包： | Exttree
定义的文件： | TreeFilter.js
类全称： | Ext.tree.TreeFilter
继承自于： | Object
注意这个类是试验性的所以不会更新节点的缩进（连线）或者展开收回图标

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
TreeFilter( TreePanel tree, Object config )
参数项：
  • tree : TreePanel
  • config : Object
    配置项（可选的）
返回值：
  • void
TreeFilter
filter( String/RegExp value, String attr, TreeNode startNode )
通过指定的属性过滤数据
通过指定的属性过滤数据
参数项：
  • value : String/RegExp
    既可以是属性值开头的字符串也可以是针对这个属性的正则表达式
  • attr : String
    （可选）这个被传递的属性是你的属性的集合中的。默认是"text"
  • startNode : TreeNode
    (可选)从这个节点开始是过滤的
返回值：
  • void
TreeFilter
filterBy( Function fn, Object scope )
通过一个函数过滤，这个被传递的函数将被这棵树中的每个节点调用（或从st...
通过一个函数过滤，这个被传递的函数将被这棵树中的每个节点调用（或从startNode开始)。如果函数返回true,那么该节点将保留否则它将被过滤掉. 如果一个节点被过滤掉，那么它的子节点也都被过滤掉了
参数项：
  • fn : Function
    过滤函数
  • scope : Object
    （可选的）函数的作用域(默认是现在这个节点)
返回值：
  • void
TreeFilter
clear()
清理现在的过滤。注意：设置的过滤带有remove选项的不能被清理
清理现在的过滤。注意：设置的过滤带有remove选项的不能被清理
参数项：
  • None.
返回值：
  • void
TreeFilter

公共事件

这个类没有公告事件。


类Ext.tree.TreeLoader

包： | Exttree
定义的文件： | TreeLoader.js
类全称： | Ext.tree.TreeLoader
继承自于： | Ext.util.Observable
树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。返回值必须是以树格式的javascript数组。例如: A TreeLoader provides for lazy loading of an Ext.tree.TreeNode's child nodes from a specified URL. The response must be a JavaScript Array definition whose elements are node definition objects. eg:

    [{
        id: 1,
        text: 'A leaf Node',
        leaf: true
    },{
        id: 2,
        text: 'A folder Node',
        children: [{
            id: 3,
            text: 'A child Node',
            leaf: true
        }]
   }]

向服务端发送请求后，只有当展开时才会读取子节点信息。需要取值的节点id被传到服务端并用于产生正确子节点。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.

当需要传递更多的参数时，可以把一个事件句柄邦定在"beforeload"事件上，然后把数据放到TreeLoader的baseParams属性上： 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);
如上代码，将会传递一个该节点的，名为"category"的参数到服务端上。This would pass an HTTP parameter called "category" to the server containing the value of the Node's "category" attribute.

配置项

配置项 |  | 定义者
 | dataUrl : String 进行请求的URL。URL处返回节点对象的序列，表示要加载的子节点。Th... 进行请求的URL。URL处返回节点对象的序列，表示要加载的子节点。The URL from which to request a Json string which specifies an array of node definition objects representing the child nodes to be loaded. | TreeLoader
 | requestMethod : String 下载数据的HTTP请求方法（默认Ext.Ajaxmethod的值）。T... 下载数据的HTTP请求方法（默认Ext.Ajaxmethod的值）。The HTTP request method for loading data (defaults to the value of Ext.Ajaxmethod). | TreeLoader
 | url : String 相当于dataUrl。Equivalent to dataUrl. 相当于dataUrl。Equivalent to dataUrl. | TreeLoader
 | preloadChildren : Boolean 若为true，则loader在节点第一次访问时加载"children"... 若为true，则loader在节点第一次访问时加载"children"的属性。If set to true, the loader recursively loads "children" attributes when doing the first load on nodes. | TreeLoader
 | baseParams : Object （可选的）一个分别对每个节点进行参数传递的集合对象。(optional... （可选的）一个分别对每个节点进行参数传递的集合对象。(optional) An object containing properties which specify HTTP parameters to be passed to each request for child nodes. | TreeLoader
 | baseAttrs : Object （可选）一个对所有节点进行参数传递的集合对象。如果已经传递这个参数了，... （可选）一个对所有节点进行参数传递的集合对象。如果已经传递这个参数了，则他们优先。(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. | TreeLoader
 | uiProviders : Object （可选的）一个针对制定节点Ext.tree.TreeNodeUI进行参... （可选的）一个针对制定节点Ext.tree.TreeNodeUI进行参数传递的集合对象。如果传入了该uiProvider参数，返回string而非TreeNodeUI对象。(optional) An object containing properties which specify custom 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. | TreeLoader
 | clearOnLoad : Boolean （可选）默认为true。在读取数据前移除已存在的节点。(optiona... （可选）默认为true。在读取数据前移除已存在的节点。(optional) Default to true. Remove previously existing child nodes before loading. | TreeLoader
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
TreeLoader( Object config )
参数项：
  • config : Object
    该Treeloader的配置属性。A config object containing config properties.
返回值：
  • void
TreeLoader
load( Ext.tree.TreeNode node, Function callback )
从URL中读取树节点Ext.tree.TreeNode。本函数在节点展...
从URL中读取树节点Ext.tree.TreeNode。本函数在节点展开时自动调用，但也可以被用于reload节点（或是在clearOnLoad属性为false时增加新节点）。Load an 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 clearOnLoad option is false.)
参数项：
  • node : Ext.tree.TreeNode
  • callback : Function
返回值：
  • void
TreeLoader
createNode( Object attr )
覆盖此函数以自定义TreeNode的节点，或在创建的时刻修改节点的...

覆盖此函数以自定义TreeNode的节点，或在创建的时刻修改节点的属性 Override this function for custom TreeNode node implementation, or to modify the attributes at creation time.

Example:
new Ext.tree.TreePanel({
    ...
    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.call(this, attr);
        }
    }),
    ...
});
参数项：
  • attr : Object
    创建新节点的属性。The attributes from which to create the new node.
返回值：
  • void
TreeLoader
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeload()
在为子节点获取JSON文本进行网路请求之前触发。Fires befo...
在为子节点获取JSON文本进行网路请求之前触发。Fires before a network request is made to retrieve the Json text which specifies a node's children.
侦听器会传入以下的参数：
  • None.
 TreeLoader
load()
当节点加载成功时触发。Fires when the node has...
当节点加载成功时触发。Fires when the node has been successfuly loaded.
侦听器会传入以下的参数：
  • None.
 TreeLoader
loadexception()
当网路连接失败时触发。Fires if the network re...
当网路连接失败时触发。Fires if the network request failed.
侦听器会传入以下的参数：
  • None.
 TreeLoader


类Ext.tree.TreeNode

包： | Exttree
定义的文件： | TreeNode.js
类全称： | Ext.tree.TreeNode
继承自于： | Ext.data.Node

配置项

配置项 |  | 定义者
 | editable : Boolean False表示该节点不能够编辑的。Ext.tree.TreeEdito... False表示该节点不能够编辑的。Ext.tree.TreeEditor不能用（默认为true）。False to not allow this node to be edited by an Ext.tree.TreeEditor (defaults to true) | TreeNode
 | id : String 该节点的Id。如不指定一个，会生成一个。The id for this... 该节点的Id。如不指定一个，会生成一个。The id for this node. If one is not specified, one is generated. | Node
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | text: String 只读属性，该节点所显示的文本.可以用setText方法改变。Rea... 只读属性，该节点所显示的文本.可以用setText方法改变。Read-only. The text for this node. To change it use setText(). | TreeNode
 | disabled: Boolean 如果该节点为disabled那为true。True if this... 如果该节点为disabled那为true。True if this node is disabled. | TreeNode
 | hidden: Boolean True表示该节点市隐藏的。True if this node i... True表示该节点市隐藏的。True if this node is hidden. | TreeNode
 | ui: TreeNodeUI 这个节点的UI。Read-only. The UI for thi... 这个节点的UI。Read-only. The UI for this node | TreeNode
 | attributes: Object 节点属性。你可以在此添加任意的自定义的属性。The attribu... 节点属性。你可以在此添加任意的自定义的属性。The attributes supplied for the node. You can use this property to access any custom attributes you supplied. | Node
 | id: String 节点ID。The node id. 节点ID。The node id. | Node
 | childNodes: Array 此节点的所有子节点。All child nodes of this... 此节点的所有子节点。All child nodes of this node. | Node
 | parentNode: Node 此节点的父节点。The parent node for this ... 此节点的父节点。The parent node for this node. | Node
 | firstChild: Node 该节点下面最前一个子节点（直属的），null的话就表示这是没有子节... 该节点下面最前一个子节点（直属的），null的话就表示这是没有子节点的。The first direct child node of this node, or null if this node has no child nodes. | Node
 | lastChild: Node 该节点下面最后一个子节点（直属的），null的话就表示这是没有子节... 该节点下面最后一个子节点（直属的），null的话就表示这是没有子节点的。The last direct child node of this node, or null if this node has no child nodes. | Node
 | previousSibling: Node 该节点前面一个节点，同级的，null的话就表示这没有侧边节点。Th... 该节点前面一个节点，同级的，null的话就表示这没有侧边节点。The node immediately preceding this node in the tree, or null if there is no sibling node. | Node
 | nextSibling: Node 该节点后面一个节点，同级的，null的话就表示这没有侧边节点。Th... 该节点后面一个节点，同级的，null的话就表示这没有侧边节点。The node immediately following this node in the tree, or null if there is no sibling node. | Node

公共方法

方法 定义者
TreeNode( Object/String attributes )
参数项：
  • attributes : Object/String
    该节点的属性/配置对象，也可以是带有文本的一个字符串。The attributes/config for the node or just a string with the text for the node
返回值：
  • void
TreeNode
isExpanded() : Boolean
如果该节点被展开则返回true。Returns true if thi...
如果该节点被展开则返回true。Returns true if this node is expanded
参数项：
  • None.
返回值：
  • Boolean
TreeNode
getUI() : TreeNodeUI
返回该节点的UI对象。Returns the UI object fo...
返回该节点的UI对象。Returns the UI object for this node.
参数项：
  • None.
返回值：
  • TreeNodeUI
    树节点的用户界面对象。除非有另外指定uiProvider，否则这就是一个Ext.tree.TreeNodeUI实例。The object which is providing the user interface for this tree node. Unless otherwise specified in the uiProvider, this will be an instance of Ext.tree.TreeNodeUI
TreeNode
setText( String text )
设置该节点的显示文本。Sets the text for this node
设置该节点的显示文本。Sets the text for this node
参数项：
  • text : String
返回值：
  • void
TreeNode
select()
选取该节点所在树选择的选区模型。Triggers selection ...
选取该节点所在树选择的选区模型。Triggers selection of this node
参数项：
  • None.
返回值：
  • void
TreeNode
unselect()
取消选择该节点所在树的选区模型。Triggers deselectio...
取消选择该节点所在树的选区模型。Triggers deselection of this node
参数项：
  • None.
返回值：
  • void
TreeNode
isSelected() : Boolean
如果该节点被选中则返回true。Returns true if thi...
如果该节点被选中则返回true。Returns true if this node is selected
参数项：
  • None.
返回值：
  • Boolean
TreeNode
expand( Boolean deep, Boolean anim, Function callback )
展开这个节点。Expand this node.
展开这个节点。Expand this node.
参数项：
  • deep : Boolean
    （可选的）如果为true展开所有的子节点。(optional)True to expand all children as well
  • anim : Boolean
    （可选的）如果为false不启用动画效果。(optional)false to cancel the default animation
  • callback : 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.
返回值：
  • void
TreeNode
collapse( Boolean deep, Boolean anim )
展开该节点。Collapse this node.
展开该节点。Collapse this node.
参数项：
  • deep : Boolean
    （可选的）为true则也展开所有的子结点。(optional)True to collapse all children as well
  • anim : Boolean
    （可选的）如果为false不启用动画效果。(optional)false to cancel the default animation
返回值：
  • void
TreeNode
toggle()
轮回该节点的展开/收回状态。Toggles expanded/coll...
轮回该节点的展开/收回状态。Toggles expanded/collapsed state of the node
参数项：
  • None.
返回值：
  • void
TreeNode
ensureVisible( Function callback )
确保所有的父节点都被展开了（没理解这个函数的作用）。Ensures a...
确保所有的父节点都被展开了（没理解这个函数的作用）。Ensures all parent nodes are expanded, and if necessary, scrolls the node into view.
参数项：
  • callback : Function
    （可选的）节点隐藏后调用的函数。(optional) A function to call when the node has been made visible.
返回值：
  • void
TreeNode
expandChildNodes( Boolean deep )
展开所有的子节点。Expand all child nodes
展开所有的子节点。Expand all child nodes
参数项：
  • deep : Boolean
    如果为true，子节点如果还有子节点也将被展开。(optional)true if the child nodes should also expand their child nodes
返回值：
  • void
TreeNode
collapseChildNodes( Boolean deep )
收回所有的子节点。Collapse all child nodes
收回所有的子节点。Collapse all child nodes
参数项：
  • deep : Boolean
    如果为true，子节点如果还有子节点也将被收回。(optional)true if the child nodes should also collapse their child nodes
返回值：
  • void
TreeNode
disable()
禁用这个节点。Disables this node
禁用这个节点。Disables this node
参数项：
  • None.
返回值：
  • void
TreeNode
enable()
启用该节点。Enables this node
启用该节点。Enables this node
参数项：
  • None.
返回值：
  • void
TreeNode
Node( Object attributes )
参数项：
  • attributes : Object
    节点的属性/配置项。The attributes/config for the node
返回值：
  • void
Node
isLeaf() : Boolean
若节点是叶子节点的话返回true。Returns true if th...
若节点是叶子节点的话返回true。Returns true if this node is a leaf
参数项：
  • None.
返回值：
  • Boolean
Node
isLast() : Boolean
如果这个节点是其父节点下面的最后一个节点的话返回true。Return...
如果这个节点是其父节点下面的最后一个节点的话返回true。Returns true if this node is the last child of its parent
参数项：
  • None.
返回值：
  • Boolean
Node
isFirst() : Boolean
如果这个节点是其父节点下面的第一个节点的话返回true。Returns...
如果这个节点是其父节点下面的第一个节点的话返回true。Returns true if this node is the first child of its parent
参数项：
  • None.
返回值：
  • Boolean
Node
hasChildNodes() : Boolean
如果有子节点返回true。Returns true if this n...
如果有子节点返回true。Returns true if this node has one or more child nodes, else false.
参数项：
  • None.
返回值：
  • Boolean
Node
isExpandable() : Boolean
如果该节点有一个或多个的子节点，或其节点可展开的属性是明确制定为tru...
如果该节点有一个或多个的子节点，或其节点可展开的属性是明确制定为true的话返回true。Returns true if this node has one or more child nodes, or if the expandable node attribute is explicitly specified as true (see attributes), otherwise returns false.
参数项：
  • None.
返回值：
  • Boolean
Node
appendChild( Node/Array node ) : Node
在该节点里面最后的位置上插入节点，可以多个。Insert node(s...
在该节点里面最后的位置上插入节点，可以多个。Insert node(s) as the last child node of this node.
参数项：
  • node : Node/Array
    要加入的节点或节点数组。The node or Array of nodes to append
返回值：
  • Node
    如果是单个节点，加入后返回true，如果是数组返回null。The appended node if single append, or null if an array was passed
Node
removeChild( Node node ) : Node
从该节点中移除一个子节点。Removes a child node f...
从该节点中移除一个子节点。Removes a child node from this node.
参数项：
  • node : Node
    要移除的节点。The node to remove
返回值：
  • Node
    移除后的节点。The removed node
Node
insertBefore( Node node, Node refNode ) : Node
在当前节点的子节点的集合中，位于第二个节点之前插入节点（第一个参数）。...
在当前节点的子节点的集合中，位于第二个节点之前插入节点（第一个参数）。Inserts the first node before the second node in this nodes childNodes collection.
参数项：
  • node : Node
    要插入的节点。he node to insert
  • refNode : Node
    前面插入的节点（如果为null表示节点是追加的）。The node to insert before (if null the node is appended)
返回值：
  • Node
    插入的节点。The inserted node
Node
remove() : Node
从父节点上移除子节点。Removes this node from i...
从父节点上移除子节点。Removes this node from its parent
参数项：
  • None.
返回值：
  • Node
    this
Node
item( Number index ) : Node
指定索引，在自节点中查找匹配索引的节点。Returns the chi...
指定索引，在自节点中查找匹配索引的节点。Returns the child node at the specified index.
参数项：
  • index : Number
返回值：
  • Node
Node
replaceChild( Node newChild, Node oldChild ) : Node
把下面的某个子节点替换为其他节点。Replaces one child...
把下面的某个子节点替换为其他节点。Replaces one child node in this node with another.
参数项：
  • newChild : Node
    进来的节点。The replacement node
  • oldChild : Node
    去掉的节点。The node to replace
返回值：
  • Node
    去掉的节点。The replaced node
Node
indexOf( Node node ) : Number
返回某个子节点的索引。Returns the index of a c...
返回某个子节点的索引。Returns the index of a child node
参数项：
  • node : Node
    节点
返回值：
  • Number
    节点的索引或是-1表示找不到。The index of the node or -1 if it was not found
Node
getOwnerTree() : Tree
返回节点所在的树对象。Returns the tree this no...
返回节点所在的树对象。Returns the tree this node is in.
参数项：
  • None.
返回值：
  • Tree
Node
getDepth() : Number
返回该节点的深度（根节点的深度是0）。Returns depth of...
返回该节点的深度（根节点的深度是0）。Returns depth of this node (the root node has a depth of 0)
参数项：
  • None.
返回值：
  • Number
Node
setId( String id )
改变该节点的id Changes the id of this node.
改变该节点的id Changes the id of this node.
参数项：
  • id : String
    节点的新id。The new id for the node.
返回值：
  • void
Node
getPath( String attr ) : String
返回该节点的路径，以方便控制这个节点展开或选择。Returns the...
返回该节点的路径，以方便控制这个节点展开或选择。Returns the path for this node. The path can be used to expand or select this node programmatically.
参数项：
  • attr : String
    （可选的）路径采用的属性（默认为节点的id）。(optional) The attr to use for the path (defaults to the node's id)
返回值：
  • String
    路径。The path
Node
bubble( Function fn, Object scope, Array args )
从该节点开始逐层上报(Bubbles up)节点，上报过程中对每个节点...
从该节点开始逐层上报(Bubbles up)节点，上报过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数在某一个层次上返回false，上升将会停止。Bubbles up the tree from this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认为当前节点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional)The args to call the function with (default to passing the current node)
返回值：
  • void
Node
cascade( Function fn, Object scope, Array args )
从该节点开始逐层下报(Bubbles up)节点，上报过程中对每个节点...
从该节点开始逐层下报(Bubbles up)节点，上报过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数在某一个层次上返回false，下升到那个分支的位置将会停止。Cascades down the tree from this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的） 函数的作用域（默认为当前节点）。(optional) The scope of the function (defaults to current node)
  • args : Array
    （可选的） 调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional) The args to call the function with (default to passing the current node)
返回值：
  • void
Node
eachChild( Function fn, Object scope, Array args )
遍历该节点下的子节点，枚举过程中对每个节点执行指定的函数。函数的作用域...
遍历该节点下的子节点，枚举过程中对每个节点执行指定的函数。函数的作用域（this）既可是参数scope传入或是当前节点。函数的参数可经由args指定或当前节点，如果函数走到某处地方返回false，遍历将会停止。Interates the child nodes of this node, calling the specified function with each node. The scope (this) of function call will be the scope provided or the current 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.
参数项：
  • fn : Function
    要调用的函数。The function to call
  • scope : Object
    （可选的） 函数的作用域（默认为当前节点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的） 调用的函数要送入的参数（不指定就默认为遍历过程中当前的节点）。(optional)The args to call the function with (default to passing the current node)
返回值：
  • void
Node
findChild( String attribute, Mixed value ) : Node
根据送入的值，如果子节点身上指定属性的值是送入的值，就返回那个节点。F...
根据送入的值，如果子节点身上指定属性的值是送入的值，就返回那个节点。Finds the first child that has the attribute with the specified value.
参数项：
  • attribute : String
    属性名称。The attribute name
  • value : Mixed
    要查找的值。The value to search for
返回值：
  • Node
    已找到的子节点或null表示找不到。The found child or null if none was found
Node
findChildBy( Function fn, Object scope ) : Node
通过自定义的函数查找子节点，找到第一个合适的就返回。要求的条件是函数返...
通过自定义的函数查找子节点，找到第一个合适的就返回。要求的条件是函数返回true。Finds the first child by a custom function. The child matches if the function passed returns true.
参数项：
  • fn : Function
    函数
  • scope : Object
    函数作用域（可选的）。(optional)
返回值：
  • Node
    找到的子元素或null就代表没找到。The found child or null if none was found
Node
sort( Function fn, Object scope )
用自定义的排序函数对节点的子函数进行排序。Sorts this nod...
用自定义的排序函数对节点的子函数进行排序。Sorts this nodes children using the supplied sort function
参数项：
  • fn : Function
    函数
  • scope : Object
    函数（可选的）。(optional)
返回值：
  • void
Node
contains( Node node ) : Boolean
返回true表示为该节点是送入节点的祖先节点（无论在哪那一级的）。Re...
返回true表示为该节点是送入节点的祖先节点（无论在哪那一级的）。Returns true if this node is an ancestor (at any point) of the passed node.
参数项：
  • node : Node
    节点
返回值：
  • Boolean
Node
isAncestor( Node node ) : Boolean
返回true表示为送入的节点是该的祖先节点（无论在哪那一级的）。Ret...
返回true表示为送入的节点是该的祖先节点（无论在哪那一级的）。Returns true if the passed node is an ancestor (at any point) of this node.
参数项：
  • node : Node
    节点
返回值：
  • Boolean
Node
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
textchange()
当这个节点的显示文本被改变时触发。Fires when the te...
当这个节点的显示文本被改变时触发。Fires when the text for this node is changed
侦听器会传入以下的参数：
  • None.
 TreeNode
beforeexpand()
当该节点被展开之前触发，返回false将取消事件。Fires bef...
当该节点被展开之前触发，返回false将取消事件。Fires before this node is expanded, return false to cancel.
侦听器会传入以下的参数：
  • None.
 TreeNode
beforecollapse()
当该节点被收回之前触发，返回false将取消事件。Fires bef...
当该节点被收回之前触发，返回false将取消事件。Fires before this node is collapsed, return false to cancel.
侦听器会传入以下的参数：
  • None.
 TreeNode
expand()
当该节点被展开时触发。Fires when this node is...
当该节点被展开时触发。Fires when this node is expanded
侦听器会传入以下的参数：
  • None.
 TreeNode
disabledchange()
当该节点的disabled状态被改变时触发。Fires when t...
当该节点的disabled状态被改变时触发。Fires when the disabled status of this node changes
侦听器会传入以下的参数：
  • None.
 TreeNode
collapse()
当该节点被收回时触发。Fires when this node is...
当该节点被收回时触发。Fires when this node is collapsed
侦听器会传入以下的参数：
  • None.
 TreeNode
beforeclick()
单击处理之前触发，返回false将停止默认的动作。Fires bef...
单击处理之前触发，返回false将停止默认的动作。Fires before click processing. Return false to cancel the default action.
侦听器会传入以下的参数：
  • None.
 TreeNode
click()
当节点被点击时触发。Fires when this node is ...
当节点被点击时触发。Fires when this node is clicked
侦听器会传入以下的参数：
  • None.
 TreeNode
checkchange()
当节点的checkbox的状态被改变时触发。Fires when a...
当节点的checkbox的状态被改变时触发。Fires when a node with a checkbox's checked property changes
侦听器会传入以下的参数：
  • None.
 TreeNode
dblclick()
当节点被双点击时触发。Fires when this node is...
当节点被双点击时触发。Fires when this node is double clicked
侦听器会传入以下的参数：
  • None.
 TreeNode
contextmenu()
当该节点被右击的时候触发。Fires when this node ...
当该节点被右击的时候触发。Fires when this node is right clicked
侦听器会传入以下的参数：
  • None.
 TreeNode
beforechildrenrendered()
当节点的子节点被渲染之前触发。Fires right before ...
当节点的子节点被渲染之前触发。Fires right before the child nodes for this node are rendered
侦听器会传入以下的参数：
  • None.
 TreeNode
append()
当有新的子节点添加时触发。Fires when a new chil...
当有新的子节点添加时触发。Fires when a new child node is appended
侦听器会传入以下的参数：
  • None.
 Node
remove()
当有子节点被移出的时候触发。Fires when a child n...
当有子节点被移出的时候触发。Fires when a child node is removed
侦听器会传入以下的参数：
  • None.
 Node
move()
当该节点移动到树中的新位置触发。Fires when this no...
当该节点移动到树中的新位置触发。Fires when this node is moved to a new location in the tree
侦听器会传入以下的参数：
  • None.
 Node
insert()
当有子节点被插入的触发。Fires when a new child...
当有子节点被插入的触发。Fires when a new child node is inserted.
侦听器会传入以下的参数：
  • None.
 Node
beforeappend()
当有新的子节点被添加时触发，返回false就取消添加。Fires b...
当有新的子节点被添加时触发，返回false就取消添加。Fires before a new child is appended, return false to cancel the append.
侦听器会传入以下的参数：
  • None.
 Node
beforeremove()
当有子节点被移出的时候触发，返回false就取消移出。Fires b...
当有子节点被移出的时候触发，返回false就取消移出。Fires before a child is removed, return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Node
beforemove()
当该节点移动到树下面的另外一个新位置的时候触发。返回false就取消...
当该节点移动到树下面的另外一个新位置的时候触发。返回false就取消移动。Fires before this node is moved to a new location in the tree. Return false to cancel the move.
侦听器会传入以下的参数：
  • None.
 Node
beforeinsert()
当有新的节点插入时触发，返回false就取消插入。Fires bef...
当有新的节点插入时触发，返回false就取消插入。Fires before a new child is inserted, return false to cancel the insert.
侦听器会传入以下的参数：
  • None.
 Node


类Ext.tree.TreeNodeUI

包： | Exttree
定义的文件： | TreeNodeUI.js
类全称： | Ext.tree.TreeNodeUI
继承自于： | Object
为实现Ext树节点UI而提供的类。TreeNode的UI是与tree的实现相分离，以方便自定义tree节点的外观。

不应该直接实例化该类，要制定Tree的用户界面，你应该继承这个类。

可通过Ext.tree.TreeNodegetUI方法访问Ext TreeNode的用户界面组件。

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
addClass( String/Array className )
为节点的UI元素添加一到多个CSS样式类。重复的样式类会省略。
为节点的UI元素添加一到多个CSS样式类。重复的样式类会省略。
参数项：
  • className : String/Array
    添加的样式类或数组。
返回值：
  • void
TreeNodeUI
removeClass( String/Array className )
移除节点的一到多个CSS样式类。
移除节点的一到多个CSS样式类。
参数项：
  • className : String/Array
    待删除的样式类或数组。
返回值：
  • void
TreeNodeUI
hide()
隐藏本节点。
隐藏本节点。
参数项：
  • None.
返回值：
  • void
TreeNodeUI
show()
显示本节点。
显示本节点。
参数项：
  • None.
返回值：
  • void
TreeNodeUI
toggleCheck( Boolean value )
设置树节点的checked状态值到传入的值，或，如果没有传入值，就轮回...
设置树节点的checked状态值到传入的值，或，如果没有传入值，就轮回选中的状态。如果节点没有checkbox，这将不会有效果。
参数项：
  • value : Boolean
    （可选的）新的选中状态。
返回值：
  • void
TreeNodeUI
getAnchor() : HtmlElement
返回焦点所在的节点UI的<a> 元素。
返回焦点所在的节点UI的<a> 元素。
参数项：
  • None.
返回值：
  • HtmlElement
    DOM anchor元素。
TreeNodeUI
getTextEl() : HtmlNode
返回文本节点
返回文本节点
参数项：
  • None.
返回值：
  • HtmlNode
    DOM格式的文本文字
TreeNodeUI
getIconEl() : HtmlElement
返回图标<img>元素
返回图标<img>元素
参数项：
  • None.
返回值：
  • HtmlElement
    DOM格式的图片元素
TreeNodeUI
isChecked() : Boolean
返回节点的checked status。如果节点没有渲染checkbo...
返回节点的checked status。如果节点没有渲染checkbox，返回false。
参数项：
  • None.
返回值：
  • Boolean
    The checked flag.
TreeNodeUI

公共事件

这个类没有公告事件。


类Ext.tree.TreePanel

包： | Exttree
定义的文件： | TreePanel.js
类全称： | Ext.tree.TreePanel
继承自于： | Ext.Panel

TreePanel为树状的数据结构提供了树状结构UI表示层。

TreeNodes是加入到TreePanel的节点，可采用其attributes属性 来定义程序的元数据

TreePanel渲染之前必须有一个root根节点的对象。除了可以用root配置选项指定外，还可以使用setRootNode的方法。

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 ...
    }]
});

配置项

配置项 定义者
pathSeparator : String
分离路径的标识符（默认为‘/’）
分离路径的标识符（默认为‘/’）
TreePanel
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | root: Ext.tree.TreeNode 树的根节点对象 树的根节点对象 | TreePanel
 | dropZone: Ext.tree.TreeDropZone 若干置下有效的话，tree所用的dropZone ... 若干置下有效的话，tree所用的dropZone | TreePanel
 | dragZone: Ext.tree.TreeDragZone 若干拖动有效的话，tree所用的dragZone ... 若干拖动有效的话，tree所用的dragZone | TreePanel
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
TreePanel( Object config )
参数项：
  • config : Object
    配置项对象
返回值：
  • void
TreePanel
getRootNode() : Node
返回树的根节点
返回树的根节点
参数项：
  • None.
返回值：
  • Node
TreePanel
setRootNode( Node node ) : Node
在初始化过程中设置该树的根节点 Sets the root node...
在初始化过程中设置该树的根节点 Sets the root node for this tree during initialization.
参数项：
  • node : Node
返回值：
  • Node
TreePanel
getNodeById( String id ) : Node
返回树的ID
返回树的ID
参数项：
  • id : String
    ID
返回值：
  • Node
TreePanel
getChecked( String attribute, TreeNode startNode ) : Array
返回选中的节点，或已选中的节点的特定的属性（例如：“id”）
返回选中的节点，或已选中的节点的特定的属性（例如：“id”）
参数项：
  • attribute : String
    （可选的）默认为null（返回实际节点）
  • startNode : TreeNode
    （可选的）开始的节点对象 to start from，默认为根节点
返回值：
  • Array
TreePanel
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getLoader() : Ext.tree.TreeLoader
返回该树的 Ext.tree.TreeLoader对象
返回该树的 Ext.tree.TreeLoader对象
参数项：
  • None.
返回值：
  • Ext.tree.TreeLoader
    该树的TreeLoader
TreePanel
expandAll()
展开所有节点
展开所有节点
参数项：
  • None.
返回值：
  • void
TreePanel
collapseAll()
闭合所有节点
闭合所有节点
参数项：
  • None.
返回值：
  • void
TreePanel
getSelectionModel() : TreeSelectionModel
返回这个treePanel所用的选区模型
返回这个treePanel所用的选区模型
参数项：
  • None.
返回值：
  • TreeSelectionModel
    TreePanel用着的选区模型
TreePanel
expandPath( String path, String attr, Function callback )
展开指定的路径。路径可以从Ext.data.NodegetPath对象上获取
展开指定的路径。路径可以从Ext.data.NodegetPath对象上获取
参数项：
  • path : String
    路径
  • attr : String
    （可选的）路径中使用的属性（参阅Ext.data.NodegetPath了解个功能）
  • callback : Function
    （可选的）当展开完成时执行的回调。回调执行时会有以下两个参数 (bSuccess, oLastNode)bSuccess表示展开成功而oLastNode就表示展开的最后一个节点
返回值：
  • void
TreePanel
selectPath( String path, String attr, Function callback )
选择树的指定的路径。路径可以从Ext.data.NodegetPath...
选择树的指定的路径。路径可以从Ext.data.NodegetPath对象上获取
参数项：
  • path : String
    路径
  • attr : String
    （可选的）路径中使用的属性（参阅Ext.data.NodegetPath了解个功能）
  • callback : Function
    （可选的）当展开完成时执行的回调。回调执行时会有以下两个参数 (bSuccess, oLastNode)bSuccess表示选区已成功创建而oLastNode就表示展开的最后一个节点
返回值：
  • void
TreePanel
getTreeEl() : Ext.Element
返回tree所属的元素
返回tree所属的元素
参数项：
  • None.
返回值：
  • Ext.Element
    元素
TreePanel
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
append()
当新节点添加到树中的某个节点作为子节点时触发 Fires when...
当新节点添加到树中的某个节点作为子节点时触发 Fires when a new child node is appended to a node in this tree.
侦听器会传入以下的参数：
  • None.
 TreePanel
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
movenode()
树中的某个节点被移除到新位置时触发 Fires when a no...
树中的某个节点被移除到新位置时触发 Fires when a node is moved to a new location in the tree
侦听器会传入以下的参数：
  • None.
 TreePanel
insert()
当有一个新的集合插入到该树的某个节点上触发 Fires when ...
当有一个新的集合插入到该树的某个节点上触发 Fires when a new child node is inserted in a node in this tree.
侦听器会传入以下的参数：
  • None.
 TreePanel
beforeappend()
当这棵树有下级项（child）被被添加到另外一个地方的时候触发，若有...
当这棵树有下级项（child）被被添加到另外一个地方的时候触发，若有false返回就取消添加 Fires before a new child is appended to a node in this tree, return false to cancel the append.
侦听器会传入以下的参数：
  • None.
 TreePanel
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
beforemovenode()
Fires before a node is moved to a ...
Fires before a node is moved to a new location in the tree. Return false to cancel the move. 当这棵树有节点被被移动到另外一个地方的时候触发，若有false返回就取消移动
侦听器会传入以下的参数：
  • None.
 TreePanel
beforeinsert()
当这棵树有新项（new child）被插入的时候触发，若有false...
当这棵树有新项（new child）被插入的时候触发，若有false返回就取消插入。Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
侦听器会传入以下的参数：
  • None.
 TreePanel
beforeload()
在节点加载之前触发，若有false返回就取消事件。Fires bef...
在节点加载之前触发，若有false返回就取消事件。Fires before a node is loaded, return false to cancel
侦听器会传入以下的参数：
  • None.
 TreePanel
load()
在节点加载后触发。Fires when a node is loaded
在节点加载后触发。Fires when a node is loaded
侦听器会传入以下的参数：
  • None.
 TreePanel
textchange()
在节点的文本修过后触发 Fires when the text f...
在节点的文本修过后触发 Fires when the text for a node is changed
侦听器会传入以下的参数：
  • None.
 TreePanel
beforeexpandnode()
在节点展开之前触发，若有false返回就取消事件 Fires be...
在节点展开之前触发，若有false返回就取消事件 Fires before a node is expanded, return false to cancel.
侦听器会传入以下的参数：
  • None.
 TreePanel
beforecollapsenode()
在节点闭合之前触发，若有false返回就取消事件 Fires be...
在节点闭合之前触发，若有false返回就取消事件 Fires before a node is collapsed, return false to cancel.
侦听器会传入以下的参数：
  • None.
 TreePanel
expandnode()
当节点展开时触发 Fires when a node is exp...
当节点展开时触发 Fires when a node is expanded
侦听器会传入以下的参数：
  • None.
 TreePanel
disabledchange()
当节点的disabled状态改变后触发 Fires when th...
当节点的disabled状态改变后触发 Fires when the disabled status of a node changes
侦听器会传入以下的参数：
  • None.
 TreePanel
collapsenode()
当节点闭合后触发 Fires when a node is col...
当节点闭合后触发 Fires when a node is collapsed
侦听器会传入以下的参数：
  • None.
 TreePanel
beforeclick()
当单击在某个节点进行之前触发。返回false则取消默认的动作。Fir...
当单击在某个节点进行之前触发。返回false则取消默认的动作。Fires before click processing on a node. Return false to cancel the default action.
侦听器会传入以下的参数：
  • None.
 TreePanel
click()
当节点单击时触发 Fires when a node is cli...
当节点单击时触发 Fires when a node is clicked
侦听器会传入以下的参数：
  • None.
 TreePanel
checkchange()
当一个带有checkbox控件的节点的checked属性被改变时触发...
当一个带有checkbox控件的节点的checked属性被改变时触发 Fires when a node with a checkbox's checked property changes
侦听器会传入以下的参数：
  • None.
 TreePanel
dblclick()
当节点双击时触发 Fires when a node is dou...
当节点双击时触发 Fires when a node is double clicked
侦听器会传入以下的参数：
  • None.
 TreePanel
contextmenu()
当节点被右击时触发 Fires when a node is ri...
当节点被右击时触发 Fires when a node is right clicked
侦听器会传入以下的参数：
  • None.
 TreePanel
beforechildrenrendered()
就在节点的子节点被渲染之前触发 Fires right befor...
就在节点的子节点被渲染之前触发 Fires right before the child nodes for a node are rendered
侦听器会传入以下的参数：
  • None.
 TreePanel
startdrag()
Fires when a node starts being dra...
Fires when a node starts being dragged 当节点开始拖动时触发
侦听器会传入以下的参数：
  • None.
 TreePanel
enddrag()
Fires when a drag operation is com...
Fires when a drag operation is complete 当一次拖动操作完成后触发
侦听器会传入以下的参数：
  • None.
 TreePanel
dragdrop()
Fires when a dragged node is dropp...
Fires when a dragged node is dropped on a valid DD target 当一个拖动节点在一个有效的DD目标上置下时触发
侦听器会传入以下的参数：
  • None.
 TreePanel
beforenodedrop()
当一个DD对象在置下到某个节点之前触发，用于预处理（preproce...
当一个DD对象在置下到某个节点之前触发，用于预处理（preprocessing） 返回false则取消置下 传入的dropEvent处理函数有以下的属性：
  • tree - TreePanel对象
  • target - 投下的节点对象（目标）
  • data - 拖动的数据源
  • point - 投下的方式－添加、上方或下方
  • source - 拖动源
  • rawEvent - 原始鼠标事件
  • dropNode - 由源提供的置下节点，或在该对象设置你要插入的节点
  • cancel - 设置为true表示签名投下为不允许
侦听器会传入以下的参数：
  • None.
 TreePanel
nodedrop()
当树节点有一个DD对象被投放后触发。传入的dropEvent处理函数...
当树节点有一个DD对象被投放后触发。传入的dropEvent处理函数有以下的属性：
  • tree - TreePanel对象
  • target - 投下的节点对象（目标）
  • data - 拖动的数据源
  • point - 投下的方式－添加、上方或下方
  • source - 拖动源
  • rawEvent - 原始鼠标事件
  • dropNode - 投下的节点
侦听器会传入以下的参数：
  • None.
 TreePanel
nodedragover()
当树节点成为拖动目标时触发，返回false签名这次置下将不允许。传入...
当树节点成为拖动目标时触发，返回false签名这次置下将不允许。传入的dropEvent处理函数有以下的属性：
  • tree - TreePanel对象
  • target - 投下的节点对象（目标）
  • data - 拖动的数据源
  • point - 投下的方式－添加、上方或下方
  • source - 拖动源
  • rawEvent - 原始鼠标事件
  • dropNode - 由源提供的投下节点
  • cancel - 设置为true表示签名投下为不允许
侦听器会传入以下的参数：
  • None.
 TreePanel
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.tree.TreeSorter

包： | Exttree
定义的文件： | TreeSorter.js
类全称： | Ext.tree.TreeSorter
继承自于： | Object
提供一个可排序节点的Tree面板。

配置项

配置项 |  | 定义者
 | sortType : Function 在排序之前可以写一个强转函数用来转换节点的值 在排序之前可以写一个强转函数用来转换节点的值 | TreeSorter

公告属性

这个类没有公告属性。

公共方法

方法 定义者
TreeSorter( TreePanel tree, Object config )
参数项：
  • tree : TreePanel
  • config : Object
返回值：
  • void
TreeSorter

公共事件

这个类没有公告事件。


类Ext.Updater.BasicRenderer

包： | ExtUpdater
定义的文件： | UpdateManager.js
类全称： | Ext.Updater.BasicRenderer
继承自于： | Object
默认的内容渲染器。使用responseText更新元素的innerHTML属性。

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
render( Ext.Element el, Object response, Updater updateManager, Function callback )
当事务完成并准备更新元素的时候调用此方法。BasicRenderer ...
当事务完成并准备更新元素的时候调用此方法。BasicRenderer 使用 responseText 更新元素的 innerHTML 属性。如想要指定一个定制的渲染器（如：XML 或 JSON），使用“render(el, response)”方法创建一个对象， 并通过setRenderer方法传递给UpdateManager。
参数项：
  • el : Ext.Element
    所渲染的元素
  • response : Object
    XMLHttpRequest对象
  • updateManager : Updater
    调用的UpdateManager对象
  • callback : Function
    如果loadScripts属性为true时，UpdateManager对象需要指定一个回调函数
返回值：
  • void
BasicRenderer

公共事件

这个类没有公告事件。


类Ext.Updater.defaults

包： | ExtUpdater
定义的文件： | UpdateManager.js
类全称： | Ext.Updater.defaults
继承自于： | Object
UpdateManager组件中可定制的属性，这里是默认值集合。

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : String 加载指示器显示的内容（默认为'<div class="loa... 加载指示器显示的内容（默认为'<div class="loading-indicator">Loading...</div>'） | defaults

公共方法

方法 定义者
updateElement( Mixed el, String url, String/Object params, Object options )
静态的快捷方法。这个方法已经是过时的，推荐使用el.load({url...
静态的快捷方法。这个方法已经是过时的，推荐使用el.load({url:'foo.php', ...})。Usage:
Ext.Updater.updateElement("my-div", "stuff.php");
参数项：
  • el : Mixed
    The element to update
  • url : String
    The url
  • params : String/Object
    (optional) Url encoded param string or an object of name/value pairs
  • options : Object
    (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
返回值：
  • void
defaults

公共事件

这个类没有公告事件。


类Ext.Updater

包： | Ext
定义的文件： | UpdateManager.js
类全称： | Ext.Updater
继承自于： | Ext.util.Observable
为元素对象提供Ajax式更新。

用法：

 // 从Ext.Element对象上获取Updater
 var el = Ext.get("foo");
 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");

 // 或直接声明（返回相同的UpdateManager实例）
 var mgr = new Ext.Updater("myElementId");
 mgr.startAutoRefresh(60, "http://myserver.com/index.php");
 mgr.on("update", myFcnNeedsToKnow);

   // 用快捷的方法在元素上直接访问
   Ext.get("foo").load({
        url: "bar.php",
        scripts: true,
        params: "param1=foo&param2=bar",
        text: "Loading Foo..."
   });

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

属性 |  | 定义者
 | : Function Delegate for formUpdate() preboun... Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments | Updater
 | sslBlankUrl: String Blank page URL to use with SSL fi... Blank page URL to use with SSL file uploads (defaults to Ext.Updater.defaultssslBlankUrl). | Updater
 | disableCaching: Boolean Whether to append unique paramete... Whether to append unique parameter on get request to disable caching (defaults to Ext.Updater.defaultsdisableCaching). | Updater
 | indicatorText: String Text for loading indicator (defau... Text for loading indicator (defaults to Ext.Updater.defaultsindicatorText). | Updater
 | showLoadIndicator: String Whether to show indicatorText whe... Whether to show indicatorText when loading (defaults to Ext.Updater.defaultsshowLoadIndicator). | Updater
 | timeout: Number Timeout for requests or form post... Timeout for requests or form posts in seconds (defaults to Ext.Updater.defaultstimeout). | Updater
 | loadScripts: Boolean True to process scripts in the ou... True to process scripts in the output (defaults to Ext.Updater.defaultsloadScripts). | Updater

公共方法

方法 定义者
Updater( Mixed el, Boolean forceNew )
参数项：
  • el : Mixed
    被更新的元素
  • forceNew : Boolean
    （可选的） 默认下，构造器会检查传入之元素是否有UpdateManager，如果有的话它返回该实例，也会跳过检查（继承类时有用）。
返回值：
  • void
Updater
transaction()
Transaction object of current execu...
Transaction object of current executing transaction
参数项：
  • None.
返回值：
  • void
Updater
renderer()
The renderer for this Updater. Defa...
The renderer for this Updater. Defaults to Ext.Updater.BasicRenderer.
参数项：
  • None.
返回值：
  • void
Updater
getEl() : Ext.Element
获取当前UpdateManager所绑定的元素
获取当前UpdateManager所绑定的元素
参数项：
  • None.
返回值：
  • Ext.Element
    元素
Updater
NB( Object/String/Function url, String/Object params, Function callback, Boolean discardUrl )
发起一个的异步请求，然后根据响应的response更新元素。如不指定使...
发起一个的异步请求，然后根据响应的response更新元素。如不指定使用GET，否则POST。
参数项：
  • url : Object/String/Function
    （可选的）请求的url或是能够返回url的函数（默认为最后使用的url），也可以是一个对象，包含下列可选项：
  • params : String/Object
    （可选的） 提交的参数，为可url编码的字符串"¶m1=1¶m2=2"，也可以是对象的形式{param1: 1, param2: 2}
  • callback : Function
    （可选的） Callback 事务完成后执行的回调（带参数oElement, bSuccess）
  • discardUrl : Boolean
    （可选的） 默认情况下，完成更新后，最后一次使用的url会保存到defaultUrl属性 该参数为true的话，就不会保存。
返回值：
  • void
Updater
update( Object options )
发起一个的异步请求，然后根据响应的response更新元素。如不指定使...
发起一个的异步请求，然后根据响应的response更新元素。如不指定使用GET，否则POST。

NB: 根据异步请求远端服务器的特性，此函数执行后元素不会立即被更新。要处理返回的数据，使用回调选项，或指定update事件句柄
参数项：
  • options : Object
    一个配置项对象可以包含下列属性：
    • url : String/Function

      The URL to request or a function which returns the URL.

    • method : String

      The HTTP method to use. Defaults to POST if params are present, or GET if not.

    • params : String/Object/Function

      The parameters to pass to the server. 传到服务器的参数。这可以字符串（未urlencoded亦可），或代表参数的对象，或返回对象的函数。

    • scripts : Boolean

      If true any <script> tags embedded in the response text will be extracted and executed. If this option is specified, the callback will be called after the execution of the scripts.

    • callback : Function

      接收到服务器的响应后，执行的回调函数。该函数带下列的参数：

      • el : Ext.Element

        被更新的元素

      • success : Boolean

        True表示成功，false表示失败。

      • response : XMLHttpRequest

        进行更新的那个XMLHttpRequest对象

    • scope : Object

      The scope in which to execute the callback 回调函数所在的作用域（this所指向的引用）。如果 params 选项是一个函数，那么这个作用域也用于该函数。

    • discardUrl : Boolean

      If not passed as false the URL of this request becomes the default URL for this Updater object, and will be subsequently used in refresh calls.（可选的） 默认情况下，完成更新后，最后一次使用的url会保存到defaultUrl属性 该参数为true的话，就不会保存。

    • timeout : Number

      The timeout to use when waiting for a response.

    • nocache : Boolean

      Only needed for GET requests, this option causes an extra, generated parameter to be passed to defeat caching.

    For example:

返回值：
  • void
Updater
formUpdate( String/HTMLElement form, String url, Boolean reset, Function callback )
执行表单的异步请求，然后根据响应response更新元素。Perfor...

执行表单的异步请求，然后根据响应response更新元素。Performs an async form post, updating this element with the response. 表单若有enctype="multipart/form-data"的属性，即被认为是文件上传。If the form has the attribute enctype="multipart/form-data", it assumes it's a file upload. SSL文件上传应使用this.sslBlankUrl以阻止IE的安全警告。Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.

不能通过常规的“Ajax”方法来上传文件，XMLHttpRequests是不能为处理二进制文件服务的。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.

参数项：
  • form : String/HTMLElement
    表单元素或表单idThe form Id or form element
  • url : String
    （可选的） 表单提交的url。如忽略则采用表单的action属性(optional) The url to pass the form to. If omitted the action attribute on the form will be used.
  • reset : Boolean
    （可选的） 完成更新后是否试着将表单复位(optional) Whether to try to reset the form after the update
  • callback : Function
    （可选的） 事务完成后执行的回调，回调带下列参数：(optional) Callback when transaction is complete. The following parameters are passed:
    • el : Ext.Element

      被更新的元素The Element being updated.

    • success : Boolean

      True表示成功，false表示失败True for success, false for failure.

    • response : XMLHttpRequest

      进行更新的那个XMLHttpRequest对象The XMLHttpRequest which processed the update.

返回值：
  • void
Updater
refresh( Function callback )
根据最后一次使用的url，或属性defaultUrl，刷新元素。如果未...
根据最后一次使用的url，或属性defaultUrl，刷新元素。如果未发现url，则立即返回。
参数项：
  • callback : Function
    （可选的） Callback 事务完成后，执行的回调（带参数oElement, bSuccess）
返回值：
  • void
Updater
startAutoRefresh( Number interval, String/Function url, String/Object params, Function callback, Boolean refreshNow )
设置该元素自动刷新。
设置该元素自动刷新。
参数项：
  • interval : Number
    更新频率（单位：秒）
  • url : String/Function
    （可选的） 请求的url或是能够返回url的函数（默认为最后使用那个的url）
  • params : String/Object
    （可选的） 提交的参数，为可url编码的字符串"¶m1=1¶m2=2"，也可是对象的形式{param1: 1, param2: 2}
  • callback : Function
    （可选的） Callback 事务完成后执行的回调（带参数oElement, bSuccess）
  • refreshNow : Boolean
    （可选的） 是否立即执行更新，或等待下一次更新
返回值：
  • void
Updater
stopAutoRefresh()
停止该元素的自动刷新
停止该元素的自动刷新
参数项：
  • None.
返回值：
  • void
Updater
showLoading()
把元素换成“加载中”的状态，可重写该方法执行自定义的动作。
把元素换成“加载中”的状态，可重写该方法执行自定义的动作。
参数项：
  • None.
返回值：
  • void
Updater
setRenderer( Object renderer )
为这次更新设置内容渲染器。参阅Ext.Updater.BasicRen...
为这次更新设置内容渲染器。参阅Ext.Updater.BasicRendererrender的更多资料。
参数项：
  • renderer : Object
    实现render()的对象
返回值：
  • void
Updater
getRenderer() : Object
返回Updater当前的内容渲染器。参阅Ext.Updater.Bas...
返回Updater当前的内容渲染器。参阅Ext.Updater.BasicRendererrender以了解更多。Returns the current content renderer for this Updater. See Ext.Updater.BasicRendererrender for more details.
参数项：
  • None.
返回值：
  • Object
Updater
setDefaultUrl( String/Function defaultUrl )
为这次更新设置defaultUrl
为这次更新设置defaultUrl
参数项：
  • defaultUrl : String/Function
    URL或是能返回的URL的函数
返回值：
  • void
Updater
abort()
取消执行事务
取消执行事务
参数项：
  • None.
返回值：
  • void
Updater
isUpdating() : Boolean
当更新进行时返回true。
当更新进行时返回true。
参数项：
  • None.
返回值：
  • Boolean
Updater
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
beforeupdate()
在一个更新开始之前触发，如在事件句柄中返回false即意味着取消这次更新。
在一个更新开始之前触发，如在事件句柄中返回false即意味着取消这次更新。
侦听器会传入以下的参数：
  • None.
 Updater
update()
当更新成功后触发
当更新成功后触发
侦听器会传入以下的参数：
  • None.
 Updater
failure()
当更新失败后触发
当更新失败后触发
侦听器会传入以下的参数：
  • None.
 Updater


类Ext.util.ClickRepeater

包： | Extutil
定义的文件： | ClickRepeater.js
类全称： | Ext.util.ClickRepeater
继承自于： | Ext.util.Observable
适用于任何元素的包装类。当鼠标按下时触发一个“单击”的事件。可在配置项中设置间隔时间，默认是20毫秒。可选地，按下的过程中可能会加入一个CSS类。

配置项

配置项 |  | 定义者
 | stopDefault : Boolean True:停止默认的单击事件。 True:停止默认的单击事件。 | ClickRepeater
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
ClickRepeater( String/HTMLElement/Element el, Object config )
参数项：
  • el : String/HTMLElement/Element
    侦听的函数。
  • config : Object
返回值：
  • void
ClickRepeater
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
mousedown()
当鼠标按下的时候触发。Fires when the mouse but...
当鼠标按下的时候触发。Fires when the mouse button is depressed.
侦听器会传入以下的参数：
  • None.
 ClickRepeater
click()
当元素被按下接受到按下的消息的时候出发，比mousedown事件慢。F...
当元素被按下接受到按下的消息的时候出发，比mousedown事件慢。Fires on a specified interval during the time the element is pressed.
侦听器会传入以下的参数：
  • None.
 ClickRepeater
mouseup()
当鼠标释放后触发。Fires when the mouse key i...
当鼠标释放后触发。Fires when the mouse key is released.
侦听器会传入以下的参数：
  • None.
 ClickRepeater


类Ext.util.Cookies

包： | Extutil
定义的文件： | Cookies.js
类全称： | Ext.util.Cookies
继承自于： | Object
控制Cookies的类

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

这个类没有公告方法。

公共事件

这个类没有公告事件。


类Ext.util.CSS

包： | Extutil
定义的文件： | CSS.js
类全称： | Ext.util.CSS
继承自于： | Object
操控CSS规则的工具类 @singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
createStyleSheet( String cssText ) : StyleSheet
动态生成样式表。用style标签围绕样式后加入到文档头部中。
动态生成样式表。用style标签围绕样式后加入到文档头部中。
参数项：
  • cssText : String
    包含css的文本
返回值：
  • StyleSheet
CSS
removeStyleSheet( String id )
由id移除样式或连接
由id移除样式或连接
参数项：
  • id : String
    标签的ID
返回值：
  • void
CSS
swapStyleSheet( String id, String url )
动态交换现有的样式，指向新的一个
动态交换现有的样式，指向新的一个
参数项：
  • id : String
    要移除的现有链接标签的ID
  • url : String
    要包含新样式表的href
返回值：
  • void
CSS
refreshCache() : Object
如果动态地加入样式表，刷新样式cache。
如果动态地加入样式表，刷新样式cache。
参数项：
  • None.
返回值：
  • Object
    由选择器索引的样式对象（hash）
CSS
getRules( Boolean refreshCache ) : Object
获取文档内的所有的CSS rules
获取文档内的所有的CSS rules
参数项：
  • refreshCache : Boolean
    true：刷新内置缓存
返回值：
  • Object
    由选择器索引的样式对象（hash）
CSS
getRule( String/Array selector, Boolean refreshCache ) : CSSRule
由选择符获取不同的CSS规则
由选择符获取不同的CSS规则
参数项：
  • selector : String/Array
    选择符支持数组，在匹配第一个结果后立刻停止继续寻找
  • refreshCache : Boolean
    true表示为如果你最近有更新或新加样式的话，就刷新内置缓存
返回值：
  • CSSRule
    找到的CSS rule或null（找不到）
CSS
updateRule( String/Array selector, String property, String value ) : Boolean
更新样式属性
更新样式属性
参数项：
  • selector : String/Array
    选择符支持数组，在匹配第一个结果后立刻停止继续寻找
  • property : String
    css属性
  • value : String
    属性的新值
返回值：
  • Boolean
    true：如果样式找到并更新
CSS

公共事件

这个类没有公告事件。


类Ext.util.DelayedTask

包： | Extutil
定义的文件： | DelayedTask.js
类全称： | Ext.util.DelayedTask
继承自于： | Object
提供快捷的方法执行setTimeout，新的超时时限会取消旧的超时时限. 例如验证表单的时候，键盘按下(keypress)那一瞬，就可用上该类（不会立即验证表单，稍作延时）。keypress事件会稍作停顿之后（某个时间）才继续执行。Provides a convenient method of performing setTimeout where a new timeout cancels the old timeout. 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.

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
DelayedTask( Function fn, Object scope, Array args )
参数项：
  • fn : Function
    （可选的） 默认超时的函数(optional) The default function to timeout
  • scope : Object
    （可选的） 默认超时的作用域(optional) The default scope of that timeout
  • args : Array
    （可选的） 默认参数数组(optional) The default Array of arguments
返回值：
  • void
DelayedTask
delay( Number delay, Function newFn, Object newScope, Array newArgs )
取消所有待定的超时（any pending timeout），并重新排...
取消所有待定的超时（any pending timeout），并重新排列（queues）。Cancels any pending timeout and queues a new one
参数项：
  • delay : Number
    延迟毫秒数The milliseconds to delay
  • newFn : Function
    （可选的） 重写传入到构建器的函数(optional) Overrides function passed to constructor
  • newScope : Object
    （可选的） 重写传入到构建器的作用域(optional) Overrides scope passed to constructor
  • newArgs : Array
    （可选的） 重写传入到构建器的参数(optional) Overrides args passed to constructor
返回值：
  • void
DelayedTask
cancel()
取消最后的排列超时。Cancel the last queued ti...
取消最后的排列超时。Cancel the last queued timeout
参数项：
  • None.
返回值：
  • void
DelayedTask

公共事件

这个类没有公告事件。


类Ext.util.Format

包： | Extutil
定义的文件： | Format.js
类全称： | Ext.util.Format
继承自于： | Object
可复用的数据格式化函数。@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
ellipsis( String value, Number length, Boolean word ) : String
对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。
对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。
参数项：
  • value : String
    要裁剪的字符串
  • length : Number
    允许的最大长度
  • word : Boolean
    True表示尝试以一个单词来结束
返回值：
  • String
    转换后的文本
Format
undef( Mixed value ) : Mixed
检查一个引用值是否为underfined，若是的话转换其为空值。
检查一个引用值是否为underfined，若是的话转换其为空值。
参数项：
  • value : Mixed
    要检查的值
返回值：
  • Mixed
    转换成功为空白字符串，否则为原来的值
Format
defaultValue( Mixed value, String defaultValue ) : String
检查一个引用值是否为空，若是则转换到缺省值。
检查一个引用值是否为空，若是则转换到缺省值。
参数项：
  • value : Mixed
    要检查的引用值
  • defaultValue : String
    默认赋予的值（默认为""）
返回值：
  • String
Format
htmlEncode( String value ) : String
为能在HTML显示的字符转义&、以及'。
为能在HTML显示的字符转义&、<、>以及'。
参数项：
  • value : String
    要编码的字符串
返回值：
  • String
    编码后的文本
Format
htmlDecode( String value ) : String
将&, , and '字符从HTML显示的格式还原。
将&, <, >, and '字符从HTML显示的格式还原。
参数项：
  • value : String
    解码的字符串
返回值：
  • String
    编码后的文本
Format
trim( String value ) : String
裁剪一段文本的前后多余的空格。
裁剪一段文本的前后多余的空格。
参数项：
  • value : String
    要裁剪的文本
返回值：
  • String
    裁剪后的文本
Format
substr( String value, Number start, Number length ) : String
返回一个从指定位置开始的指定长度的子字符串。
返回一个从指定位置开始的指定长度的子字符串。
参数项：
  • value : String
    原始文本
  • start : Number
    所需的子字符串的起始位置
  • length : Number
    在返回的子字符串中应包括的字符个数。
返回值：
  • String
    指定长度的子字符串
Format
lowercase( String value ) : String
返回一个字符串，该字符串中的字母被转换为小写字母。
返回一个字符串，该字符串中的字母被转换为小写字母。
参数项：
  • value : String
    要转换的字符串
返回值：
  • String
    转换后的字符串
Format
uppercase( String value ) : String
返回一个字符串，该字符串中的字母被转换为大写字母。
返回一个字符串，该字符串中的字母被转换为大写字母。
参数项：
  • value : String
    要转换的字符串
返回值：
  • String
    转换后的字符串
Format
capitalize( String value ) : String
返回一个字符串，该字符串中的第一个字母转化为大写字母，剩余的为小写。
返回一个字符串，该字符串中的第一个字母转化为大写字母，剩余的为小写。
参数项：
  • value : String
    要转换的字符串
返回值：
  • String
    转换后的字符串
Format
usMoney( Number/String value ) : String
格式化数字到美元货币
格式化数字到美元货币
参数项：
  • value : Number/String
    要格式化的数字
返回值：
  • String
    已格式化的货币
Format
date( Mixed value, String format ) : Function
将某个值解析成为一个特定格式的日期。
将某个值解析成为一个特定格式的日期。
参数项：
  • value : Mixed
    要格式化的值
  • format : String
    （可选的）任何有效的日期字符串（默认为“月/日/年”）
返回值：
  • Function
    日期格式函数
Format
dateRenderer( String format ) : Function
返回一个函数，该函数的作用是渲染日期格式，便于复用。
返回一个函数，该函数的作用是渲染日期格式，便于复用。
参数项：
  • format : String
    任何有效的日期字符串
返回值：
  • Function
    日期格式函数
Format
stripTags( Mixed value ) : String
剥去所有HTML标签。
剥去所有HTML标签。
参数项：
  • value : Mixed
    要剥去的文本
返回值：
  • String
    剥去后的HTML标签
Format
stripScripts( Mixed value ) : String
剥去所有脚本（...）标签
剥去所有脚本（）标签
参数项：
  • value : Mixed
    要剥去的文本
返回值：
  • String
    剥去后的HTML标签
Format
fileSize( Number/String size ) : String
对文件大小进行简单的格式化（xxx bytes、xxx KB、xxx MB）
对文件大小进行简单的格式化（xxx bytes、xxx KB、xxx MB）
参数项：
  • size : Number/String
    要格式化的数值
返回值：
  • String
    已格式化的值
Format
number( Number v, String format ) : String
依据某种（字符串）格式来转换数字。例子 (123456.789): ...
依据某种（字符串）格式来转换数字。
例子 (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
    已转换的数字。@public
Format
numberRenderer( String format ) : Function
在多次转换数字时，为提高效率，不断复用由这个方法返回的函数。
在多次转换数字时，为提高效率，不断复用由这个方法返回的函数。
参数项：
  • format : String
    任何number可接受的字符串
返回值：
  • Function
    数字格式化函数
Format
plural( Number value, String singular, String plural )
可选地为一个单词转为为复数形式。例如在模板中，{commentCoun...
可选地为一个单词转为为复数形式。例如在模板中，{commentCount:plural("Comment")}这样的模板语言如果commentCount是1那就是 "1 Comment"； 如果是0或者大于1就是"x Comments"。
参数项：
  • value : Number
    参与比较的数
  • singular : String
    单词的单数形式
  • plural : String
    （可选的） 单词的复数部分（默认为加上's'）
返回值：
  • void
Format

公共事件

这个类没有公告事件。


类Ext.util.JSON

包： | Extutil
定义的文件： | JSON.js
类全称： | Ext.util.JSON
继承自于： | Object
Douglas Crockford的json.js之修改版本 该版本没有“入侵”Object对象的prototype http://www.json.org/js.html @singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
encode()
Ext.util.JSONencode的简写方式 @member Ex...
Ext.util.JSONencode的简写方式 @member Ext encode
参数项：
  • None.
返回值：
  • void
JSON
decode()
Ext.util.JSONdecode的简写方式 @member Ex...
Ext.util.JSONdecode的简写方式 @member Ext decode
参数项：
  • None.
返回值：
  • void
JSON

公共事件

这个类没有公告事件。


类Ext.util.MixedCollection

包： | Extutil
定义的文件： | MixedCollection.js
类全称： | Ext.util.MixedCollection
继承自于： | Object
一个负责维护数字下标（numeric indexes）和键值（key）的集合类，并暴露了一些事件。

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
MixedCollection( Boolean allowFunctions, Function keyFn )
参数项：
  • allowFunctions : Boolean
    True表示为允许加入函数的引用到集合内（默认为false）
  • keyFn : Function
    对于一个在该Mixed集合中已保存类型的item，可用这个函数返回对应item的键值。执行MixedCollection方法时不需要特定传入一个key参数便可查找出键值。传入这个参数等同于实现了getKey方法。
返回值：
  • void
MixedCollection
add( String key, Object o ) : Object
加入一个item到集合中。
加入一个item到集合中。
参数项：
  • key : String
    item的键名称
  • o : Object
    加入的item
返回值：
  • Object
    已加入的item
MixedCollection
getKey( Object o ) : Object
如果你执行getKey的方法，MixedCollection有一个通用...
如果你执行getKey的方法，MixedCollection有一个通用的方法来取得keys。默认的实现只是简单地返回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);
参数项：
  • o : Object
    根据item找到key
返回值：
  • Object
    传入item的key
MixedCollection
replace( String key, Object o ) : Object
替换集合中的item。完成后触发replace事件。
替换集合中的item。完成后触发replace事件。
参数项：
  • key : String
    要替换item所关联的那个key，或是item。
  • o : Object
    （可选的）如果传入的第一个参数是key，那么item就是key的键名称。
返回值：
  • Object
    新的item。
MixedCollection
addAll( Object/Array objs )
将数组中或是对象中的所有元素加入到集合中。
将数组中或是对象中的所有元素加入到集合中。
参数项：
  • objs : Object/Array
    对象中包含的所有属性，或是数组中所有的值，都分别逐一加入集合中。
返回值：
  • void
MixedCollection
each( Function fn, Object scope )
在集合中执行每个Item的指定函数。函数执行时，会有下列的参数： i...
在集合中执行每个Item的指定函数。函数执行时，会有下列的参数：
  • item : Mixed

    集合中的item

  • index : Number

    item的索引

  • length : Number

    集合中的items的总数

那个函数应该要返回一个布尔值。若函数返回false便终止枚举。
参数项：
  • fn : Function
    每个item要执行的函数
  • scope : Object
    (optional) 函数执行时的作用域
返回值：
  • void
MixedCollection
eachKey( Function fn, Object scope )
传入一个函数类型的参数，然后在集合中的每个Item执行。key和其相关...
传入一个函数类型的参数，然后在集合中的每个Item执行。key和其相关的item都作为头两个参数传入。
参数项：
  • fn : Function
    每个item要执行的函数。
  • scope : Object
    （可选的）执行函数的作用域
返回值：
  • void
MixedCollection
find( Function fn, Object scope ) : Object
根据传入的函数，执行该函数若返回true便说明这是要找到的那个item。
根据传入的函数，执行该函数若返回true便说明这是要找到的那个item。
参数项：
  • fn : Function
    每个item要执行的查询函数。
  • scope : Object
    （可选的）执行函数的作用域
返回值：
  • Object
    根据规则函数在集合中第一个找到的item
MixedCollection
insert( Number index, String key, Object o ) : {Object}以插入的item
指定集合中的某个索引然后插入一个Item
指定集合中的某个索引然后插入一个Item
参数项：
  • index : Number
    要插入item的索引。
  • key : String
    包含新item的key名称，或item本身
  • o : Object
    (可选的) 如果第二个参数是key,新item
返回值：
  • {Object}以插入的item
MixedCollection
remove( Object o ) : Object
从集合中移除Item
从集合中移除Item
参数项：
  • o : Object
    移除的item
返回值：
  • Object
    被移除的Item
MixedCollection
removeAt( Number index ) : Object
从集合中移除由index指定的Item。完成后触发remove事件。
从集合中移除由index指定的Item。完成后触发remove事件。
参数项：
  • index : Number
    移除item的索引
返回值：
  • Object
    被移除的item或是false就代表没有移除。
MixedCollection
removeKey( String key ) : Object
根据传入参数key，从集合中移除相关的item
根据传入参数key，从集合中移除相关的item
参数项：
  • key : String
    要移除item的key
返回值：
  • Object
    被移除的item或是false就代表没有移除。
MixedCollection
getCount() : Number
返回集合中的item总数。
返回集合中的item总数。
参数项：
  • None.
返回值：
  • Number
    item总数
MixedCollection
indexOf( Object o ) : Number
传入一个对象，返回它的索引。
传入一个对象，返回它的索引。
参数项：
  • o : Object
    要寻找索引的item
返回值：
  • Number
    item的索引。返回－1表示找不到。
MixedCollection
indexOfKey( String key ) : Number
传入一个Key，返回它的索引。
传入一个Key，返回它的索引。
参数项：
  • key : String
    寻找索引的key
返回值：
  • Number
    key的索引
MixedCollection
item( String/Number key ) : Object
根据key或索引（index）返回item。key的优先权高于索引。这...
根据key或索引（index）返回item。key的优先权高于索引。这个方法相当于先调用key，如不匹配在调用itemAt。
参数项：
  • key : String/Number
    或者是item的索引
返回值：
  • Object
    传入key所关联的item
MixedCollection
itemAt( Number index ) : Object
根据索引找到item
根据索引找到item
参数项：
  • index : Number
    item的索引index
返回值：
  • Object
    指定索引的item
MixedCollection
key( String/Number key ) : Object
根据key找到item
根据key找到item
参数项：
  • key : String/Number
    item的key
返回值：
  • Object
    key所关联的item
MixedCollection
contains( Object o ) : Boolean
若在集合中找到传入的item，则返回true。
若在集合中找到传入的item，则返回true。
参数项：
  • o : Object
    要在集合中查找的对象
返回值：
  • Boolean
    True表示为在集合中找到该item
MixedCollection
containsKey( Object o ) : Boolean
若在集合中找到传入的key，则返回true。
若在集合中找到传入的key，则返回true。
参数项：
  • o : Object
    要在集合中查找的对象
返回值：
  • Boolean
    True表示为在集合中找到该key
MixedCollection
clear()
清除集合中所有item
清除集合中所有item
参数项：
  • None.
返回值：
  • void
MixedCollection
first() : Object
返回集合中第一个item
返回集合中第一个item
参数项：
  • None.
返回值：
  • Object
    集合中第一个item
MixedCollection
last() : Object
返回集合中最后一个item
返回集合中最后一个item
参数项：
  • None.
返回值：
  • Object
    集合中最后一个item
MixedCollection
sort( String dir, Function fn )
按传入的函数排列集合
按传入的函数排列集合
参数项：
  • dir : String
    方向（可选的） "ASC" 或 "DESC"
  • fn : Function
    （可选的）一个供参照的function
返回值：
  • void
MixedCollection
keySort( String dir, Function fn )
按key顺序排列集合
按key顺序排列集合
参数项：
  • dir : String
    方向（可选的） "ASC" 或 "DESC"
  • fn : Function
    （可选的）一个参照的function（默认为非敏感字符串）
返回值：
  • void
MixedCollection
getRange( Number startIndex, Number endIndex ) : Array
返回这个集合中的某个范围内的items
返回这个集合中的某个范围内的items
参数项：
  • startIndex : Number
    （可选的） 默认为 0
  • endIndex : Number
    （可选的） 默认为最后的item
返回值：
  • Array
    items数组
MixedCollection
filter( String property, String/RegExp value, Boolean anyMatch, Boolean caseSensitive ) : MixedCollection
由指定的属性过滤集合中的对象。返回以过滤后的新集合。
由指定的属性过滤集合中的对象。返回以过滤后的新集合。
参数项：
  • property : String
    你对象身上的属性
  • value : String/RegExp
    也可以是属性开始的值或对于这个属性的正则表达式
  • anyMatch : Boolean
    (optional) True to match any part of the string, not just the beginning
  • caseSensitive : Boolean
    (optional) True for case sensitive comparison (defaults to False).
返回值：
  • MixedCollection
    过滤后的新对象
MixedCollection
filterBy( Function fn, Object scope ) : MixedCollection
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个...
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个对象执行。如果函数返回true，则value会被包含否则会被过滤、
参数项：
  • fn : Function
    被调用的函数，会接收o(object)和k (the key)参数
  • scope : Object
    （可选的）函数的作用域（默认为 this）
返回值：
  • MixedCollection
    过滤后的新对象
MixedCollection
findIndex( String property, String/RegExp value, Number start, Boolean anyMatch, Boolean caseSensitive ) : Number
由指定的属性/值查找集合中的第一个匹配对象。这个对象是过滤后的新集合
由指定的属性/值查找集合中的第一个匹配对象。这个对象是过滤后的新集合
参数项：
  • property : String
    当前对象下的属性名称
  • value : String/RegExp
    代表属性值的字符串，也可以是一个正则表达式以测试属性。y.
  • start : Number
    （可选的）从第几个字符开始搜索（默认为0）
  • anyMatch : Boolean
    （可选的）True表示为匹配字符串的任意一部分，不只是开始的部分
  • caseSensitive : Boolean
    （可选的）True表示为打开大小写敏感
返回值：
  • Number
    匹配的索引或-1
MixedCollection
findIndexBy( Function fn, Object scope, Number start ) : MixedCollection
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个...
由函数过滤集合中的对象。返回以过滤后的新集合 传入的函数会被集合中每个对象执行。如果函数返回true，则value会被包含否则会被过滤、
参数项：
  • fn : Function
    被调用的函数，会接收o(object)和k (the key)参数
  • scope : Object
    （可选的）函数的作用域（默认为 this）
  • start : Number
    （可选的）从第几个字符开始搜索（默认为0）
返回值：
  • MixedCollection
    匹配的索引或-1
MixedCollection
clone() : MixedCollection
创建该集合的浅表副本shallow copy（shallow copy）
创建该集合的浅表副本shallow copy（shallow copy）
参数项：
  • None.
返回值：
  • MixedCollection
MixedCollection
get( String/Number key ) : Object
根据key或索引返回item。key的优先权高于索引。
根据key或索引返回item。key的优先权高于索引。
参数项：
  • key : String/Number
    或者是item的索引
返回值：
  • Object
    传入key所关联的item
MixedCollection

公共事件

事件 定义者
clear()
当集合被清除后触发。
当集合被清除后触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection
add()
当item被加入到集合之后触发。
当item被加入到集合之后触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection
replace()
集合中的item被替换后触发。
集合中的item被替换后触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection
remove()
当item被移除集合时触发。
当item被移除集合时触发。
侦听器会传入以下的参数：
  • None.
 MixedCollection


类Ext.util.Observable

包： | Extutil
定义的文件： | Observable.js
类全称： | Ext.util.Observable
继承自于： | Object
一个抽象基类（Abstract base class），为事件机制的管理提供一个公共接口。子类应有一个"events"属性来定义所有的事件。Abstract base class that provides a common interface for publishing events. Subclasses are expected to to have a property "events" with all the events defined.
例如：For example:

 Employee = function(name){
    this.name = name;
    this.addEvents({
        "fired" : true,
        "quit" : true
    });
 }
 Ext.extend(Employee, Ext.util.Observable);

配置项

配置项 |  | 定义者
 | listeners : Object (optional) A config object containi... (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 addListener example for attaching multiple handlers at once. | Observable

公告属性

这个类没有公告属性。

公共方法

方法 定义者
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

这个类没有公告事件。


类Ext.util.TaskRunner

包： | Extutil
定义的文件： | TaskMgr.js
类全称： | Ext.util.TaskRunner
继承自于： | Object
Provides the ability to execute one or more arbitrary tasks in a multithreaded manner. Generally, you can use the singleton 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 task = {
    run: function(){
        Ext.fly('clock').update(new Date().format('g:i:s A'));
    },
    interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner();
runner.start(task);

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
TaskRunner( Number interval )
参数项：
  • interval : Number
    (optional) The minimum precision in milliseconds supported by this TaskRunner instance (defaults to 10)
返回值：
  • void
TaskRunner
start( Object task ) : Object
@member Ext.util.TaskRunner
@member Ext.util.TaskRunner
参数项：
  • task : Object
    A config object that supports the following properties:
    • run : Function
      The function to execute each time the task is run. The function will be called at each interval and passed the args argument if specified. If a particular scope is required, be sure to specify it using the scope argument.
    • interval : Number
      The frequency in milliseconds with which the task should be executed.
    • args : Array
      (optional) An array of arguments to be passed to the function specified by run.
    • scope : Object
      (optional) The scope in which to execute the run function.
    • duration : Number
      (optional) The length of time in milliseconds to execute the task before stopping automatically (defaults to indefinite).
    • repeat : Number
      (optional) The number of times to execute the task before stopping automatically (defaults to indefinite).
返回值：
  • Object
    The task
TaskRunner
stop( Object task ) : Object
@member Ext.util.TaskRunner
@member Ext.util.TaskRunner
参数项：
  • task : Object
    The task to stop
返回值：
  • Object
    The task
TaskRunner
stopAll()
@member Ext.util.TaskRunner
@member Ext.util.TaskRunner
参数项：
  • None.
返回值：
  • void
TaskRunner

公共事件

这个类没有公告事件。


类Ext.util.TextMetrics

包： | Extutil
定义的文件： | TextMetrics.js
类全称： | Ext.util.TextMetrics
继承自于： | Object
为一段文字提供一个精确象素级的测量，以便可以得到某段文字的高度和宽度。@singleton

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
measure( String/HTMLElement el, String text, Number fixedWidth ) : Object
测量指定文字尺寸。
测量指定文字尺寸。
参数项：
  • el : String/HTMLElement
    元素，DOM节点或ID,使得被渲染之文字获得新的CSS样式。
  • text : String
    欲测量的文字。
  • fixedWidth : Number
    (optional) 如果文字是多行的，您必须先设置好一个宽度。以便正确的测出高度。
返回值：
  • Object
    由文字尺寸组成的对象 {width: (width), height: (height)}
TextMetrics
createInstance( String/HTMLElement el, Number fixedWidth ) : Ext.util.TextMetrics.Instance
返回一个唯一的TextMetrics实例，直接绑定到某个元素和复用， ...
返回一个唯一的TextMetrics实例，直接绑定到某个元素和复用， 这样会减少在每个测量上初始样式属性的多次调用。
参数项：
  • el : String/HTMLElement
    将实例绑定到的元素，DOM节点或ID。
  • fixedWidth : Number
    (optional) 如果文字是多行的，您必须先设置好一个宽度。以便正确地测出高度。
返回值：
  • Ext.util.TextMetrics.Instance
    instance 新实例
TextMetrics
getSize( String text ) : Object
返回一个指定文字的尺寸。该文字内置元素的样式和宽度属性
返回一个指定文字的尺寸。该文字内置元素的样式和宽度属性
参数项：
  • text : String
    要测量的文字
返回值：
  • Object
    由文字尺寸组成的对象 {width: (width), height: (height)}
TextMetrics
bind( String/HTMLElement el )
绑定某个样式的TextMetrics实例，使得被渲染之文字重新获得CS...
绑定某个样式的TextMetrics实例，使得被渲染之文字重新获得CSS样式。
参数项：
  • el : String/HTMLElement
    元素，DOM节点或ID
返回值：
  • void
TextMetrics
setFixedWidth( Number width )
对内置的测量元素设置一个固定的宽度。如果文字是多行的，您必须先设置好一...
对内置的测量元素设置一个固定的宽度。如果文字是多行的，您必须先设置好一个宽度。以便正确地测出高度。
参数项：
  • width : Number
    设置元素的宽度。
返回值：
  • void
TextMetrics
getWidth( String text ) : Number
返回指定文字的宽度
返回指定文字的宽度
参数项：
  • text : String
    要测量的文字
返回值：
  • Number
    width 宽度（象素）
TextMetrics
getHeight( String text ) : Number
返回指定文字的高度，对于多行文本，有可能需要调用 setFixedWi...
返回指定文字的高度，对于多行文本，有可能需要调用 setFixedWidth 。
参数项：
  • text : String
    要测量的文字
返回值：
  • Number
    height 高度（象素）
TextMetrics
getTextWidth( String text, Number min, Number max ) : Number
返回传入文本的宽度，或者该元素下文本的宽度。
返回传入文本的宽度，或者该元素下文本的宽度。
参数项：
  • text : String
    欲检测的文本。默认为元素的innerHTML。
  • min : Number
    （可选的） 返回的最小值。
  • max : Number
    （可选的） 返回的最大值。
返回值：
  • Number
    文本的宽度（像素） @member Ext.Element getTextWidth
TextMetrics

公共事件

这个类没有公告事件。


Observable
    DataProxy
      MemoryProxy
        PagingMemoryProxy

Class Ext.ux.data.PagingMemoryProxy

Package: | Ext.ux.data
Defined In: | PagingMemoryProxy.js
Class: | PagingMemoryProxy
Extends: | MemoryProxy

Paging Memory Proxy, allows to use paging grid with in memory dataset

Config Options

Config Options Defined By
api : Object
Specific urls to call on CRUD action methods "read", "create", "update" and "destroy". Defaults to:api: { read ...
Specific urls to call on CRUD action methods "read", "create", "update" and "destroy". Defaults to:
api: {
    read    : undefined,
    create  : undefined,
    update  : undefined,
    destroy : undefined
}

If the specific URL for a given CRUD action is undefined, the CRUD action request will be directed to the configured 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 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);

            // manually set the private connection URL.

            // Warning:  Accessing the private URL property should be avoided.

            // Use the public method setUrl instead, shown above.

            // It should be noted that changing the URL like this will affect

            // the URL for just this request.  Subsequent requests will use the

            // API or URL defined in your initial proxy configuration.

            store.proxy.conn.url = 'changed1.php';

            // proxy URL will be superseded by API (only if proxy created to use ajax):

            // It should be noted that proxy API changes are permanent and will

            // be used for all subsequent requests.

            store.proxy.api.load = 'changed2.php';

            // However, altering the proxy API should be done using the public

            // method setApi instead.

            store.proxy.setApi('load', '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'
            });
        }
    }
});

DataProxy
doRequest : Function
Abstract method that should be implemented in all subclasses (e.g.: HttpProxy.doRequest, DirectProxy.doRequest).
DataProxy
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
restful : Boolean
Defaults to false. Set to true to operate in a RESTful manner. Note: this parameter will automatically be set to t...

Defaults to false. Set to true to operate in a RESTful manner.

Note: this parameter will automatically be set to true if the 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

    ...
)}
There is no 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

DataProxy

Public Properties

This class has no public properties.

Public Methods

Method Defined By
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
destroy() : void
Destroys the proxy by purging any event listeners and cancelling any active requests.
Destroys the proxy by purging any event listeners and cancelling any active requests.
Parameters:
  • None.
Returns:
  • 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
MemoryProxy implementation of DataProxy#doRequest
MemoryProxy implementation of DataProxy#doRequest
Parameters:
  • action : String
  • rs : Ext.data.Record/Ext.data.Record[]
    If action is load, rs will be null
  • params : Object
    An object containing properties which are to be used as HTTP parameters for the request to the remote server.
  • reader : Ext.data.DataReader
    The Reader object which converts the data object into a block of Ext.data.Records.
  • callback : Function
    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
  • scope : Object
    The scope in which to call the callback
  • arg : Object
    An optional argument which is passed to the callback as its second parameter.
Returns:
  • void
MemoryProxy
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
isApiAction( String [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} ) : Boolean
Returns true if the specified action is defined as a unique action in the api-config. request. If all API-actions a...
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.
Parameters:
  • [Ext.data.Api.CREATE|READ|UPDATE|DESTROY]} : String
    action
Returns:
  • Boolean
DataProxy
load( Object params, Object reader, Object callback, Object scope, Object arg ) : void
Deprecated load method using old method signature. See {@doRequest} for preferred method.
Deprecated load method using old method signature. See {@doRequest} for preferred method.
Parameters:
  • params : Object
  • reader : Object
  • callback : Object
  • scope : Object
  • arg : Object
Returns:
  • void
DataProxy
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • 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
All proxy actions are executed through this method. Automatically fires the "before" + action event
All proxy actions are executed through this method. Automatically fires the "before" + action event
Parameters:
  • action : String
    Name of the action
  • rs : Ext.data.Record/Ext.data.Record[]/null
    Will be null when action is 'load'
  • params : Object
  • reader : Ext.data.DataReader
  • callback : Function
  • scope : Object
    Scope with which to call the callback (defaults to the Proxy object)
  • options : Object
    Any options specified for the action (e.g. see Ext.data.Store.load.
Returns:
  • void
DataProxy
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setApi( String/Object api, String/Function url ) : void
Redefines the Proxy's API or a single action of an API. Can be called with two method signatures. If called with an ...

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');
Parameters:
  • api : String/Object
    An API specification object, or the name of an action.
  • url : String/Function
    The URL (or function if using DirectProxy) to call for the action.
Returns:
  • void
DataProxy
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

Event Defined By
beforeload : ( DataProxy this, Object params )
Fires before a request to retrieve a data object.
Fires before a request to retrieve a data object.
Listeners will be called with the following arguments:
  • this : DataProxy
    The proxy for the request
  • params : Object
    The params object passed to the request function
DataProxy
beforewrite : ( DataProxy this, String action, Record/Array[Record] rs, Object params )
Fires before a request is generated for one of the actions Ext.data.Api.actions.create|update|destroy
Fires before a request is generated for one of the actions Ext.data.Api.actions.create|update|destroy
Listeners will be called with the following arguments:
  • this : DataProxy
    The proxy for the request
  • action : String
    [Ext.data.Api.actions.create|update|destroy]
  • rs : Record/Array[Record]
    The Record(s) to create|update|destroy.
  • params : Object
    The request params object. Edit params to add parameters to the request.
DataProxy
exception : ( DataProxy this, String type, String action, Object options, Object response, Mixed arg )
Fires if an exception occurs in the Proxy during a remote request. This event is relayed through a corresponding Ex...

Fires if an exception occurs in the Proxy during a remote request. This event is relayed through a corresponding Ext.data.Store.exception, so any Store instance may observe this event. 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.

Listeners will be called with the following arguments:
  • this : DataProxy
    The proxy that sent the request
  • type : String

    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.

  • action : String
    Name of the action (see Ext.data.Api.actions.
  • options : Object
    The options for the action that were specified in the request.
  • response : Object

    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.

  • arg : Mixed

    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).

DataProxy
load : ( DataProxy this, Object o, Object options )
Fires before the load method's callback is called.
Fires before the load method's callback is called.
Listeners will be called with the following arguments:
  • this : DataProxy
    The proxy for the request
  • o : Object
    The request transaction object
  • options : Object
    The callback's options property as passed to the request function
DataProxy
loadexception : ( Object this, Object arg, Object null, Error e )
Fires if an exception occurs in the Proxy during data loading. Note that this event is also relayed through Ext.data...
Fires if an exception occurs in the Proxy during data loading. Note that this event is also relayed through Ext.data.Store, so you can listen for it directly on any Store instance.
Listeners will be called with the following arguments:
  • this : Object
  • arg : Object
    The callback's arg object passed to the load function
  • null : Object
    This parameter does not apply and will always be null for MemoryProxy
  • e : Error
    The JavaScript Error object caught if the configured Reader could not read the data
MemoryProxy
write : ( DataProxy this, String action, Object data, Object response, Record/Record{} rs, Object options )
Fires before the request-callback is called
Fires before the request-callback is called
Listeners will be called with the following arguments:
  • this : DataProxy
    The proxy that sent the request
  • action : String
    [Ext.data.Api.actions.create|upate|destroy]
  • data : Object
    The data object extracted from the server-response
  • response : Object
    The decoded response from server
  • rs : Record/Record{}
    The records from Store
  • options : Object
    The callback's options property as passed to the request function
DataProxy


Observable
    Component
      BoxComponent
        Field
          DateTime

Class Ext.ux.form.DateTime

Package: | Ext.ux.form
Defined In: | DateTimeField.js
Class: | DateTime
Extends: | Field
Author: | Ing. Jozef Sakalos
Version: | $Id: Ext.ux.form.DateTime.js 645 2008-01-27 21:53:01Z jozo $

Config Options

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: "input", type: "text", size: "20", autocomplete: "off"}
Field
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
A custom CSS class to apply to the field's underlying element (defaults to "").
Field
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disabled : Boolean
True to disable the field (defaults to false). Be aware that conformant with the <a href="http://www.w3.org/TR/html40...
True to disable the field (defaults to false).

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Field
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
fieldClass : String
The default CSS class for the field (defaults to "x-form-field")
Field
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
inputType : String
The type attribute for input fields -- e.g. radio, text, password, file (defaults to "text"). The types "file" and "p...
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', emptyText is not supported and should be avoided.
Field
invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value ...
The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text directly to the innerHTML of the specified element
Field
name : String
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automaticall...
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automatically included with form submit().
Field
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
readOnly : Boolean
true to mark the field as readOnly in HTML (defaults to false). Note: this only sets the element's readOnly DOM attri...
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 hideTrigger.

Field
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT...
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "key...
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
value : Mixed
A value to initialize this field with (defaults to undefined).
Field
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
: Object
---------------------------------------------------------------------------------------
DateTime
: Object
---------------------------------------------------------------------------------------
DateTime
: Object
DateTime
Console : Object
DateTime
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
highlightBgColors : Object
Different coloring styles for tag names, by default 'default' is used Undocumented feature - you can change the col...
Different coloring styles for tag names, by default 'default' is used Undocumented feature - you can change the color of elements while inspecting by tag name, check bellow the body: 0x00CC00 line, uncomment that line, duplicate and change it with your own colors
DateTime
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
originalValue : mixed
The original value of the field as configured in the value configuration, or as loaded by the last form load operatio...
The original value of the field as configured in the value configuration, or as loaded by the last form load operation if the form's trackResetOnLoad setting is true.
Field
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component
runtime : Object
Makes it easier to acces runtime packages it makes sense only in the application sandbox
DateTime

Public Methods

Method Defined By
Introspector.extend() : void
Parameters:
  • None.
Returns:
  • void
DateTime
SelectBox() : void
Author: Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging through the list, with item sele...
Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging through the list, with item selection occurring when the mouse button is released. When used will automatically set editable to false and call Ext.Element.unselectable on inner elements. Re-enabling editable after calling this will NOT work.
Parameters:
  • None.
Returns:
  • void
DateTime
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEventListener() : void
Parameters:
  • None.
Returns:
  • void
DateTime
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addKeyboardEvents() : void
Parameters:
  • None.
Returns:
  • void
DateTime
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
blockWrap() : void
Parameters:
  • None.
Returns:
  • void
DateTime
camelize() : void
Parameters:
  • None.
Returns:
  • void
DateTime
canInit() : void
Parameters:
  • None.
Returns:
  • void
DateTime
cleanup() : void
Parameters:
  • None.
Returns:
  • void
DateTime
clearInvalid() : void
Clear any invalid styles/messages for this field
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
Field
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
createHighlight() : void
Parameters:
  • None.
Returns:
  • void
DateTime
createOpenConsoleButton() : void
Parameters:
  • None.
Returns:
  • void
DateTime
createTextField() : void
Parameters:
  • None.
Returns:
  • void
DateTime
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
drawRect() : void
Parameters:
  • None.
Returns:
  • void
DateTime
dump() : void
Parameters:
  • None.
Returns:
  • void
DateTime
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
escapeHtml() : void
Parameters:
  • None.
Returns:
  • void
DateTime
extendRect() : void
Parameters:
  • None.
Returns:
  • void
DateTime
findDebugWindow() : void
Parameters:
  • None.
Returns:
  • void
DateTime
findLoader() : void
Parameters:
  • None.
Returns:
  • void
DateTime
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBorderBox() : void
Parameters:
  • None.
Returns:
  • void
DateTime
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getHtmlWindows() : void
Parameters:
  • None.
Returns:
  • void
DateTime
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getIntProp() : void
Parameters:
  • None.
Returns:
  • void
DateTime
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getName() : String
Returns the name or hiddenName attribute of the field if available.
Returns the name or hiddenName attribute of the field if available.
Parameters:
  • None.
Returns:
  • String
    name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRawValue() : Mixed
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue...
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getStyleProp() : void
Parameters:
  • None.
Returns:
  • void
DateTime
getTextFormat() : void
Parameters:
  • None.
Returns:
  • void
DateTime
getValue() : Mixed
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa...
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
hideHighlight() : void
Parameters:
  • None.
Returns:
  • void
DateTime
highlightElement() : void
Parameters:
  • None.
Returns:
  • void
DateTime
init() : void
Parameters:
  • None.
Returns:
  • void
DateTime
isArgumentsObject() : void
Parameters:
  • None.
Returns:
  • void
DateTime
isArrayObject() : void
Parameters:
  • None.
Returns:
  • void
DateTime
isDateObject() : void
Parameters:
  • None.
Returns:
  • void
DateTime
isDirty() : Boolean
Returns true if the value of this Field has been changed from its original value. Will return false if the field is d...

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 form was configured with Ext.form.BasicForm.trackResetOnLoad then the original value is updated when the values are loaded by Ext.form.BasicForm.setValues.

Parameters:
  • None.
Returns:
  • Boolean
    True if this field has been changed from its original value (and is not disabled), false otherwise.
Field
isItemNative() : void
Parameters:
  • None.
Returns:
  • void
DateTime
isNumberObject() : void
Parameters:
  • None.
Returns:
  • void
DateTime
isStringObject() : void
Parameters:
  • None.
Returns:
  • void
DateTime
isValid( Boolean preventMark ) : Boolean
Returns whether or not the field value is currently valid
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
Field
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
Component
isXMLObject() : void
Parameters:
  • None.
Returns:
  • void
DateTime
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
loadDebugger() : void
Parameters:
  • None.
Returns:
  • void
DateTime
logArguments() : void
Parameters:
  • None.
Returns:
  • void
DateTime
logError() : void
Parameters:
  • None.
Returns:
  • void
DateTime
markInvalid( [String msg] ) : void
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the fi...
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
Parameters:
  • msg : String
    (optional) The validation message (defaults to invalidText)
Returns:
  • void
Field
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
noBridge() : void
Parameters:
  • None.
Returns:
  • void
DateTime
noChildBridge() : void
Parameters:
  • None.
Returns:
  • void
DateTime
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
readConfigFile() : void
Parameters:
  • None.
Returns:
  • void
DateTime
register() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerChildSandboxBridge() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerCloseEventListener() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerCompleteEventListener() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerDOMEventListeners() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerDeactivateEventListener() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerFrame() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerFramesParentSandboxBridge() : void
Parameters:
  • None.
Returns:
  • void
DateTime
registerUncaughtExceptionListener() : void
Parameters:
  • None.
Returns:
  • void
DateTime
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remoteClick() : void
Parameters:
  • None.
Returns:
  • void
DateTime
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeEventListener() : void
Parameters:
  • None.
Returns:
  • void
DateTime
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
reset() : void
Resets the current field value to the originally loaded value and clears any validation messages. See Ext.form.BasicF...
Resets the current field value to the originally loaded value and clears any validation messages. See Ext.form.BasicForm.trackResetOnLoad
Parameters:
  • None.
Returns:
  • void
Field
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue( Mixed value ) : Mixed
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Mixed
    value The field value that is set
Field
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setValue( Mixed value ) : Ext.form.Field
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Ext.form.Field
    this
Field
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
showCssElement() : void
Parameters:
  • None.
Returns:
  • void
DateTime
showHighlight() : void
Parameters:
  • None.
Returns:
  • void
DateTime
showHighlightLabels() : void
Parameters:
  • None.
Returns:
  • void
DateTime
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggleWindow() : void
Parameters:
  • None.
Returns:
  • void
DateTime
tryCreateWindow() : void
Parameters:
  • None.
Returns:
  • void
DateTime
twoDigits() : void
Parameters:
  • None.
Returns:
  • void
DateTime
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent
validate() : Boolean
Validates the field value
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
Field
waitForBody() : void
Parameters:
  • None.
Returns:
  • void
DateTime
writeConfigFile() : void
Parameters:
  • None.
Returns:
  • void
DateTime
writeConsoleToClipboard() : void
Parameters:
  • None.
Returns:
  • void
DateTime
writeConsoleToFile() : void
Parameters:
  • None.
Returns:
  • void
DateTime

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
blur : ( Ext.form.Field this )
Fires when this field loses input focus.
Fires when this field loses input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
Fires just before the field blurs if the field value has changed.
Fires just before the field blurs if the field value has changed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • newValue : Mixed
    The new value
  • oldValue : Mixed
    The original value
Field
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
Fires when this field receives input focus.
Fires when this field receives input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this, String msg )
Fires after the field has been marked as invalid.
Fires after the field has been marked as invalid.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • msg : String
    The validation message
Field
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Pan...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Panel.keys or Ext.KeyMap. You can check 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.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Field
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
valid : ( Ext.form.Field this )
Fires after the field has been validated with no errors.
Fires after the field has been validated with no errors.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            FileUploadField

Class Ext.ux.form.FileUploadField

Package: | Ext.ux.form
Defined In: | FileUploadField.js
Class: | FileUploadField
Extends: | TextField
xtype: | fileuploadfield
Creates a file upload field.

Config Options

Config Options Defined By
allowBlank : Boolean
Specify false to validate that the value's length is > 0 (defaults to true)
TextField
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: "input", type: "text", size: "20", autocomplete: "off"}
Field
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
blankText : String
The error text to display if the allowBlank validation fails (defaults to 'This field is required')
TextField
buttonCfg : Object
A standard Ext.Button config object.
FileUploadField
buttonOffset : Number
The number of pixels of space reserved between the button and the text field (defaults to 3). Note that this only ap...
The number of pixels of space reserved between the button and the text field (defaults to 3). Note that this only applies if buttonOnly = false.
FileUploadField
buttonOnly : Boolean
True to display the file upload field as a button with no visible text field (defaults to false). If true, all inher...
True to display the file upload field as a button with no visible text field (defaults to false). If true, all inherited TextField members will still be available.
FileUploadField
buttonText : String
The button text to display on the upload button (defaults to 'Browse...'). Note that if you supply a value for butto...
The button text to display on the upload button (defaults to 'Browse...'). Note that if you supply a value for buttonCfg, the buttonCfg.text value will be used instead if available.
FileUploadField
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
A custom CSS class to apply to the field's underlying element (defaults to "").
Field
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disableKeyFilter : Boolean
Specify true to disable input keystroke filtering (defaults to false)
TextField
disabled : Boolean
True to disable the field (defaults to false). Be aware that conformant with the <a href="http://www.w3.org/TR/html40...
True to disable the field (defaults to false).

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Field
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
emptyClass : String
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is au...
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
emptyText : String
The default text to place into an empty field (defaults to null). Note: that this value will be submitted to the serv...
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 name.
TextField
enableKeyEvents : Boolean
true to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldClass : String
The default CSS class for the field (defaults to "x-form-field")
Field
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
grow : Boolean
true if this field should automatically grow and shrink to its content (defaults to false)
TextField
growMax : Number
The maximum width to allow when grow = true (defaults to 800)
TextField
growMin : Number
The minimum width to allow when grow = true (defaults to 30)
TextField
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
inputType : String
The type attribute for input fields -- e.g. radio, text, password, file (defaults to "text"). The types "file" and "p...
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', emptyText is not supported and should be avoided.
Field
invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskRe : RegExp
An input mask regular expression that will be used to filter keystrokes that do not match (defaults to null)
TextField
maxLength : Number
Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide...
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 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'}
});
TextField
maxLengthText : String
Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxL...
Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxLength}')
TextField
minLength : Number
Minimum input field length required (defaults to 0)
TextField
minLengthText : String
Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minL...
Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minLength}')
TextField
msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value ...
The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text directly to the innerHTML of the specified element
Field
name : String
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automaticall...
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automatically included with form submit().
Field
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
readOnly : Boolean
true to mark the field as readOnly in HTML (defaults to false). Note: this only sets the element's readOnly DOM attri...
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 hideTrigger.

Field
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
regex : RegExp
A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If the test fai...
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 regexText.
TextField
regexText : String
The error text to display if regex is used and the test fails during validation (defaults to '')
TextField
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
selectOnFocus : Boolean
true to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
stripCharsRe : RegExp
A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT...
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "key...
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validator : Function
A custom validation function to be called during field validation (defaults to null). If specified, this function wil...
A custom validation function to be called during field validation (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 current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
value : Mixed
A value to initialize this field with (defaults to undefined).
Field
vtype : String
A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
vtypeText : String
A custom error message to display in place of the default message provided for the vtype currently set for this field...
A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Note: only applies if vtype is set, else ignored.
TextField
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
originalValue : mixed
The original value of the field as configured in the value configuration, or as loaded by the last form load operatio...
The original value of the field as configured in the value configuration, or as loaded by the last form load operation if the form's trackResetOnLoad setting is true.
Field
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
clearInvalid() : void
Clear any invalid styles/messages for this field
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
Field
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getName() : String
Returns the name or hiddenName attribute of the field if available.
Returns the name or hiddenName attribute of the field if available.
Parameters:
  • None.
Returns:
  • String
    name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRawValue() : Mixed
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue...
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getValue() : Mixed
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa...
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isDirty() : Boolean
Returns true if the value of this Field has been changed from its original value. Will return false if the field is d...

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 form was configured with Ext.form.BasicForm.trackResetOnLoad then the original value is updated when the values are loaded by Ext.form.BasicForm.setValues.

Parameters:
  • None.
Returns:
  • Boolean
    True if this field has been changed from its original value (and is not disabled), false otherwise.
Field
isValid( Boolean preventMark ) : Boolean
Returns whether or not the field value is currently valid
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
Field
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
markInvalid( [String msg] ) : void
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the fi...
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
Parameters:
  • msg : String
    (optional) The validation message (defaults to invalidText)
Returns:
  • void
Field
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
reset() : void
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText...
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText and emptyClass if the original value was blank.
Parameters:
  • None.
Returns:
  • void
TextField
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
selectText( [Number start], [Number end] ) : void
Selects text in this field
Selects text in this field
Parameters:
  • start : Number
    (optional) The index where the selection should start (defaults to 0)
  • end : Number
    (optional) The index where the selection should end (defaults to the text length)
Returns:
  • void
TextField
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue( Mixed value ) : Mixed
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Mixed
    value The field value that is set
Field
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setValue( Mixed value ) : Ext.form.Field
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Ext.form.Field
    this
Field
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent
validate() : Boolean
Validates the field value
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
Field
validateValue( Mixed value ) : Boolean
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Parameters:
  • value : Mixed
    The value to validate
Returns:
  • Boolean
    True if the value is valid, else false
TextField

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this, Number width )
Fires when the autoSize function is triggered. The field may or may not have actually changed size according to the d...
Fires when the 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.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
    This text field
  • width : Number
    The new field width
TextField
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
blur : ( Ext.form.Field this )
Fires when this field loses input focus.
Fires when this field loses input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
Fires just before the field blurs if the field value has changed.
Fires just before the field blurs if the field value has changed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • newValue : Mixed
    The new value
  • oldValue : Mixed
    The original value
Field
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
fileselected : ( Ext.ux.form.FileUploadField this, String value )
Fires when the underlying file input field's value has changed from the user selecting a new file from the system fil...
Fires when the underlying file input field's value has changed from the user selecting a new file from the system file selection dialog.
Listeners will be called with the following arguments:
  • this : Ext.ux.form.FileUploadField
  • value : String
    The file value returned by the underlying file input field
FileUploadField
focus : ( Ext.form.Field this )
Fires when this field receives input focus.
Fires when this field receives input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this, String msg )
Fires after the field has been marked as invalid.
Fires after the field has been marked as invalid.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • msg : String
    The validation message
Field
keydown : ( Ext.form.TextField this, Ext.EventObject e )
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this, Ext.EventObject e )
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this, Ext.EventObject e )
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Pan...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Panel.keys or Ext.KeyMap. You can check 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.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Field
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
valid : ( Ext.form.Field this )
Fires after the field has been validated with no errors.
Fires after the field has been validated with no errors.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          ItemSelector

Class Ext.ux.form.ItemSelector

Package: | Ext.ux.form
Defined In: | ItemSelector.js
Class: | ItemSelector
Extends: | Field
xtype: | itemselector
A control that allows selection of between two Ext.ux.form.MultiSelect controls.

Config Options

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: "input", type: "text", size: "20", autocomplete: "off"}
Field
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
A custom CSS class to apply to the field's underlying element (defaults to "").
Field
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disabled : Boolean
True to disable the field (defaults to false). Be aware that conformant with the <a href="http://www.w3.org/TR/html40...
True to disable the field (defaults to false).

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Field
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
fieldClass : String
The default CSS class for the field (defaults to "x-form-field")
Field
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
inputType : String
The type attribute for input fields -- e.g. radio, text, password, file (defaults to "text"). The types "file" and "p...
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', emptyText is not supported and should be avoided.
Field
invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value ...
The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text directly to the innerHTML of the specified element
Field
multiselects : Array
An array of Ext.ux.form.MultiSelect config objects, with at least all required parameters (e.g., store)
ItemSelector
name : String
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automaticall...
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automatically included with form submit().
Field
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
readOnly : Boolean
true to mark the field as readOnly in HTML (defaults to false). Note: this only sets the element's readOnly DOM attri...
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 hideTrigger.

Field
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT...
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "key...
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
value : Mixed
A value to initialize this field with (defaults to undefined).
Field
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
originalValue : mixed
The original value of the field as configured in the value configuration, or as loaded by the last form load operatio...
The original value of the field as configured in the value configuration, or as loaded by the last form load operation if the form's trackResetOnLoad setting is true.
Field
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
ItemSelector( Object config )
Create a new ItemSelector
Create a new ItemSelector
Parameters:
  • config : Object
    Configuration options
Returns:
  • void
xtype: itemselector
ItemSelector
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
clearInvalid() : void
Clear any invalid styles/messages for this field
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
Field
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getName() : String
Returns the name or hiddenName attribute of the field if available.
Returns the name or hiddenName attribute of the field if available.
Parameters:
  • None.
Returns:
  • String
    name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRawValue() : Mixed
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue...
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getValue() : Mixed
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa...
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isDirty() : Boolean
Returns true if the value of this Field has been changed from its original value. Will return false if the field is d...

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 form was configured with Ext.form.BasicForm.trackResetOnLoad then the original value is updated when the values are loaded by Ext.form.BasicForm.setValues.

Parameters:
  • None.
Returns:
  • Boolean
    True if this field has been changed from its original value (and is not disabled), false otherwise.
Field
isValid( Boolean preventMark ) : Boolean
Returns whether or not the field value is currently valid
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
Field
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
markInvalid( [String msg] ) : void
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the fi...
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
Parameters:
  • msg : String
    (optional) The validation message (defaults to invalidText)
Returns:
  • void
Field
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
reset() : void
Resets the current field value to the originally loaded value and clears any validation messages. See Ext.form.BasicF...
Resets the current field value to the originally loaded value and clears any validation messages. See Ext.form.BasicForm.trackResetOnLoad
Parameters:
  • None.
Returns:
  • void
Field
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue( Mixed value ) : Mixed
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Mixed
    value The field value that is set
Field
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setValue( Mixed value ) : Ext.form.Field
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Ext.form.Field
    this
Field
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent
validate() : Boolean
Validates the field value
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
Field

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
blur : ( Ext.form.Field this )
Fires when this field loses input focus.
Fires when this field loses input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
Fires just before the field blurs if the field value has changed.
Fires just before the field blurs if the field value has changed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • newValue : Mixed
    The new value
  • oldValue : Mixed
    The original value
Field
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
Fires when this field receives input focus.
Fires when this field receives input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this, String msg )
Fires after the field has been marked as invalid.
Fires after the field has been marked as invalid.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • msg : String
    The validation message
Field
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Pan...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Panel.keys or Ext.KeyMap. You can check 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.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Field
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
valid : ( Ext.form.Field this )
Fires after the field has been validated with no errors.
Fires after the field has been validated with no errors.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          MultiSelect

Class Ext.ux.form.MultiSelect

Package: | Ext.ux.form
Defined In: | MultiSelect.js
Class: | MultiSelect
Extends: | Field
xtype: | multiselect
A control that allows selection and form submission of multiple list items.

Config Options

Config Options Defined By
allowBlank : Boolean
False to require at least one item in the list to be selected, true to allow no selection (defaults to true).
MultiSelect
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
appendOnly : String
True if the list should only allow append drops when drag/drop is enabled (use for lists which are sorted, defaults ...
True if the list should only allow append drops when drag/drop is enabled (use for lists which are sorted, defaults to false).
MultiSelect
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: "input", type: "text", size: "20", autocomplete: "off"}
Field
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
blankText : String
Default text displayed when the control contains no items (defaults to the same value as Ext.form.TextField.blankTex...
Default text displayed when the control contains no items (defaults to the same value as Ext.form.TextField.blankText.
MultiSelect
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
A custom CSS class to apply to the field's underlying element (defaults to "").
Field
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
ddReorder : Boolean
Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
MultiSelect
delimiter : String
The string used to delimit between items when set or returned as a string of values (defaults to ',').
MultiSelect
disabled : Boolean
True to disable the field (defaults to false). Be aware that conformant with the <a href="http://www.w3.org/TR/html40...
True to disable the field (defaults to false).

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Field
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
displayField : String/Number
Name/Index of the desired display field in the dataset (defaults to 0).
MultiSelect
dragGroup : String/Array
The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
MultiSelect
dropGroup : String/Array
The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
MultiSelect
fieldClass : String
The default CSS class for the field (defaults to "x-form-field")
Field
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
height : Number
Height in pixels of the control (defaults to 100).
MultiSelect
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
inputType : String
The type attribute for input fields -- e.g. radio, text, password, file (defaults to "text"). The types "file" and "p...
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', emptyText is not supported and should be avoided.
Field
invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
legend : String
Wraps the object with a fieldset and specified legend.
MultiSelect
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maxSelections : Number
Maximum number of selections allowed (defaults to Number.MAX_VALUE).
MultiSelect
maxSelectionsText : String
Validation message displayed when maxSelections is not met (defaults to 'Maximum {0} item(s) allowed'). The {0} tok...
Validation message displayed when maxSelections is not met (defaults to 'Maximum {0} item(s) allowed'). The {0} token will be replaced by the value of maxSelections.
MultiSelect
minSelections : Number
Minimum number of selections allowed (defaults to 0).
MultiSelect
minSelectionsText : String
Validation message displayed when minSelections is not met (defaults to 'Minimum {0} item(s) required'). The {0} to...
Validation message displayed when minSelections is not met (defaults to 'Minimum {0} item(s) required'). The {0} token will be replaced by the value of minSelections.
MultiSelect
msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value ...
The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text directly to the innerHTML of the specified element
Field
name : String
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automaticall...
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automatically included with form submit().
Field
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
readOnly : Boolean
true to mark the field as readOnly in HTML (defaults to false). Note: this only sets the element's readOnly DOM attri...
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 hideTrigger.

Field
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
store : Ext.data.Store/Array
The data source to which this MultiSelect is bound (defaults to undefined). Acceptable values for this property are:...
The data source to which this MultiSelect is bound (defaults to undefined). Acceptable values for this property are:
  • any Store subclass
  • an Array : Arrays will be converted to a Ext.data.ArrayStore internally.
    • 1-dimensional array : (e.g., ['Foo','Bar'])
      A 1-dimensional array will automatically be expanded (each array item will be the combo value and text)
    • 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 value, while the value at index 1 is assumed to be the combo text.
MultiSelect
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT...
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
tbar : Object/Array
The top toolbar of the control. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...
The top toolbar of the control. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button configs to be added to the toolbar.
MultiSelect
validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "key...
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
value : Mixed
A value to initialize this field with (defaults to undefined).
Field
valueField : String/Number
Name/Index of the desired value field in the dataset (defaults to 1).
MultiSelect
view : Ext.ListView
The Ext.ListView used to render the multiselect list.
MultiSelect
width : Number
Width in pixels of the control (defaults to 100).
MultiSelect
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
originalValue : mixed
The original value of the field as configured in the value configuration, or as loaded by the last form load operatio...
The original value of the field as configured in the value configuration, or as loaded by the last form load operation if the form's trackResetOnLoad setting is true.
Field
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
MultiSelect( Object config )
Create a new MultiSelect
Create a new MultiSelect
Parameters:
  • config : Object
    Configuration options
Returns:
  • void
xtype: multiselect
MultiSelect
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
clearInvalid() : void
Clear any invalid styles/messages for this field
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
Field
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getName() : String
Returns the name or hiddenName attribute of the field if available.
Returns the name or hiddenName attribute of the field if available.
Parameters:
  • None.
Returns:
  • String
    name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRawValue() : Mixed
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue...
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getTargetFromEvent() : void
Part of the Ext.dd.DropZone interface. If no target node is found, the whole Element becomes the target, and this ca...
Part of the Ext.dd.DropZone interface. If no target node is found, the whole Element becomes the target, and this causes the drop gesture to append.
Parameters:
  • None.
Returns:
  • void
MultiSelect
getValue() : Array
Returns an array of data values for the selected items in the list. The values will be separated by delimiter.
Returns an array of data values for the selected items in the list. The values will be separated by delimiter.
Parameters:
  • None.
Returns:
  • Array
    value An array of string data values
MultiSelect
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isDirty() : Boolean
Returns true if the value of this Field has been changed from its original value. Will return false if the field is d...

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 form was configured with Ext.form.BasicForm.trackResetOnLoad then the original value is updated when the values are loaded by Ext.form.BasicForm.setValues.

Parameters:
  • None.
Returns:
  • Boolean
    True if this field has been changed from its original value (and is not disabled), false otherwise.
Field
isValid( Boolean preventMark ) : Boolean
Returns whether or not the field value is currently valid
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
Field
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
markInvalid( [String msg] ) : void
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the fi...
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
Parameters:
  • msg : String
    (optional) The validation message (defaults to invalidText)
Returns:
  • void
Field
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
reset() : void
Resets the current field value to the originally loaded value and clears any validation messages. See Ext.form.BasicF...
Resets the current field value to the originally loaded value and clears any validation messages. See Ext.form.BasicForm.trackResetOnLoad
Parameters:
  • None.
Returns:
  • void
Field
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue( Mixed value ) : Mixed
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Mixed
    value The field value that is set
Field
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setValue( String/Array values ) : void
Sets a delimited string (using delimiter) or array of data values into the list.
Sets a delimited string (using delimiter) or array of data values into the list.
Parameters:
  • values : String/Array
    The values to set
Returns:
  • void
MultiSelect
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent
validate() : Boolean
Validates the field value
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
Field

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
blur : ( Ext.form.Field this )
Fires when this field loses input focus.
Fires when this field loses input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
Fires just before the field blurs if the field value has changed.
Fires just before the field blurs if the field value has changed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • newValue : Mixed
    The new value
  • oldValue : Mixed
    The original value
Field
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
Fires when this field receives input focus.
Fires when this field receives input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this, String msg )
Fires after the field has been marked as invalid.
Fires after the field has been marked as invalid.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • msg : String
    The validation message
Field
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Pan...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Panel.keys or Ext.KeyMap. You can check 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.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Field
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
valid : ( Ext.form.Field this )
Fires after the field has been validated with no errors.
Fires after the field has been validated with no errors.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            TriggerField
              ComboBox
                SelectBox

Class Ext.ux.form.SelectBox

Package: | Ext.ux.form
Defined In: | SelectBox.js
Class: | SelectBox
Extends: | ComboBox
Author: | Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
xtype: | selectbox

Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging through the list, with item selection occurring when the mouse button is released. When used will automatically set editable to false and call Ext.Element.unselectable on inner elements. Re-enabling editable after calling this will NOT work.

Config Options

Config Options Defined By
allQuery : String
The text query to send to the server to return all records for the list with no filtering (defaults to '')
ComboBox
allowBlank : Boolean
Specify false to validate that the value's length is > 0 (defaults to true)
TextField
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: "input", type: "text", size: "24", autocomplete: "off"}
ComboBox
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
blankText : String
The error text to display if the allowBlank validation fails (defaults to 'This field is required')
TextField
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
A custom CSS class to apply to the field's underlying element (defaults to "").
Field
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disableKeyFilter : Boolean
Specify true to disable input keystroke filtering (defaults to false)
TextField
disabled : Boolean
True to disable the field (defaults to false). Be aware that conformant with the <a href="http://www.w3.org/TR/html40...
True to disable the field (defaults to false).

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Field
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
displayField : String
The underlying data field name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'text' if transf...
The underlying data field name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'text' if transforming a select a select).

See also valueField.

Note: if using a ComboBox in an Editor Grid a renderer will be needed to show the displayField when the editor is not active.

ComboBox
editable : Boolean
false to prevent the user from typing text directly into the field, the field will only respond to a click on the tri...
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)
TriggerField
emptyClass : String
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is au...
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
emptyText : String
The default text to place into an empty field (defaults to null). Note: that this value will be submitted to the serv...
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 name.
TextField
enableKeyEvents : Boolean
true to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldClass : String
The default CSS class for the field (defaults to "x-form-field")
Field
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
forceSelection : Boolean
true to restrict the selected value to one of the values in the list, false to allow the user to set arbitrary text i...
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)
ComboBox
grow : Boolean
true if this field should automatically grow and shrink to its content (defaults to false)
TextField
growMax : Number
The maximum width to allow when grow = true (defaults to 800)
TextField
growMin : Number
The minimum width to allow when grow = true (defaults to 30)
TextField
handleHeight : Number
The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
ComboBox
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hiddenId : String
If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id (defaults to the hidde...
If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id (defaults to the hiddenName). The hiddenId and combo id should be different, since no two DOM nodes should share the same id.
ComboBox
hiddenName : String
If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults t...
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 valueField.

Note: the hidden field's id will also default to this name if hiddenId is not specified. The ComboBox id and the hiddenId should be different, since no two DOM nodes should share the same id. So, if the ComboBox name and hiddenName are the same, you should specify a unique hiddenId.

ComboBox
hiddenValue : String
Sets the initial value of the hidden field if hiddenName is specified to contain the selected valueField, from the St...
Sets the initial value of the hidden field if hiddenName is specified to contain the selected valueField, from the Store. Defaults to the configured value.
ComboBox
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
hideTrigger : Boolean
true to hide the trigger element and display only the base text field (defaults to false)
TriggerField
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
inputType : String
The type attribute for input fields -- e.g. radio, text, password, file (defaults to "text"). The types "file" and "p...
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', emptyText is not supported and should be avoided.
Field
invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
itemSelector : String
A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the Ext.Dat...

A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the Ext.DataView which handles the dropdown display will be working with.

Note: this setting is required if a custom XTemplate has been specified in tpl which assigns a class other than

'x-combo-list-item'
to dropdown list items
ComboBox
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
lazyInit : Boolean
true to not initialize the list for this combo until the field is focused (defaults to true)
ComboBox
lazyRender : Boolean
true to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor ...
true to prevent the ComboBox from rendering until requested (should always be used when rendering into an Ext.Editor (e.g. Grids), defaults to false).
ComboBox
listAlign : String
A valid anchor position value. See Ext.Element.alignTo for details on supported anchor positions (defaults to 'tl-bl?...
A valid anchor position value. See Ext.Element.alignTo for details on supported anchor positions (defaults to 'tl-bl?')
ComboBox
listClass : String
The CSS class to add to the predefined 'x-combo-list' class applied the dropdown list element (defaults to '').
ComboBox
listEmptyText : String
The empty text to display in the data view if no items are found. (defaults to '')
ComboBox
listWidth : Number
The width (used as a parameter to Ext.Element.setWidth) of the dropdown list (defaults to the width of the ComboBox f...
The width (used as a parameter to Ext.Element.setWidth) of the dropdown list (defaults to the width of the ComboBox field). See also minListWidth
ComboBox
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
loadingText : String
The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Load...
The text to display in the dropdown list while data is loading. Only applies when mode = 'remote' (defaults to 'Loading...')
ComboBox
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskRe : RegExp
An input mask regular expression that will be used to filter keystrokes that do not match (defaults to null)
TextField
maxHeight : Number
The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
ComboBox
maxLength : Number
Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide...
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 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'}
});
TextField
maxLengthText : String
Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxL...
Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxLength}')
TextField
minChars : Number
The minimum number of characters the user must type before autocomplete and typeAhead activate (defaults to 4 if mode...
The minimum number of characters the user must type before autocomplete and
typeAhead activate (defaults to 4 if mode = 'remote' or 0 if
mode = 'local', does not apply if
editable = false).
ComboBox
minHeight : Number
The minimum height in pixels of the dropdown list when the list is constrained by its distance to the viewport edges ...
The minimum height in pixels of the dropdown list when the list is constrained by its distance to the viewport edges (defaults to 90)
ComboBox
minLength : Number
Minimum input field length required (defaults to 0)
TextField
minLengthText : String
Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minL...
Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minLength}')
TextField
minListWidth : Number
The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if listWidth has a higher value)
ComboBox
mode : String
Acceptable values are: <div class="mdetail-params"> 'remote' : Default <p class="sub-desc">Automatically loads the st...
Acceptable values are:
  • 'remote' : Default

    Automatically loads the 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 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'
});
ComboBox
msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value ...
The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text directly to the innerHTML of the specified element
Field
name : String
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automaticall...
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automatically included with form submit().
Field
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageSize : Number
If greater than 0, a Ext.PagingToolbar is displayed in the footer of the dropdown list and the filter queries will ex...
If greater than 0, a Ext.PagingToolbar is displayed in the footer of the dropdown list and the filter queries will execute with page start and limit parameters. Only applies when mode = 'remote' (defaults to 0).
ComboBox
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
queryDelay : Number
The length of time in milliseconds to delay between the start of typing and sending the query to filter the dropdown ...
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 mode = 'remote' or 10 if mode = 'local')
ComboBox
queryParam : String
Name of the query (baseParam name for the store) as it will be passed on the querystring (defaults to 'query')
ComboBox
readOnly : Boolean
true to mark the field as readOnly in HTML (defaults to false). Note: this only sets the element's readOnly DOM attri...
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 hideTrigger.

Field
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
regex : RegExp
A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If the test fai...
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 regexText.
TextField
regexText : String
The error text to display if regex is used and the test fails during validation (defaults to '')
TextField
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
resizable : Boolean
true to add a resize handle to the bottom of the dropdown list (creates an Ext.Resizable with 'se' pinned handles). D...
true to add a resize handle to the bottom of the dropdown list (creates an Ext.Resizable with 'se' pinned handles). Defaults to false.
ComboBox
selectOnFocus : Boolean
true to select any existing text in the field immediately on focus. Only applies when editable = true (defaults to fa...
true to select any existing text in the field immediately on focus. Only applies when editable = true (defaults to false).
ComboBox
selectedClass : String
CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
ComboBox
shadow : Boolean/String
true or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
ComboBox
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
store : Ext.data.Store/Array
The data source to which this combo is bound (defaults to undefined). Acceptable values for this property are: <div c...
The data source to which this combo is bound (defaults to undefined). Acceptable values for this property are:
  • any Store subclass
  • an Array : Arrays will be converted to a Ext.data.ArrayStore internally.
    • 1-dimensional array : (e.g., ['Foo','Bar'])
      A 1-dimensional array will automatically be expanded (each array item will be the combo value and text)
    • 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 value, while the value at index 1 is assumed to be the combo text.

See also mode.

ComboBox
stripCharsRe : RegExp
A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT...
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
title : String
If supplied, a header element is created containing this text and added into the top of the dropdown list (defaults t...
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)
ComboBox
tpl : String/Ext.XTemplate
The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. The dropdown list is...

The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. The dropdown list is displayed in a DataView. See 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 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 itemSelector for additional details.

ComboBox
transform : Mixed
The id, DOM node or element of an existing HTML SELECT to convert to a ComboBox. Note that if you specify this and th...
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 Ext.form.BasicForm or Ext.form.FormPanel, you must also set lazyRender = true.
ComboBox
triggerAction : String
The action to execute when the trigger is clicked. <div class="mdetail-params"> 'query' : Default <p class="sub-desc"...
The action to execute when the trigger is clicked.
  • 'query' : Default

    run the query using the raw value.

  • 'all' :

    run the query specified by the allQuery config option

See also queryParam.

ComboBox
triggerClass : String
An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger' and...
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).
ComboBox
triggerConfig : Mixed
A DomHelper config object specifying the structure of the trigger element for this Field. (Optional). Specify this wh...

A 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}
TriggerField
typeAhead : Boolean
true to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if ...
true to populate and autoselect the remainder of the text being typed after a configurable delay (typeAheadDelay) if it matches a known value (defaults to false)
ComboBox
typeAheadDelay : Number
The length of time in milliseconds to wait until the typeahead text is displayed if typeAhead = true (defaults to 250...
The length of time in milliseconds to wait until the typeahead text is displayed if typeAhead = true (defaults to 250)
ComboBox
validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "key...
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validator : Function
A custom validation function to be called during field validation (defaults to null). If specified, this function wil...
A custom validation function to be called during field validation (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 current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
value : Mixed
A value to initialize this field with (defaults to undefined).
Field
valueField : String
The underlying data value name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'value' if trans...
The underlying data value name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'value' if transforming a select).

Note: use of a valueField requires the user to make a selection in order for a value to be mapped. See also hiddenName, hiddenValue, and displayField.

ComboBox
valueNotFoundText : String
When using a name/value combo, if the value passed to setValue is not found in the store, valueNotFoundText will be d...
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.
ComboBox
vtype : String
A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
vtypeText : String
A custom error message to display in place of the default message provided for the vtype currently set for this field...
A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Note: only applies if vtype is set, else ignored.
TextField
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
wrapFocusClass : String
The class added to the to the wrap of the trigger element. Defaults to x-trigger-wrap-focus.
TriggerField
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
lastQuery : String
The value of the match string used to filter the store. Delete this property to force a requery. Example use: var com...
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: ''
});
ComboBox
originalValue : mixed
The original value of the field as configured in the value configuration, or as loaded by the last form load operatio...
The original value of the field as configured in the value configuration, or as loaded by the last form load operation if the form's trackResetOnLoad setting is true.
Field
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component
view : Ext.DataView
The DataView used to display the ComboBox's options.
ComboBox

Public Methods

Method Defined By
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
autoSize() : void
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only ta...
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
Parameters:
  • None.
Returns:
  • void
TextField
clearInvalid() : void
Clear any invalid styles/messages for this field
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
Field
clearValue() : void
Clears any text/value currently set in the field
Clears any text/value currently set in the field
Parameters:
  • None.
Returns:
  • void
ComboBox
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collapse() : void
Hides the dropdown list if it is currently expanded. Fires the collapse event on completion.
Hides the dropdown list if it is currently expanded. Fires the collapse event on completion.
Parameters:
  • None.
Returns:
  • void
ComboBox
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doQuery( String query, Boolean forceAll ) : void
Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the query allowing the ...
Execute a query to filter the dropdown list. Fires the beforequery event prior to performing the query allowing the query action to be canceled if needed.
Parameters:
  • query : String
    The SQL query to execute
  • forceAll : Boolean
    true to force the query to execute even if there are currently fewer characters in the field than the minimum specified by the minChars config option. It also clears any filter previously saved in the current store (defaults to false)
Returns:
  • void
ComboBox
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
expand() : void
Expands the dropdown list if it is currently hidden. Fires the expand event on completion.
Expands the dropdown list if it is currently hidden. Fires the expand event on completion.
Parameters:
  • None.
Returns:
  • void
ComboBox
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getListParent() : void
Returns the element used to house this ComboBox's pop-up list. Defaults to the document body. A custom implementation...

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
    ]
});
Parameters:
  • None.
Returns:
  • void
ComboBox
getName() : String
Returns the name or hiddenName attribute of the field if available.
Returns the name or hiddenName attribute of the field if available.
Parameters:
  • None.
Returns:
  • String
    name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRawValue() : Mixed
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue...
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getStore() : Ext.data.Store
Returns the store associated with this combo.
Returns the store associated with this combo.
Parameters:
  • None.
Returns:
  • Ext.data.Store
    The store
ComboBox
getValue() : String
Returns the currently selected field value or empty string if no value is set.
Returns the currently selected field value or empty string if no value is set.
Parameters:
  • None.
Returns:
  • String
    value The selected value
ComboBox
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isDirty() : Boolean
Returns true if the value of this Field has been changed from its original value. Will return false if the field is d...

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 form was configured with Ext.form.BasicForm.trackResetOnLoad then the original value is updated when the values are loaded by Ext.form.BasicForm.setValues.

Parameters:
  • None.
Returns:
  • Boolean
    True if this field has been changed from its original value (and is not disabled), false otherwise.
Field
isExpanded() : void
Returns true if the dropdown list is expanded, else false.
Returns true if the dropdown list is expanded, else false.
Parameters:
  • None.
Returns:
  • void
ComboBox
isValid( Boolean preventMark ) : Boolean
Returns whether or not the field value is currently valid
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
Field
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
markInvalid( [String msg] ) : void
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the fi...
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
Parameters:
  • msg : String
    (optional) The validation message (defaults to invalidText)
Returns:
  • void
Field
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
onTriggerClick( EventObject e ) : void
The function that should handle the trigger's click event. This method does nothing by default until overridden by a...
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.
Parameters:
  • e : EventObject
Returns:
  • void
TriggerField
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
reset() : void
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText...
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText and emptyClass if the original value was blank.
Parameters:
  • None.
Returns:
  • void
TextField
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
select( Number index, Boolean scrollIntoView ) : void
Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event t...
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.
Parameters:
  • index : Number
    The zero-based index of the list item to select
  • scrollIntoView : Boolean
    False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
Returns:
  • void
ComboBox
selectByValue( String value, Boolean scrollIntoView ) : Boolean
Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire. The sto...
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.
Parameters:
  • value : String
    The data value of the item to select
  • scrollIntoView : Boolean
    False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
Returns:
  • Boolean
    True if the value matched an item in the list, else false
ComboBox
selectText( [Number start], [Number end] ) : void
Selects text in this field
Selects text in this field
Parameters:
  • start : Number
    (optional) The index where the selection should start (defaults to 0)
  • end : Number
    (optional) The index where the selection should end (defaults to the text length)
Returns:
  • void
TextField
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setEditable( Boolean value ) : void
Allow or prevent the user from directly editing the field text. If false is passed, the user will only be able to mo...
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. This method is the runtime equivalent of setting the 'editable' config option at config time.
Parameters:
  • value : Boolean
    True to allow the user to directly edit the field text
Returns:
  • void
TriggerField
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue( Mixed value ) : Mixed
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Mixed
    value The field value that is set
Field
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setValue( String value ) : Ext.form.Field
Sets the specified value into the field. If the value finds a match, the corresponding record text will be displayed...
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).
Parameters:
  • value : String
    The value to match
Returns:
  • Ext.form.Field
    this
ComboBox
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent
validate() : Boolean
Validates the field value
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
Field
validateValue( Mixed value ) : Boolean
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Parameters:
  • value : Mixed
    The value to validate
Returns:
  • Boolean
    True if the value is valid, else false
TextField

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this, Number width )
Fires when the autoSize function is triggered. The field may or may not have actually changed size according to the d...
Fires when the 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.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
    This text field
  • width : Number
    The new field width
TextField
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforequery : ( Object queryEvent )
Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to t...
Fires before all queries are processed. Return false to cancel the query or set the queryEvent's cancel property to true.
Listeners will be called with the following arguments:
  • queryEvent : Object
    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
ComboBox
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeselect : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
Fires before a list item is selected. Return false to cancel the selection.
Fires before a list item is selected. Return false to cancel the selection.
Listeners will be called with the following arguments:
  • combo : Ext.form.ComboBox
    This combo box
  • record : Ext.data.Record
    The data record returned from the underlying store
  • index : Number
    The index of the selected item in the dropdown list
ComboBox
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
blur : ( Ext.form.Field this )
Fires when this field loses input focus.
Fires when this field loses input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
Fires just before the field blurs if the field value has changed.
Fires just before the field blurs if the field value has changed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • newValue : Mixed
    The new value
  • oldValue : Mixed
    The original value
Field
collapse : ( Ext.form.ComboBox combo )
Fires when the dropdown list is collapsed
Fires when the dropdown list is collapsed
Listeners will be called with the following arguments:
  • combo : Ext.form.ComboBox
    This combo box
ComboBox
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
expand : ( Ext.form.ComboBox combo )
Fires when the dropdown list is expanded
Fires when the dropdown list is expanded
Listeners will be called with the following arguments:
  • combo : Ext.form.ComboBox
    This combo box
ComboBox
focus : ( Ext.form.Field this )
Fires when this field receives input focus.
Fires when this field receives input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this, String msg )
Fires after the field has been marked as invalid.
Fires after the field has been marked as invalid.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • msg : String
    The validation message
Field
keydown : ( Ext.form.TextField this, Ext.EventObject e )
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this, Ext.EventObject e )
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this, Ext.EventObject e )
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
Fires when a list item is selected
Fires when a list item is selected
Listeners will be called with the following arguments:
  • combo : Ext.form.ComboBox
    This combo box
  • record : Ext.data.Record
    The data record returned from the underlying store
  • index : Number
    The index of the selected item in the dropdown list
ComboBox
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Pan...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Panel.keys or Ext.KeyMap. You can check 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.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Field
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
valid : ( Ext.form.Field this )
Fires after the field has been validated with no errors.
Fires after the field has been validated with no errors.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Field
          TextField
            NumberField
              SpinnerField

Class Ext.ux.form.SpinnerField

Package: | Ext.ux.form
Defined In: | SpinnerField.js
Class: | SpinnerField
Extends: | NumberField
xtype: | spinnerfield
Creates a field utilizing Ext.ux.Spinner

Config Options

Config Options Defined By
allowBlank : Boolean
Specify false to validate that the value's length is > 0 (defaults to true)
TextField
allowDecimals : Boolean
False to disallow decimal values (defaults to true)
NumberField
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
allowNegative : Boolean
False to prevent entering a negative sign (defaults to true)
NumberField
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoCreate : String/Object
A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this ...

A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:

{tag: "input", type: "text", size: "20", autocomplete: "off"}
Field
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
baseChars : String
The base set of characters to evaluate as valid numbers (defaults to '0123456789').
NumberField
blankText : String
The error text to display if the allowBlank validation fails (defaults to 'This field is required')
TextField
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
A custom CSS class to apply to the field's underlying element (defaults to "").
Field
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
decimalPrecision : Number
The maximum precision to display after the decimal separator (defaults to 2)
NumberField
decimalSeparator : String
Character(s) to allow as the decimal separator (defaults to '.')
NumberField
disableKeyFilter : Boolean
Specify true to disable input keystroke filtering (defaults to false)
TextField
disabled : Boolean
True to disable the field (defaults to false). Be aware that conformant with the <a href="http://www.w3.org/TR/html40...
True to disable the field (defaults to false).

Be aware that conformant with the HTML specification, disabled Fields will not be submitted.

Field
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
emptyClass : String
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is au...
The CSS class to apply to an empty field to style the emptyText (defaults to 'x-form-empty-field'). This class is automatically added and removed as needed depending on the current field value.
TextField
emptyText : String
The default text to place into an empty field (defaults to null). Note: that this value will be submitted to the serv...
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 name.
TextField
enableKeyEvents : Boolean
true to enable the proxying of key events for the HTML input field (defaults to false)
TextField
fieldClass : String
The default CSS class for the field (defaults to "x-form-field x-form-num-field")
NumberField
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
focusClass : String
The CSS class to use when the field receives focus (defaults to "x-form-focus")
Field
grow : Boolean
true if this field should automatically grow and shrink to its content (defaults to false)
TextField
growMax : Number
The maximum width to allow when grow = true (defaults to 800)
TextField
growMin : Number
The minimum width to allow when grow = true (defaults to 30)
TextField
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
inputType : String
The type attribute for input fields -- e.g. radio, text, password, file (defaults to "text"). The types "file" and "p...
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', emptyText is not supported and should be avoided.
Field
invalidClass : String
The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
Field
invalidText : String
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field i...
The error text to use when marking a field invalid and no message is provided (defaults to "The value in this field is invalid")
Field
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskRe : RegExp
An input mask regular expression that will be used to filter keystrokes that do not match (defaults to null)
TextField
maxLength : Number
Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide...
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 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'}
});
TextField
maxLengthText : String
Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxL...
Error text to display if the maximum length validation fails (defaults to 'The maximum length for this field is {maxLength}')
TextField
maxText : String
Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxVal...
Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
NumberField
maxValue : Number
The maximum allowed value (defaults to Number.MAX_VALUE)
NumberField
minLength : Number
Minimum input field length required (defaults to 0)
TextField
minLengthText : String
Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minL...
Error text to display if the minimum length validation fails (defaults to 'The minimum length for this field is {minLength}')
TextField
minText : String
Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minVal...
Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
NumberField
minValue : Number
The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
NumberField
msgFx : String
Experimental The effect used when displaying a validation message under the field (defaults to 'normal').
Field
msgTarget : String
The location where error text should display. Should be one of the following values (defaults to 'qtip'): Value ...
The location where error text should display. Should be one of the following values (defaults to 'qtip'):
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text directly to the innerHTML of the specified element
Field
name : String
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automaticall...
The field's HTML name attribute (defaults to ""). Note: this property must be set if this field is to be automatically included with form submit().
Field
nanText : String
Error text to display if the value is not a valid number. For example, this can happen if a valid character like '.'...
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")
NumberField
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
readOnly : Boolean
true to mark the field as readOnly in HTML (defaults to false). Note: this only sets the element's readOnly DOM attri...
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 hideTrigger.

Field
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
regex : RegExp
A JavaScript RegExp object to be tested against the field value during validation (defaults to null). If the test fai...
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 regexText.
TextField
regexText : String
The error text to display if regex is used and the test fails during validation (defaults to '')
TextField
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
selectOnFocus : Boolean
true to automatically select any existing field text when the field receives input focus (defaults to false)
TextField
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
stripCharsRe : RegExp
A JavaScript RegExp object used to strip unwanted content from the value before validation (defaults to null).
TextField
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyT...
The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).
Field
validateOnBlur : Boolean
Whether the field should validate when it loses focus (defaults to true).
Field
validationDelay : Number
The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)
Field
validationEvent : String/Boolean
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "key...
The event that should initiate field validation. Set to false to disable automatic validation (defaults to "keyup").
Field
validator : Function
A custom validation function to be called during field validation (defaults to null). If specified, this function wil...
A custom validation function to be called during field validation (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 current field value and expected to return boolean true if the value is valid or a string error message if invalid.
TextField
value : Mixed
A value to initialize this field with (defaults to undefined).
Field
vtype : String
A validation type name as defined in Ext.form.VTypes (defaults to null)
TextField
vtypeText : String
A custom error message to display in place of the default message provided for the vtype currently set for this field...
A custom error message to display in place of the default message provided for the vtype currently set for this field (defaults to ''). Note: only applies if vtype is set, else ignored.
TextField
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
originalValue : mixed
The original value of the field as configured in the value configuration, or as loaded by the last form load operatio...
The original value of the field as configured in the value configuration, or as loaded by the last form load operation if the form's trackResetOnLoad setting is true.
Field
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
autoSize() : void
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only ta...
Automatically grows the field to accomodate the width of the text up to the maximum field width allowed. This only takes effect if grow = true, and fires the autosize event.
Parameters:
  • None.
Returns:
  • void
TextField
clearInvalid() : void
Clear any invalid styles/messages for this field
Clear any invalid styles/messages for this field
Parameters:
  • None.
Returns:
  • void
Field
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getName() : String
Returns the name or hiddenName attribute of the field if available.
Returns the name or hiddenName attribute of the field if available.
Parameters:
  • None.
Returns:
  • String
    name The field {@link Ext.form.Field#name name} or {@link Ext.form.ComboBox#hiddenName hiddenName}
Field
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getRawValue() : Mixed
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue...
Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see getValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getValue() : Mixed
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRa...
Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see getRawValue.
Parameters:
  • None.
Returns:
  • Mixed
    value The field value
Field
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isDirty() : Boolean
Returns true if the value of this Field has been changed from its original value. Will return false if the field is d...

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 form was configured with Ext.form.BasicForm.trackResetOnLoad then the original value is updated when the values are loaded by Ext.form.BasicForm.setValues.

Parameters:
  • None.
Returns:
  • Boolean
    True if this field has been changed from its original value (and is not disabled), false otherwise.
Field
isValid( Boolean preventMark ) : Boolean
Returns whether or not the field value is currently valid
Returns whether or not the field value is currently valid
Parameters:
  • preventMark : Boolean
    True to disable marking the field invalid
Returns:
  • Boolean
    True if the value is valid, else false
Field
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
markInvalid( [String msg] ) : void
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the fi...
Mark this field as invalid, using msgTarget to determine how to display the error and applying invalidClass to the field's element.
Parameters:
  • msg : String
    (optional) The validation message (defaults to invalidText)
Returns:
  • void
Field
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
reset() : void
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText...
Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText and emptyClass if the original value was blank.
Parameters:
  • None.
Returns:
  • void
TextField
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
selectText( [Number start], [Number end] ) : void
Selects text in this field
Selects text in this field
Parameters:
  • start : Number
    (optional) The index where the selection should start (defaults to 0)
  • end : Number
    (optional) The index where the selection should end (defaults to the text length)
Returns:
  • void
TextField
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRawValue( Mixed value ) : Mixed
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Mixed
    value The field value that is set
Field
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setValue( Mixed value ) : Ext.form.Field
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Sets a data value into the field and validates it. To set the value directly without validation see setRawValue.
Parameters:
  • value : Mixed
    The value to set
Returns:
  • Ext.form.Field
    this
Field
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent
validate() : Boolean
Validates the field value
Validates the field value
Parameters:
  • None.
Returns:
  • Boolean
    True if the value is valid, else false
Field
validateValue( Mixed value ) : Boolean
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Validates a value according to the field's validation rules and marks the field as invalid if the validation fails
Parameters:
  • value : Mixed
    The value to validate
Returns:
  • Boolean
    True if the value is valid, else false
TextField

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
autosize : ( Ext.form.Field this, Number width )
Fires when the autoSize function is triggered. The field may or may not have actually changed size according to the d...
Fires when the 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.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
    This text field
  • width : Number
    The new field width
TextField
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
blur : ( Ext.form.Field this )
Fires when this field loses input focus.
Fires when this field loses input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
Fires just before the field blurs if the field value has changed.
Fires just before the field blurs if the field value has changed.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • newValue : Mixed
    The new value
  • oldValue : Mixed
    The original value
Field
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
focus : ( Ext.form.Field this )
Fires when this field receives input focus.
Fires when this field receives input focus.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
invalid : ( Ext.form.Field this, String msg )
Fires after the field has been marked as invalid.
Fires after the field has been marked as invalid.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • msg : String
    The validation message
Field
keydown : ( Ext.form.TextField this, Ext.EventObject e )
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Keydown input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keypress : ( Ext.form.TextField this, Ext.EventObject e )
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Keypress input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
keyup : ( Ext.form.TextField this, Ext.EventObject e )
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Keyup input field event. This event only fires if enableKeyEvents is set to true.
Listeners will be called with the following arguments:
  • this : Ext.form.TextField
    This text field
  • e : Ext.EventObject
TextField
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
specialkey : ( Ext.form.Field this, Ext.EventObject e )
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Pan...
Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. To handle other keys see Ext.Panel.keys or Ext.KeyMap. You can check 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.getKey() == e.ENTER) {
                        var form = field.ownerCt.getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});
Listeners will be called with the following arguments:
  • this : Ext.form.Field
  • e : Ext.EventObject
    The event object
Field
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
valid : ( Ext.form.Field this )
Fires after the field has been validated with no errors.
Fires after the field has been validated with no errors.
Listeners will be called with the following arguments:
  • this : Ext.form.Field
Field


Observable
    Component
      BoxComponent
        Container
          Panel
            GMapPanel

Class Ext.ux.GMapPanel

Package: | Ext.ux
Defined In: | GMapPanel.js
Class: | GMapPanel
Extends: | Panel
Author: | Shea Frederick

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
animCollapse : Boolean
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...

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 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 renderTo will be ignored and the target element's parent node will automatically be used as the panel's container.

Panel
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
true to use height:'auto', false to use fixed height (defaults to false). Note: Setting autoHeight:true means that th...
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.
Panel
autoLoad : Object/String/Function
A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...
A valid url spec according to the Updater 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 body element, so it may be refreshed at any time.

Panel
autoScroll : Boolean
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
baseCls : String
The base CSS class to apply to this panel's element (defaults to 'x-panel'). Another option available by default is t...
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 unstyled also.

Panel
bbar : Object/Array
The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...

The bottom toolbar of the panel. This can be a 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 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.

Panel
bbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

Panel
bodyBorder : Boolean
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only a...
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyCfg : Object
A DomHelper element specification object may be specified for any Panel Element. By default, the Default element in t...

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

Configuring a Custom element may be used, for example, to force the body Element to use a different form of markup than is created by default. An example of this might be to 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 addClass
    footerStyle:    'background-color:red' // see bodyStyle
});

The example above also explicitly creates a footer with custom markup and styling applied.

Panel
bodyCssClass : String/Object/Function
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defau...
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defaults to null). See bodyCfg.
Panel
bodyStyle : String/Object/Function
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to nu...
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to null). See bodyCfg.
Panel
border : Boolean
True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the bord...
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 bodyBorder to false.
Panel
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
buttonAlign : String
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right'...
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right').
Panel
buttons : Array
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration propert...
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration property will be an array of Ext.Buttons or 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.
Panel
bwrapCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

Panel
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
closable : Boolean
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Cla...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
collapseFirst : Boolean
true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...
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).
Panel
collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
collapsible : Boolean
True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header ...
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).
Panel
contentEl : String
Specify the id of an existing HTML node to use as the panel's body content (defaults to ''). Description : <div clas...

Specify the id of an existing HTML node to use as the panel's body content (defaults to '').

  • Description :
      This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel when the Panel is rendered to use as the content (it is not going to be the actual panel itself).
  • Notes :
      The specified HTML Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
      The specified HTML element used will not participate in any layout scheme that the Panel may use. It's just HTML. Layouts operate on child 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.
Panel
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
Render this panel disabled (default is false). An important note when using the disabled config on panels is that IE ...
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 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
        }
    }
});
Panel
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
draggable : Boolean/Object
true to enable dragging of this Panel (defaults to false). For custom drag/drop implementations, an Ext.Panel.DD conf...

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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of 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();
Panel
elements : String
A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be gener...
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'.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into t...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's 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'
        }]
    }),
    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.

Panel
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
floating : Mixed
This property is used to configure the underlying Ext.Layer. Acceptable values for this configuration property are:<d...

This property is used to configure the underlying 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.
  • object :
    The specified object will be used as the configuration object for the Ext.Layer that will be created.
Panel
footer : Boolean
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if ...
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if buttons or a fbar have been configured. See bodyCfg for an example.
Panel
footerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCfg also.

Panel
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
frame : Boolean
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounde...
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounded corners (also see 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>
Panel
header : Boolean
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will b...
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
headerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCfg also.

Panel
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
html : String/Object
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content ...
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
iconCls : String
The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). An example o...
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; }
Panel
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! ** A single item, or an array of child Components to be added t...
** IMPORTANT: be sure to 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 Ext.Component
  • a fully instanciated object or
  • an object literal that:
    • has a specified xtype
    • the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
    • If an xtype is not explicitly specified, the 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 doLayout call.
  • Do not specify contentEl/ html with items.
Container
keys : Object/Array
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to thi...
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to this panel (defaults to null).
Panel
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specifi...

*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 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 layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the 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 Ext.layout.ContainerLayout will be created and used.

      Valid layout type values are:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • 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).

    • 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.

Container
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskDisabled : Boolean
true to mask the panel when it is disabled, false to not mask it (defaults to true). Either way, the panel will alwa...
true to mask the panel when it is 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.
Panel
minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
preventBodyReset : Boolean
Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added to the panel's element, effec...
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.).
Panel
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
shadow : Boolean/String
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (...
true (or a valid Ext.Shadow 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 floating = true.
Panel
shadowOffset : Number
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when float...
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies wh...
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Pan...
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
tbar : Object/Array
The top toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button confi...

The top toolbar of the panel. This can be a 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 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.

Panel
tbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

Panel
title : String
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When...
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
titleCollapse : Boolean
true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, fa...
true to allow expanding and collapsing the panel (when 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 BorderLayout.Region floatable config option.
Panel
toolTemplate : Ext.Template/Ext.XTemplate
A Template used to create tools in the header Element. Defaults to:new Ext.Template('&lt;div class="x-tool x-tool-{id...

A Template used to create tools in the 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 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;}
Panel
tools : Array
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element...
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an 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 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 : Ext.Panel
      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 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 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;}
Panel
unstyled : Boolean
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes ...
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
Panel
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
body : Ext.Element
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, ...
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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 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 el also.

Panel
buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
dd : Ext.dd.DragSource.
If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles drag...

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.
Panel
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
footer : Ext.Element
The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note ...
The Panel's footer Element. Read-only.

This Element is used to house the Panel's buttons or fbar.

Note: see the Note for el also.

Panel
header : Ext.Element
The Panel's header Element. Read-only. This Element is used to house the title and tools Note: see the Note for el al...
The Panel's header Element. Read-only.

This Element is used to house the title and tools

Note: see the Note for el also.

Panel
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
add( Object/Array component, Object (Optional), Object (Optional) ) : Ext.Component
Adds Component(s) to this Container. Description : <ul class="mdetail-params"> Fires the beforeadd event before addin...

Adds Component(s) to this Container.

Description :

  • Fires the beforeadd event before adding
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the add event after the component has been added.

Notes :

  • If the Container is already rendered when add is called, you may need to call 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 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
  • Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Object/Array

    Either a single component or an Array of components to add. See items for additional information.

  • (Optional) : Object
    component_2
  • (Optional) : Object
    component_n
Returns:
  • Ext.Component
    component The Component (or config object) that was added.
Container
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred approach is to ...
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 buttons config.
Parameters:
  • config : String/Object
    A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    The function to be called on button Ext.Button.click
  • scope : Object
    The scope to use for the button handler function
Returns:
  • Ext.Button
    The button that was added
Panel
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collapse( Boolean animate ) : Ext.Panel
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse ac...
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
expand( Boolean animate ) : Ext.Panel
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action ...
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar() : Ext.Toolbar
Returns the toolbar from the bottom (bbar) section of the panel.
Returns the toolbar from the bottom (bbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getFrameHeight() : Number
Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and header and ...
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 getInnerHeight.
Parameters:
  • None.
Returns:
  • Number
    The frame height
Panel
getFrameWidth() : Number
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the bo...
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
Parameters:
  • None.
Returns:
  • Number
    The frame width
Panel
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getInnerHeight() : Number
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame he...
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
Parameters:
  • None.
Returns:
  • Number
    The body height
Panel
getInnerWidth() : Number
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame widt...
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
Parameters:
  • None.
Returns:
  • Number
    The body width
Panel
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getTool( String id ) : Object
Retrieve a tool by id.
Retrieve a tool by id.
Parameters:
  • id : String
Returns:
  • Object
    tool
Panel
getTopToolbar() : Ext.Toolbar
Returns the toolbar from the top (tbar) section of the panel.
Returns the toolbar from the top (tbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getUpdater() : Ext.Updater
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Parameters:
  • None.
Returns:
  • Ext.Updater
    The Updater
Panel
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
load( Object/String/Function config ) : Ext.Panel
Loads this content panel immediately with content returned from an XHR call.
Loads this content panel immediately with content returned from an XHR call.
Parameters:
  • config : Object/String/Function
    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.
Returns:
  • Ext.Panel
    this
Panel
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass( String cls ) : void
Sets the CSS class that provides the icon image for this panel. This method will replace any existing icon class if ...
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 iconchange event after completion.
Parameters:
  • cls : String
    The new CSS class name
Returns:
  • void
Panel
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setTitle( String title, [String iconCls] ) : void
Sets the title text for the panel and optionally the icon class. In order to be able to set the title, a header eleme...

Sets the title text for the panel and optionally the 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 title, or configuring it with header: true.

Parameters:
  • title : String
    The title text to set
  • iconCls : String
    (optional) iconCls A user-defined CSS class that provides the icon image for this panel
Returns:
  • void
Panel
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse( Boolean animate ) : Ext.Panel
Shortcut for performing an expand or collapse based on the current state of the panel.
Shortcut for performing an expand or collapse based on the current state of the panel.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
activate : ( Ext.Panel p )
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some...
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been activated.
Panel
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforeclose : ( Ext.Panel p )
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses d...
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like 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.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being closed.
Panel
beforecollapse : ( Ext.Panel p, Boolean animate )
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel being collapsed.
  • animate : Boolean
    True if the collapse is animated, else false.
Panel
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p, Boolean animate )
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being expanded.
  • animate : Boolean
    True if the expand is animated, else false.
Panel
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
bodyresize : ( Ext.Panel p, Number width, Number height )
Fires after the Panel has been resized.
Fires after the Panel has been resized.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has been resized.
  • width : Number
    The Panel's new width.
  • height : Number
    The Panel's new height.
Panel
close : ( Ext.Panel p )
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do...
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel within a Ext.TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been closed.
Panel
collapse : ( Ext.Panel p )
Fires after the Panel has been collapsed.
Fires after the Panel has been collapsed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel that has been collapsed.
Panel
deactivate : ( Ext.Panel p )
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but ...
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been deactivated.
Panel
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
Fires after the Panel has been expanded.
Fires after the Panel has been expanded.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been expanded.
Panel
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p, String The, String The )
Fires after the Panel icon class has been set or changed.
Fires after the Panel icon class has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its icon class changed.
  • The : String
    new icon class.
  • The : String
    old icon class.
Panel
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
titlechange : ( Ext.Panel p, String The )
Fires after the Panel title has been set or changed.
Fires after the Panel title has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its title changed.
  • The : String
    new title.
Panel


Observable
    GridView
      BufferView

Class Ext.ux.grid.BufferView

Package: | Ext.ux.grid
Defined In: | BufferView.js
Class: | BufferView
Extends: | GridView
A custom GridView which renders rows on an as-needed basis.

Config Options

Config Options Defined By
autoFill : Boolean
Defaults to false. Specify true to have the column widths re-proportioned when the grid is initially rendered. The ...
Defaults to false. Specify true to have the column widths re-proportioned when the grid is initially rendered. The 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 forceFit also.
GridView
borderHeight : Number
The combined height of border-top and border-bottom of a row.
BufferView
cacheSize : Number
The number of rows to look forward and backwards from the currently viewable area. The cache applies only to rows th...
The number of rows to look forward and backwards from the currently viewable area. The cache applies only to rows that have been rendered already.
BufferView
cellSelector : String
The selector used to find cells internally (defaults to 'td.x-grid3-cell')
GridView
cellSelectorDepth : Number
The number of levels to search for cells in event delegation (defaults to 4)
GridView
cleanDelay : Number
The number of milliseconds to buffer cleaning of extra rows not in the cache.
BufferView
columnsText : String
The text displayed in the "Columns" menu item (defaults to "Columns")
GridView
deferEmptyText : Boolean
True to defer emptyText being applied until the store's first load (defaults to true).
GridView
emptyText : String
Default text (html tags are accepted) to display in the grid body when no rows are available (defaults to ''). This v...
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 mainBody:
this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>');
GridView
enableRowBody : Boolean
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 ...
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 getRowClass method's rowParams config to customize the row body.
GridView
forceFit : Boolean
Defaults to false. Specify true to have the column widths re-proportioned at all times. The initially configured wi...
Defaults to false. Specify true to have the column widths re-proportioned at all times. The 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 autoFill also.
GridView
headersDisabled : Boolean
True to disable the grid column headers (defaults to false). Use the ColumnModel menuDisabled config to disable the ...
True to disable the grid column headers (defaults to false). Use the ColumnModel 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.
GridView
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
rowHeight : Number
The height of a row in the grid.
BufferView
rowSelector : String
The selector used to find rows internally (defaults to 'div.x-grid3-row')
GridView
rowSelectorDepth : Number
The number of levels to search for rows in event delegation (defaults to 10)
GridView
scrollDelay : Boolean/Number
The number of milliseconds before rendering rows out of the visible viewing area. Defaults to 100. Rows will render i...
The number of milliseconds before rendering rows out of the visible viewing area. Defaults to 100. Rows will render immediately with a config of false.
BufferView
scrollOffset : Number
The amount of space to reserve for the vertical scrollbar (defaults to 19 pixels).
GridView
selectedRowClass : String
The CSS class applied to a selected row (defaults to "x-grid3-row-selected"). An example overriding the default styli...
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;
    }
GridView
sortAscText : String
The text displayed in the "Sort Ascending" menu item (defaults to "Sort Ascending")
GridView
sortClasses : Array
The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"])
GridView
sortDescText : String
The text displayed in the "Sort Descending" menu item (defaults to "Sort Descending")
GridView

Public Properties

Property Defined By
dragZone : Ext.grid.GridDragZone
A customized implementation of a DragZone which provides default implementations of the template methods of DragZone ...

A customized implementation of a DragZone which provides default implementations of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. See Ext.grid.GridDragZone for details.

This will only be present:

  • if the owning GridPanel was configured with enableDragDrop: true.
  • after the owning GridPanel has been rendered.
GridView
mainBody : Ext.Element
Read-only. The GridView's body Element which encapsulates all rows in the Grid. This Element is only available after ...
Read-only. The GridView's body Element which encapsulates all rows in the Grid. This Element is only available after the GridPanel has been rendered.
GridView

Public Methods

Method Defined By
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findCellIndex( HTMLElement el ) : The
Return the index of the grid column which contains the passed HTMLElement. See also findRowIndex

Return the index of the grid column which contains the passed HTMLElement.

See also findRowIndex
Parameters:
  • el : HTMLElement
    The target element
Returns:
  • The
    column index, or <b>false</b> if the target element is not within a row of this GridView.
GridView
findRow( HTMLElement el ) : The
Return the HtmlElement representing the grid row which contains the passed element.
Return the HtmlElement representing the grid row which contains the passed element.
Parameters:
  • el : HTMLElement
    The target HTMLElement
Returns:
  • The
    row element, or null if the target element is not within a row of this GridView.
GridView
findRowIndex( HTMLElement el ) : The
Return the index of the grid row which contains the passed HTMLElement. See also findCellIndex

Return the index of the grid row which contains the passed HTMLElement.

See also findCellIndex
Parameters:
  • el : HTMLElement
    The target HTMLElement
Returns:
  • The
    row index, or <b>false</b> if the target element is not within a row of this GridView.
GridView
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focusCell( Number row, Number col ) : void
Focuses the specified cell.
Focuses the specified cell.
Parameters:
  • row : Number
    The row index
  • col : Number
    The column index
Returns:
  • void
GridView
focusRow( Number row ) : void
Focuses the specified row.
Focuses the specified row.
Parameters:
  • row : Number
    The row index
Returns:
  • void
GridView
getCell( Number row, Number col ) : HtmlElement
Returns the grid's &lt;td> HtmlElement at the specified coordinates.
Returns the grid's <td> HtmlElement at the specified coordinates.
Parameters:
  • row : Number
    The row index in which to find the cell.
  • col : Number
    The column index of the cell.
Returns:
  • HtmlElement
    The td at the specified coordinates.
GridView
getHeaderCell( Number index ) : HtmlElement
Return the &lt;td> HtmlElement which represents the Grid's header cell for the specified column index.
Return the <td> HtmlElement which represents the Grid's header cell for the specified column index.
Parameters:
  • index : Number
    The column index
Returns:
  • HtmlElement
    The td element.
GridView
getRow( Number index ) : HtmlElement
Return the &lt;div> HtmlElement which represents a Grid row for the specified index.
Return the <div> HtmlElement which represents a Grid row for the specified index.
Parameters:
  • index : Number
    The row index
Returns:
  • HtmlElement
    The div element.
GridView
getRowClass( Record record, Number index, Object rowParams, Store store ) : String
Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters t...
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';
    }
},
Parameters:
  • record : Record
    The Ext.data.Record corresponding to the current row.
  • index : Number
    The row index.
  • rowParams : Object
    A config object that is passed to the row template during rendering that allows customization of various aspects of a grid row.

    If 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.
  • store : Store
    The Ext.data.Store this grid is bound to
Returns:
  • String
    a CSS class name to add to the row.
GridView
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
refresh( [Boolean headersToo] ) : void
Refreshs the grid UI
Refreshs the grid UI
Parameters:
  • headersToo : Boolean
    (optional) True to also refresh the headers
Returns:
  • void
GridView
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
scrollToTop() : void
Scrolls the grid to the top
Scrolls the grid to the top
Parameters:
  • None.
Returns:
  • void
GridView
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

Event Defined By
beforerefresh : ( Ext.grid.GridView view )
Internal UI Event. Fired before the view is refreshed.
Internal UI Event. Fired before the view is refreshed.
Listeners will be called with the following arguments:
  • view : Ext.grid.GridView
GridView
beforerowremoved : ( Ext.grid.GridView view, Number rowIndex, Ext.data.Record record )
Internal UI Event. Fired before a row is removed.
Internal UI Event. Fired before a row is removed.
Listeners will be called with the following arguments:
  • view : Ext.grid.GridView
  • rowIndex : Number
    The index of the row to be removed.
  • record : Ext.data.Record
    The Record to be removed
GridView
beforerowsinserted : ( Ext.grid.GridView view, Number firstRow, Number lastRow )
Internal UI Event. Fired before rows are inserted.
Internal UI Event. Fired before rows are inserted.
Listeners will be called with the following arguments:
  • view : Ext.grid.GridView
  • firstRow : Number
    The index of the first row to be inserted.
  • lastRow : Number
    The index of the last row to be inserted.
GridView
refresh : ( Ext.grid.GridView view )
Internal UI Event. Fired after the GridView's body has been refreshed.
Internal UI Event. Fired after the GridView's body has been refreshed.
Listeners will be called with the following arguments:
  • view : Ext.grid.GridView
GridView
rowremoved : ( Ext.grid.GridView view, Number rowIndex, Ext.data.Record record )
Internal UI Event. Fired after a row is removed.
Internal UI Event. Fired after a row is removed.
Listeners will be called with the following arguments:
  • view : Ext.grid.GridView
  • rowIndex : Number
    The index of the row that was removed.
  • record : Ext.data.Record
    The Record that was removed
GridView
rowsinserted : ( Ext.grid.GridView view, Number firstRow, Number lastRow )
Internal UI Event. Fired after rows are inserted.
Internal UI Event. Fired after rows are inserted.
Listeners will be called with the following arguments:
  • view : Ext.grid.GridView
  • firstRow : Number
    The index of the first inserted.
  • lastRow : Number
    The index of the last row inserted.
GridView
rowupdated : ( Ext.grid.GridView view, Number firstRow, Ext.data.record record )
Internal UI Event. Fired after a row has been updated.
Internal UI Event. Fired after a row has been updated.
Listeners will be called with the following arguments:
  • view : Ext.grid.GridView
  • firstRow : Number
    The index of the row updated.
  • record : Ext.data.record
    The Record backing the row updated.
GridView


Class Ext.ux.grid.CheckColumn

Package: | Ext.ux.grid
Defined In: | CheckColumn.js
Class: | CheckColumn
Extends: | Object
GridPanel plugin to add a column with check boxes to a grid.

Example usage:

// create the column

var checkColumn = new Ext.grid.CheckColumn({
   header: 'Indoor?',
   dataIndex: 'indoor',
   id: 'check',
   width: 55
});

// add the column to the column model

var cm = new Ext.grid.ColumnModel([{
       header: 'Foo',
       ...
    },
    checkColumn
]);

// create the grid

var grid = new Ext.grid.EditorGridPanel({
    ...
    cm: cm,
    plugins: [checkColumn], // include plugin

    ...
});
In addition to storing a Boolean value within the record data, this class toggles a css class between 'x-grid3-check-col' and 'x-grid3-check-col-on' to alter the background image used for a column.

Public Properties

This class has no public properties.

Public Methods

This class has no public methods.

Public Events

This class has no public events.


Observable
    GroupSummary

Class Ext.ux.grid.GroupSummary

Package: | Ext.ux.grid
Defined In: | GroupSummary.js
Class: | GroupSummary
Subclasses: | HybridSummary
Extends: | Observable
A GridPanel plugin that enables dynamic column calculations and a dynamically updated grouped summary row.

Config Options

Config Options Defined By
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
summaryRenderer : Function
Renderer example:summaryRenderer: function(v, params, data){ return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '...
Renderer example:
summaryRenderer: function(v, params, data){
    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
},
GroupSummary
summaryType : String
The type of calculation to be used for the column. For options available see Calculations.
GroupSummary

Public Properties

Property Defined By
Calculations : Object
Calculation types for summary row:<div class="mdetail-params">
sum : <div class="sub-desc">
count : <div class="sub...
Calculation types for summary row:

  • sum :
  • count :
  • max :
  • min :
  • average :

Custom calculations may be implemented. An example of custom summaryType=totalCost:

// define a custom summary function

Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
    return v + (record.data.estimate * record.data.rate);
};
GroupSummary

Public Methods

Method Defined By
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
showSummaryMsg( String groupValue, String msg ) : void
Show a message in the summary row. grid.on('afteredit', function(){ var groupValue = 'Ext Forms: Field Anchorin...
Show a message in the summary row.
grid.on('afteredit', function(){
    var groupValue = 'Ext Forms: Field Anchoring';
    summary.showSummaryMsg(groupValue, 'Updating Summary...');
});
Parameters:
  • groupValue : String
  • msg : String
    Text to use as innerHTML for the summary row.
Returns:
  • void
GroupSummary
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
toggleSummaries( Boolean visible ) : void
Toggle the display of the summary row on/off
Toggle the display of the summary row on/off
Parameters:
  • visible : Boolean
    true to show the summary, false to hide the summary.
Returns:
  • void
GroupSummary
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

This class has no public events.


Observable
    GroupSummary
      HybridSummary

Class Ext.ux.grid.HybridSummary

Package: | Ext.ux.grid
Defined In: | GroupSummary.js
Class: | HybridSummary
Extends: | GroupSummary
Adds capability to specify the summary data for the group via json as illustrated here:
{
    data: [
        {
            projectId: 100,     project: 'House',
            taskId:    112, description: 'Paint',
            estimate:    6,        rate:     150,
            due:'06/24/2007'
        },
        ...
    ],

    summaryData: {
        'House': {
            description: 14, estimate: 9,
                   rate: 99, due: new Date(2009, 6, 29),
                   cost: 999
        }
    }
}

Config Options

Config Options Defined By
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
summaryRenderer : Function
Renderer example:summaryRenderer: function(v, params, data){ return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '...
Renderer example:
summaryRenderer: function(v, params, data){
    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
},
GroupSummary
summaryType : String
The type of calculation to be used for the column. For options available see Calculations.
GroupSummary

Public Properties

Property Defined By
Calculations : Object
Calculation types for summary row:<div class="mdetail-params">
sum : <div class="sub-desc">
count : <div class="sub...
Calculation types for summary row:

  • sum :
  • count :
  • max :
  • min :
  • average :

Custom calculations may be implemented. An example of custom summaryType=totalCost:

// define a custom summary function

Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
    return v + (record.data.estimate * record.data.rate);
};
GroupSummary

Public Methods

Method Defined By
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
getSummaryData( String groupValue ) : Object
Returns the summaryData for the specified groupValue or null.
Returns the summaryData for the specified groupValue or null.
Parameters:
  • groupValue : String
Returns:
  • Object
    summaryData
HybridSummary
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
showSummaryMsg( String groupValue, String msg ) : void
Show a message in the summary row. grid.on('afteredit', function(){ var groupValue = 'Ext Forms: Field Anchorin...
Show a message in the summary row.
grid.on('afteredit', function(){
    var groupValue = 'Ext Forms: Field Anchoring';
    summary.showSummaryMsg(groupValue, 'Updating Summary...');
});
Parameters:
  • groupValue : String
  • msg : String
    Text to use as innerHTML for the summary row.
Returns:
  • void
GroupSummary
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
toggleSummaries( Boolean visible ) : void
Toggle the display of the summary row on/off
Toggle the display of the summary row on/off
Parameters:
  • visible : Boolean
    true to show the summary, false to hide the summary.
Returns:
  • void
GroupSummary
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateSummaryData( String groupValue, Object data, [Boolean skipRefresh] ) : void
grid.on('afteredit', function(){ var groupValue = 'Ext Forms: Field Anchoring'; summary.showSummaryMsg(grou...
grid.on('afteredit', function(){
    var groupValue = 'Ext Forms: Field Anchoring';
    summary.showSummaryMsg(groupValue, 'Updating Summary...');
    setTimeout(function(){ // simulate server call

        // HybridSummary class implements updateSummaryData

        summary.updateSummaryData(groupValue,
            // create data object based on configured dataIndex

            {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
    }, 2000);
});
Parameters:
  • groupValue : String
  • data : Object
    data object
  • skipRefresh : Boolean
    (Optional) Defaults to false
Returns:
  • void
HybridSummary

Public Events

This class has no public events.


Observable
    Component
      BoxComponent
        Container
          Panel
            RowEditor

Class Ext.ux.grid.RowEditor

Package: | Ext.ux.grid
Defined In: | RowEditor.js
Class: | RowEditor
Extends: | Panel
Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid. A validation mode may be enabled which uses AnchorTips to notify the user of all validation errors at once.

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
animCollapse : Boolean
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...

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 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 renderTo will be ignored and the target element's parent node will automatically be used as the panel's container.

Panel
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
true to use height:'auto', false to use fixed height (defaults to false). Note: Setting autoHeight:true means that th...
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.
Panel
autoLoad : Object/String/Function
A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...
A valid url spec according to the Updater 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 body element, so it may be refreshed at any time.

Panel
autoScroll : Boolean
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
baseCls : String
The base CSS class to apply to this panel's element (defaults to 'x-panel'). Another option available by default is t...
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 unstyled also.

Panel
bbar : Object/Array
The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...

The bottom toolbar of the panel. This can be a 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 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.

Panel
bbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

Panel
bodyBorder : Boolean
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only a...
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyCfg : Object
A DomHelper element specification object may be specified for any Panel Element. By default, the Default element in t...

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

Configuring a Custom element may be used, for example, to force the body Element to use a different form of markup than is created by default. An example of this might be to 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 addClass
    footerStyle:    'background-color:red' // see bodyStyle
});

The example above also explicitly creates a footer with custom markup and styling applied.

Panel
bodyCssClass : String/Object/Function
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defau...
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defaults to null). See bodyCfg.
Panel
bodyStyle : String/Object/Function
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to nu...
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to null). See bodyCfg.
Panel
border : Boolean
True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the bord...
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 bodyBorder to false.
Panel
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
buttonAlign : String
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right'...
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right').
Panel
buttons : Array
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration propert...
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration property will be an array of Ext.Buttons or 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.
Panel
bwrapCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

Panel
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
closable : Boolean
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Cla...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
collapseFirst : Boolean
true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...
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).
Panel
collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
collapsible : Boolean
True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header ...
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).
Panel
contentEl : String
Specify the id of an existing HTML node to use as the panel's body content (defaults to ''). Description : <div clas...

Specify the id of an existing HTML node to use as the panel's body content (defaults to '').

  • Description :
      This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel when the Panel is rendered to use as the content (it is not going to be the actual panel itself).
  • Notes :
      The specified HTML Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
      The specified HTML element used will not participate in any layout scheme that the Panel may use. It's just HTML. Layouts operate on child 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.
Panel
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
Render this panel disabled (default is false). An important note when using the disabled config on panels is that IE ...
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 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
        }
    }
});
Panel
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
draggable : Boolean/Object
true to enable dragging of this Panel (defaults to false). For custom drag/drop implementations, an Ext.Panel.DD conf...

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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of 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();
Panel
elements : String
A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be gener...
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'.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into t...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's 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'
        }]
    }),
    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.

Panel
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
floating : Mixed
This property is used to configure the underlying Ext.Layer. Acceptable values for this configuration property are:<d...

This property is used to configure the underlying 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.
  • object :
    The specified object will be used as the configuration object for the Ext.Layer that will be created.
Panel
footer : Boolean
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if ...
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if buttons or a fbar have been configured. See bodyCfg for an example.
Panel
footerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCfg also.

Panel
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
frame : Boolean
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounde...
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounded corners (also see 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>
Panel
header : Boolean
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will b...
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
headerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCfg also.

Panel
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
html : String/Object
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content ...
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
iconCls : String
The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). An example o...
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; }
Panel
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! ** A single item, or an array of child Components to be added t...
** IMPORTANT: be sure to 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 Ext.Component
  • a fully instanciated object or
  • an object literal that:
    • has a specified xtype
    • the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
    • If an xtype is not explicitly specified, the 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 doLayout call.
  • Do not specify contentEl/ html with items.
Container
keys : Object/Array
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to thi...
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to this panel (defaults to null).
Panel
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specifi...

*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 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 layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the 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 Ext.layout.ContainerLayout will be created and used.

      Valid layout type values are:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • 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).

    • 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.

Container
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskDisabled : Boolean
true to mask the panel when it is disabled, false to not mask it (defaults to true). Either way, the panel will alwa...
true to mask the panel when it is 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.
Panel
minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
preventBodyReset : Boolean
Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added to the panel's element, effec...
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.).
Panel
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
shadow : Boolean/String
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (...
true (or a valid Ext.Shadow 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 floating = true.
Panel
shadowOffset : Number
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when float...
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies wh...
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Pan...
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
tbar : Object/Array
The top toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button confi...

The top toolbar of the panel. This can be a 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 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.

Panel
tbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

Panel
title : String
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When...
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
titleCollapse : Boolean
true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, fa...
true to allow expanding and collapsing the panel (when 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 BorderLayout.Region floatable config option.
Panel
toolTemplate : Ext.Template/Ext.XTemplate
A Template used to create tools in the header Element. Defaults to:new Ext.Template('&lt;div class="x-tool x-tool-{id...

A Template used to create tools in the 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 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;}
Panel
tools : Array
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element...
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an 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 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 : Ext.Panel
      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 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 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;}
Panel
unstyled : Boolean
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes ...
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
Panel
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
body : Ext.Element
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, ...
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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 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 el also.

Panel
buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
dd : Ext.dd.DragSource.
If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles drag...

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.
Panel
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
footer : Ext.Element
The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note ...
The Panel's footer Element. Read-only.

This Element is used to house the Panel's buttons or fbar.

Note: see the Note for el also.

Panel
header : Ext.Element
The Panel's header Element. Read-only. This Element is used to house the title and tools Note: see the Note for el al...
The Panel's header Element. Read-only.

This Element is used to house the title and tools

Note: see the Note for el also.

Panel
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
add( Object/Array component, Object (Optional), Object (Optional) ) : Ext.Component
Adds Component(s) to this Container. Description : <ul class="mdetail-params"> Fires the beforeadd event before addin...

Adds Component(s) to this Container.

Description :

  • Fires the beforeadd event before adding
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the add event after the component has been added.

Notes :

  • If the Container is already rendered when add is called, you may need to call 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 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
  • Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Object/Array

    Either a single component or an Array of components to add. See items for additional information.

  • (Optional) : Object
    component_2
  • (Optional) : Object
    component_n
Returns:
  • Ext.Component
    component The Component (or config object) that was added.
Container
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred approach is to ...
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 buttons config.
Parameters:
  • config : String/Object
    A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    The function to be called on button Ext.Button.click
  • scope : Object
    The scope to use for the button handler function
Returns:
  • Ext.Button
    The button that was added
Panel
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collapse( Boolean animate ) : Ext.Panel
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse ac...
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
expand( Boolean animate ) : Ext.Panel
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action ...
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar() : Ext.Toolbar
Returns the toolbar from the bottom (bbar) section of the panel.
Returns the toolbar from the bottom (bbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getFrameHeight() : Number
Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and header and ...
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 getInnerHeight.
Parameters:
  • None.
Returns:
  • Number
    The frame height
Panel
getFrameWidth() : Number
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the bo...
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
Parameters:
  • None.
Returns:
  • Number
    The frame width
Panel
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getInnerHeight() : Number
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame he...
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
Parameters:
  • None.
Returns:
  • Number
    The body height
Panel
getInnerWidth() : Number
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame widt...
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
Parameters:
  • None.
Returns:
  • Number
    The body width
Panel
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getTool( String id ) : Object
Retrieve a tool by id.
Retrieve a tool by id.
Parameters:
  • id : String
Returns:
  • Object
    tool
Panel
getTopToolbar() : Ext.Toolbar
Returns the toolbar from the top (tbar) section of the panel.
Returns the toolbar from the top (tbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getUpdater() : Ext.Updater
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Parameters:
  • None.
Returns:
  • Ext.Updater
    The Updater
Panel
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
load( Object/String/Function config ) : Ext.Panel
Loads this content panel immediately with content returned from an XHR call.
Loads this content panel immediately with content returned from an XHR call.
Parameters:
  • config : Object/String/Function
    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.
Returns:
  • Ext.Panel
    this
Panel
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass( String cls ) : void
Sets the CSS class that provides the icon image for this panel. This method will replace any existing icon class if ...
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 iconchange event after completion.
Parameters:
  • cls : String
    The new CSS class name
Returns:
  • void
Panel
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setTitle( String title, [String iconCls] ) : void
Sets the title text for the panel and optionally the icon class. In order to be able to set the title, a header eleme...

Sets the title text for the panel and optionally the 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 title, or configuring it with header: true.

Parameters:
  • title : String
    The title text to set
  • iconCls : String
    (optional) iconCls A user-defined CSS class that provides the icon image for this panel
Returns:
  • void
Panel
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse( Boolean animate ) : Ext.Panel
Shortcut for performing an expand or collapse based on the current state of the panel.
Shortcut for performing an expand or collapse based on the current state of the panel.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
activate : ( Ext.Panel p )
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some...
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been activated.
Panel
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afteredit : ( Ext.ux.grid.RowEditor roweditor, Object changes, Ext.data.Record r, Number rowIndex )
Fired after a row is edited and passes validation. This event is fired after the store's update event is fired with ...
Fired after a row is edited and passes validation. This event is fired after the store's update event is fired with this edit.
Listeners will be called with the following arguments:
  • roweditor : Ext.ux.grid.RowEditor
    This object
  • changes : Object
    Object with changes made to the record.
  • r : Ext.data.Record
    The Record that was edited.
  • rowIndex : Number
    The rowIndex of the row just edited
RowEditor
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforeclose : ( Ext.Panel p )
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses d...
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like 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.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being closed.
Panel
beforecollapse : ( Ext.Panel p, Boolean animate )
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel being collapsed.
  • animate : Boolean
    True if the collapse is animated, else false.
Panel
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeedit : ( Ext.ux.grid.RowEditor roweditor, Number rowIndex )
Fired before the row editor is activated. If the listener returns false the editor will not be activated.
Fired before the row editor is activated. If the listener returns false the editor will not be activated.
Listeners will be called with the following arguments:
  • roweditor : Ext.ux.grid.RowEditor
    This object
  • rowIndex : Number
    The rowIndex of the row just edited
RowEditor
beforeexpand : ( Ext.Panel p, Boolean animate )
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being expanded.
  • animate : Boolean
    True if the expand is animated, else false.
Panel
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
bodyresize : ( Ext.Panel p, Number width, Number height )
Fires after the Panel has been resized.
Fires after the Panel has been resized.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has been resized.
  • width : Number
    The Panel's new width.
  • height : Number
    The Panel's new height.
Panel
close : ( Ext.Panel p )
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do...
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel within a Ext.TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been closed.
Panel
collapse : ( Ext.Panel p )
Fires after the Panel has been collapsed.
Fires after the Panel has been collapsed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel that has been collapsed.
Panel
deactivate : ( Ext.Panel p )
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but ...
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been deactivated.
Panel
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
Fires after the Panel has been expanded.
Fires after the Panel has been expanded.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been expanded.
Panel
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p, String The, String The )
Fires after the Panel icon class has been set or changed.
Fires after the Panel icon class has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its icon class changed.
  • The : String
    new icon class.
  • The : String
    old icon class.
Panel
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
titlechange : ( Ext.Panel p, String The )
Fires after the Panel title has been set or changed.
Fires after the Panel title has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its title changed.
  • The : String
    new title.
Panel
validateedit : ( Ext.ux.grid.RowEditor roweditor, Object changes, Ext.data.Record r, Number rowIndex )
Fired after a row is edited and passes validation. If the listener returns false changes to the record will not be se...
Fired after a row is edited and passes validation. If the listener returns false changes to the record will not be set.
Listeners will be called with the following arguments:
  • roweditor : Ext.ux.grid.RowEditor
    This object
  • changes : Object
    Object with changes made to the record.
  • r : Ext.data.Record
    The Record that was edited.
  • rowIndex : Number
    The rowIndex of the row just edited
RowEditor


Observable
    RowExpander

Class Ext.ux.grid.RowExpander

Package: | Ext.ux.grid
Defined In: | RowExpander.js
Class: | RowExpander
Extends: | Observable
Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables a second row body which expands/contracts. The expand/contract behavior is configurable to react on clicking of the column, double click of the row, and/or hitting enter while a row is selected.

Config Options

Config Options Defined By
expandOnDblClick : Boolean
true to toggle a row between expanded/collapsed when double clicked (defaults to true).
RowExpander
expandOnEnter : Boolean
true to toggle selected row(s) between expanded/collapsed when the enter key is pressed (defaults to true).
RowExpander
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable

Public Properties

This class has no public properties.

Public Methods

Method Defined By
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

Event Defined By
beforecollapse : ( Object this, Object Ext.data.Record, Object body, Number rowIndex )
Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
Listeners will be called with the following arguments:
  • this : Object
    RowExpander object.
  • Ext.data.Record : Object
    Record for the selected row.
  • body : Object
    body element for the secondary row.
  • rowIndex : Number
    The current row index.
RowExpander
beforeexpand : ( Object this, Object Ext.data.Record, Object body, Number rowIndex )
Fires before the row expands. Have the listener return false to prevent the row from expanding.
Fires before the row expands. Have the listener return false to prevent the row from expanding.
Listeners will be called with the following arguments:
  • this : Object
    RowExpander object.
  • Ext.data.Record : Object
    Record for the selected row.
  • body : Object
    body element for the secondary row.
  • rowIndex : Number
    The current row index.
RowExpander
collapse : ( Object this, Object Ext.data.Record, Object body, Number rowIndex )
Fires after the row collapses.
Fires after the row collapses.
Listeners will be called with the following arguments:
  • this : Object
    RowExpander object.
  • Ext.data.Record : Object
    Record for the selected row.
  • body : Object
    body element for the secondary row.
  • rowIndex : Number
    The current row index.
RowExpander
expand : ( Object this, Object Ext.data.Record, Object body, Number rowIndex )
Fires after the row expands.
Fires after the row expands.
Listeners will be called with the following arguments:
  • this : Object
    RowExpander object.
  • Ext.data.Record : Object
    Record for the selected row.
  • body : Object
    body element for the secondary row.
  • rowIndex : Number
    The current row index.
RowExpander


Observable
    Component
      BoxComponent
        Container
          Panel
            GridPanel
              TableGrid

Class Ext.ux.grid.TableGrid

Package: | Ext.ux.grid
Defined In: | TableGrid.js
Class: | TableGrid
Extends: | GridPanel
A Grid which creates itself from an existing HTML table element.

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
animCollapse : Boolean
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...

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 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 renderTo will be ignored and the target element's parent node will automatically be used as the panel's container.

Panel
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
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. N...

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 to use height:'auto', false to use fixed height (defaults to false). Note: Setting autoHeight:true means that th...
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.
Panel
autoLoad : Object/String/Function
A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...
A valid url spec according to the Updater 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 body element, so it may be refreshed at any time.

Panel
autoScroll : Boolean
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
baseCls : String
The base CSS class to apply to this panel's element (defaults to 'x-panel'). Another option available by default is t...
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 unstyled also.

Panel
bbar : Object/Array
The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...

The bottom toolbar of the panel. This can be a 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 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.

Panel
bbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

Panel
bodyBorder : Boolean
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only a...
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyCfg : Object
A DomHelper element specification object may be specified for any Panel Element. By default, the Default element in t...

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

Configuring a Custom element may be used, for example, to force the body Element to use a different form of markup than is created by default. An example of this might be to 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 addClass
    footerStyle:    'background-color:red' // see bodyStyle
});

The example above also explicitly creates a footer with custom markup and styling applied.

Panel
bodyCssClass : String/Object/Function
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defau...
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defaults to null). See bodyCfg.
Panel
bodyStyle : String/Object/Function
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to nu...
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to null). See bodyCfg.
Panel
border : Boolean
True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the bord...
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 bodyBorder to false.
Panel
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
buttonAlign : String
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right'...
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right').
Panel
buttons : Array
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration propert...
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration property will be an array of Ext.Buttons or 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.
Panel
bwrapCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

Panel
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
closable : Boolean
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Cla...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
cm : Object
Shorthand for colModel.
GridPanel
colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required).
GridPanel
collapseFirst : Boolean
true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...
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).
Panel
collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
collapsible : Boolean
True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header ...
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).
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 colMo...
An array of columns to auto create a Ext.grid.ColumnModel. The ColumnModel may be explicitly created via the colModel configuration property.
GridPanel
contentEl : String
Specify the id of an existing HTML node to use as the panel's body content (defaults to ''). Description : <div clas...

Specify the id of an existing HTML node to use as the panel's body content (defaults to '').

  • Description :
      This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel when the Panel is rendered to use as the content (it is not going to be the actual panel itself).
  • Notes :
      The specified HTML Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
      The specified HTML element used will not participate in any layout scheme that the Panel may use. It's just HTML. Layouts operate on child 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.
Panel
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

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...
Configures the text in the drag proxy. Defaults to:
ddText : '{0} selected row{1}'
{0} is replaced with the number of selected rows.
GridPanel
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
deferRowRender : Boolean
Defaults to true to enable deferred row rendering. This allows the GridPanel to be initially rendered empty, with th...

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
Render this panel disabled (default is false). An important note when using the disabled config on panels is that IE ...
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 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
        }
    }
});
Panel
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
draggable : Boolean/Object
true to enable dragging of this Panel (defaults to false). For custom drag/drop implementations, an Ext.Panel.DD conf...

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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of 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();
Panel
elements : String
A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be gener...
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'.
Panel
enableColumnHide : Boolean
Defaults to true to enable hiding of columns with the header context 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 GridPane...

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
A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into t...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's 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'
        }]
    }),
    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.

Panel
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
floating : Mixed
This property is used to configure the underlying Ext.Layer. Acceptable values for this configuration property are:<d...

This property is used to configure the underlying 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.
  • object :
    The specified object will be used as the configuration object for the Ext.Layer that will be created.
Panel
footer : Boolean
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if ...
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if buttons or a fbar have been configured. See bodyCfg for an example.
Panel
footerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCfg also.

Panel
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
frame : Boolean
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounde...
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounded corners (also see 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>
Panel
header : Boolean
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will b...
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
headerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCfg also.

Panel
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
hideHeaders : Boolean
True to hide the grid's header. Defaults to false.
GridPanel
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
html : String/Object
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content ...
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
iconCls : String
The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). An example o...
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; }
Panel
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! ** A single item, or an array of child Components to be added t...
** IMPORTANT: be sure to 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 Ext.Component
  • a fully instanciated object or
  • an object literal that:
    • has a specified xtype
    • the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
    • If an xtype is not explicitly specified, the 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 doLayout call.
  • Do not specify contentEl/ html with items.
Container
keys : Object/Array
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to thi...
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to this panel (defaults to null).
Panel
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specifi...

*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 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 layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the 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 Ext.layout.ContainerLayout will be created and used.

      Valid layout type values are:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • 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).

    • 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.

Container
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
loadMask : Object
An Ext.LoadMask config or true to mask the grid while loading. Defaults to false.
GridPanel
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskDisabled : Boolean
true to mask the panel when it is disabled, false to not mask it (defaults to true). Either way, the panel will alwa...
true to mask the panel when it is 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.
Panel
maxHeight : Number
Sets the maximum height of the grid - ignored if autoHeight is not on.
GridPanel
minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
minColumnWidth : Number
The minimum width a column can be resized to. Defaults to 25.
GridPanel
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
preventBodyReset : Boolean
Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added to the panel's element, effec...
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.).
Panel
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
selModel : Object
Any subclass of Ext.grid.AbstractSelectionModel that will provide the selection model for the grid (defaults to Ext....
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
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (...
true (or a valid Ext.Shadow 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 floating = true.
Panel
shadowOffset : Number
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when float...
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies wh...
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when 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: ['col...
An array of events that, when fired, should trigger this component to save its state. Defaults to:
stateEvents: ['columnmove', 'columnresize', 'sortchange']

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
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

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 o...
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
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Pan...
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
tbar : Object/Array
The top toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button confi...

The top toolbar of the panel. This can be a 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 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.

Panel
tbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

Panel
title : String
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When...
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
titleCollapse : Boolean
true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, fa...
true to allow expanding and collapsing the panel (when 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 BorderLayout.Region floatable config option.
Panel
toolTemplate : Ext.Template/Ext.XTemplate
A Template used to create tools in the header Element. Defaults to:new Ext.Template('&lt;div class="x-tool x-tool-{id...

A Template used to create tools in the 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 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;}
Panel
tools : Array
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element...
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an 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 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 : Ext.Panel
      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 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 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;}
Panel
trackMouseOver : Boolean
True to highlight rows when the mouse is over. Default is true for GridPanel, but false for EditorGridPanel.
GridPanel
unstyled : Boolean
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes ...
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes for Ext layouts to function (e.g. 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.GridVi...
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
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
body : Ext.Element
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, ...
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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 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 el also.

Panel
buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
dd : Ext.dd.DragSource.
If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles drag...

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.
Panel
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
footer : Ext.Element
The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note ...
The Panel's footer Element. Read-only.

This Element is used to house the Panel's buttons or fbar.

Note: see the Note for el also.

Panel
header : Ext.Element
The Panel's header Element. Read-only. This Element is used to house the title and tools Note: see the Note for el al...
The Panel's header Element. Read-only.

This Element is used to house the title and tools

Note: see the Note for el also.

Panel
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
TableGrid( String/HTMLElement/Ext.Element table, Object config )
Parameters:
  • table : String/HTMLElement/Ext.Element
    The table element from which this grid will be created - The table MUST have some type of size defined for the grid to fill. The container will be automatically set to position relative if it isn't already.
  • config : Object
    A config object that sets properties on this grid and has two additional (optional) properties: fields and columns which allow for customizing data fields and columns for this grid.
Returns:
  • void
TableGrid
add( Object/Array component, Object (Optional), Object (Optional) ) : Ext.Component
Adds Component(s) to this Container. Description : <ul class="mdetail-params"> Fires the beforeadd event before addin...

Adds Component(s) to this Container.

Description :

  • Fires the beforeadd event before adding
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the add event after the component has been added.

Notes :

  • If the Container is already rendered when add is called, you may need to call 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 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
  • Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Object/Array

    Either a single component or an Array of components to add. See items for additional information.

  • (Optional) : Object
    component_2
  • (Optional) : Object
    component_n
Returns:
  • Ext.Component
    component The Component (or config object) that was added.
Container
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred approach is to ...
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 buttons config.
Parameters:
  • config : String/Object
    A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    The function to be called on button Ext.Button.click
  • scope : Object
    The scope to use for the button handler function
Returns:
  • Ext.Button
    The button that was added
Panel
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collapse( Boolean animate ) : Ext.Panel
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse ac...
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
expand( Boolean animate ) : Ext.Panel
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action ...
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar() : Ext.Toolbar
Returns the toolbar from the bottom (bbar) section of the panel.
Returns the toolbar from the bottom (bbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getColumnModel() : Ext.grid.ColumnModel
Returns the grid's ColumnModel.
Returns the grid's ColumnModel.
Parameters:
  • None.
Returns:
  • Ext.grid.ColumnModel
    The column model
GridPanel
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
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.
Parameters:
  • None.
Returns:
  • String
    The text
GridPanel
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getFrameHeight() : Number
Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and header and ...
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 getInnerHeight.
Parameters:
  • None.
Returns:
  • Number
    The frame height
Panel
getFrameWidth() : Number
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the bo...
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
Parameters:
  • None.
Returns:
  • Number
    The frame width
Panel
getGridEl() : Element
Returns the grid's underlying element.
Returns the grid's underlying element.
Parameters:
  • None.
Returns:
  • Element
    The element
GridPanel
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getInnerHeight() : Number
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame he...
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
Parameters:
  • None.
Returns:
  • Number
    The body height
Panel
getInnerWidth() : Number
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame widt...
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
Parameters:
  • None.
Returns:
  • Number
    The body width
Panel
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSelectionModel() : SelectionModel
Returns the grid's selection model configured by the selModel configuration option. If no selection model was config...
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.
Parameters:
  • None.
Returns:
  • SelectionModel
GridPanel
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getStore() : Ext.data.Store
Returns the grid's data store.
Returns the grid's data store.
Parameters:
  • None.
Returns:
  • Ext.data.Store
    The store
GridPanel
getTool( String id ) : Object
Retrieve a tool by id.
Retrieve a tool by id.
Parameters:
  • id : String
Returns:
  • Object
    tool
Panel
getTopToolbar() : Ext.Toolbar
Returns the toolbar from the top (tbar) section of the panel.
Returns the toolbar from the top (tbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getUpdater() : Ext.Updater
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Parameters:
  • None.
Returns:
  • Ext.Updater
    The Updater
Panel
getView() : Ext.grid.GridView
Returns the grid's GridView object.
Returns the grid's GridView object.
Parameters:
  • None.
Returns:
  • Ext.grid.GridView
    The grid view
GridPanel
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
load( Object/String/Function config ) : Ext.Panel
Loads this content panel immediately with content returned from an XHR call.
Loads this content panel immediately with content returned from an XHR call.
Parameters:
  • config : Object/String/Function
    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.
Returns:
  • Ext.Panel
    this
Panel
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • 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 ...

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.

Parameters:
  • store : Ext.data.Store
    The new Ext.data.Store object
  • colModel : Ext.grid.ColumnModel
    The new Ext.grid.ColumnModel object
Returns:
  • void
GridPanel
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass( String cls ) : void
Sets the CSS class that provides the icon image for this panel. This method will replace any existing icon class if ...
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 iconchange event after completion.
Parameters:
  • cls : String
    The new CSS class name
Returns:
  • void
Panel
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setTitle( String title, [String iconCls] ) : void
Sets the title text for the panel and optionally the icon class. In order to be able to set the title, a header eleme...

Sets the title text for the panel and optionally the 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 title, or configuring it with header: true.

Parameters:
  • title : String
    The title text to set
  • iconCls : String
    (optional) iconCls A user-defined CSS class that provides the icon image for this panel
Returns:
  • void
Panel
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse( Boolean animate ) : Ext.Panel
Shortcut for performing an expand or collapse based on the current state of the panel.
Shortcut for performing an expand or collapse based on the current state of the panel.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
activate : ( Ext.Panel p )
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some...
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been activated.
Panel
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforeclose : ( Ext.Panel p )
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses d...
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like 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.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being closed.
Panel
beforecollapse : ( Ext.Panel p, Boolean animate )
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel being collapsed.
  • animate : Boolean
    True if the collapse is animated, else false.
Panel
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p, Boolean animate )
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being expanded.
  • animate : Boolean
    True if the expand is animated, else false.
Panel
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
bodyresize : ( Ext.Panel p, Number width, Number height )
Fires after the Panel has been resized.
Fires after the Panel has been resized.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has been resized.
  • width : Number
    The Panel's new width.
  • height : Number
    The Panel's new height.
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 th...
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 )
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do...
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel within a Ext.TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been closed.
Panel
collapse : ( Ext.Panel p )
Fires after the Panel has been collapsed.
Fires after the Panel has been collapsed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel that has been collapsed.
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
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 )
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but ...
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been deactivated.
Panel
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
Fires after the Panel has been expanded.
Fires after the Panel has been expanded.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been expanded.
Panel
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 )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p, String The, String The )
Fires after the Panel icon class has been set or changed.
Fires after the Panel icon class has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its icon class changed.
  • The : String
    new icon class.
  • The : String
    old icon class.
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 )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • 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
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
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 )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • 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 )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
titlechange : ( Ext.Panel p, String The )
Fires after the Panel title has been set or changed.
Fires after the Panel title has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its title changed.
  • The : String
    new title.
Panel


ContainerLayout
    FitLayout
      CenterLayout

Class Ext.ux.layout.CenterLayout

Package: | Ext.ux.layout
Defined In: | CenterLayout.js
Class: | CenterLayout
Extends: | FitLayout

This is a very simple layout style used to center contents within a container. This layout works within nested containers and can also be used as expected as a Viewport layout to center the page layout.

As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses the layout. The layout does not require any config options, although the child panel contained within the layout must provide a fixed or percentage width. The child panel's height will fit to the container by default, but you can specify autoHeight:true to allow it to autosize based on its content height. Example usage:

// The content panel is centered in the container
var p = new Ext.Panel({
    title: 'Center Layout',
    layout: 'ux.center',
    items: [{
        title: 'Centered Content',
        width: '75%',
        html: 'Some content'
    }]
});

// If you leave the title blank and specify no border
// you'll create a non-visual, structural panel just
// for centering the contents in the main container.
var p = new Ext.Panel({
    layout: 'ux.center',
    border: false,
    items: [{
        title: 'Centered Content',
        width: 300,
        autoHeight: true,
        html: 'Some content'
    }]
});

Config Options

Config Options Defined By
extraCls : String
An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to t...

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout

Public Properties

Property Defined By
activeItem : Ext.Component
A reference to the Ext.Component that is active. For example, if(myPanel.layout.activeItem.id == 'item-1') { ... } a...
A reference to the 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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Read-only. Related to Ext.Container.activeItem.
ContainerLayout
fieldTpl : Ext.Template
The Ext.Template used by Field rendering layout classes (such as Ext.layout.FormLayout) to create the DOM structure o...
The Ext.Template used by Field rendering layout classes (such as 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 Ext.layout.FormLayout.getTemplateArgs.
ContainerLayout

Public Methods

This class has no public methods.

Public Events

This class has no public events.


ContainerLayout
    RowLayout

Class Ext.ux.layout.RowLayout

Package: | Ext.ux.layout
Defined In: | RowLayout.js
Class: | RowLayout
Extends: | ContainerLayout

This is the layout style of choice for creating structural layouts in a multi-row format where the height of each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto. This class is intended to be extended or created via the layout:'ux.row' Ext.Container.layout config, and should generally not need to be created directly via the new keyword.

RowLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of rowHeight that can be included in the config of any panel added to it. The layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel. If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).

The height property is always evaluated as pixels, and must be a number greater than or equal to 1. The rowHeight 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 row heights 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 height or none specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on the total remaining container height. In other words, percentage height panels are designed to fill the space left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected. Example usage:

// All rows are percentages -- they must add up to 1
var p = new Ext.Panel({
    title: 'Row Layout - Percentage Only',
    layout:'ux.row',
    items: [{
        title: 'Row 1',
        rowHeight: .25
    },{
        title: 'Row 2',
        rowHeight: .6
    },{
        title: 'Row 3',
        rowHeight: .15
    }]
});

// Mix of height and rowHeight -- all rowHeight values must add
// up to 1. The first row will take up exactly 120px, and the last two
// rows will fill the remaining container height.
var p = new Ext.Panel({
    title: 'Row Layout - Mixed',
    layout:'ux.row',
    items: [{
        title: 'Row 1',
        height: 120,
        // standard panel widths are still supported too:
        width: '50%' // or 200
    },{
        title: 'Row 2',
        rowHeight: .8,
        width: 300
    },{
        title: 'Row 3',
        rowHeight: .2
    }]
});

Config Options

Config Options Defined By
enableTabbing : Boolean
true to enable tabbing. Default is false.
RowLayout
extraCls : String
An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to t...

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 Ext.Component.ctCls also.

Note: extraCls defaults to '' except for the following classes which assign a value by default:

  • Absolute Layout : 'x-abs-layout-item'
  • Box Layout : 'x-box-item'
  • 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'

ContainerLayout
renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout

Public Properties

Property |  | Defined By
 | fieldTpl : Ext.Template The Ext.Template used by Field rendering layout classes (such as Ext.layout.FormLayout) to create the DOM structure o... The Ext.Template used by Field rendering layout classes (such as 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 Ext.layout.FormLayout.getTemplateArgs. | ContainerLayout

Public Methods

Method Defined By
setActiveTab( String/Panel tab ) : void
Sets the specified tab as the active tab. This method fires the beforetabchange event which can return false to canc...
Sets the specified tab as the active tab. This method fires the beforetabchange event which can return false to cancel the tab change.
Parameters:
  • tab : String/Panel
    The id or tab Panel to activate
Returns:
  • void
RowLayout

Public Events

This class has no public events.


Class Ext.ux.ProgressBarPager

Package: | Ext.ux
Defined In: | ProgressBarPager.js
Class: | ProgressBarPager
Extends: | Object
xtype: | itemselector
Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text

Config Options

Config Options |  | Defined By
 | defaultAnimCfg : Object A Ext.Fx configuration object. Default is { duration : 1, easing : 'bounceOut' }. | ProgressBarPager
 | defaultText : String The text to display while the store is loading. Default is 'Loading...' | ProgressBarPager
 | progBarWidth : Integer The default progress bar width. Default is 225. | ProgressBarPager

Public Properties

This class has no public properties.

Public Methods

This class has no public methods.

Public Events

This class has no public events.


Observable
    Component
      BoxComponent
        Container
          Panel
            Tip
              SliderTip

Class Ext.ux.SliderTip

Package: | Ext.ux
Defined In: | SliderTip.js
Class: | SliderTip
Extends: | Tip
Simple plugin for using an Ext.Tip with a slider to show the slider value

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
animCollapse : Boolean
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...

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 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 renderTo will be ignored and the target element's parent node will automatically be used as the panel's container.

Panel
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
true to use height:'auto', false to use fixed height (defaults to false). Note: Setting autoHeight:true means that th...
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.
Panel
autoLoad : Object/String/Function
A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...
A valid url spec according to the Updater 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 body element, so it may be refreshed at any time.

Panel
autoScroll : Boolean
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
baseCls : String
The base CSS class to apply to this panel's element (defaults to 'x-panel'). Another option available by default is t...
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 unstyled also.

Panel
bbar : Object/Array
The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...

The bottom toolbar of the panel. This can be a 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 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.

Panel
bbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

Panel
bodyBorder : Boolean
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only a...
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyCfg : Object
A DomHelper element specification object may be specified for any Panel Element. By default, the Default element in t...

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

Configuring a Custom element may be used, for example, to force the body Element to use a different form of markup than is created by default. An example of this might be to 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 addClass
    footerStyle:    'background-color:red' // see bodyStyle
});

The example above also explicitly creates a footer with custom markup and styling applied.

Panel
bodyCssClass : String/Object/Function
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defau...
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defaults to null). See bodyCfg.
Panel
bodyStyle : String/Object/Function
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to nu...
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to null). See bodyCfg.
Panel
border : Boolean
True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the bord...
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 bodyBorder to false.
Panel
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
buttonAlign : String
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right'...
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right').
Panel
buttons : Array
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration propert...
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration property will be an array of Ext.Buttons or 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.
Panel
bwrapCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

Panel
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
closable : Boolean
True to render a close tool button into the tooltip header (defaults to false).
Tip
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
collapseFirst : Boolean
true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...
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).
Panel
collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
collapsible : Boolean
True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header ...
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).
Panel
contentEl : String
Specify the id of an existing HTML node to use as the panel's body content (defaults to ''). Description : <div clas...

Specify the id of an existing HTML node to use as the panel's body content (defaults to '').

  • Description :
      This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel when the Panel is rendered to use as the content (it is not going to be the actual panel itself).
  • Notes :
      The specified HTML Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
      The specified HTML element used will not participate in any layout scheme that the Panel may use. It's just HTML. Layouts operate on child 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.
Panel
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
defaultAlign : String
Experimental. The default Ext.Element.alignTo anchor position value for this tip relative to its element of origin (...
Experimental. The default Ext.Element.alignTo anchor position value for this tip relative to its element of origin (defaults to "tl-bl?").
Tip
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
Render this panel disabled (default is false). An important note when using the disabled config on panels is that IE ...
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 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
        }
    }
});
Panel
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
draggable : Boolean/Object
true to enable dragging of this Panel (defaults to false). For custom drag/drop implementations, an Ext.Panel.DD conf...

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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of 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();
Panel
elements : String
A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be gener...
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'.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into t...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's 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'
        }]
    }),
    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.

Panel
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
floating : Mixed
This property is used to configure the underlying Ext.Layer. Acceptable values for this configuration property are:<d...

This property is used to configure the underlying 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.
  • object :
    The specified object will be used as the configuration object for the Ext.Layer that will be created.
Panel
footer : Boolean
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if ...
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if buttons or a fbar have been configured. See bodyCfg for an example.
Panel
footerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCfg also.

Panel
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
frame : Boolean
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounde...
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounded corners (also see 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>
Panel
header : Boolean
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will b...
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
headerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCfg also.

Panel
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
html : String/Object
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content ...
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
iconCls : String
The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). An example o...
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; }
Panel
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! ** A single item, or an array of child Components to be added t...
** IMPORTANT: be sure to 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 Ext.Component
  • a fully instanciated object or
  • an object literal that:
    • has a specified xtype
    • the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
    • If an xtype is not explicitly specified, the 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 doLayout call.
  • Do not specify contentEl/ html with items.
Container
keys : Object/Array
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to thi...
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to this panel (defaults to null).
Panel
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specifi...

*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 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 layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the 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 Ext.layout.ContainerLayout will be created and used.

      Valid layout type values are:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • 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).

    • 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.

Container
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskDisabled : Boolean
true to mask the panel when it is disabled, false to not mask it (defaults to true). Either way, the panel will alwa...
true to mask the panel when it is 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.
Panel
maxWidth : Number
The maximum width of the tip in pixels (defaults to 300). The maximum supported value is 500.
Tip
minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
minWidth : Number
The minimum width of the tip in pixels (defaults to 40).
Tip
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
preventBodyReset : Boolean
Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added to the panel's element, effec...
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.).
Panel
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
shadow : Boolean/String
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "s...
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "sides").
Tip
shadowOffset : Number
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when float...
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies wh...
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Pan...
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
tbar : Object/Array
The top toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button confi...

The top toolbar of the panel. This can be a 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 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.

Panel
tbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

Panel
title : String
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When...
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
titleCollapse : Boolean
true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, fa...
true to allow expanding and collapsing the panel (when 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 BorderLayout.Region floatable config option.
Panel
toolTemplate : Ext.Template/Ext.XTemplate
A Template used to create tools in the header Element. Defaults to:new Ext.Template('&lt;div class="x-tool x-tool-{id...

A Template used to create tools in the 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 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;}
Panel
tools : Array
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element...
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an 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 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 : Ext.Panel
      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 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 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;}
Panel
unstyled : Boolean
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes ...
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
Panel
width : Number
Width in pixels of the tip (defaults to auto). Width will be ignored if it exceeds the bounds of minWidth or maxWid...
Width in pixels of the tip (defaults to auto). Width will be ignored if it exceeds the bounds of minWidth or maxWidth. The maximum supported value is 500.
Tip
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
body : Ext.Element
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, ...
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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 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 el also.

Panel
buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
dd : Ext.dd.DragSource.
If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles drag...

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.
Panel
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
footer : Ext.Element
The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note ...
The Panel's footer Element. Read-only.

This Element is used to house the Panel's buttons or fbar.

Note: see the Note for el also.

Panel
header : Ext.Element
The Panel's header Element. Read-only. This Element is used to house the title and tools Note: see the Note for el al...
The Panel's header Element. Read-only.

This Element is used to house the title and tools

Note: see the Note for el also.

Panel
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
add( Object/Array component, Object (Optional), Object (Optional) ) : Ext.Component
Adds Component(s) to this Container. Description : <ul class="mdetail-params"> Fires the beforeadd event before addin...

Adds Component(s) to this Container.

Description :

  • Fires the beforeadd event before adding
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the add event after the component has been added.

Notes :

  • If the Container is already rendered when add is called, you may need to call 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 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
  • Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Object/Array

    Either a single component or an Array of components to add. See items for additional information.

  • (Optional) : Object
    component_2
  • (Optional) : Object
    component_n
Returns:
  • Ext.Component
    component The Component (or config object) that was added.
Container
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred approach is to ...
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 buttons config.
Parameters:
  • config : String/Object
    A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    The function to be called on button Ext.Button.click
  • scope : Object
    The scope to use for the button handler function
Returns:
  • Ext.Button
    The button that was added
Panel
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collapse( Boolean animate ) : Ext.Panel
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse ac...
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
expand( Boolean animate ) : Ext.Panel
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action ...
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar() : Ext.Toolbar
Returns the toolbar from the bottom (bbar) section of the panel.
Returns the toolbar from the bottom (bbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getFrameHeight() : Number
Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and header and ...
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 getInnerHeight.
Parameters:
  • None.
Returns:
  • Number
    The frame height
Panel
getFrameWidth() : Number
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the bo...
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
Parameters:
  • None.
Returns:
  • Number
    The frame width
Panel
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getInnerHeight() : Number
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame he...
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
Parameters:
  • None.
Returns:
  • Number
    The body height
Panel
getInnerWidth() : Number
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame widt...
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
Parameters:
  • None.
Returns:
  • Number
    The body width
Panel
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getTool( String id ) : Object
Retrieve a tool by id.
Retrieve a tool by id.
Parameters:
  • id : String
Returns:
  • Object
    tool
Panel
getTopToolbar() : Ext.Toolbar
Returns the toolbar from the top (tbar) section of the panel.
Returns the toolbar from the top (tbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getUpdater() : Ext.Updater
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Parameters:
  • None.
Returns:
  • Ext.Updater
    The Updater
Panel
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
load( Object/String/Function config ) : Ext.Panel
Loads this content panel immediately with content returned from an XHR call.
Loads this content panel immediately with content returned from an XHR call.
Parameters:
  • config : Object/String/Function
    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.
Returns:
  • Ext.Panel
    this
Panel
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass( String cls ) : void
Sets the CSS class that provides the icon image for this panel. This method will replace any existing icon class if ...
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 iconchange event after completion.
Parameters:
  • cls : String
    The new CSS class name
Returns:
  • void
Panel
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setTitle( String title, [String iconCls] ) : void
Sets the title text for the panel and optionally the icon class. In order to be able to set the title, a header eleme...

Sets the title text for the panel and optionally the 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 title, or configuring it with header: true.

Parameters:
  • title : String
    The title text to set
  • iconCls : String
    (optional) iconCls A user-defined CSS class that provides the icon image for this panel
Returns:
  • void
Panel
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
showAt( Array xy ) : void
Shows this tip at the specified XY position. Example usage: // Show the tip at x:50 and y:100 tip.showAt([50,100])...
Shows this tip at the specified XY position. Example usage:
// Show the tip at x:50 and y:100

tip.showAt([50,100]);
Parameters:
  • xy : Array
    An array containing the x and y coordinates
Returns:
  • void
Tip
showBy( Mixed el, [String position] ) : void
Experimental. Shows this tip at a position relative to another element using a standard Ext.Element.alignTo anchor p...
Experimental. Shows this tip at a position relative to another element using a standard 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');
Parameters:
  • el : Mixed
    An HTMLElement, Ext.Element or string id of the target element to align to
  • position : String
    (optional) A valid Ext.Element.alignTo anchor position (defaults to 'tl-br?' or defaultAlign if specified).
Returns:
  • void
Tip
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse( Boolean animate ) : Ext.Panel
Shortcut for performing an expand or collapse based on the current state of the panel.
Shortcut for performing an expand or collapse based on the current state of the panel.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
activate : ( Ext.Panel p )
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some...
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been activated.
Panel
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforeclose : ( Ext.Panel p )
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses d...
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like 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.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being closed.
Panel
beforecollapse : ( Ext.Panel p, Boolean animate )
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel being collapsed.
  • animate : Boolean
    True if the collapse is animated, else false.
Panel
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p, Boolean animate )
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being expanded.
  • animate : Boolean
    True if the expand is animated, else false.
Panel
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
bodyresize : ( Ext.Panel p, Number width, Number height )
Fires after the Panel has been resized.
Fires after the Panel has been resized.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has been resized.
  • width : Number
    The Panel's new width.
  • height : Number
    The Panel's new height.
Panel
close : ( Ext.Panel p )
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do...
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel within a Ext.TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been closed.
Panel
collapse : ( Ext.Panel p )
Fires after the Panel has been collapsed.
Fires after the Panel has been collapsed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel that has been collapsed.
Panel
deactivate : ( Ext.Panel p )
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but ...
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been deactivated.
Panel
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
expand : ( Ext.Panel p )
Fires after the Panel has been expanded.
Fires after the Panel has been expanded.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been expanded.
Panel
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p, String The, String The )
Fires after the Panel icon class has been set or changed.
Fires after the Panel icon class has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its icon class changed.
  • The : String
    new icon class.
  • The : String
    old icon class.
Panel
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
titlechange : ( Ext.Panel p, String The )
Fires after the Panel title has been set or changed.
Fires after the Panel title has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its title changed.
  • The : String
    new title.
Panel


Observable
    Spinner

Class Ext.ux.Spinner

Package: | Ext.ux
Defined In: | Spinner.js
Class: | Spinner
Extends: | Observable
Creates a Spinner control utilized by Ext.ux.form.SpinnerField

Config Options

Config Options Defined By
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable

Public Properties

This class has no public properties.

Public Methods

Method Defined By
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

This class has no public events.


Observable
    Component
      BoxComponent
        Container
          Menu
            StartMenu

Class Ext.ux.StartMenu

Package: | Ext.ux
Defined In: | StartMenu.js
Class: | StartMenu
Extends: | Menu
A start menu object.

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
allowOtherMenus : Boolean
True to allow multiple menus to be displayed at the same time (defaults to false)
Menu
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
defaultAlign : String
The default Ext.Element.alignTo anchor position value for this menu relative to its element of origin (defaults to '...
The default Ext.Element.alignTo anchor position value for this menu relative to its element of origin (defaults to 'tl-bl?')
Menu
defaultOffsets : Array
An array specifying the [x, y] offset in pixels by which to change the default Menu popup position after aligning ac...
An array specifying the [x, y] offset in pixels by which to change the default Menu popup position after aligning according to the defaultAlign configuration. Defaults to [0, 0].
Menu
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all items added to this container either via the items config or via the add...
A config object that will be applied to all items added to this container either via the items config or via the add method. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the menu.
Menu
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
enableScrolling : Boolean
True to allow the menu container to have scroller controls if the menu is too long (defaults to true).
Menu
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
floating : Boolean
By default, a Menu configured as floating:true will be rendered as an Ext.Layer (an absolutely positioned, floating...

By default, a Menu configured as floating:true will be rendered as an Ext.Layer (an absolutely positioned, floating Component with zindex=15000). If configured as floating:false, the Menu may be used as child item of another Container instead of a free-floating Layer.

Menu
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
ignoreParentClicks : Boolean
True to ignore clicks on any item in this menu that is a parent item (displays a submenu) so that the submenu is not...
True to ignore clicks on any item in this menu that is a parent item (displays a submenu) so that the submenu is not dismissed when clicking the parent item (defaults to false).
Menu
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Mixed
An array of items to be added to this menu. Menus may contain either menu items, or general Components.
Menu
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
This class assigns a default layout (layout:'menu'). Developers may override this configuration option if another la...
This class assigns a default layout (layout:'menu'). Developers may override this configuration option if another layout is required. See Ext.Container.layout for additional information.
Menu
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maxHeight : Number
The maximum height of the menu. Only applies when enableScrolling is set to True (defaults to null).
Menu
minWidth : Number
The minimum width of the menu in pixels (defaults to 120)
Menu
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
scrollIncrement : Number
The amount to scroll the menu. Only applies when enableScrolling is set to True (defaults to 24).
Menu
shadow : Boolean/String
True or 'sides' for the default effect, 'frame' for 4-way shadow, and 'drop' for bottom-right shadow (defaults to 's...
True or 'sides' for the default effect, 'frame' for 4-way shadow, and 'drop' for bottom-right shadow (defaults to 'sides')
Menu
showSeparator : Boolean
True to show the icon separator. (defaults to true).
Menu
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
The Ext.Element.alignTo anchor position value to use for submenus of this menu (defaults to 'tl-tr?')
Menu
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
StartMenu( Object config )
Creates a new StartMenu
Creates a new StartMenu
Parameters:
  • config : Object
    Configuration options SAMPLE USAGE: this.startMenu = new Ext.ux.StartMenu({ iconCls: 'user', height: 300, shadow: true, title: get_cookie('memberName'), width: 300 }); this.startMenu.add({ text: 'Grid Window', iconCls:'icon-grid', handler : this.createWindow, scope: this }); this.startMenu.addTool({ text:'Logout', iconCls:'logout', handler:function(){ window.location = "logout.php"; }, scope:this });
Returns:
  • void
StartMenu
add( Object/Array component, Object (Optional), Object (Optional) ) : Ext.Component
Adds Component(s) to this Container. Description : <ul class="mdetail-params"> Fires the beforeadd event before addin...

Adds Component(s) to this Container.

Description :

  • Fires the beforeadd event before adding
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the add event after the component has been added.

Notes :

  • If the Container is already rendered when add is called, you may need to call 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 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
  • Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Object/Array

    Either a single component or an Array of components to add. See items for additional information.

  • (Optional) : Object
    component_2
  • (Optional) : Object
    component_n
Returns:
  • Ext.Component
    component The Component (or config object) that was added.
Container
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addElement( Mixed el ) : Ext.menu.Item
Adds an Ext.Element object to the menu
Adds an Ext.Element object to the menu
Parameters:
  • el : Mixed
    The element or DOM node to add, or its id
Returns:
  • Ext.menu.Item
    The menu item that was added
Menu
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addItem( Ext.menu.Item item ) : Ext.menu.Item
Adds an existing object based on Ext.menu.BaseItem to the menu
Adds an existing object based on Ext.menu.BaseItem to the menu
Parameters:
  • item : Ext.menu.Item
    The menu item to add
Returns:
  • Ext.menu.Item
    The menu item that was added
Menu
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
addMenuItem( Object config ) : Ext.menu.Item
Creates a new Ext.menu.Item based an the supplied config object and adds it to the menu
Creates a new Ext.menu.Item based an the supplied config object and adds it to the menu
Parameters:
  • config : Object
    A MenuItem config object
Returns:
  • Ext.menu.Item
    The menu item that was added
Menu
addSeparator() : Ext.menu.Item
Adds a separator bar to the menu
Adds a separator bar to the menu
Parameters:
  • None.
Returns:
  • Ext.menu.Item
    The menu item that was added
Menu
addText( String text ) : Ext.menu.Item
Creates a new Ext.menu.TextItem with the supplied text and adds it to the menu
Creates a new Ext.menu.TextItem with the supplied text and adds it to the menu
Parameters:
  • text : String
    The text to display in the menu item
Returns:
  • Ext.menu.Item
    The menu item that was added
Menu
addToolSeparator() : Ext.menu.Item
Adds a separator bar to the Tools
Adds a separator bar to the Tools
Parameters:
  • None.
Returns:
  • Ext.menu.Item
    The menu item that was added
StartMenu
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide( [Boolean deep] ) : void
Hides this menu and optionally all parent menus
Hides this menu and optionally all parent menus
Parameters:
  • deep : Boolean
    (optional) True to hide all parent menus recursively, if any (defaults to false)
Returns:
  • void
Menu
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show( Mixed element, [String position], [Ext.ux.StartMenu parentMenu] ) : void
Displays this menu relative to another element
Displays this menu relative to another element
Parameters:
  • element : Mixed
    The element to align to
  • position : String
    (optional) The Ext.Element.alignTo anchor position to use in aligning to the element (defaults to this.defaultAlign)
  • parentMenu : Ext.ux.StartMenu
    (optional) This menu's parent menu, if applicable (defaults to undefined)
Returns:
  • void
StartMenu
showAt( Array xyPosition, [Ext.menu.Menu parentMenu] ) : void
Displays this menu at a specific xy position
Displays this menu at a specific xy position
Parameters:
  • xyPosition : Array
    Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
  • parentMenu : Ext.menu.Menu
    (optional) This menu's parent menu, if applicable (defaults to undefined)
Returns:
  • void
Menu
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
click : ( Ext.menu.Menu this, Ext.menu.Item menuItem, Ext.EventObject e )
Fires when this menu is clicked (or when the enter key is pressed while it is active)
Fires when this menu is clicked (or when the enter key is pressed while it is active)
Listeners will be called with the following arguments:
  • this : Ext.menu.Menu
  • menuItem : Ext.menu.Item
    The menu item that was clicked
  • e : Ext.EventObject
Menu
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
itemclick : ( Ext.menu.BaseItem baseItem, Ext.EventObject e )
Fires when a menu item contained in this menu is clicked
Fires when a menu item contained in this menu is clicked
Listeners will be called with the following arguments:
  • baseItem : Ext.menu.BaseItem
    The BaseItem that was clicked
  • e : Ext.EventObject
Menu
mouseout : ( Ext.menu.Menu this, Ext.EventObject e, Ext.menu.Item menuItem )
Fires when the mouse exits this menu
Fires when the mouse exits this menu
Listeners will be called with the following arguments:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    The menu item that was clicked
Menu
mouseover : ( Ext.menu.Menu this, Ext.EventObject e, Ext.menu.Item menuItem )
Fires when the mouse is hovering over this menu
Fires when the mouse is hovering over this menu
Listeners will be called with the following arguments:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    The menu item that was clicked
Menu
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


Observable
    Component
      BoxComponent
        Container
          Toolbar
            StatusBar

Class Ext.ux.StatusBar

Package: | Ext.ux
Defined In: | StatusBar.js
Class: | StatusBar
Extends: | Toolbar

Basic status bar component that can be used as the bottom toolbar of any Ext.Panel. In addition to supporting the standard Ext.Toolbar interface for adding buttons, menus and other items, the StatusBar provides a greedy status element that can be aligned to either side and has convenient methods for setting the status text and icon. You can also indicate that something is processing using the showBusy method.

Note: Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does not support xtype. For this reason, if you are adding Toolbar items into the StatusBar you must declare it using the "new StatusBar()" syntax for the items to render correctly.

new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.ux.StatusBar({
        id: 'my-status',

        // defaults to use when the status is cleared:
        defaultText: 'Default status text',
        defaultIconCls: 'default-icon',

        // values to set initially:
        text: 'Ready',
        iconCls: 'ready-icon',

        // any standard Toolbar items:
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});

// Update the status bar later in code:
var sb = Ext.getCmp('my-status');
sb.setStatus({
    text: 'OK',
    iconCls: 'ok-icon',
    clear: true // auto-clear after a set interval
});

// Set the status bar to show that something is processing:
sb.showBusy();

// processing....

sb.clearStatus(); // once completeed

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoClear : Number
The number of milliseconds to wait after setting the status via setStatus before automatically clearing the status te...
The number of milliseconds to wait after setting the status via setStatus before automatically clearing the status text and icon (defaults to 5000). Note that this only applies when passing the clear argument to setStatus since that is the only way to defer clearing the status. This can be overridden by specifying a different wait value in setStatus. Calls to clearStatus always clear the status bar immediately and ignore this value.
StatusBar
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
busyIconCls : String
The default iconCls applied when calling showBusy (defaults to 'x-status-busy'). It can be overridden at any time by ...
The default iconCls applied when calling showBusy (defaults to 'x-status-busy'). It can be overridden at any time by passing the iconCls argument into showBusy. See the iconCls docs for additional details about customizing the icon.
StatusBar
busyText : String
The default text applied when calling showBusy (defaults to 'Loading...'). It can be overridden at any time by passin...
The default text applied when calling showBusy (defaults to 'Loading...'). It can be overridden at any time by passing the text argument into showBusy.
StatusBar
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
StatusBar
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
defaultIconCls : String
The default iconCls value (see the iconCls docs for additional details about customizing the icon). This will be used...
The default iconCls value (see the iconCls docs for additional details about customizing the icon). This will be used anytime the status bar is cleared with the useDefaults:true option (defaults to '').
StatusBar
defaultText : String
The default text value. This will be used anytime the status bar is cleared with the useDefaults:true option (defaul...
The default text value. This will be used anytime the status bar is cleared with the useDefaults:true option (defaults to '').
StatusBar
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
iconCls : String
A CSS class that will be applied to the status element and is expected to provide a background image that will serve ...
A CSS class that will be applied to the status element and is expected to provide a background image that will serve as the status bar icon (defaults to ''). The class is applied directly to the div that also contains the status text, so the rule should provide the appropriate padding on the div to make room for the image. Example usage:
// Example CSS rule:
.x-statusbar .x-status-custom {
    padding-left: 25px;
    background: transparent url(images/custom-icon.gif) no-repeat 3px 3px;
}

// Initializing the status bar:
var sb = new Ext.ux.StatusBar({
    defaultIconCls: 'x-status-custom'
});

// Setting it in code:
sb.setStatus({
    text: 'New status',
    iconCls: 'x-status-custom'
});
StatusBar
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! ** A single item, or an array of child Components to be added t...
** IMPORTANT: be sure to 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 Ext.Component
  • a fully instanciated object or
  • an object literal that:
    • has a specified xtype
    • the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
    • If an xtype is not explicitly specified, the 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 doLayout call.
  • Do not specify contentEl/ html with items.
Container
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
This class assigns a default layout (layout:'toolbar'). Developers may override this configuration option if another...
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 Ext.Container.layout for additional information.
Toolbar
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
statusAlign : String
The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered, it creates ...
The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered, it creates an internal div containing the status text and icon. Any additional Toolbar items added in the StatusBar's items config, or added via add or any of the supported add* methods, will be rendered, in added order, to the opposite side. The status element is greedy, so it will automatically expand to take up all sapce left over by any other items. Example usage:
// Create a left-aligned status bar containing a button,
// separator and text item that will be right-aligned (default):
new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.ux.StatusBar({
        defaultText: 'Default status text',
        id: 'status-id',
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});

// By adding the statusAlign config, this will create the
// exact same toolbar, except the status and toolbar item
// layout will be reversed from the previous example:
new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.ux.StatusBar({
        defaultText: 'Default status text',
        id: 'status-id',
        statusAlign: 'right',
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});
StatusBar
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
A string that will be rendered into the status element as the status message (defaults to '');
StatusBar
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
StatusBar( Object/Array config )
Creates a new StatusBar
Creates a new StatusBar
Parameters:
  • config : Object/Array
    A config object
Returns:
  • void
StatusBar
add( Mixed arg1, Mixed arg2, Mixed etc. ) : void
Adds element(s) to the toolbar -- this function takes a variable number of arguments of mixed type and adds them to ...

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 Ext.Container.add.

Parameters:
  • arg1 : Mixed
    The following types of arguments are all valid:
    • Ext.Button config: A valid button config object (equivalent to addButton)
    • HtmlElement: Any standard HTML element (equivalent to addElement)
    • Field: Any form field (equivalent to addField)
    • Item: Any subclass of Ext.Toolbar.Item (equivalent to addItem)
    • String: Any generic string (gets wrapped in a Ext.Toolbar.TextItem, equivalent to addText). Note that there are a few special strings that are treated differently as explained next.
    • '-': Creates a separator element (equivalent to addSeparator)
    • ' ': Creates a spacer element (equivalent to addSpacer)
    • '->': Creates a fill element (equivalent to addFill)
  • arg2 : Mixed
  • etc. : Mixed
Returns:
  • void
Toolbar
addButton( Object/Array config ) : Ext.Button/Array
Adds a button (or buttons). See Ext.Button for more info on the config. Note: See the notes within Ext.Container.add...
Adds a button (or buttons). See Ext.Button for more info on the config.

Note: See the notes within Ext.Container.add.

Parameters:
  • config : Object/Array
    A button config or array of configs
Returns:
  • Ext.Button/Array
Toolbar
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addDom( Object config ) : Ext.Toolbar.Item
Adds a new element to the toolbar from the passed Ext.DomHelper config Note: See the notes within Ext.Container.add.
Adds a new element to the toolbar from the passed Ext.DomHelper config

Note: See the notes within Ext.Container.add.

Parameters:
  • config : Object
Returns:
  • Ext.Toolbar.Item
    The element's item
Toolbar
addElement( Mixed el ) : Ext.Toolbar.Item
Adds any standard HTML element to the toolbar Note: See the notes within Ext.Container.add.
Adds any standard HTML element to the toolbar

Note: See the notes within Ext.Container.add.

Parameters:
  • el : Mixed
    The element or id of the element to add
Returns:
  • Ext.Toolbar.Item
    The element's item
Toolbar
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addField( Ext.form.Field field ) : Ext.Toolbar.Item
Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have been rendered...
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 addElement.

Note: See the notes within Ext.Container.add.

Parameters:
  • field : Ext.form.Field
Returns:
  • Ext.Toolbar.Item
Toolbar
addFill() : void
Forces subsequent additions into the float:right toolbar Note: See the notes within Ext.Container.add.
Forces subsequent additions into the float:right toolbar

Note: See the notes within Ext.Container.add.

Parameters:
  • None.
Returns:
  • void
Toolbar
addItem( Ext.Toolbar.Item item ) : Ext.Toolbar.Item
Adds any Toolbar.Item or subclass Note: See the notes within Ext.Container.add.
Adds any Toolbar.Item or subclass

Note: See the notes within Ext.Container.add.

Parameters:
  • item : Ext.Toolbar.Item
Returns:
  • Ext.Toolbar.Item
    The item
Toolbar
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
addSeparator() : Ext.Toolbar.Item
Adds a separator Note: See the notes within Ext.Container.add.
Adds a separator

Note: See the notes within Ext.Container.add.

Parameters:
  • None.
Returns:
  • Ext.Toolbar.Item
    The separator {@link Ext.Toolbar.Item item}
Toolbar
addSpacer() : Ext.Toolbar.Spacer
Adds a spacer element Note: See the notes within Ext.Container.add.
Adds a spacer element

Note: See the notes within Ext.Container.add.

Parameters:
  • None.
Returns:
  • Ext.Toolbar.Spacer
    The spacer item
Toolbar
addText( String text ) : Ext.Toolbar.Item
Adds text to the toolbar Note: See the notes within Ext.Container.add.
Adds text to the toolbar

Note: See the notes within Ext.Container.add.

Parameters:
  • text : String
    The text to add
Returns:
  • Ext.Toolbar.Item
    The element's item
Toolbar
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
clearStatus( [Object config] ) : Ext.ux.StatusBar
Clears the status text and iconCls. Also supports clearing via an optional fade out animation.
Clears the status text and iconCls. Also supports clearing via an optional fade out animation.
Parameters:
  • config : Object
    (optional) A config object containing any or all of the following properties. If this object is not specified the status will be cleared using the defaults below:
    • anim {Boolean} : (optional) True to clear the status by fading out the status element (defaults to false which clears immediately).
    • useDefaults {Boolean} : (optional) True to reset the text and icon using defaultText and defaultIconCls (defaults to false which sets the text to '' and removes any existing icon class).
Returns:
  • Ext.ux.StatusBar
    this
StatusBar
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getText() : String
Returns the current status text.
Returns the current status text.
Parameters:
  • None.
Returns:
  • String
    The status text
StatusBar
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
insertButton( Number index, Object/Ext.Toolbar.Item/Ext.Button/Array item ) : Ext.Button/Item
Inserts any Ext.Toolbar.Item/Ext.Button at the specified index. Note: See the notes within Ext.Container.add.
Inserts any Ext.Toolbar.Item/Ext.Button at the specified index.

Note: See the notes within Ext.Container.add.

Parameters:
  • index : Number
    The index where the item is to be inserted
  • item : Object/Ext.Toolbar.Item/Ext.Button/Array
    The button, or button config object to be inserted, or an array of buttons/configs.
Returns:
  • Ext.Button/Item
Toolbar
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIcon( [String iconCls] ) : Ext.ux.StatusBar
Convenience method for setting the status icon directly. For more flexible options see setStatus. See iconCls for co...
Convenience method for setting the status icon directly. For more flexible options see setStatus. See iconCls for complete details about customizing the icon.
Parameters:
  • iconCls : String
    (optional) The icon class to set (defaults to '', and any current icon class is removed)
Returns:
  • Ext.ux.StatusBar
    this
StatusBar
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setStatus( Object/String config ) : Ext.ux.StatusBar
Sets the status text and/or iconCls. Also supports automatically clearing the status that was set after a specified i...
Sets the status text and/or iconCls. Also supports automatically clearing the status that was set after a specified interval.
Parameters:
  • config : Object/String
    A config object specifying what status to set, or a string assumed to be the status text (and all other options are defaulted as explained below). A config object containing any or all of the following properties can be passed:
    • text {String} : (optional) The status text to display. If not specified, any current status text will remain unchanged.
    • iconCls {String} : (optional) The CSS class used to customize the status icon (see iconCls for details). If not specified, any current iconCls will remain unchanged.
    • clear {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not specified, the new status will not be auto-cleared and will stay until updated again or cleared using clearStatus. If true is passed, the status will be cleared using autoClear, defaultText and defaultIconCls via a fade out animation. If a numeric value is passed, it will be used as the callback interval (in milliseconds), overriding the autoClear value. All other options will be defaulted as with the boolean option. To customize any other options, you can pass an object in the format:
      • wait {Number} : (optional) The number of milliseconds to wait before clearing (defaults to autoClear).
      • anim {Number} : (optional) False to clear the status immediately once the callback executes (defaults to true which fades the status out).
      • useDefaults {Number} : (optional) False to completely clear the status text and iconCls (defaults to true which uses defaultText and defaultIconCls).
    Example usage:
    // Simple call to update the text
statusBar.setStatus('New status');

// Set the status and icon, auto-clearing with default options:
statusBar.setStatus({
    text: 'New status',
    iconCls: 'x-status-custom',
    clear: true
});

// Auto-clear with custom options:
statusBar.setStatus({
    text: 'New status',
    iconCls: 'x-status-custom',
    clear: {
        wait: 8000,
        anim: false,
        useDefaults: false
    }
});
Returns:
  • Ext.ux.StatusBar
    this
StatusBar
setText( [String text] ) : Ext.ux.StatusBar
Convenience method for setting the status text directly. For more flexible options see setStatus.
Convenience method for setting the status text directly. For more flexible options see setStatus.
Parameters:
  • text : String
    (optional) The text to set (defaults to '')
Returns:
  • Ext.ux.StatusBar
    this
StatusBar
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
showBusy( [Object/String config] ) : Ext.ux.StatusBar
Convenience method for setting the status text and icon to special values that are pre-configured to indicate a "busy...
Convenience method for setting the status text and icon to special values that are pre-configured to indicate a "busy" state, usually for loading or processing activities.
Parameters:
  • config : Object/String
    (optional) A config object in the same format supported by setStatus, or a string to use as the status text (in which case all other options for setStatus will be defaulted). Use the text and/or iconCls properties on the config to override the default busyText and busyIconCls settings. If the config argument is not specified, busyText and busyIconCls will be used in conjunction with all of the default options for setStatus.
Returns:
  • Ext.ux.StatusBar
    this
StatusBar
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
overflowchange : ( Object c, Boolean lastOverflow )
Fires after the overflow state has changed.
Fires after the overflow state has changed.
Listeners will be called with the following arguments:
  • c : Object
    The Container
  • lastOverflow : Boolean
    overflow state
Toolbar
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


Class Ext.ux.TabCloseMenu

Package: | Ext.ux
Defined In: | TabCloseMenu.js
Class: | TabCloseMenu
Extends: | Object
Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.

Public Properties

This class has no public properties.

Public Methods

This class has no public methods.

Public Events

This class has no public events.


Observable
    TaskBar

Class Ext.ux.TaskBar

Package: | Ext.ux
Defined In: | TaskBar.js
Class: | TaskBar
Extends: | Observable

Config Options

Config Options Defined By
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable

Public Properties

This class has no public properties.

Public Methods

Method Defined By
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

This class has no public events.


Observable
    Component
      BoxComponent
        Button
          TaskBar.TaskButton

Class Ext.ux.TaskBar.TaskButton

Package: | Ext.ux
Defined In: | TaskBar.js
Class: | TaskBar.TaskButton
Extends: | Button

Config Options

Config Options Defined By
allSelectedText : String
Text to display when all items are selected
TaskBar.TaskButton
allowDepress : Boolean
False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when enableToggle is true.
Button
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
arrowAlign : String
(Optional) The side of the Button box to render the arrow if the button has an associated menu. Two values are allowe...

(Optional) The side of the Button box to render the arrow if the button has an associated menu. Two values are allowed:

  • 'right'
  • 'bottom'

Defaults to 'right'.

Button
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoSelectKey : Number
[44] COMMA Sets the key used to auto-select an auto-suggest highlighted query. When pressed, the highlighted text-it...
[44] COMMA Sets the key used to auto-select an auto-suggest highlighted query. When pressed, the highlighted text-item will be selected as if the user selected the row with a mouse click.
TaskBar.TaskButton
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
buttonSelector : String
(Optional) A DomQuery selector which is used to extract the active, clickable element from the DOM structure created....

(Optional) A DomQuery selector which is used to extract the active, clickable element from the DOM structure created.

When a custom template is used, you must ensure that this selector results in the selection of a focussable element.

Defaults to 'button:first-child'.

Button
checkSelector : String
DomQuery config for locating checkbox
TaskBar.TaskButton
clearAllText : String
the text to display for "clear all" link
TaskBar.TaskButton
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
clickEvent : String
The type of event to map to the button's event handler (defaults to 'click')
Button
cls : String
TaskBar.TaskButton
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disabled : Boolean
True to start disabled (defaults to false)
Button
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
enableKeyEvents : Boolean
for typeAhead
TaskBar.TaskButton
enableToggle : Boolean
True to enable pressed/not pressed toggling (defaults to false)
Button
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
handleMouseEvents : Boolean
False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
Button
handler : Function
A function called when the button is clicked (can be used instead of click event). The handler is passed the followin...
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.
Button
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
True to start hidden (defaults to false)
Button
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
highlightClass : String
The css class applied to rows which are hovered with mouse selected via key-nav, or highlighted when a text-query mat...
The css class applied to rows which are hovered with mouse selected via key-nav, or highlighted when a text-query matches a single item.
TaskBar.TaskButton
icon : String
The path to an image to display in the button (the image will be set as the background-image CSS property of the butt...
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')
Button
iconAlign : String
(Optional) The side of the Button box to render the icon. Four values are allowed: <ul class="mdetail-params"> 'top'<...

(Optional) The side of the Button box to render the icon. Four values are allowed:

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

Defaults to 'left'.

Button
iconCls : String
A css class which sets a background image to be used as the icon for this button
Button
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
itemSelector : String
The itemSelector used with Combo's internal DataView [x-combo-list]
TaskBar.TaskButton
itemSelector : String
This setting is required if a custom XTemplate has been specified in tpl which assigns a class other than 'x-combo-li...
This setting is required if a custom XTemplate has been specified in tpl which assigns a class other than
'x-combo-list-item'
to dropdown list items. A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the DataView which handles the dropdown display will be working with.
TaskBar.TaskButton
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maxDisplayRows : Number
The maximum number of rows to show before applying vscroll
TaskBar.TaskButton
menu : Mixed
Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to unde...
Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
Button
menuAlign : String
The position to align the menu to (see Ext.Element.alignTo for more details, defaults to 'tl-bl?').
Button
minChars : Integer
[0]
TaskBar.TaskButton
minWidth : Number
The minimum width for this button (used to give a set of buttons a common width). See also Ext.Panel.minButtonWidth.
Button
overClass : String
[x-grid3-row-over]
TaskBar.TaskButton
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
overflowText : String
If used in a Toolbar, the text to be used if this item is shown in the overflow menu. See also Ext.Toolbar.Item.overf...
If used in a Toolbar, the text to be used if this item is shown in the overflow menu. See also Ext.Toolbar.Item.overflowText.
Button
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
pressed : Boolean
True to start pressed (only if enableToggle = true)
Button
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
repeat : Boolean/Object
True to repeat fire the click event while the mouse is down. This can also be a ClickRepeater config object (defaults...
True to repeat fire the click event while the mouse is down. This can also be a ClickRepeater config object (defaults to false).
Button
scale : String
(Optional) The size of the Button. Three values are allowed: <ul class="mdetail-params"> 'small'<div class="sub-desc"...

(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'.

Button
scope : Object
The scope (this reference) in which the handler and toggleHandler is executed. Defaults to this Button.
Button
selectAllText : String
The "SELECT ALL" phrase [Select All]
TaskBar.TaskButton
selectedClass : String
[x-grid3-row-selected]
TaskBar.TaskButton
separatorHtml : String
arbitrary html rendered after Checkable controls. Can be used to add an html separator markup.
TaskBar.TaskButton
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
Set a DOM tabIndex for this button (defaults to undefined)
Button
template : Ext.Template
A Template used to create the Button's DOM structure. Instances, or subclasses which need a different DOM structure m...

A 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 getTemplateArgs.
Button
text : String
The button text to be used as innerHTML (html tags are accepted)
Button
toggleGroup : String
The group this toggle button is a member of (only 1 per group can be pressed)
Button
toggleHandler : Function
Function called when a Button with enableToggle set to true is clicked. Two arguments are passed:<ul class="mdetail-p...
Function called when a Button with enableToggle set to true is clicked. Two arguments are passed:
  • button : Ext.Button
    this Button object
  • state : Boolean
    The next state if the Button, true means pressed.
Button
tooltip : String/Object
The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config obj...
The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
Button
tooltipType : String
The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
Button
tpl : String/Ext.XTemplate
The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. Use this to create c...
The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. Use this to create custom UI layouts for items in the list.

If you wish to preserve the default visual look of list items, add the CSS class name

x-combo-list-item
to the template's container element.

The template must contain one or more substitution parameters using field names from the Combo's Store. An example of a custom template would be adding an

ext:qtip
attribute which might display other fields from the Store.

The dropdown list is displayed in a DataView. See Ext.DataView for details.

TaskBar.TaskButton
type : String
submit, reset or button - defaults to 'button'
Button
url : String
This will be a url of a location to load the BookStore This is a specialized Store which maintains books. It already ...
This will be a url of a location to load the BookStore This is a specialized Store which maintains books. It already knows about Amazon's XML definition and will expose the following Record defintion: - Author - Manufacturer - ProductGroup - DetailPageURL
TaskBar.TaskButton
value : Array
CheckboxCombo expresses its value as an array.
TaskBar.TaskButton
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
BookDetail : Object
App.BookDetail
TaskBar.TaskButton
BookGrid : Object
App.BookGrid
TaskBar.TaskButton
BookMasterDetail : Object
App.BookMasterDetail
TaskBar.TaskButton
Constructor : Object
SWFUpload: http://www.swfupload.org, http://swfupload.googlecode.com mmSWFUpload 1.0: Flash upload dialog - http://p...
SWFUpload: http://www.swfupload.org, http://swfupload.googlecode.com mmSWFUpload 1.0: Flash upload dialog - http://profandesign.se/swfupload/, http://www.vinterwebb.se/ SWFUpload is (c) 2006-2007 Lars Huring, Olov Nilz�n and Mammon Media and is released under the MIT License: http://www.opensource.org/licenses/mit-license.php SWFUpload 2 is (c) 2007-2008 Jake Roberts and is released under the MIT License: http://www.opensource.org/licenses/mit-license.php
TaskBar.TaskButton
Grid : Object
App.user.Grid A typical EditorGridPanel extension.
TaskBar.TaskButton
MultiCombo : Object
Ext.ux.MultiCombo
TaskBar.TaskButton
This : Object
Setup Drop Targets
TaskBar.TaskButton
This : Object
Setup Drop Targets
TaskBar.TaskButton
btnEl : Ext.Element
An Element encapsulating the Button's clickable element. By default, this references a &lt;button&gt; element. Read o...
An Element encapsulating the Button's clickable element. By default, this references a <button> element. Read only.
Button
disabled : Boolean
Read-only. True if this button is disabled
Button
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
function : Object
onAdd
TaskBar.TaskButton
function : Object
onDelete
TaskBar.TaskButton
hidden : Boolean
Read-only. True if this button is hidden
Button
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
menu : Menu The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
Button
ownerCt : Ext.Panel
The Button's owner Ext.Panel (defaults to undefined, and is set automatically when the Button is added to a container...
The Button's owner Ext.Panel (defaults to undefined, and is set automatically when the Button is added to a container). Read-only.
Button
pressed : Boolean
Read-only. True if this button is pressed (only if enableToggle = true)
Button
rendered : Boolean
True if this component has been rendered. Read-only.
Component
var : Object
this block should be moved to method getCurrentWord
TaskBar.TaskButton
var : Object
TaskBar.TaskButton
view : Ext.DataView
The DataView used to display the ComboBox's options.
TaskBar.TaskButton

Public Methods

Method Defined By
MultiCombo.Checkable() : void
Checkable
Checkable
Parameters:
  • None.
Returns:
  • void
TaskBar.TaskButton
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
buildBottomToolbar() : void
buildBottomToolbar
buildBottomToolbar
Parameters:
  • None.
Returns:
  • void
TaskBar.TaskButton
buildTopToolbar() : void
buildTopToolbar
buildTopToolbar
Parameters:
  • None.
Returns:
  • void
TaskBar.TaskButton
buildUI() : void
buildUI
buildUI
Parameters:
  • None.
Returns:
  • void
TaskBar.TaskButton
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus() : void
Focus the button
Focus the button
Parameters:
  • None.
Returns:
  • void
Button
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getCheckbox() : DomNode
getCheckbox
getCheckbox
Parameters:
  • None.
Returns:
  • DomNode
TaskBar.TaskButton
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getPressed( String group ) : Button
Gets the pressed button in the passed group or null
Gets the pressed button in the passed group or null
Parameters:
  • group : String
Returns:
  • Button
Button
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getTemplateArgs() : Object
This method returns an object which provides substitution parameters for the Template used to create this Button's DO...

This method returns an object which provides substitution parameters for the 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 template returns an Array containing the following items:

  • The Button's text
  • The <button>'s type
  • The iconCls applied to the <button> element
  • The cls applied to the Button's main Element
  • A CSS class name controlling the Button's scale and icon alignment
  • A CSS class name which applies an arrow to the Button if configured with a menu
Parameters:
  • None.
Returns:
  • Object
    Substitution data for a Template.
Button
getText() : String
Gets the text for this Button
Gets the text for this Button
Parameters:
  • None.
Returns:
  • String
    The button text
Button
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hasVisibleMenu() : Boolean
Returns true if the button has a menu and it is visible
Returns true if the button has a menu and it is visible
Parameters:
  • None.
Returns:
  • Boolean
Button
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
hideMenu() : void
Hide this button's menu (if it has one)
Hide this button's menu (if it has one)
Parameters:
  • None.
Returns:
  • void
Button
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
onAdd() : void
onAdd
onAdd
Parameters:
  • None.
Returns:
  • void
TaskBar.TaskButton
onContainerClick( Object dv, Object ev ) : void
onContainerClick Fired by MultiCombo
onContainerClick Fired by MultiCombo
Parameters:
  • dv : Object
  • ev : Object
Returns:
  • void
TaskBar.TaskButton
onDelete() : void
onDelete
onDelete
Parameters:
  • None.
Returns:
  • void
TaskBar.TaskButton
onEnter( Object sender ) : void
onEnter Called by MultiCombo
onEnter Called by MultiCombo
Parameters:
  • sender : Object
Returns:
  • void
TaskBar.TaskButton
onSave() : void
onSave
onSave
Parameters:
  • None.
Returns:
  • void
TaskBar.TaskButton
onSelectionChange( Object dv, Object rs ) : void
onSelectChange Fired by MultiCombo
onSelectChange Fired by MultiCombo
Parameters:
  • dv : Object
  • rs : Object
Returns:
  • void
TaskBar.TaskButton
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
select( Number index, Boolean scrollIntoView ) : void
Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event t...
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.
Parameters:
  • index : Number
    The zero-based index of the list item to select
  • scrollIntoView : Boolean
    False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
Returns:
  • void
TaskBar.TaskButton
selectByValue( String value, Boolean scrollIntoView ) : Boolean
Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire. The sto...
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.
Parameters:
  • value : String
    The data value of the item to select
  • scrollIntoView : Boolean
    False to prevent the dropdown list from autoscrolling to display the selected item if it is not currently in view (defaults to true)
Returns:
  • Boolean
    True if the value matched an item in the list, else false
TaskBar.TaskButton
selectNext( Object sender ) : void
selectNext Called by MultiCombo. use this to apply hover-class to this row.
selectNext Called by MultiCombo. use this to apply hover-class to this row.
Parameters:
  • sender : Object
Returns:
  • void
TaskBar.TaskButton
selectPrev( Object sender ) : void
selectPrev Called by MultiCombo, use this to apply hover class to row.
selectPrev Called by MultiCombo, use this to apply hover class to row.
Parameters:
  • sender : Object
Returns:
  • void
TaskBar.TaskButton
setChecked( Object v ) : void
setChecked
setChecked
Parameters:
  • v : Object
Returns:
  • void
TaskBar.TaskButton
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHandler( Function handler, [Object scope] ) : Ext.Button
Assigns this Button's click handler
Assigns this Button's click handler
Parameters:
  • handler : Function
    The function to call when the button is clicked
  • scope : Object
    (optional) Scope for the function passed in. Defaults to this Button.
Returns:
  • Ext.Button
    this
Button
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass( String cls ) : Ext.Button
Sets the CSS class that provides a background image to use as the button's icon. This method also changes the value ...
Sets the CSS class that provides a background image to use as the button's icon. This method also changes the value of the iconCls config internally.
Parameters:
  • cls : String
    The CSS class providing the icon image
Returns:
  • Ext.Button
    this
Button
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setText( String text ) : Ext.Button
Sets this Button's text
Sets this Button's text
Parameters:
  • text : String
    The button text
Returns:
  • Ext.Button
    this
Button
setTooltip( String/Object tooltip. ) : Ext.Button
Sets the tooltip for this Button.
Sets the tooltip for this Button.
Parameters:
  • tooltip. : String/Object
    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 Ext.QuickTips.register.
Returns:
  • Ext.Button
    this
Button
setValue( Array, String} ) : void
setValue Accepts a comma-separated list of ids or an array. if given a string, will conver to Array.
setValue Accepts a comma-separated list of ids or an array. if given a string, will conver to Array.
Parameters:
  • String} : Array,
    v
Returns:
  • void
TaskBar.TaskButton
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
showMenu() : void
Show this button's menu (if it has one)
Show this button's menu (if it has one)
Parameters:
  • None.
Returns:
  • void
Button
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggle( [Boolean state], [Boolean supressEvent] ) : Ext.Button
If a state it passed, it becomes the pressed state otherwise the current state is toggled.
If a state it passed, it becomes the pressed state otherwise the current state is toggled.
Parameters:
  • state : Boolean
    (optional) Force a particular state
  • supressEvent : Boolean
    (optional) True to stop events being fired when calling this method.
Returns:
  • Ext.Button
    this
Button
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
click : ( Button this, EventObject e )
Fires when this button is clicked
Fires when this button is clicked
Listeners will be called with the following arguments:
  • this : Button
  • e : EventObject
    The click event
Button
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
initview : ( Combo this, DataView dv )
Fires when Combo#initView is called. gives plugins a chance to interact with DataView
Fires when Combo#initView is called. gives plugins a chance to interact with DataView
Listeners will be called with the following arguments:
  • this : Combo
  • dv : DataView
Author: Chris Scott
TaskBar.TaskButton
menuhide : ( Button this, Menu menu )
If this button has a menu, this event fires when it is hidden
If this button has a menu, this event fires when it is hidden
Listeners will be called with the following arguments:
  • this : Button
  • menu : Menu
Button
menushow : ( Button this, Menu menu )
If this button has a menu, this event fires when it is shown
If this button has a menu, this event fires when it is shown
Listeners will be called with the following arguments:
  • this : Button
  • menu : Menu
Button
menutriggerout : ( Button this, Menu menu, EventObject e )
If this button has a menu, this event fires when the mouse leaves the menu triggering element
If this button has a menu, this event fires when the mouse leaves the menu triggering element
Listeners will be called with the following arguments:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
menutriggerover : ( Button this, Menu menu, EventObject e )
If this button has a menu, this event fires when the mouse enters the menu triggering element
If this button has a menu, this event fires when the mouse enters the menu triggering element
Listeners will be called with the following arguments:
  • this : Button
  • menu : Menu
  • e : EventObject
Button
mouseout : ( Button this, Event e )
Fires when the mouse exits the button
Fires when the mouse exits the button
Listeners will be called with the following arguments:
  • this : Button
  • e : Event
    The event object
Button
mouseover : ( Button this, Event e )
Fires when the mouse hovers over the button
Fires when the mouse hovers over the button
Listeners will be called with the following arguments:
  • this : Button
  • e : Event
    The event object
Button
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
toggle : ( Button this, Boolean pressed )
Fires when the 'pressed' state of this button changes (only if enableToggle = true)
Fires when the 'pressed' state of this button changes (only if enableToggle = true)
Listeners will be called with the following arguments:
  • this : Button
  • pressed : Boolean
Button


Observable
    Component
      BoxComponent
        Container
          TaskBarContainer

Class Ext.ux.TaskBarContainer

Package: | Ext.ux
Defined In: | TaskBar.js
Class: | TaskBarContainer
Extends: | Container

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! ** A single item, or an array of child Components to be added t...
** IMPORTANT: be sure to 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 Ext.Component
  • a fully instanciated object or
  • an object literal that:
    • has a specified xtype
    • the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
    • If an xtype is not explicitly specified, the 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 doLayout call.
  • Do not specify contentEl/ html with items.
Container
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specifi...

*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 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 layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the 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 Ext.layout.ContainerLayout will be created and used.

      Valid layout type values are:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • 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).

    • 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.

Container
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
add( Object/Array component, Object (Optional), Object (Optional) ) : Ext.Component
Adds Component(s) to this Container. Description : <ul class="mdetail-params"> Fires the beforeadd event before addin...

Adds Component(s) to this Container.

Description :

  • Fires the beforeadd event before adding
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the add event after the component has been added.

Notes :

  • If the Container is already rendered when add is called, you may need to call 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 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
  • Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Object/Array

    Either a single component or an Array of components to add. See items for additional information.

  • (Optional) : Object
    component_2
  • (Optional) : Object
    component_n
Returns:
  • Ext.Component
    component The Component (or config object) that was added.
Container
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeremove : ( Ext.Container this, Ext.Component component )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being removed
Container
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
remove : ( Ext.Container this, Ext.Component component )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was removed
Container
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


Observable
    Component
      BoxComponent
        TaskButtonsPanel

Class Ext.ux.TaskButtonsPanel

Package: | Ext.ux
Defined In: | TaskBar.js
Class: | TaskButtonsPanel
Extends: | BoxComponent

Config Options

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout mana...

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's 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();
BoxComponent
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • x : Number
    The new x position
  • y : Number
    The new y position
BoxComponent
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


TreeNodeUI
    ColumnNodeUI

Class Ext.ux.tree.ColumnNodeUI

Package: | Ext.ux.tree
Defined In: | ColumnNodeUI.js
Class: | ColumnNodeUI
Extends: | TreeNodeUI

Public Properties

This class has no public properties.

Public Methods

Method Defined By
addClass( String/Array className ) : void
Adds one or more CSS classes to the node's UI element. Duplicate classes are automatically filtered out.
Adds one or more CSS classes to the node's UI element. Duplicate classes are automatically filtered out.
Parameters:
  • className : String/Array
    The CSS class to add, or an array of classes
Returns:
  • void
TreeNodeUI
getAnchor() : HtmlElement
Returns the &lt;a> element that provides focus for the node's UI.
Returns the <a> element that provides focus for the node's UI.
Parameters:
  • None.
Returns:
  • HtmlElement
    The DOM anchor element.
TreeNodeUI
getIconEl() : HtmlElement
Returns the icon &lt;img> element.
Returns the icon <img> element.
Parameters:
  • None.
Returns:
  • HtmlElement
    The DOM image element.
TreeNodeUI
getTextEl() : HtmlNode
Returns the text node.
Returns the text node.
Parameters:
  • None.
Returns:
  • HtmlNode
    The DOM text node.
TreeNodeUI
hide() : void
Hides this node.
Hides this node.
Parameters:
  • None.
Returns:
  • void
TreeNodeUI
isChecked() : Boolean
Returns the checked status of the node. If the node was rendered with no checkbox, it returns false.
Returns the checked status of the node. If the node was rendered with no checkbox, it returns false.
Parameters:
  • None.
Returns:
  • Boolean
    The checked flag.
TreeNodeUI
removeClass( String/Array className ) : void
Removes one or more CSS classes from the node's UI element.
Removes one or more CSS classes from the node's UI element.
Parameters:
  • className : String/Array
    The CSS class to remove, or an array of classes
Returns:
  • void
TreeNodeUI
show() : void
Shows this node.
Shows this node.
Parameters:
  • None.
Returns:
  • void
TreeNodeUI
toggleCheck( Boolean (optional) ) : void
Sets the checked status of the tree node to the passed value, or, if no value was passed, toggles the checked status...
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.
Parameters:
  • (optional) : Boolean
    The new checked status.
Returns:
  • void
TreeNodeUI

Public Events

This class has no public events.


Observable
    Component
      BoxComponent
        Container
          Panel
            TreePanel
              ColumnTree

Class Ext.ux.tree.ColumnTree

Package: | Ext.ux.tree
Defined In: | ColumnNodeUI.js
Class: | ColumnTree
Extends: | TreePanel
xtype: | columntree

Config Options

Config Options Defined By
activeItem : String/Number
A string component id or the numeric index of the component that should be initially activated within the container's...
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 Ext.layout.AccordionLayout, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayout.activeItem.
Container
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
animCollapse : Boolean
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....
true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
animate : Boolean
true to enable animated expand/collapse (defaults to the value of Ext.enableFx)
TreePanel
applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...

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 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 renderTo will be ignored and the target element's parent node will automatically be used as the panel's container.

Panel
autoDestroy : Boolean
If true the container will automatically destroy any contained component that is removed from it, else destruction mu...
If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoHeight : Boolean
true to use height:'auto', false to use fixed height (defaults to false). Note: Setting autoHeight:true means that th...
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.
Panel
autoLoad : Object/String/Function
A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...
A valid url spec according to the Updater 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 body element, so it may be refreshed at any time.

Panel
autoScroll : Boolean
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to c...
true to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
autoWidth : Boolean
True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's layout manage...

True to use width:'auto', false to use fixed width (or allow it to be managed by its parent Container's 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'
    }],
});
BoxComponent
baseCls : String
The base CSS class to apply to this panel's element (defaults to 'x-panel'). Another option available by default is t...
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 unstyled also.

Panel
bbar : Object/Array
The bottom toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button co...

The bottom toolbar of the panel. This can be a 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 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.

Panel
bbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

Panel
bodyBorder : Boolean
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only a...
True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyCfg : Object
A DomHelper element specification object may be specified for any Panel Element. By default, the Default element in t...

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

Configuring a Custom element may be used, for example, to force the body Element to use a different form of markup than is created by default. An example of this might be to 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 addClass
    footerStyle:    'background-color:red' // see bodyStyle
});

The example above also explicitly creates a footer with custom markup and styling applied.

Panel
bodyCssClass : String/Object/Function
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defau...
Additional css class selector to be applied to the body element in the format expected by Ext.Element.addClass (defaults to null). See bodyCfg.
Panel
bodyStyle : String/Object/Function
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to nu...
Custom CSS styles to be applied to the body element in the format expected by Ext.Element.applyStyles (defaults to null). See bodyCfg.
Panel
border : Boolean
True to display the borders of the panel's body element, false to hide them (defaults to true). By default, the bord...
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 bodyBorder to false.
Panel
bufferResize : Boolean/Number
When set to true (100 milliseconds) or a number of milliseconds, the layout assigned for this container will buffer t...
When set to true (100 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.
Container
buttonAlign : String
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right'...
The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right').
Panel
buttons : Array
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration propert...
buttons will be used as items for the toolbar in the footer (fbar). Typically the value of this configuration property will be an array of Ext.Buttons or 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.
Panel
bwrapCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

Panel
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
closable : Boolean
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Cla...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
collapseFirst : Boolean
true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...
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).
Panel
collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
collapsible : Boolean
True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into the header ...
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).
Panel
containerScroll : Boolean
true to register this container with ScrollManager
TreePanel
contentEl : String
Specify the id of an existing HTML node to use as the panel's body content (defaults to ''). Description : <div clas...

Specify the id of an existing HTML node to use as the panel's body content (defaults to '').

  • Description :
      This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel when the Panel is rendered to use as the content (it is not going to be the actual panel itself).
  • Notes :
      The specified HTML Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
      The specified HTML element used will not participate in any layout scheme that the Panel may use. It's just HTML. Layouts operate on child 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.
Panel
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
ddAppendOnly : Boolean
true if the tree should only allow append drops (use for trees which are sorted)
TreePanel
ddGroup : String
The DD group this TreePanel belongs to
TreePanel
ddScroll : Boolean
true to enable body scrolling
TreePanel
defaultType : String
The default xtype of child Components to create in this Container when a child item is specified as a raw configurati...

The default 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 Ext.menu.Menu which defaults to 'menuitem', and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.

Container
defaults : Object
A config object that will be applied to all components added to this container either via the items config or via the...

A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Note: defaults will not be applied to config objects if the option is already specified. For example:

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
Render this panel disabled (default is false). An important note when using the disabled config on panels is that IE ...
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 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
        }
    }
});
Panel
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
dragConfig : Object
Custom config to pass to the Ext.tree.TreeDragZone instance
TreePanel
draggable : Boolean/Object
true to enable dragging of this Panel (defaults to false). For custom drag/drop implementations, an Ext.Panel.DD conf...

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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of 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();
Panel
dropConfig : Object
Custom config to pass to the Ext.tree.TreeDropZone instance
TreePanel
elements : String
A comma-delimited list of panel elements to initialize when the panel is rendered. Normally, this list will be gener...
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'.
Panel
enableDD : Boolean
true to enable drag and drop
TreePanel
enableDrag : Boolean
true to enable just drag
TreePanel
enableDrop : Boolean
true to enable just drop
TreePanel
fbar : Object/Array
A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into t...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's 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'
        }]
    }),
    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.

Panel
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
floating : Mixed
This property is used to configure the underlying Ext.Layer. Acceptable values for this configuration property are:<d...

This property is used to configure the underlying 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.
  • object :
    The specified object will be used as the configuration object for the Ext.Layer that will be created.
Panel
footer : Boolean
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if ...
true to create the footer element explicitly, false to skip creating it. The footer will be created automatically if buttons or a fbar have been configured. See bodyCfg for an example.
Panel
footerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's footer Element. See bodyCfg also.

Panel
forceLayout : Boolean
If true the container will force a layout initially even if hidden or collapsed. This option is useful for forcing fo...
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).
Container
frame : Boolean
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounde...
false by default to render with plain 1px square borders. true to render with 9 elements, complete with custom rounded corners (also see 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>
Panel
header : Boolean
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will b...
true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
headerCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCf...

A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCfg also.

Panel
height : Number
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset s...
The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideBorders : Boolean
True to hide the borders of each contained component, false to defer to the component's existing border settings (def...
True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
hlColor : String
The color of the node highlight (defaults to 'C3DAF9')
TreePanel
hlDrop : Boolean
false to disable node highlight on drop (defaults to the value of Ext.enableFx)
TreePanel
html : String/Object
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content ...
An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
iconCls : String
The CSS class selector that specifies a background image to be used as the header icon (defaults to ''). An example o...
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; }
Panel
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! ** A single item, or an array of child Components to be added t...
** IMPORTANT: be sure to 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 Ext.Component
  • a fully instanciated object or
  • an object literal that:
    • has a specified xtype
    • the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
    • If an xtype is not explicitly specified, the 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 doLayout call.
  • Do not specify contentEl/ html with items.
Container
keys : Object/Array
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to thi...
A Ext.KeyMap config object (in the format expected by Ext.KeyMap.addBinding used to assign custom key handling to this panel (defaults to null).
Panel
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
layout : String/Object
*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specifi...

*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 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 layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the 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 Ext.layout.ContainerLayout will be created and used.

      Valid layout type values are:

      • absolute
      • accordion
      • anchor
      • auto Default
      • border
      • card
      • column
      • fit
      • form
      • hbox
      • menu
      • table
      • toolbar
      • 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).

    • 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.

Container
layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
lines : Boolean
false to disable tree lines (defaults to true)
TreePanel
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
loader : Ext.tree.TreeLoader
A Ext.tree.TreeLoader for use with this TreePanel
TreePanel
margins : Object
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two 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}
BoxComponent
maskDisabled : Boolean
true to mask the panel when it is disabled, false to not mask it (defaults to true). Either way, the panel will alwa...
true to mask the panel when it is 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.
Panel
minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
monitorResize : Boolean
True to automatically monitor window resize events to handle anything that is sensitive to the current size of the vi...
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 layout and should not need to be set manually.
Container
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
pathSeparator : String
The token used to separate sub-paths in path strings (defaults to '/')
TreePanel
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
preventBodyReset : Boolean
Defaults to false. When set to true, an extra css class 'x-panel-normal' will be added to the panel's element, effec...
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.).
Panel
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
region : String
Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the...

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See Ext.layout.BorderLayout also.

BoxComponent
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
requestMethod : String
The HTTP request method for loading data (defaults to the value of Ext.Ajax.method).
TreePanel
root : Ext.tree.TreeNode
The root node for the tree.
TreePanel
rootVisible : Boolean
false to hide the root node (defaults to true)
TreePanel
selModel : Object
A tree selection model to use with this TreePanel (defaults to an Ext.tree.DefaultSelectionModel)
TreePanel
shadow : Boolean/String
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (...
true (or a valid Ext.Shadow 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 floating = true.
Panel
shadowOffset : Number
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when float...
The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies wh...
false to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
singleExpand : Boolean
true if only 1 node per branch may be expanded
TreePanel
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Pan...
A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
tbar : Object/Array
The top toolbar of the panel. This can be a Ext.Toolbar object, a toolbar config, or an array of buttons/button confi...

The top toolbar of the panel. This can be a 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 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.

Panel
tbarCfg : Object
A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg ...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

Panel
title : String
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When...
The title text to be used as innerHTML (html tags are accepted) to display in the panel header (defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
titleCollapse : Boolean
true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, fa...
true to allow expanding and collapsing the panel (when 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 BorderLayout.Region floatable config option.
Panel
toolTemplate : Ext.Template/Ext.XTemplate
A Template used to create tools in the header Element. Defaults to:new Ext.Template('&lt;div class="x-tool x-tool-{id...

A Template used to create tools in the 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 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;}
Panel
tools : Array
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element...
An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an 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 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 : Ext.Panel
      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 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 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;}
Panel
trackMouseOver : Boolean
false to disable mouse over highlighting
TreePanel
unstyled : Boolean
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes ...
Overrides the baseCls setting to baseCls = 'x-plain' which renders the panel unstyled except for required attributes for Ext layouts to function (e.g. overflow:hidden).
Panel
useArrows : Boolean
true to use Vista-style arrows in the tree (defaults to false)
TreePanel
width : Number
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset se...
The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see Ext.Component.anchor.
BoxComponent
x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component
y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
body : Ext.Element
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, ...
The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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 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 el also.

Panel
buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
dd : Ext.dd.DragSource.
If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles drag...

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.
Panel
disabled : Boolean
True if this component is disabled. Read-only.
Component
dragZone : Ext.tree.TreeDragZone
The dragZone used by this tree if drag is enabled (see enableDD or enableDrag)
TreePanel
dropZone : Ext.tree.TreeDropZone
The dropZone used by this tree if drop is enabled (see enableDD or enableDrop)
TreePanel
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
footer : Ext.Element
The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note ...
The Panel's footer Element. Read-only.

This Element is used to house the Panel's buttons or fbar.

Note: see the Note for el also.

Panel
header : Ext.Element
The Panel's header Element. Read-only. This Element is used to house the title and tools Note: see the Note for el al...
The Panel's header Element. Read-only.

This Element is used to house the title and tools

Note: see the Note for el also.

Panel
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component
root : Ext.tree.TreeNode
The root node of this tree.
TreePanel

Public Methods

Method Defined By
add( Object/Array component, Object (Optional), Object (Optional) ) : Ext.Component
Adds Component(s) to this Container. Description : <ul class="mdetail-params"> Fires the beforeadd event before addin...

Adds Component(s) to this Container.

Description :

  • Fires the beforeadd event before adding
  • The Container's default config values will be applied accordingly (see defaults for details).
  • Fires the add event after the component has been added.

Notes :

  • If the Container is already rendered when add is called, you may need to call 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 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
  • Warning: Containers directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for BorderLayout for more details.
Parameters:
  • component : Object/Array

    Either a single component or an Array of components to add. See items for additional information.

  • (Optional) : Object
    component_2
  • (Optional) : Object
    component_n
Returns:
  • Ext.Component
    component The Component (or config object) that was added.
Container
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
Adds a button to this panel. Note that this method must be called prior to rendering. The preferred approach is to ...
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 buttons config.
Parameters:
  • config : String/Object
    A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    The function to be called on button Ext.Button.click
  • scope : Object
    The scope to use for the button handler function
Returns:
  • Ext.Button
    The button that was added
Panel
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
bubble( Function fn, [Object scope], [Array args] ) : Ext.Container
Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current node)
  • args : Array
    (optional) The args to call the function with (default to passing the current component)
Returns:
  • Ext.Container
    this
Container
cascade( Function fn, [Object scope], [Array args] ) : Ext.Container
Cascades down the component/container heirarchy from this component (called first), calling the specified function wi...
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.
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional) The scope of the function (defaults to current component)
  • args : Array
    (optional) The args to call the function with (defaults to passing the current component)
Returns:
  • Ext.Container
    this
Container
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
collapse( Boolean animate ) : Ext.Panel
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse ac...
Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
collapseAll() : void
Collapse all nodes
Collapse all nodes
Parameters:
  • None.
Returns:
  • void
TreePanel
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
doLayout( [Boolean shallow], [Boolean force] ) : Ext.Container
Force this container's layout to be recalculated. A call to this function is required after adding a new component to...
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.
Parameters:
  • shallow : Boolean
    (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)
  • force : Boolean
    (optional) True to force a layout to occur, even if the item is hidden.
Returns:
  • Ext.Container
    this
Container
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
expand( Boolean animate ) : Ext.Panel
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action ...
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
expandAll() : void
Expand all nodes
Expand all nodes
Parameters:
  • None.
Returns:
  • void
TreePanel
expandPath( String path, [String attr], [Function callback] ) : void
Expands a specified path in this TreePanel. A path can be retrieved from a node with Ext.data.Node.getPath
Expands a specified path in this TreePanel. A path can be retrieved from a node with Ext.data.Node.getPath
Parameters:
  • path : String
  • attr : String
    (optional) The attribute used in the path (see Ext.data.Node.getPath for more info)
  • callback : Function
    (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.
Returns:
  • void
TreePanel
find( String prop, String value ) : Array
Find a component under this container at any level by property
Find a component under this container at any level by property
Parameters:
  • prop : String
  • value : String
Returns:
  • Array
    Array of Ext.Components
Container
findBy( Function fn, [Object scope] ) : Array
Find a component under this container at any level by a custom function. If the passed function returns true, the com...
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).
Parameters:
  • fn : Function
    The function to call
  • scope : Object
    (optional)
Returns:
  • Array
    Array of Ext.Components
Container
findById( String id ) : Ext.Component
Find a component under this container at any level by id
Find a component under this container at any level by id
Parameters:
  • id : String
Returns:
  • Ext.Component
Container
findByType( String/Class xtype, [Boolean shallow] ) : Array
Find a component under this container at any level by xtype or class
Find a component under this container at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    (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.
Returns:
  • Array
    Array of Ext.Components
Container
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
get( String/Number key ) : Ext.Component
Get a component contained by this container (alias for items.get(key))
Get a component contained by this container (alias for items.get(key))
Parameters:
  • key : String/Number
    The index or id of the component
Returns:
  • Ext.Component
    Ext.Component
Container
getBottomToolbar() : Ext.Toolbar
Returns the toolbar from the bottom (bbar) section of the panel.
Returns the toolbar from the bottom (bbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getBox( [Boolean local] ) : Object
Gets the current box measurements of the component's underlying element.
Gets the current box measurements of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Object
    box An object in the format {x, y, width, height}
BoxComponent
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getChecked( [String attribute], [TreeNode startNode] ) : Array
Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
Retrieve an array of checked nodes, or an array of a specific attribute of checked nodes (e.g. "id")
Parameters:
  • attribute : String
    (optional) Defaults to null (return the actual nodes)
  • startNode : TreeNode
    (optional) The node to start from, defaults to the root
Returns:
  • Array
TreePanel
getComponent( String/Number comp ) : Ext.Component
Examines this container's items property and gets a direct child component of this container.
Examines this container's items property and gets a direct child component of this container.
Parameters:
  • comp : String/Number
    This parameter may be any of the following:
    • a String : representing the itemId or id of the child component
    • a Number : representing the position of the child component within the items property

    For additional information see Ext.util.MixedCollection.get.

Returns:
  • Ext.Component
    The component (if found).
Container
getEl() : Element
Returns the container element for this TreePanel.
Returns the container element for this TreePanel.
Parameters:
  • None.
Returns:
  • Element
    The container element for this TreePanel.
TreePanel
getFrameHeight() : Number
Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and header and ...
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 getInnerHeight.
Parameters:
  • None.
Returns:
  • Number
    The frame height
Panel
getFrameWidth() : Number
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the bo...
Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
Parameters:
  • None.
Returns:
  • Number
    The frame width
Panel
getHeight() : Number
Gets the current height of the component's underlying element.
Gets the current height of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getInnerHeight() : Number
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame he...
Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
Parameters:
  • None.
Returns:
  • Number
    The body height
Panel
getInnerWidth() : Number
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame widt...
Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
Parameters:
  • None.
Returns:
  • Number
    The body width
Panel
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getLayout() : ContainerLayout
Returns the layout currently in use by the container. If the container does not currently have a layout set, a defau...
Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
Parameters:
  • None.
Returns:
  • ContainerLayout
    layout The container's layout
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to contain the child Components of this Container. An implementation is provided which...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

Parameters:
  • None.
Returns:
  • Ext.Element
    The Element to render child Components into.
Container
getLoader() : Ext.tree.TreeLoader
Returns the default Ext.tree.TreeLoader for this TreePanel.
Returns the default Ext.tree.TreeLoader for this TreePanel.
Parameters:
  • None.
Returns:
  • Ext.tree.TreeLoader
    The TreeLoader for this TreePanel.
TreePanel
getNodeById( String id ) : Node
Gets a node in this tree by its id
Gets a node in this tree by its id
Parameters:
  • id : String
Returns:
  • Node
TreePanel
getOuterSize() : Object
Gets the current size of the component's underlying element, including space taken by its margins.
Gets the current size of the component's underlying element, including space taken by its margins.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( [Boolean local] ) : Array
Gets the current XY position of the component's underlying element.
Gets the current XY position of the component's underlying element.
Parameters:
  • local : Boolean
    (optional) If true the element's left and top are returned instead of page XY (defaults to false)
Returns:
  • Array
    The XY position of the element (e.g., [100, 200])
BoxComponent
getResizeEl() : void
Returns the outermost Element of this Component which defines the Components overall size. Usually this will return t...

Returns the outermost Element of this Component which defines the Components overall size.

Usually this will return the same Element as 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 getEl method, and the trigger button Element. This Element is returned as the resizeEl.

Parameters:
  • None.
Returns:
  • void
BoxComponent
getRootNode() : Node
Returns this root node for this tree
Returns this root node for this tree
Parameters:
  • None.
Returns:
  • Node
TreePanel
getSelectionModel() : TreeSelectionModel
Returns the selection model used by this TreePanel.
Returns the selection model used by this TreePanel.
Parameters:
  • None.
Returns:
  • TreeSelectionModel
    The selection model used by this TreePanel
TreePanel
getSize() : Object
Gets the current size of the component's underlying element.
Gets the current size of the component's underlying element.
Parameters:
  • None.
Returns:
  • Object
    An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getTool( String id ) : Object
Retrieve a tool by id.
Retrieve a tool by id.
Parameters:
  • id : String
Returns:
  • Object
    tool
Panel
getTopToolbar() : Ext.Toolbar
Returns the toolbar from the top (tbar) section of the panel.
Returns the toolbar from the top (tbar) section of the panel.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
    The toolbar
Panel
getTreeEl() : Ext.Element
Returns the underlying Element for this tree
Returns the underlying Element for this tree
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element
TreePanel
getUpdater() : Ext.Updater
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Parameters:
  • None.
Returns:
  • Ext.Updater
    The Updater
Panel
getWidth() : Number
Gets the current width of the component's underlying element.
Gets the current width of the component's underlying element.
Parameters:
  • None.
Returns:
  • Number
BoxComponent
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
insert( Number index, Ext.Component component ) : Ext.Component
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires ...
Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
Parameters:
  • index : Number
    The index at which the Component will be inserted into the Container's items collection
  • component : Ext.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 Ext.Component.xtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
Returns:
  • Ext.Component
    component The Component (or config object) that was inserted with the Container's default config values applied.
Container
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
load( Object/String/Function config ) : Ext.Panel
Loads this content panel immediately with content returned from an XHR call.
Loads this content panel immediately with content returned from an XHR call.
Parameters:
  • config : Object/String/Function
    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.
Returns:
  • Ext.Panel
    this
Panel
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
remove( Component/String component, [Boolean autoDestroy] ) : Ext.Component
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event a...
Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
Parameters:
  • component : Component/String
    The component reference or id to remove.
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Ext.Component
    component The Component that was removed.
Container
removeAll( [Boolean autoDestroy] ) : Array
Removes all components from this container.
Removes all components from this container.
Parameters:
  • autoDestroy : Boolean
    (optional) True to automatically invoke the removed Component's Ext.Component.destroy function. Defaults to the value of this Container's autoDestroy config.
Returns:
  • Array
    Array of the destroyed components
Container
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
selectPath( String path, [String attr], [Function callback] ) : void
Selects the node in this tree at the specified path. A path can be retrieved from a node with Ext.data.Node.getPath
Selects the node in this tree at the specified path. A path can be retrieved from a node with Ext.data.Node.getPath
Parameters:
  • path : String
  • attr : String
    (optional) The attribute used in the path (see Ext.data.Node.getPath for more info)
  • callback : Function
    (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.
Returns:
  • void
TreePanel
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setHeight( Number height ) : Ext.BoxComponent
Sets the height of the component. This method fires the resize event.
Sets the height of the component. This method fires the resize event.
Parameters:
  • height : Number
    The new height to set. This may be one of:
    • A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setIconClass( String cls ) : void
Sets the CSS class that provides the icon image for this panel. This method will replace any existing icon class if ...
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 iconchange event after completion.
Parameters:
  • cls : String
    The new CSS class name
Returns:
  • void
Panel
setPagePosition( Number x, Number y ) : Ext.BoxComponent
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the ...
Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
Parameters:
  • x : Number
    The new x position
  • y : Number
    The new y position
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires ...
Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
Parameters:
  • left : Number
    The new left
  • top : Number
    The new top
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setRootNode( Node node ) : Node
Sets the root node for this tree. If the TreePanel has already rendered a root node, the previous root node (and all...
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.
Parameters:
  • node : Node
Returns:
  • Node
TreePanel
setSize( Mixed width, Mixed height ) : Ext.BoxComponent
Sets the width and height of this BoxComponent. This method fires the resize event. This method can accept either wid...
Sets the width and height of this BoxComponent. This method fires the 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}.
Parameters:
  • width : Mixed
    The new width to set. This may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (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.
  • height : Mixed
    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 Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS height style. Animation may not be used.
    • undefined to leave the height unchanged.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
setTitle( String title, [String iconCls] ) : void
Sets the title text for the panel and optionally the icon class. In order to be able to set the title, a header eleme...

Sets the title text for the panel and optionally the 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 title, or configuring it with header: true.

Parameters:
  • title : String
    The title text to set
  • iconCls : String
    (optional) iconCls A user-defined CSS class that provides the icon image for this panel
Returns:
  • void
Panel
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
setWidth( Number width ) : Ext.BoxComponent
Sets the width of the component. This method fires the resize event.
Sets the width of the component. This method fires the resize event.
Parameters:
  • width : Number
    The new width to setThis may be one of:
    • A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
    • A String used to set the CSS width style.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
syncSize() : Ext.BoxComponent
Force the component's size to recalculate based on the underlying element's current height and width.
Force the component's size to recalculate based on the underlying element's current height and width.
Parameters:
  • None.
Returns:
  • Ext.BoxComponent
    this
BoxComponent
toggleCollapse( Boolean animate ) : Ext.Panel
Shortcut for performing an expand or collapse based on the current state of the panel.
Shortcut for performing an expand or collapse based on the current state of the panel.
Parameters:
  • animate : Boolean
    True to animate the transition, else false (defaults to the value of the animCollapse panel config)
Returns:
  • Ext.Panel
    this
Panel
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
updateBox( Object box ) : Ext.BoxComponent
Sets the current box measurements of the component's underlying element.
Sets the current box measurements of the component's underlying element.
Parameters:
  • box : Object
    An object in the format {x, y, width, height}
Returns:
  • Ext.BoxComponent
    this
BoxComponent

Public Events

Event Defined By
activate : ( Ext.Panel p )
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some...
Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been activated.
Panel
add : ( Ext.Container this, Ext.Component component, Number index )
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component that was added
  • index : Number
    The index at which the component was added to the container's items collection
Container
afterlayout : ( Ext.Container this, ContainerLayout layout )
Fires when the components in this container are arranged by the associated layout manager.
Fires when the components in this container are arranged by the associated layout manager.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • layout : ContainerLayout
    The ContainerLayout implementation for this container
Container
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
append : ( Tree tree, Node parent, Node node, Number index )
Fires when a new child node is appended to a node in this tree.
Fires when a new child node is appended to a node in this tree.
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The newly appended node
  • index : Number
    The index of the newly appended node
TreePanel
beforeadd : ( Ext.Container this, Ext.Component component, Number index )
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
Listeners will be called with the following arguments:
  • this : Ext.Container
  • component : Ext.Component
    The component being added
  • index : Number
    The index at which the component will be added to the container's items collection
Container
beforeappend : ( Tree tree, Node parent, Node node )
Fires before a new child is appended to a node in this tree, return false to cancel the append.
Fires before a new child is appended to a node in this tree, return false to cancel the append.
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node to be appended
TreePanel
beforechildrenrendered : ( Node node )
Fires right before the child nodes for a node are rendered
Fires right before the child nodes for a node are rendered
Listeners will be called with the following arguments:
  • node : Node
    The node
TreePanel
beforeclick : ( Node node, Ext.EventObject e )
Fires before click processing on a node. Return false to cancel the default action.
Fires before click processing on a node. Return false to cancel the default action.
Listeners will be called with the following arguments:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
TreePanel
beforeclose : ( Ext.Panel p )
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses d...
Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like 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.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being closed.
Panel
beforecollapse : ( Ext.Panel p, Boolean animate )
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel being collapsed.
  • animate : Boolean
    True if the collapse is animated, else false.
Panel
beforecollapsenode : ( Node node, Boolean deep, Boolean anim )
Fires before a node is collapsed, return false to cancel.
Fires before a node is collapsed, return false to cancel.
Listeners will be called with the following arguments:
  • node : Node
    The node
  • deep : Boolean
  • anim : Boolean
TreePanel
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeexpand : ( Ext.Panel p, Boolean animate )
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Fires before the Panel is expanded. A handler can return false to cancel the expand.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel being expanded.
  • animate : Boolean
    True if the expand is animated, else false.
Panel
beforeexpandnode : ( Node node, Boolean deep, Boolean anim )
Fires before a node is expanded, return false to cancel.
Fires before a node is expanded, return false to cancel.
Listeners will be called with the following arguments:
  • node : Node
    The node
  • deep : Boolean
  • anim : Boolean
TreePanel
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeinsert : ( Tree tree, Node parent, Node node, Node refNode )
Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
Fires before a new child is inserted in a node in this tree, return false to cancel the insert.
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node to be inserted
  • refNode : Node
    The child node the node is being inserted before
TreePanel
beforeload : ( Node node )
Fires before a node is loaded, return false to cancel
Fires before a node is loaded, return false to cancel
Listeners will be called with the following arguments:
  • node : Node
    The node being loaded
TreePanel
beforemovenode : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )
Fires before a node is moved to a new location in the tree. Return false to cancel the move.
Fires before a node is moved to a new location in the tree. Return false to cancel the move.
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • node : Node
    The node being moved
  • oldParent : Node
    The parent of the node
  • newParent : Node
    The new parent the node is moving to
  • index : Number
    The index it is being moved to
TreePanel
beforenodedrop : ( Object dropEvent )
Fires when a DD object is dropped on a node in this tree for preprocessing. Return false to cancel the drop. The drop...
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.
Listeners will be called with the following arguments:
  • dropEvent : Object
TreePanel
beforeremove : ( Tree tree, Node parent, Node node )
Fires before a child is removed from a node in this tree, return false to cancel the remove.
Fires before a child is removed from a node in this tree, return false to cancel the remove.
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node to be removed
TreePanel
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
bodyresize : ( Ext.Panel p, Number width, Number height )
Fires after the Panel has been resized.
Fires after the Panel has been resized.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has been resized.
  • width : Number
    The Panel's new width.
  • height : Number
    The Panel's new height.
Panel
checkchange : ( Node this, Boolean checked )
Fires when a node with a checkbox's checked property changes
Fires when a node with a checkbox's checked property changes
Listeners will be called with the following arguments:
  • this : Node
    This node
  • checked : Boolean
TreePanel
click : ( Node node, Ext.EventObject e )
Fires when a node is clicked
Fires when a node is clicked
Listeners will be called with the following arguments:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
TreePanel
close : ( Ext.Panel p )
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do...
Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel within a Ext.TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been closed.
Panel
collapse : ( Ext.Panel p )
Fires after the Panel has been collapsed.
Fires after the Panel has been collapsed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel that has been collapsed.
Panel
collapsenode : ( Node node )
Fires when a node is collapsed
Fires when a node is collapsed
Listeners will be called with the following arguments:
  • node : Node
    The node
TreePanel
contextmenu : ( Node node, Ext.EventObject e )
Fires when a node is right clicked. To display a context menu in response to this event, first create a Menu object ...
Fires when a node is right clicked. To display a context menu in response to this event, first create a Menu object (see 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 parentMenu property.

            node.select();
            var c = node.getOwnerTree().contextMenu;
            c.contextNode = node;
            c.showAt(e.getXY());
        }
    }
});
Listeners will be called with the following arguments:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
TreePanel
dblclick : ( Node node, Ext.EventObject e )
Fires when a node is double clicked
Fires when a node is double clicked
Listeners will be called with the following arguments:
  • node : Node
    The node
  • e : Ext.EventObject
    The event object
TreePanel
deactivate : ( Ext.Panel p )
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but ...
Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been deactivated.
Panel
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disabledchange : ( Node node, Boolean disabled )
Fires when the disabled status of a node changes
Fires when the disabled status of a node changes
Listeners will be called with the following arguments:
  • node : Node
    The node
  • disabled : Boolean
TreePanel
dragdrop : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, DD dd, event e )
Fires when a dragged node is dropped on a valid DD target
Fires when a dragged node is dropped on a valid DD target
Listeners will be called with the following arguments:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • dd : DD
    The dd it was dropped on
  • e : event
    The raw browser event
TreePanel
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enddrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )
Fires when a drag operation is complete
Fires when a drag operation is complete
Listeners will be called with the following arguments:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • e : event
    The raw browser event
TreePanel
expand : ( Ext.Panel p )
Fires after the Panel has been expanded.
Fires after the Panel has been expanded.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    The Panel that has been expanded.
Panel
expandnode : ( Node node )
Fires when a node is expanded
Fires when a node is expanded
Listeners will be called with the following arguments:
  • node : Node
    The node
TreePanel
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
iconchange : ( Ext.Panel p, String The, String The )
Fires after the Panel icon class has been set or changed.
Fires after the Panel icon class has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its icon class changed.
  • The : String
    new icon class.
  • The : String
    old icon class.
Panel
insert : ( Tree tree, Node parent, Node node, Node refNode )
Fires when a new child node is inserted in a node in this tree.
Fires when a new child node is inserted in a node in this tree.
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node inserted
  • refNode : Node
    The child node the node was inserted before
TreePanel
load : ( Node node )
Fires when a node is loaded
Fires when a node is loaded
Listeners will be called with the following arguments:
  • node : Node
    The node that was loaded
TreePanel
move : ( Ext.Component this, Number x, Number y )
Fires after the component is moved.
Fires after the component is moved.
Listeners will be called with the following arguments:
  • 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 )
Fires when a node is moved to a new location in the tree
Fires when a node is moved to a new location in the tree
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • node : Node
    The node moved
  • oldParent : Node
    The old parent of this node
  • newParent : Node
    The new parent of this node
  • index : Number
    The index it was moved to
TreePanel
nodedragover : ( Object dragOverEvent )
Fires when a tree node is being targeted for a drag drop, return false to signal drop not allowed. The dragOverEvent ...
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.
Listeners will be called with the following arguments:
  • dragOverEvent : Object
TreePanel
nodedrop : ( Object dropEvent )
Fires after a DD object is dropped on a node in this tree. The dropEvent passed to handlers has the following proper...
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).
Listeners will be called with the following arguments:
  • dropEvent : Object
TreePanel
remove : ( Tree tree, Node parent, Node node )
Fires when a child node is removed from a node in this tree.
Fires when a child node is removed from a node in this tree.
Listeners will be called with the following arguments:
  • tree : Tree
    The owner tree
  • parent : Node
    The parent node
  • node : Node
    The child node removed
TreePanel
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
Fires after the component is resized.
Fires after the component is resized.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • adjWidth : Number
    The box-adjusted width that was set
  • adjHeight : Number
    The box-adjusted height that was set
  • rawWidth : Number
    The width that was originally specified
  • rawHeight : Number
    The height that was originally specified
BoxComponent
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
startdrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )
Fires when a node starts being dragged
Fires when a node starts being dragged
Listeners will be called with the following arguments:
  • this : Ext.tree.TreePanel
  • node : Ext.tree.TreeNode
  • e : event
    The raw browser event
TreePanel
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
textchange : ( Node node, String text, String oldText )
Fires when the text for a node is changed
Fires when the text for a node is changed
Listeners will be called with the following arguments:
  • node : Node
    The node
  • text : String
    The new text
  • oldText : String
    The old text
TreePanel
titlechange : ( Ext.Panel p, String The )
Fires after the Panel title has been set or changed.
Fires after the Panel title has been set or changed.
Listeners will be called with the following arguments:
  • p : Ext.Panel
    the Panel which has had its title changed.
  • The : String
    new title.
Panel


Observable
    TreeLoader
      XmlTreeLoader

Class Ext.ux.tree.XmlTreeLoader

Package: | Ext.ux.tree
Defined In: | XmlTreeLoader.js
Class: | XmlTreeLoader
Extends: | TreeLoader

A TreeLoader that can convert an XML document into a hierarchy of Ext.tree.TreeNodes. Any text value included as a text node in the XML will be added to the parent node as an attribute called innerText. Also, the tag name of each XML node will be added to the tree node as an attribute called tagName.

By default, this class expects that your source XML will provide the necessary attributes on each node as expected by the Ext.tree.TreePanel to display and load properly. However, you can provide your own custom processing of node attributes by overriding the processNode method and modifying the attributes as needed before they are used to create the associated TreeNode.

Config Options

Config Options Defined By
baseAttrs : Object
An object containing attributes to be added to all nodes created by this loader. If the attributes sent by the serve...
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.
TreeLoader
baseParams : Object
An object containing properties which specify HTTP parameters to be passed to each request for child nodes.
TreeLoader
clearOnLoad : Boolean
Default to true. Remove previously existing child nodes before loading.
TreeLoader
dataUrl : String
The URL from which to request a Json string which specifies an array of node definition objects representing the chi...
The URL from which to request a Json string which specifies an array of node definition objects representing the child nodes to be loaded.
TreeLoader
directFn : Function
Function to call when executing a request.
TreeLoader
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
paramOrder : Array/String
Defaults to undefined. Only used when using directFn. A list of params to be executed server side. Specify the par...
Defaults to undefined. Only used when using directFn. 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'
TreeLoader
paramsAsHash : Boolean
Only used when using directFn. Send parameters as a collection of named arguments (defaults to false). Providing a ...
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
If set to true, the loader recursively loads "children" attributes when doing the first load on nodes.
TreeLoader
requestMethod : String
The HTTP request method for loading data (defaults to the value of Ext.Ajax.method).
TreeLoader
uiProviders : Object
An object containing properties which specify custom Ext.tree.TreeNodeUI implementations. If the optional uiProvide...
An object containing properties which specify custom 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.
TreeLoader
url : String
Equivalent to dataUrl.
TreeLoader

Public Properties

Property |  | Defined By
 | XML_NODE_ELEMENT : Number XML element node (value 1, read-only) | XmlTreeLoader
 | XML_NODE_TEXT : Number XML text node (value 3, read-only) | XmlTreeLoader

Public Methods

Method Defined By
XmlTreeLoader( Object config )
Creates a new XmlTreeloader.
Creates a new XmlTreeloader.
Parameters:
  • config : Object
    A config object containing config properties.
Returns:
  • void
XmlTreeLoader
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
createNode( attr {Object} ) : void
Override this function for custom TreeNode node implementation, or to modify the attributes at creation time. Examp...

Override this function for custom TreeNode node implementation, or to modify the attributes at creation time.

Example:
new Ext.tree.TreePanel({
    ...
    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.call(this, attr);
        }
    }),
    ...
});
Parameters:
  • {Object} : attr
    The attributes from which to create the new node.
Returns:
  • void
TreeLoader
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
load( Ext.tree.TreeNode node, Function callback, (Object) scope ) : void
Load an Ext.tree.TreeNode from the URL specified in the constructor. This is called automatically when a node is exp...
Load an 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 clearOnLoad option is false.)
Parameters:
  • node : Ext.tree.TreeNode
  • callback : Function
  • scope : (Object)
Returns:
  • void
TreeLoader
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

Event Defined By
beforeload : ( Object This, Object node, Object callback )
Fires before a network request is made to retrieve the Json text which specifies a node's children.
Fires before a network request is made to retrieve the Json text which specifies a node's children.
Listeners will be called with the following arguments:
  • This : Object
    TreeLoader object.
  • node : Object
    The Ext.tree.TreeNode object being loaded.
  • callback : Object
    The callback function specified in the load call.
TreeLoader
load : ( Object This, Object node, Object response )
Fires when the node has been successfuly loaded.
Fires when the node has been successfuly loaded.
Listeners will be called with the following arguments:
  • This : Object
    TreeLoader object.
  • node : Object
    The Ext.tree.TreeNode object being loaded.
  • response : Object
    The response object containing the data from the server.
TreeLoader
loadexception : ( Object This, Object node, Object response )
Fires if the network request failed.
Fires if the network request failed.
Listeners will be called with the following arguments:
  • This : Object
    TreeLoader object.
  • node : Object
    The Ext.tree.TreeNode object being loaded.
  • response : Object
    The response object containing the data from the server.
TreeLoader


Observable
    Component
      ValidationStatus

Class Ext.ux.ValidationStatus

Package: | Ext.ux
Defined In: | ValidationStatus.js
Class: | ValidationStatus
Extends: | Component
A Ext.StatusBar plugin that provides automatic error notification when the associated form contains validation errors.

Config Options

Config Options Defined By
allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
anchor : String
Note: this config is only used when this Component is rendered by a Container which has been configured to use an Anc...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

Component
applyTo : Mixed
Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in...

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 renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
autoEl : Mixed
A tag name or DomHelper spec used to create the Element which will encapsulate this Component. You do not normally ne...

A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and 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'
    }
}
Component
autoShow : Boolean
True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render...
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).
Component
clearCls : String
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') and either a fieldLabel is specified or isFormField=true is specified.

See Ext.layout.FormLayout.fieldTpl also.

Component
cls : String
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for ...
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.
Component
ctCls : String
An optional extra CSS class that will be added to this component's container. This can be useful for adding customize...

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 Ext.layout.ContainerLayout.extraCls also.

Note: ctCls defaults to '' except for the following class which assigns a value by default:

  • 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'

Component
disabled : Boolean
Render this component disabled (default is false).
Component
disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
fieldLabel : String
The label text to display next to this Component (defaults to ''). Note: this config is only used when this Component...

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 FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form').

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});
Component
hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not sp...

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a 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 clearCls.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});
Component
hideMode : String
How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

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).

Component
hideParent : Boolean
True to hide and show the component's container when hide/show is called on the component, false to hide and show the...
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.
Component
id : String
The unique id of this component (defaults to an auto-assigned id). You should assign an id if you need to be able to ...

The unique id of this component (defaults to an 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 Ext.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 itemId and ref.

Note: to access the container of an item see ownerCt.

Component
itemCls : String
An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at th...

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 Ext.layout.FormLayout.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 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'
    }]
});
Component
itemId : String
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. ...

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 id with Ext.getCmp, use itemId with Ext.Container.getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique 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'); // not the same as Ext.getCmp()
p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

Also see id and ref.

Note: to access the container of an item see ownerCt.

Component
labelSeparator : String
The separator to display after the text of each fieldLabel. This property may be configured at various levels. The o...

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

  • field / component level
  • container level
  • layout level (defaults to colon ':')
To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
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
A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle val...

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

Also see hideLabel and Ext.layout.FormLayout.fieldTpl.

Example use:
new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});
Component
listeners : Object
A config object containing one or more event handlers to be added to this object during initialization. This should ...

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 addListener example for attaching multiple handlers at once.

DOM events from ExtJs 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 DataView's click event passing the node clicked on. To access DOM events directly from a Component's HTMLElement, listeners must be added to the 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.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'
});

Observable
overCls : String
An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and...
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.
Component
plugins : Object/Array
An object or array of objects that will provide custom functionality for this component. The only requirement for a ...
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.
Component
ptype : String
The registered ptype to create. This config option is not used when passing a config object into a constructor. This ...
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 Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
ref : String
A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named r...

A path specification, relative to the Component's 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 ownerCt.

Component
renderTo : Mixed
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into. Notes ...

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 Container. It is the responsibility of the Container's layout manager to render and manage its child items.
      When using this config, a call to render() is not required.

See render also.

Component
stateEvents : Array
An array of events that, when fired, should trigger this component to save its state (defaults to none). 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 stateful for an explanation of saving and restoring Component state.

Component
stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, o...
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 stateful for an explanation of saving and restoring Component state.

Component
stateful : Boolean
A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startu...

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 stateId or 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 Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, 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 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 Ext.state.Manager.set which uses the configured Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling Ext.state.Manager.get passing the stateId, or, if that is not specified, the 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 beforestaterestore, staterestore, beforestatesave and statesave events.

Component
style : String
A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.Element.ap...
A custom style specification to be applied to this component's Element. Should be a valid argument to 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
xtype : String
The registered xtype to create. This config option is not used when passing a config object into a constructor. This ...
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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.
Component

Public Properties

Property Defined By
disabled : Boolean
True if this component is disabled. Read-only.
Component
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only. This will usually be a &lt;DIV> element created by the ...

The 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 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 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 getEl

Component
hidden : Boolean
True if this component is hidden. Read-only.
Component
initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
ownerCt : Ext.Container
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a...
The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only.

Note: to access items within the container see itemId.

Component
rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By
ValidationStatus( Object config )
Creates a new ValiationStatus plugin
Creates a new ValiationStatus plugin
Parameters:
  • config : Object
    A config object
Returns:
  • void
ValidationStatus
addClass( string cls ) : Ext.Component
Adds a CSS class to the component's underlying element.
Adds a CSS class to the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to add
Returns:
  • Ext.Component
    this
Component
addEvents( Object object ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
Observable
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object.
Appends an event handler to this object.
Parameters:
  • eventName : String
    The name of the event to listen for.
  • handler : Function
    The method the event invokes.
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (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 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
});
Returns:
  • void
Observable
applyToMarkup( String/HTMLElement el ) : void
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Apply this component to existing markup that is valid. With this function, no call to render() is required.
Parameters:
  • el : String/HTMLElement
Returns:
  • void
Component
cloneConfig( Object overrides ) : Ext.Component
Clone the current component using the original config values passed into this instance by default.
Clone the current component using the original config values passed into this instance by default.
Parameters:
  • overrides : Object
    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.
Returns:
  • Ext.Component
    clone The cloned copy of this component
Component
destroy() : void
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the c...
Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
Parameters:
  • None.
Returns:
  • void
Component
disable() : Ext.Component
Disable this component and fire the 'disable' event.
Disable this component and fire the 'disable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enable() : Ext.Component
Enable this component and fire the 'enable' event.
Enable this component and fire the 'enable' event.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
enableBubble( Object events ) : void
Used to enable bubbling of events
Used to enable bubbling of events
Parameters:
  • events : Object
Returns:
  • void
Observable
findParentBy( Function fn ) : Ext.Container
Find a container above this component at any level by a custom function. If the passed function returns true, the con...
Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned.
Parameters:
  • fn : Function
    The custom function to call with the arguments (container, this component).
Returns:
  • Ext.Container
    The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
Find a container above this component at any level by xtype or class
Find a container above this component at any level by xtype or class
Parameters:
  • xtype : String/Class
    The xtype string for a component, or the class of the component directly
Returns:
  • Ext.Container
    The first Container which matches the given xtype or class
Component
fireEvent( String eventName, Object... args ) : Boolean
Fires the specified event with the passed parameters (minus the event name). An event may be set to bubble up an Obse...

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 Ext.Component.getBubbleTarget) by calling enableBubble.

Parameters:
  • eventName : String
    The name of the event to fire.
  • args : Object...
    Variable number of parameters are passed to handlers.
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true.
Observable
focus( [Boolean selectText], [Boolean/Number delay] ) : Ext.Component
Try to focus this component.
Try to focus this component.
Parameters:
  • selectText : Boolean
    (optional) If applicable, true to also select the text in this component
  • delay : Boolean/Number
    (optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
Returns:
  • Ext.Component
    this
Component
getBubbleTarget() : Ext.Container
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
Parameters:
  • None.
Returns:
  • Ext.Container
    the Container which owns this Component.
Component
getEl() : Ext.Element
Returns the Ext.Element which encapsulates this Component. This will usually be a &lt;DIV> element created by the cla...

Returns the 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 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 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
    }
});
Parameters:
  • None.
Returns:
  • Ext.Element
    The Element which encapsulates this Component.
Component
getId() : String
Returns the id of this component or automatically generates and returns an id if an id is not defined yet:'ext-comp-'...
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)
Parameters:
  • None.
Returns:
  • String
    id
Component
getItemId() : String
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using g...
Returns the itemId of this component. If an itemId was not assigned through configuration the id is returned using getId.
Parameters:
  • None.
Returns:
  • String
Component
getXType() : String
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ex...
Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:
var t = new Ext.form.TextField();
alert(t.getXType());  // alerts 'textfield'
Parameters:
  • None.
Returns:
  • String
    The xtype
Component
getXTypes() : String
Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext...

Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the 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'
Parameters:
  • None.
Returns:
  • String
    The xtype hierarchy string
Component
hasListener( String eventName ) : Boolean
Checks to see if this object has any listeners for a specified event
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
Observable
hide() : Ext.Component
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'h...
Hide this component. Listen to the 'beforehide' event and return false to cancel hiding the component. Fires the 'hide' event after hiding the component. Note this method is called internally if the component is configured to be hidden.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
isVisible() : Boolean
Returns true if this component is visible.
Returns true if this component is visible.
Parameters:
  • None.
Returns:
  • Boolean
    True if this component is visible, false otherwise.
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...

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 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
Parameters:
  • xtype : String
    The xtype to check for this Component
  • shallow : Boolean
    (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.
Returns:
  • Boolean
    True if this component descends from the specified xtype, false otherwise.
Component
nextSibling() : Ext.Component
Returns the next component in the owning container
Returns the next component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
on( String eventName, Function handler, [Object scope], [Object options] ) : void
Appends an event handler to this object (shorthand for addListener.)
Appends an event handler to this object (shorthand for addListener.)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.
  • options : Object
    (optional) An object containing handler configuration.
Returns:
  • void
Observable
previousSibling() : Ext.Component
Returns the previous component in the owning container
Returns the previous component in the owning container
Parameters:
  • None.
Returns:
  • Ext.Component
Component
purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
Observable
relayEvents( Object o, Array events ) : void
Relays selected events from the specified Observable as if the events were fired by this.
Relays selected events from the specified Observable as if the events were fired by this.
Parameters:
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
Returns:
  • void
Observable
removeClass( string cls ) : Ext.Component
Removes a CSS class from the component's underlying element.
Removes a CSS class from the component's underlying element.
Parameters:
  • cls : string
    The CSS class name to remove
Returns:
  • Ext.Component
    this
Component
removeListener( String eventName, Function handler, [Object scope] ) : void
Removes an event handler.
Removes an event handler.
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable
render( [Element/HTMLElement/String container], [String/Number position] ) : void
Render this Component into the passed HTML element. If you are using a Container object to house this Component, then...

Render this Component into the passed HTML element.

If you are using a Container object to house this Component, then do not use the render method.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when a new child Component is added, you may need to call the Container's 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 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 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.

Parameters:
  • container : Element/HTMLElement/String
    (optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    (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)
Returns:
  • void
Component
resumeEvents() : void
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all event...
Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
Parameters:
  • None.
Returns:
  • void
Observable
setDisabled( Boolean disabled ) : Ext.Component
Convenience function for setting disabled/enabled by boolean.
Convenience function for setting disabled/enabled by boolean.
Parameters:
  • disabled : Boolean
Returns:
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
Convenience function to hide or show this component by boolean.
Convenience function to hide or show this component by boolean.
Parameters:
  • visible : Boolean
    True to show, false to hide
Returns:
  • Ext.Component
    this
Component
show() : Ext.Component
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the '...
Show this component. Listen to the 'beforeshow' event and return false to cancel showing the component. Fires the 'show' event after showing the component.
Parameters:
  • None.
Returns:
  • Ext.Component
    this
Component
suspendEvents( Boolean queueSuspended ) : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
Returns:
  • void
Observable
un( String eventName, Function handler, [Object scope] ) : void
Removes an event handler (shorthand for removeListener.)
Removes an event handler (shorthand for removeListener.)
Parameters:
  • eventName : String
    The type of event the handler was associated with.
  • handler : Function
    The handler to remove. This must be a reference to the function passed into the addListener call.
  • scope : Object
    (optional) The scope originally specified for the handler.
Returns:
  • void
Observable

Public Events

Event Defined By
afterrender : ( Ext.Component this )
Fires after the component rendering is finished. The afterrender event is fired after this Component has been rendere...

Fires after the component rendering is finished.

The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component, and, if stateful, after state has been restored.

Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforedestroy : ( Ext.Component this )
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Fires before the component is destroyed. Return false from an event handler to stop the destroy.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforehide : ( Ext.Component this )
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is hidden by calling the hide method. Return false from an event handler to stop the hide.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforerender : ( Ext.Component this )
Fires before the component is rendered. Return false from an event handler to stop the render.
Fires before the component is rendered. Return false from an event handler to stop the render.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforeshow : ( Ext.Component this )
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Fires before the component is shown by calling the show method. Return false from an event handler to stop the show.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
beforestaterestore : ( Ext.Component this, Object state )
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Fires before the state of the component is restored. Return false from an event handler to stop the restore.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
beforestatesave : ( Ext.Component this, Object state )
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
destroy : ( Ext.Component this )
Fires after the component is destroyed.
Fires after the component is destroyed.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
disable : ( Ext.Component this )
Fires after the component is disabled.
Fires after the component is disabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
enable : ( Ext.Component this )
Fires after the component is enabled.
Fires after the component is enabled.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
hide : ( Ext.Component this )
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
render : ( Ext.Component this )
Fires after the component markup is rendered.
Fires after the component markup is rendered.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
show : ( Ext.Component this )
Fires after the component is shown when calling the show method.
Fires after the component is shown when calling the show method.
Listeners will be called with the following arguments:
  • this : Ext.Component
Component
staterestore : ( Ext.Component this, Object state )
Fires after the state of the component is restored.
Fires after the state of the component is restored.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component
statesave : ( Ext.Component this, Object state )
Fires after the state of the component is saved to the configured state provider.
Fires after the state of the component is saved to the configured state provider.
Listeners will be called with the following arguments:
  • this : Ext.Component
  • state : Object
    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.
Component


类Ext.Viewport

包： | Ext
定义的文件： | Viewport.js
类全称： | Ext.Viewport
继承自于： | Ext.Container
一个表示程序可视区域的特殊容器（浏览器可视区域）。
A specialized container representing the viewable application area (the browser viewport).

视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link Ext.Panel 面板}增加到viewport，通过她的items，或者通过她的子面板（子面板也都可以拥有自己的layout）的items，子面板的add方法，这种设计让内部布局的优势非常明显。

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 Panels added to the Viewport, either through its items, or through the items, or the add method of any of its child Panels may themselves have a layout.

Viewport不支持滚动，所以如果子面板需要滚动支持可以使用autoScroll配置。
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.

展示一个经典的border布局的viewport程序示例:
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',
        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',
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }, {
        region: 'south',
        title: 'Information',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }]
});

配置项

配置项 定义者
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Viewport( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Viewport
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.Window

包： | Ext
定义的文件： | Window.js
类全称： | Ext.Window
继承自于： | Ext.Panel

一种专用于程序中的"视窗"（window）的特殊面板。Window默认下是可拖动的draggable、浮动的窗体。窗体可以最大化到整个视图、恢复原来的大小，还可以最小化minimize。
A specialized panel intended for use as an application window. Windows are floated, resizable, and draggable by default. Windows can be maximized to fill the viewport, restored to their prior size, and can be minimized.

Windows既可关联到Ext.WindowGroup或籍由Ext.WindowManager来管理， 提供分组（grouping），活动（activation），置前/置后（to front/back）或其它应用程序特定的功能。
Windows can also be linked to a Ext.WindowGroup or managed by the Ext.WindowMgr to provide grouping, activation, to front, to back and other application-specific behavior.

缺省状态下，窗体都渲染到document.body。要强制constrain窗体以某个元素为依托就要使用renderTo方法。
By default, Windows will be rendered to document.body. To constrain a Window to another element specify renderTo.

配置项

配置项 定义者
x : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
y : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
modal : Boolean
True 表示为当window显示时对其后面的一切内容进行遮罩，fal...
True 表示为当window显示时对其后面的一切内容进行遮罩，false表示为限制对其它UI元素的语法（默认为 false）。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).
Window
animateTarget : String/Element
当指定一个id或元素,window打开时会与元素之间产生动画效果（缺省...
当指定一个id或元素,window打开时会与元素之间产生动画效果（缺省为null即没有动画效果）。Id or element from which the window should animate while opening (defaults to null with no animation).
Window
resizeHandles : String
一个有效的 Ext.Resizable手柄的配置字符串（默认为 'al...
一个有效的 Ext.Resizable手柄的配置字符串（默认为 'all'）。只当 resizable = true时有效. A valid Ext.Resizablehandles config string (defaults to 'all'). Only applies when resizable = true.
Window
manager : Ext.WindowGroup
管理该window的WindowGroup引用（默认为 Ext.Win...
管理该window的WindowGroup引用（默认为 Ext.WindowMgr）。A reference to the WindowGroup that should manage this window (defaults to Ext.WindowMgr).
Window
defaultButton : String/Number/Button
按钮的id/index或按钮实例,当window接收到焦点此按钮也会得...
按钮的id/index或按钮实例,当window接收到焦点此按钮也会得到焦点。The id / index of a button or a button instance to focus when this window received the focus.
Window
onEsc : Function
允许重写该句柄以替代escape键的内建控制句柄。默认的动作句柄是关闭...
允许重写该句柄以替代escape键的内建控制句柄。默认的动作句柄是关闭window（执行 closeAction所指的动作）。若按下escape键不关闭window，可指定此项为ExtemptyFn)。Allows override of the built-in processing for the escape key. Default action is to close the Window (performing whatever action is specified in closeAction. To prevent the Window closing when the escape key is pressed, specify this as Ext.emptyFn (See ExtemptyFn).
Window
collapsed : Boolean
True 表示为渲染面板后即闭合（默认为false）。True to ...
True 表示为渲染面板后即闭合（默认为false）。True to render the panel collapsed, false to render it expanded (defaults to false).
Panel
maximized : Boolean
True表示显示窗体时就已最大化的状态显示（默认为false）。Tru...
True表示显示窗体时就已最大化的状态显示（默认为false）。True to initially display the window in a maximized state. (Defaults to false).
Window
baseCls : String
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The...
作用在面板元素上的CSS样式类 （默认为 'x-panel'）。The base CSS class to apply to this panel's element (defaults to 'x-panel').
Panel
resizable : Boolean
True 表示为允许用户从window的四边和四角改变window的大...
True 表示为允许用户从window的四边和四角改变window的大小（默认为 true）。True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true).
Window
draggable : Boolean
True表示为激活此面板的拖动（默认为false）。True to e...

True表示为激活此面板的拖动（默认为false）。True to enable dragging of this Panel (defaults to false).

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为： 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 Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:
Panel
closable : Boolean
Panels themselves do not directly s...
Panels themselves do not directly support being closed, but some Panel subclasses do (like Ext.Window) or a Panel Class within an Ext.TabPanel. Specify true to enable closing in such situations. Defaults to false.
Panel
constrain : Boolean
True表示为将window约束在视图中显示，false表示为允许wi...
True表示为将window约束在视图中显示，false表示为允许window在视图之外的地方显示（默认为false）。可选地设置constrainHeader使得头部只被约束。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 renderTo. (defaults to false). Optionally the header only can be constrained using constrainHeader.
Window
constrainHeader : Boolean
True表示为将window header约束在视图中显示， fals...
True表示为将window header约束在视图中显示， false表示为允许header在视图之外的地方显示（默认为false）。可选地设置constrain使得整个窗体可被约束。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 constrain.
Window
plain : Boolean
True表示为渲染window body的背景为透明的背景，这样看来w...
True表示为渲染window body的背景为透明的背景，这样看来window body与边框元素（framing elements）融为一体， false表示为加入浅色的背景，使得在视觉上body元素与外围边框清晰地分辨出来（默认为false）。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).
Window
minimizable : Boolean
True表示为显示“最小化minimize”的工具按钮，允许用户最小化...
True表示为显示“最小化minimize”的工具按钮，允许用户最小化window，false表示隐藏按钮，禁止window最小化的功能（默认为false）。注意最小化window是实现具体特定的（implementation-specific），该按钮不提供最小化window的实现，所以必须提供一个最小化的事件来制定最小化的行为，这样该项才有用的。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.
Window
maximizable : Boolean
True表示为显示“最大化maximize”的工具按钮，允许用户最大化...
True表示为显示“最大化maximize”的工具按钮，允许用户最大化window（默认为false）。注意当window最大化时，这个工具按钮会自动变为“restore”按钮。同时相应的行为也变成内建复原(restore)行为，即window可回变之前的尺寸。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.
Window
minHeight : Number
window高度的最小值，单位为象素（缺省为 100）。只当 resi...
window高度的最小值，单位为象素（缺省为 100）。只当 resizable 为 true时有效。The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable = true.
Window
minWidth : Number
window宽度的最小值，单位为象素（缺省为 200）。只当 resi...
window宽度的最小值，单位为象素（缺省为 200）。只当 resizable 为 true时有效。The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable = true.
Window
expandOnShow : Boolean
True 表示为window显示时总是展开window，false则表...
True 表示为window显示时总是展开window，false则表示为按照打开时的状态显示（有可能是闭合的collapsed）（默认为 true）。True to always expand the window when it is displayed, false to keep it in its current state (which may be collapsed) when displayed (defaults to true).
Window
closeAction : String
当关闭按钮被点击时执行的动作。“close”缺省的动作是从DOM树中移...
当关闭按钮被点击时执行的动作。“close”缺省的动作是从DOM树中移除window并彻底加以销毁。“hide”是另外一个有效的选项，只是在视觉上通过偏移到零下(negative)的区域的手法来隐藏，这样使得window可通过show 的方法再显示. The action to take when the close button is clicked. The default action is 'close' which will actually remove the window from the DOM and destroy it. The other valid option is 'hide' which will simply hide the window by setting visibility to hidden and applying negative offsets, keeping the window available to be redisplayed via the show method.
Window
bodyCfg : Object
构成面板body元素的DomHelper配置对象。A DomHelpe...

构成面板body元素的DomHelper配置对象。A DomHelper configuration object specifying the element structure of this Panel's body Element.

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:
Panel
headerCfg : Object
面板header元素的结构，符合DomHelper配置的格式。A D...

面板header元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's header Element.

 Panel
bwrapCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bwrap Element. See bodyCfg also.

 Panel
tbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

 Panel
bbarCfg : Object
A DomHelper element specification o...

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

 Panel
footerCfg : Object
面板footer元素的结构，符合DomHelper配置的格式。A D...

面板footer元素的结构，符合DomHelper配置的格式。A DomHelper configuration object specifying the element structure of this Panel's footer Element.

 Panel
applyTo : Mixed
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文...
节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素 当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。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. 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. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.
Component
tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getTopToolbar的方法代替。The top toolbar of the panel. This can be a 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 getTopToolbar.
Panel
bbar : Object/Array
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置...
面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用getBottomToolbar的方法代替。The bottom toolbar of the panel. This can be a 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 getBottomToolbar.
Panel
fbar : Object/Array
A Toolbar object, a Toolbar config,...

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

The Panel's buttonAlign configuration affects the layout of these items, for example:
Panel
header : Boolean
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创...
True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。True to create the header element explicitly, false to skip creating it. By default, when header is not specified, if a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.
Panel
footer : Boolean
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不...
True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。True to create the footer element explicitly, false to skip creating it. By default, when footer is not specified, if one or more buttons have been added to the panel the footer will be created automatically, otherwise it will not.
Panel
title : String
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部...
显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素header会自动生成和显示，除非header强制设为false。如果你不想在写配置时指定好title， 不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。The title text to be used as innerHTML (html tags are accepted) to display in the panel header(defaults to ''). When a title is specified the header element will automatically be created and displayed unless 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.
Panel
buttons : Array
在面板底部加入按钮，Ext.Button配置的数组。An array ...
在面板底部加入按钮，Ext.Button配置的数组。An array of Ext.Buttons or Ext.Button configs used to add buttons to the footer of this panel.
Panel
autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updaterupdat...
一个特定的url反馈到Updater的Ext.Updaterupdate方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板body元素的默认URL属性就是这URL，所以可随时调用refresh的方法。A valid url spec according to the Updater Ext.Updaterupdate 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 body element, so it may be refreshed at any time.

 Panel
frame : Boolean
True表示为面板的边框外框可自定义的，false表示为边框可1px的...
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
Panel
border : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在bodyBorder中进一步设置。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 bodyBorder to false.
Panel
bodyBorder : Boolean
True表示为显示出面板body元素的边框，false则隐藏（缺省为t...
True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。True to display an interior border on the body element of the panel, false to hide it (defaults to true). This only applies when 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.
Panel
bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Elementapply...
制定body元素的CSS样式。格式形如Ext.ElementapplyStyles（缺省为null）。Custom CSS styles to be applied to the body element in the format expected by Ext.ElementapplyStyles (defaults to null).
Panel
iconCls : String
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。...
一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。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:
Panel
collapsible : Boolean
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部...
True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸（缺省为false）。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).
Panel
tools : Array
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具...
一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Element对象，都集中保存在属性tools.<tool-type>之中。每个工具配置可包含下列属性： An array of tool button configs to be added to the header tool area. When rendered, each tool is stored as an Element referenced by a public property called tools.<tool-type>

Each tool config may contain the following properties:

  • id : String
    必须的。Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。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自带一些css样式，吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标。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 当collapsible为true时自动创建。(Created by default when collapsible is true)
    • close
    • minimize
    • maximize
    • restore
    • gear
    • pin
    • unpin
    • right
    • left
    • up
    • down
    • refresh
    • minus
    • plus
    • help
    • search
    • save
    • print
  • handler: Function
    必须的。Required. 点击后执行的函数。它传入的参数有： The function tocall when clicked. Arguments passed are:
    • event : Ext.EventObject
      单击事件。The click event.
    • toolEl : Ext.Element
      工具元素（tool Element） The tool Element.
    • panel : Ext.Panel
      面板。The host Panel
    • tc : Ext.Panel
      The tool configuration object
  • stopEvent : Boolean
    默认为true。false的话表示点击事件停止衍生。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
    提示字符串，或Ext.QuickTipregister的配置参数。A tip string, or a config argument to Ext.QuickTipregister
  • hidden : Boolean
    True表示为渲染为隐藏。True to initially render hidden.
  • on : Object
    特定事件侦听器的配置对象，格式形如addListener的参数。侦听器的配置对象格式应如addListener。A listener config object specifiying event listeners in the format of an argument to addListener
用法举例： Example usage:
Panel
toolTemplate : Ext.Template/Ext.XTemplate
位于header中的tools其模板是什么。默认是： A Temp...

位于header中的tools其模板是什么。默认是： A Template used to create tools in the header Element. Defaults to:
Panel
hideCollapseTool : Boolean
True表示为不出 展开/收缩的轮换按钮，当collapsible =...
True表示为不出 展开/收缩的轮换按钮，当collapsible = true，false就显示（默认为false）。True to hide the expand/collapse toggle button when collapsible = true, false to display it (defaults to false).
Panel
titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板（当collap...
True表示为允许单击头部区域任何一个位置都可收缩面板（当collapsible = true）反之只允许单击工具按钮（默认为false）。True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false to allow it only by clicking to tool button (defaults to false).
Panel
autoScroll : Boolean
True表示为在面板body元素上，设置overflow：'auto'...
True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
Panel
floating : Boolean
True表示为浮动此面板（带有自动填充和投影的绝对定位），false...

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。True to float this Panel (absolute position it with automatic shimming and shadow), false to display it inline where it is rendered (defaults to false).

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);） Setting floating to true will create an Ext.Layer encapsulating this Panel's Element and display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).

若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。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.

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。This property may also be specified as an object to be used as the configuration object for the Ext.Layer that will be created.

Panel
shadow : Boolean/String
True 表示为（或一个有效Ext.Shadowmode值）在面板后显...
True 表示为（或一个有效Ext.Shadowmode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。True (or a valid Ext.Shadow Ext.Shadowmode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
Panel
shadowOffset : Number
投影偏移的象素值（默认为4）。注意此项只当floating = tru...
投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies when floating = true.
Panel
shim : Boolean
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为...
False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效。False to disable the iframe shim in browsers which need one (defaults to true). Note that this option only applies when floating = true.
Panel
html : String/Object
一段HTML片段，或DomHelper配置项作为面板body内容（默认...
一段HTML片段，或DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比contentEl的显示位置而居前。An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to ''). The HTML content is added by the Panel's afterRender method, and so the document will not contain this HTML at the time the render event is fired. This content is inserted into the body before any configured contentEl is appended.
Panel
contentEl : String
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的a...
用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。The id of an existing HTML node to use as the panel's body content (defaults to ''). specified Element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this HTML at the time the render event is fired.
Panel
keys : Object/Array
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBind...
KeyMap的配置项对象（格式形如:Ext.KeyMapaddBinding）。可用于将key分配到此面板（缺省为null）。A KeyMap config object (in the format expected by Ext.KeyMapaddBinding used to assign custom key handling to this panel (defaults to null).
Panel
tabTip : String
tooltip的innerHTML字符串（也可以html标签），当鼠标...
tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init() must be called in order for the tips to render.
Panel
disabled : Boolean
渲染该组件为禁用状态的（默认为false）。Render this c...
渲染该组件为禁用状态的（默认为false）。Render this component disabled (default is false).
Component
autoHeight : Boolean
True表示为使用height:'auto'，false表示为使用固定...
True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。True to use height:'auto', false to use fixed height (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.
BoxComponent
collapsedCls : String
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-co...
当面板闭合时，面板元素的CSS样式类 （默认为 'x-panel-collapsed'）。A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
maskDisabled : Boolean
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，...
True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。True to mask the panel when it is 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.
Panel
animCollapse : Boolean
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext...
True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false).
Panel
headerAsText : Boolean
True表示为显示面板头部的标题（默认为 true）。True to ...
True表示为显示面板头部的标题（默认为 true）。True to display the panel title in the header, false to hide it (defaults to true).
Panel
buttonAlign : String
在此面板上的按钮的对齐方式,有效值是'right,' 'left' a...
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。The alignment of any buttons added to this panel. Valid values are 'right,' 'left' and 'center' (defaults to 'right').
Panel
collapseFirst : Boolean
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表...
True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。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).
Panel
minButtonWidth : Number
此面板上按钮的最小宽度（默认为75）。Minimum width in...
此面板上按钮的最小宽度（默认为75）。Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
unstyled : Boolean
不带样式渲染面板。Renders the panel unstyled
不带样式渲染面板。Renders the panel unstyled
Panel
elements : String
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会...
面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下， 就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是： 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
缺省为'body'. Defaults to 'body'.
Panel
monitorResize : Boolean
Ture表示为自动监视window resize的事件，以处理接下来一...
Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由layout调控，而无须手动设置。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 layout and should not need to be set manually.
Container
layout : String
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.C...
此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。The layout type to be used in this container. If not specified, a default Ext.layout.ContainerLayout will be created and used. Specific config values for the chosen layout type can be specified using layoutConfig. Valid values are:
  • absolute
  • accordion
  • anchor
  • border
  • card
  • column
  • fit
  • form
  • table
 Container
layoutConfig : Object
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即...
选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类： This is a config object containing properties specific to the chosen layout (to be used in conjunction with the layout config value). For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified:
  • Ext.layout.Absolute
  • Ext.layout.Accordion
  • Ext.layout.AnchorLayout
  • Ext.layout.BorderLayout
  • Ext.layout.CardLayout
  • Ext.layout.ColumnLayout
  • Ext.layout.FitLayout
  • Ext.layout.FormLayout
  • Ext.layout.TableLayout
 Container
bufferResize : Boolean/Number
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会...
当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。When set to true (100 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.
Container
activeItem : String/Number
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例...
组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。只有某些风格的布局可设置activeItem（如Ext.layout.Accordion、Ext.layout.CardLayout和 Ext.layout.FitLayout），以在某个时刻中显示一项内容。相关内容请参阅Ext.layout.ContainerLayoutactiveItem。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 Ext.layout.Accordion, Ext.layout.CardLayout and Ext.layout.FitLayout). Related to Ext.layout.ContainerLayoutactiveItem.
Container
items : Mixed
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于...
一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（ 如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.

Component config objects may also be specified in order to avoid the overhead of constructing a real Component object if lazy rendering might mean that the added Component will not be rendered immediately. To take advantage of this "lazy instantiation", set the Ext.Componentxtype config property to the registered type of the Component wanted.

For a list of all available xtypes, see Ext.Component. If a single item is being passed, it should be passed directly as an object reference (e.g., items: {...}). Multiple items should be passed as an array of objects (e.g., items: [{...}, {...}]).
Container
defaults : Object
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a...
应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过add、insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”， 假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。A config object that will be applied to all components added to this container either via the items config or via the add or insert methods. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the container. For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.
Container
autoDestroy : Boolean
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁...
若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).
Container
hideBorders : Boolean
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边...
True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).
Container
defaultType : String
容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。...

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）The default 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'.

 Container
pageX : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。The page level x coordinate for this component if contained within a positioning container.
BoxComponent
pageY : Number
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。T...
如果该组件是在一个定位的组件之中，可通过该属性返回组件的y页面坐标。The page level y coordinate for this component if contained within a positioning container.
BoxComponent
height : Number
此组件的高度（单位象素）（缺省为auto）。The height of...
此组件的高度（单位象素）（缺省为auto）。The height of this component in pixels (defaults to auto).
BoxComponent
width : Number
此组件的宽度（单位象素）（缺省为auto）。The width of ...
此组件的宽度（单位象素）（缺省为auto）。The width of this component in pixels (defaults to auto).
BoxComponent
autoWidth : Boolean
True表示为使用width:'auto'，false表示为使用固定宽...
True表示为使用width:'auto'，false表示为使用固定宽度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' width都有效。autoWidth:true的设定表示会依照元素内容自适应大小，Ext就不会过问宽度的问题。True to use width:'auto', false to use fixed width (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.
BoxComponent
fieldLabel : String
在组件旁边那里显示的label文本（默认为''）。The label ...
在组件旁边那里显示的label文本（默认为''）。The label text to display next to this Component (defaults to '')

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
labelStyle : String
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS s...
关于表单字段的label提示文本的CSS样式的“完全表达式（CSS style specification）”。默认为""，若容器的lableStyle有设置这样设置值。A CSS style specification to apply directly to this field's label (defaults to the container's labelStyle value if set, or '').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

演示实例：Example use:
Component
labelSeparator : String
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认...
分隔符，就是每行表单中的label文本显示后面紧接着的那个分隔符（默认值是Ext.layout.FormLayoutlabelSeparator，即缺省是分号“:”）。如果指定空白字符串""就表示不显示所谓的“分隔符”。The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayoutlabelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
hideLabel : Boolean
True表示为完全隐藏label元素。默认下，即使你不指定fieldL...
True表示为完全隐藏label元素。默认下，即使你不指定fieldLabel都会有一个空白符插入，好让支撑field为一行。设该值为true就不会有这个空白符了。True to completely hide the label element (defaults to false). By default, even if you do not specify a 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
clearCls : String
关于field的清除样式（默认为“x-form-clear-left”...
关于field的清除样式（默认为“x-form-clear-left”）。The CSS class used to provide field clearing (defaults to 'x-form-clear-left').

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

 Component
itemCls : String
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemC...
关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。An additional CSS class to apply to the wrapper's form item element of this field (defaults to the container's itemCls value if set, or ''). Since it is applied to the item wrapper, 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.

此组件只有在FormLayout布局管理器控制的容器下渲染才有用。This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

Example use:
Component
anchor : String
Note: this config is only used when...

Note: this config is only used when this Component is rendered by a Container which has been configured to use an AnchorLayout based layout manager, for example:

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

See Ext.layout.AnchorLayout.anchor also.

 Component
id : String
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用...
唯一的组件id（默认为自动分配的id）。出于你打算用id来获取组件引用这一目的（像使用Ext.ComponentMgrgetCmp的情形），你就会送入一个你写好的id到这个方法。提示：容器的元素即HTML元素也会使用该id渲染在页面上。如此一来你就可以采用CSS id匹配的规则来定义该组件的样式。换句话说，实例化该组件时，送入不同的Id，就有对应不同的样式效果。The unique id of this component (defaults to an 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 Ext.ComponentMgrgetCmp). 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.
Component
itemId : String
若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那...

若没有为该组件分配到一个访问的应用（换言之是建立变量然后分配置），那么就可以用这个itemId的索引来获取这个组件， 另外一个方式就是id，对应用Ext.getCmp获取； 而itemId就对应用getComponent方法获取， 但范围更窄，在Ext.Container范围内。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 id with Ext.getCmp, use itemId with Ext.Container. getComponent which will retrieve itemId's or 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 Ext.ComponentMgr which requires a unique id.
Component
xtype : String
用于登记一个xtype。The registered xtype to...
用于登记一个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 here.

If you subclass Components to create your own Components, you may register them using Ext.ComponentMgrregisterType in order to be able to take advantage of lazy instantiation and rendering.
Component
ptype : String
The registered ptype to create. Thi...
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 Ext.ComponentMgrregisterPlugin in order to be able to take advantage of lazy instantiation and rendering.
Component
cls : String
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件...
一个可选添加的CSS样式类，加入到组件的元素上（默认为''）。这为组件或组件的子节点加入标准CSS规则提供了方便。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.
Component
overCls : String
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为...
关于鼠标上移至该组件元素的CSS样式类，移出时撤销该样式的效果（默认为''）。该配置项在处理元素"active"或"hover"的时候很有用。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.
Component
style : String
作用在组件元素上特定的样式。该值的有效格式应如Ext.Elementa...
作用在组件元素上特定的样式。该值的有效格式应如Ext.ElementapplyStyles。A custom style specification to be applied to this component's Element. Should be a valid argument to Ext.ElementapplyStyles.
Component
ctCls : String
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器...
一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。这为容器或容器的子节点加入标准CSS规则提供了方便。An optional extra CSS class that will be added to this component's container (defaults to ''). This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
Component
hidden : Boolean
渲染该组件为隐藏状态的（默认为false）。Render this c...
渲染该组件为隐藏状态的（默认为false）。Render this component hidden (default is false).
Component
plugins : Object/Array
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保...
针对该组件自定义的功能，是对象或这些对象组成的数组。一个有效的插件须保证带有一个init的方法以便接收属于Ext.Component类型的引用。当一个组件被创建后，若发现由插件可用，组件会调用每个插件上的init方法，传入一个应用到插件本身。这样，插件便能按照组件所提供的功能，调用到组件的方法或响应事件。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.
Component
renderTo : Mixed
容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有...

容器渲染的那个节点的id，或是DOM节点，又或者是与DIV相当的现有元素。使用了这项配置后，不需要执行render()的方法。The id of the element, a DOM element or an existing Element that this component will be rendered into. When using this config, a call to render() is not required.

If this Component needs to be managed by a Container's layout manager, do not use this option. It is the responsiblity of the Container's layout manager to perform rendering. See render.

 Component
stateful : Boolean
组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须...

组件记忆了一个状态信息，启动时候就根据这个标记获取状态信息。组件必须设置其stateId或id，较有保障性， 而自动生成的id在跨页面加载的时候则不能保证一定不出现相同的情形。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 stateId or 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.

为了能记忆状态，必须通过方法设置一个Ext.state.Provider的实例置于一个状态管理器之中， 然后才可以用set与get的方法，保存记忆和提取记忆。可用内建的Ext.state.CookieProvider实现设置一个。For state saving to work, the state manager's provider must have been set to an implementation of Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, Ext.state.CookieProvider is available.

要设置页面的状态供应器： To set the state provider for the current page:
Component
stateId : String
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成...
出于状态管理目的id，（默认是人为设置过的组件id，如果组件是自动生成的id那种那么该项是null。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).

参阅stateful了解记忆与复原的机制。See stateful for an explanation of saving and restoring Component state.

 Component
autoEl : Mixed
某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的...

某种标签的字符串或者DomHelper配置对象，用于创建承载此组件的元素。A tag name or DomHelper spec used to create the Element which will encapsulate this Component.

一般而言你无须对其设置。对于这些基础类而言，就会使用div作为其默认的元素。Ext类写得越复杂，组件的onRender方法产生的DOM结构就随之更为复杂。You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure created by their own onRender methods.

该项是为创建形形色色的DOM元素而准备的，开发者可根据程序的特定要求去制定，如： This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements. Example usage:
Component
disabledClass : String
当组件被禁用时作用的CSS样式类（默认为"x-item-disable...
当组件被禁用时作用的CSS样式类（默认为"x-item-disabled"）。CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
allowDomMove : Boolean
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whethe...
当渲染进行时能否移动Dom节点上的组件（默认为true）。Whether the component can move the Dom node when rendering (defaults to true).
Component
autoShow : Boolean
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-h...
True表示为在渲染的时候先检测一下有否关于隐藏的样式类（如：'x-hidden'或'x-hide-display'），有就移除隐藏的样式类（缺省为false）。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).
Component
hideMode : String
这个组件是怎么隐藏的。可支持的值有"visibility" （css...

这个组件是怎么隐藏的。可支持的值有"visibility" （css中的visibility），"offsets"（负偏移位置）和"display"（css中的display）－默认为“display”。How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

容器可能是card layout或TabPanel中的一员，会有隐藏/显未的情形，这种情形下最好将其hideMode模式设为"offsets"。这保证了计算布局时，组件仍有正确的高度和宽度，组件管理器才能顺利地测量。For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

 Component
hideParent : Boolean
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,fals...
True表示为当隐藏/显示组件时对组件的容器亦一同隐藏/显示,false就只会隐藏/显示组件本身（默认为false）。例如，可设置一个hide:true的隐藏按钮在window，如果按下就通知其父容器一起隐藏，这样做起来比较快捷省事。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.
Component
ref : String
一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径...

一种路径的规范，可获取位于该容器下某一子组件的ownerCt。该路径依靠此组件本身为引用根据。A path specification, relative to the Component's ownerCt specifying into which ancestor Container to place a named reference to this Component.

父亲轴可以用'/'字符横切开来。例如在一个Panel面板中的工具栏上如此地引用按钮，会是这样： 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:
Component
listeners : Object
(optional) A config object containi...
(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 addListener example for attaching multiple handlers at once.
Observable

公告属性

属性 |  | 定义者
 | dd: Ext.dd.DragSource. 如果面板的draggable的配置被打开，那么该属性的值就是一个Ex... 如果面板的draggable的配置被打开，那么该属性的值就是一个Ext.dd.DragSource实例，代表着是谁负责拖动该面板。If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel. 为了定位拖放过程中的每一个阶段，开发人员必须提供抽象方法Ext.dd.DragSource的一个实作。请参阅draggable。The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable. | Panel
 | header: Ext.Element 面板的头部元素Element。只读的。The Panel's hea... 面板的头部元素Element。只读的。The Panel's header Element. Read-only. 此元素用于承载 title 和 tools。This Element is used to house the title and tools | Panel
 | body: Ext.Element 面板的躯干元素Element用于承载HTML内容。内容可由配置项ht... 面板的躯干元素Element用于承载HTML内容。内容可由配置项html指定，亦可通过配置autoLoad加载，通过面板的Updater亦是同样的原理。只读的。The Panel's body Element which may be used to contain HTML content. The content may be specified in the html config, or it may be loaded using the autoLoad config, or through the Panel's 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. 换句话说，若打算将面板用于布局的承载者，Body躯干元素就不能有任何加载或改动，它是由面板的局部（Panel's Layout）负责调控。If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout. | Panel
 | footer: Ext.Element 面板的底部元素Element。只读的。The Panel's foo... 面板的底部元素Element。只读的。The Panel's footer Element. Read-only. 该元素用于承托面板的buttons。This Element is used to house the Panel's buttons. The Panel's footer Element. Read-only. This Element is used to house the Panel's buttons or fbar. Note: see the Note for el also. | Panel
 | buttons: Array 面板的按钮组成的数组。只读的。This Panel's Array ... 面板的按钮组成的数组。只读的。This Panel's Array of buttons as created from the buttons config property. Read only. | Panel
 | items: MixedCollection 此容器的组件集合，类型为Ext.util.MixedCollecti... 此容器的组件集合，类型为Ext.util.MixedCollection。The collection of components in this container as a Ext.util.MixedCollection | Container
 | initialConfig: Object 组件初始化配置项。只读的。This Component's init... 组件初始化配置项。只读的。This Component's initial configuration specification. Read-only. | Component
 | el: Ext.Element 该组件的Ext.Element元素对象。只读的。 用getEl可返回... 该组件的Ext.Element元素对象。只读的。 用getEl可返回该对象。 | Component
 | ownerCt: Ext.Container 组件自身的Ext.Container（默认是undefined，只有... 组件自身的Ext.Container（默认是undefined，只有在组件加入到容器时才会自动设置该属性）只读的。The component's owner Ext.Container (defaults to undefined, and is set automatically when the component is added to a container). Read-only. | Component
 | hidden: Boolean True表示为组件是隐藏的。只读的。True if this com... True表示为组件是隐藏的。只读的。True if this component is hidden. Read-only. | Component
 | disabled: Boolean True表示为组件已被禁止。只读的。True if this com... True表示为组件已被禁止。只读的。True if this component is disabled. Read-only. | Component
 | rendered: Boolean True表示为该组件已经渲染好了。只读的。True if this ... True表示为该组件已经渲染好了。只读的。True if this component has been rendered. Read-only. | Component

公共方法

方法 定义者
Window( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Window
focus( Boolean selectText, Boolean/Number delay ) : Ext.Component
试着将焦点放到此项。Try to focus this component.
试着将焦点放到此项。Try to focus this component.
参数项：
  • selectText : Boolean
    （可选的）true的话同时亦选中组件中的文本（尽可能）。(optional)If applicable, true to also select the text in this component
  • delay : Boolean/Number
    （可选的）延时聚焦行为的毫秒数（true表示为10毫秒）。(optional) Delay the focus this number of milliseconds (true for 10 milliseconds)
返回值：
  • Ext.Component
    this
Component
setAnimateTarget( String/Element el )
设置window目标动画元素，当window打开是产生动画效果。Set...
设置window目标动画元素，当window打开是产生动画效果。Sets the target element from which the window should animate while opening.
参数项：
  • el : String/Element
    目标元素或 id。The target element or id
返回值：
  • void
Window
show() : Ext.Component
显示该组件。Show this component.
显示该组件。Show this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
hide() : Ext.Component
隐藏该组件。Hide this component.
隐藏该组件。Hide this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
minimize() : Ext.Window
window最小化方法的载体（Placeholder）。默认下，该方法...
window最小化方法的载体（Placeholder）。默认下，该方法简单地触发最小化事件minimize,因为最小化的行为是应用程序特定的，要实现自定义的最小化行为，应提供一个最小化事件处理函数或重写该方法。Placeholder method for minimizing the window. By default, this method simply fires the 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.
参数项：
  • None.
返回值：
  • Ext.Window
    this
Window
close()
关闭window，在DOM中移除并摧毁window对象。在关闭动作发生...
关闭window，在DOM中移除并摧毁window对象。在关闭动作发生之前触发beforeclose事件，如返回false则取消close动作。Closes the window, removes it from the DOM and destroys the window object. The beforeclose event is fired before the close happens and will cancel the close action if it returns false.
参数项：
  • None.
返回值：
  • void
Window
maximize() : Ext.Window
自适应window尺寸到其当前的容器，并将'最大化'按钮换成'复原'按...
自适应window尺寸到其当前的容器，并将'最大化'按钮换成'复原'按钮。Fits the window within its current container and automatically replaces the 'maximize' tool button with the 'restore' tool button.
参数项：
  • None.
返回值：
  • Ext.Window
    this
Window
restore() : Ext.Window
把已最大化window复原到原始的尺寸，并将“复原”按钮换成“最大化”...
把已最大化window复原到原始的尺寸，并将“复原”按钮换成“最大化”按钮。Restores a 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.
参数项：
  • None.
返回值：
  • Ext.Window
    this
Window
toggleMaximize() : Ext.Window
根据当前window的最大化状态轮换maximize和restore的...
根据当前window的最大化状态轮换maximize和restore的快捷方法。A shortcut method for toggling between maximize and restore based on the current maximized state of the window.
参数项：
  • None.
返回值：
  • Ext.Window
    this
Window
alignTo( Mixed element, String position, Array offsets ) : Ext.Window
对齐window到特定的元素。Aligns the window to...
对齐window到特定的元素。Aligns the window to the specified element
参数项：
  • element : Mixed
    要对齐的元素。The element to align to.
  • position : String
    对齐的位置（参阅Ext.ElementalignTo个中细节）。The position to align to (see Ext.ElementalignTo for more details).
  • offsets : Array
    （可选的）偏移位置 [x, y]。(optional)Offset the positioning by [x, y]
返回值：
  • Ext.Window
    this
Window
anchorTo( Mixed element, String position, Array offsets, Boolean/Number monitorScroll ) : Ext.Window
当window大小变化时或滚动时，固定此window到另外一个元素和重...
当window大小变化时或滚动时，固定此window到另外一个元素和重新对齐。Anchors this window to another element and realigns it when the window is resized or scrolled.
参数项：
  • element : Mixed
    对齐的元素。The element to align to.
  • position : String
    对齐的位置（参阅Ext.ElementalignTo细节）。The position to align to (see Ext.ElementalignTo for more details)
  • offsets : Array
    （可选的）偏移位置 [x, y]。(optional)Offset the positioning by [x, y]
  • monitorScroll : Boolean/Number
    （可选的） true表示为随着body的变化而重新定位，如果此参数是一个数字，那么将用于缓冲的延时（默认为50ms）。(optional) true to monitor body scroll and reposition. If this parameter is a number, it is used as the buffer delay (defaults to 50ms).
返回值：
  • Ext.Window
    this
Window
toFront() : Ext.Window
使用window先于其它window显示。Brings this wi...
使用window先于其它window显示。Brings this window to the front of any other visible windows
参数项：
  • None.
返回值：
  • Ext.Window
    this
Window
setActive( Boolean active )
激活此window并出现投影效果、或“反激活”并隐藏投影效果，此方法会...
激活此window并出现投影效果、或“反激活”并隐藏投影效果，此方法会触发相应的激活/反激活事件。Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also fires the activate or deactivate event depending on which action occurred.
参数项：
  • active : Boolean
    True表示为激活window（默认为 false）。True to activate the window, false to deactivate it (defaults to false)
返回值：
  • void
Window
toBack() : Ext.Window
让这个window居后显示（设其 z-index 稍低）。Sends ...
让这个window居后显示（设其 z-index 稍低）。Sends this window to the back of (lower z-index than) any other visible windows
参数项：
  • None.
返回值：
  • Ext.Window
    this
Window
center() : Ext.Window
使window在视图居中。Centers this window in...
使window在视图居中。Centers this window in the viewport
参数项：
  • None.
返回值：
  • Ext.Window
    this
Window
Panel( Object config )
参数项：
  • config : Object
    配置项对象。The config object
返回值：
  • void
Panel
setIconClass( String cls )
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。Sets the...
为该面板设置图标的样式类。此方法会覆盖当前现有的图标。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.
参数项：
  • cls : String
    新CSS样式类的名称。The new CSS class name
返回值：
  • void
Panel
getTopToolbar() : Ext.Toolbar
返回面板顶部区域的工具条。Returns the toolbar fr...
返回面板顶部区域的工具条。Returns the toolbar from the top (tbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
getBottomToolbar() : Ext.Toolbar
返回面板底部区域的工具条。Returns the toolbar fr...
返回面板底部区域的工具条。Returns the toolbar from the bottom (bbar) section of the panel.
参数项：
  • None.
返回值：
  • Ext.Toolbar
    The toolbar对象
Panel
addButton( String/Object config, Function handler, Object scope ) : Ext.Button
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过b...
为面板添加按钮。注意必须在渲染之前才可以调用该方法。最佳的方法是通过buttons的配置项添加按钮。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 buttons config.
参数项：
  • config : String/Object
    合法的Ext.Button配置项对象。若字符类型就表示这是按钮的提示文字。A valid Ext.Button config. A string will become the text for a default button config, an object will be treated as a button config object.
  • handler : Function
    按钮被按下时执行的函数，等同Ext.Buttonclick。The function to be called on button Ext.Buttonclick
  • scope : Object
    按钮触发时的事件处理函数所在作用域。The scope to use for the button handler function
返回值：
  • Ext.Button
    已添加的按钮。The button that was added
Panel
collapse( Boolean animate ) : Ext.Panel
闭合面板body隐藏其内容。触发beforecollapse事件，如返...
闭合面板body隐藏其内容。触发beforecollapse事件，如返回false则取消展开的动作。Collapses the panel body so that it becomes hidden. Fires the beforecollapse event which will cancel the collapse action if it returns false.
参数项：
  • animate : Boolean
    True表示为转换状态时出现动画，（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
expand( Boolean animate ) : Ext.Panel
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，...
展开面板的主体部分，显示全部。这会触发beforeexpand的事件，若事件处理函数返回false那么这个方法将失效。Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
toggleCollapse( Boolean animate ) : Ext.Panel
根据面板的当前状态，采取相应的expand或collapse。Shor...
根据面板的当前状态，采取相应的expand或collapse。Shortcut for performing an expand or collapse based on the current state of the panel.
参数项：
  • animate : Boolean
    True 表示为转换状态时出现动画（默认为面板animCollapse的配置值）。True to animate the transition, else false (defaults to the value of the animCollapse panel config)
返回值：
  • Ext.Panel
    this
Panel
getFrameWidth() : Number
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅get...
返回面板框架元素的宽度（不含body宽度）要取的body宽度参阅getInnerWidth。Returns the width in pixels of the framing elements of this panel (not including the body width). To retrieve the body width see getInnerWidth.
参数项：
  • None.
返回值：
  • Number
    框架宽度。The frame width
Panel
getFrameHeight() : Number
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度...
返回面板框架元素的高度（包括顶部/底部工具条的高度）要取的body高度参阅getInnerHeight。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 getInnerHeight.
参数项：
  • None.
返回值：
  • Number
    框架高度。The frame height
Panel
getInnerWidth() : Number
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 ge...
返回面板body元素的宽度（不含任何框架元素）要取的框架宽度参阅 getFrameWidth。Returns the width in pixels of the body element (not including the width of any framing elements). For the frame width see getFrameWidth.
参数项：
  • None.
返回值：
  • Number
    宽度。The body width
Panel
getInnerHeight() : Number
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参...
返回面板body元素的高度（不包括任何框架元素的高度）要取的框架高度参阅getFrameHeight。Returns the height in pixels of the body element (not including the height of any framing elements). For the frame height see getFrameHeight.
参数项：
  • None.
返回值：
  • Number
    高度。The body height
Panel
setTitle( String title, String iconCls )
设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）...

设置面板的标题文本，你也可以在这里指定面板的图片（透过CSS样式类）。Sets the title text for the panel and optionally the icon class.

为了确保标题能被设置，一个面板的头部元素必不可少。具体说，是要让面板的标题非空，或者设置header: true即可。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 title, or configuring it with header: true.

参数项：
  • title : String
    要设置的标题。The title text to set
  • iconCls : String
    （可选的）定义该面板用户自定义的图标，这是一个CSS样式类的字符串。(optional)A user-defined CSS class that provides the icon image for this panel
返回值：
  • void
Panel
getUpdater() : {Ext.Updater}对象。The Updater
获取该面板的Ext.Updater。主要是为面板的主体部分（body）...
获取该面板的Ext.Updater。主要是为面板的主体部分（body）提过面向Ajax的内容更新。Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
参数项：
  • None.
返回值：
  • {Ext.Updater}对象。The Updater
Panel
load( Object/String/Function config ) : Ext.Panel
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this...
利用XHR的访问加载远程的内容，立即显示在面板中。Loads this content panel immediately with content returned from an XHR call.
参数项：
  • config : Object/String/Function
    特定的配置项对象，可包含以下选项： A config object containing any of the following options:
返回值：
  • Ext.Panel
    this
Panel
getTool( String id ) : Object
获取某个工具项的id。Retrieve a tool by id.
获取某个工具项的id。Retrieve a tool by id.
参数项：
  • id : String
返回值：
  • Object
    tool
Panel
Container()
参数项：
  • None.
返回值：
  • void
Container
getLayoutTarget() : Ext.Element
Returns the Element to be used to c...

Returns the Element to be used to contain the child Components of this Container.

An implementation is provided which returns the Container's Element, but if there is a more complex structure to a Container, this may be overridden to return the element into which the layout renders child Components.

参数项：
  • None.
返回值：
  • Ext.Element
    The Element to render child Components into.
Container
add( Ext.Component/Object component, Ext.Component/Object component2, Ext.Component/Object etc ) : Ext.Component
把{@link Ext.Component 组件}加入到此容器。在加...

把{@link Ext.Component 组件}加入到此容器。在加入之前触发beforeadd事件和加入完毕后触发add事件。如果在容器已渲染后执行add方法（译注，如没渲染，即是属于lazy rending状态，自由地调用add方法是无所谓的）， 你或许需要调用doLayout的方法，刷新视图。而多个子组件加入到布局，你只需执行一次这个方法。Adds a Component to this Container. Fires the beforeadd event before adding, then fires the add event after the component has been added.

You will never call the render method of a child Component when using a Container. Child Components are rendered by this Container's layout manager when this Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

If the Container is already rendered when add is called, you may need to call 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 layout manager. If you expect child items to be sized in response to user interactions, you must specify a layout manager which creates and manages the type of layout you have in mind.

Omitting the 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.

参数项：
  • component : Ext.Component/Object
    欲加入的组件。The Component to add.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。Ext uses lazy rendering, and will only render the added Component should it become necessary, that is: when the Container is layed out either on first render or in response to a doLayout call.

    A Component config object may be passed instead of an instantiated Component object. The type of Component created from a config object is determined by the xtype config property. If no xtype is configured, the Container's defaultType is used.

    对于全部可用xtype列表可参阅Ext.Component。For a list of all available xtypes, see Ext.Component.
  • component2 : Ext.Component/Object
  • etc : Ext.Component/Object
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was added with the Container's default config values applied.

    example:
Container
insert( Number index, Ext.Component component ) : Ext.Component
把插件(Component)插入到容器指定的位置（按索引）。执行插入之...
把插件(Component)插入到容器指定的位置（按索引）。执行插入之前触发beforeadd事件，插入完毕触发add事件。Inserts a Component into this Container at a specified index. Fires the beforeadd event before inserting, then fires the add event after the Component has been inserted.
参数项：
  • index : Number
    组件插入到容器collection集合的索引。The index at which the Component will be inserted into the Container's items collection
  • component : Ext.Component
    欲加入的组件。The child Component to insert.

    Ext采用延时渲染（lazy-rendering），加入的组件只有到了需要显示的时候才会被渲染出来。

    你可传入一个组件的配置对象即是lazy-rendering，这样做的好处是组件不会立即渲染 减低直接构建组件对象带来的开销。

    要了解所有可用的xtyps，可参阅Ext.Component。要发挥“lazy instantiation延时初始化”的特性，应对组件所属的登记类型的Ext.Componentxtype属性进行配置。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 Ext.Componentxtype config property to the registered type of the Component wanted.

    For a list of all available xtypes, see Ext.Component.
返回值：
  • Ext.Component
    component 包含容器缺省配置值的组件（或配置项对象）。The Component (or config object) that was inserted with the Container's default config values applied.
Container
remove( Component/String component, Boolean autoDestroy ) : Ext.Component
从此容器中移除某个组件。执行之前触发beforeremove事件，移除...
从此容器中移除某个组件。执行之前触发beforeremove事件，移除完毕后触发remove事件。Removes a component from this container. Fires the beforeremove event before removing, then fires the remove event after the component has been removed.
参数项：
  • component : Component/String
    组件的引用或其id。The component reference or id to remove.
  • autoDestroy : Boolean
    （可选的）True表示为自动执行组件Ext.Componentdestroy 的函数。(optional)True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Ext.Component
    component 被移除的Component对象。The Component that was removed.
Container
removeAll( Boolean autoDestroy ) : Array
从此容器中移除某个组件。Removes all components ...
从此容器中移除某个组件。Removes all components from this container.
参数项：
  • autoDestroy : Boolean
    （可选的） True表示为自动执行组件Ext.Componentdestroy 的函数。(optional) True to automatically invoke the removed Component's Ext.Componentdestroy function. Defaults to the value of this Container's autoDestroy config.
返回值：
  • Array
    被销毁的组件数组。Array of the destroyed components
Container
getComponent( String/Number comp ) : Ext.Component
由id或索引直接返回容器的子组件。Gets a direct chil...
由id或索引直接返回容器的子组件。Gets a direct child Component by id, or by index.
参数项：
  • comp : String/Number
    子组件的id或index。id or index of child Component to return.
返回值：
  • Ext.Component
Container
doLayout( Boolean shallow ) : Ext.Container
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/...
重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数。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.
参数项：
  • shallow : Boolean
    （可选的）True表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout）。(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)
返回值：
  • Ext.Container
    this
Container
getLayout() : ContainerLayout
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.Co...
返回容器在使用的布局。如没设置，会创建默认的Ext.layout.ContainerLayout作为容器的布局。Returns the layout currently in use by the container. If the container does not currently have a layout set, a default Ext.layout.ContainerLayout will be created and set as the container's layout.
参数项：
  • None.
返回值：
  • ContainerLayout
    layout 容器的布局。The container's layout
Container
bubble( Function fn, Object scope, Array args ) : Ext.Container
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的...
逐层上报（Bubbles up）组件/容器，上报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件(默认)函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，上升将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
cascade( Function fn, Object scope, Array args ) : Ext.Container
逐层下报（Cascades down）组件/容器（从它开始），下报过程...
逐层下报（Cascades down）组件/容器（从它开始），下报过程中对组件执行指定的函数。函数的作用域（this）既可是参数传入或是当前组件（默认）函数的参数可经由args指定或当前组件提供， 如果函数在某一个层次上返回false，下降将会停止。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.
参数项：
  • fn : Function
    调用的函数。The function to call
  • scope : Object
    （可选的）函数的作用域（默认当前的点）。(optional)The scope of the function (defaults to current node)
  • args : Array
    （可选的）函数将会传入的参数（默认为当前组件）。(optional) The args to call the function with (default to passing the current component)
返回值：
  • Ext.Container
    this
Container
findById( String id ) : Ext.Component
在此容器之下由id查找任意层次的组件。Find a component...
在此容器之下由id查找任意层次的组件。Find a component under this container at any level by id
参数项：
  • id : String
返回值：
  • Ext.Component
Container
findByType( String/Class xtype, Boolean shallow ) : Array
根据xtype或class查找该容器下任意层次中某个组件。Find a...
根据xtype或class查找该容器下任意层次中某个组件。Find a component under this container at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
  • shallow : Boolean
    （可选的）False表示xtype可兼容组件的父类（这里缺省的），或true就表示xtype压根就是这个组件，没有继承上的泛指。(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.
返回值：
  • Array
    Ext.Components数组。Array of Ext.Components
Container
find( String prop, String value ) : Array
在此容器之下由属性作搜索依据查找组件。Find a component...
在此容器之下由属性作搜索依据查找组件。Find a component under this container at any level by property
参数项：
  • prop : String
  • value : String
返回值：
  • Array
    Array of Ext.Components 数组
Container
findBy( Function fcn, Object scope ) : Array
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组...
在此容器之下由自定义的函数作搜索依据查找组件。如函数返回true返回组件的结果。传入的函数会有(component, this container)的参数。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).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Array
    Ext.Component数组。Array of Ext.Components
Container
get( String/Number key ) : Ext.Component
返回该容器下辖的某个组件（是items.get(key)的简写方式）。...
返回该容器下辖的某个组件（是items.get(key)的简写方式）。Get a component contained by this container (alias for items.get(key))
参数项：
  • key : String/Number
    组件的索引或id。The index or id of the component
返回值：
  • Ext.Component
    Ext.Component
Container
BoxComponent( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置选项。The configuration options.
返回值：
  • void
BoxComponent
setSize( Number/Object width, Number height ) : Ext.BoxComponent
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独...
设置组件的宽度和高度。此方法会触发resize事件。此方法既可接受单独的数字类型的参数，也可以传入一个size的对象，如 {width:10, height:20}。Sets the width and height of the component. This method fires the resize event. This method can accept either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
参数项：
  • width : Number/Object
    要设置的宽度，或一个size对象，格式是{width, height}。The new width to set, or a size object in the format {width, height}
  • height : Number
    要设置的高度（如第一参数是size对象的那第二个参数经不需要了）。The new height to set (not required if a size object is passed as the first arg)
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setWidth( Number width ) : Ext.BoxComponent
设置组件的宽度。此方法会触发resize事件。Sets the wid...
设置组件的宽度。此方法会触发resize事件。Sets the width of the component. This method fires the resize event.
参数项：
  • width : Number
    要设置的新宽度。The new width to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setHeight( Number height ) : Ext.BoxComponent
设置组件的高度。此方法会触发resize事件。Sets the hei...
设置组件的高度。此方法会触发resize事件。Sets the height of the component. This method fires the resize event.
参数项：
  • height : Number
    要设置的新高度。The new height to set
返回值：
  • Ext.BoxComponent
    this
BoxComponent
getSize() : Object
返回当前组件所属元素的大小。Gets the current size...
返回当前组件所属元素的大小。Gets the current size of the component's underlying element.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象，格式为{width: （元素宽度）, height:（元素高度）} An object containing the element's size {width: (element width), height: (element height)}
BoxComponent
getWidth() : Number
返回当前组件所在的HTML元素的宽度。Gets the current...
返回当前组件所在的HTML元素的宽度。Gets the current width of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getHeight() : Number
返回当前组件所在的HTML元素的高度。Gets the current...
返回当前组件所在的HTML元素的高度。Gets the current height of the component's underlying element.
参数项：
  • None.
返回值：
  • Number
BoxComponent
getOuterSize() : Object
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白...
返回当前组件所在元素的尺寸大小，包括其外补丁（margin）占据的空白位置。Gets the current size of the component's underlying element, including space taken by its margins.
参数项：
  • None.
返回值：
  • Object
    包含元素大小的对象。{width: （元素宽度 + 左/右边距）, height: （元素高度 + 上/下边距）} An object containing the element's size {width: (element width + left/right margins), height: (element height + top/bottom margins)}
BoxComponent
getPosition( Boolean local ) : Array
对组件所在元素当前的XY位置查询。Gets the current X...
对组件所在元素当前的XY位置查询。Gets the current XY position of the component's underlying element.
参数项：
  • local : Boolean
    （可选的）如为真返回的是元素的left和top而非XY（默认为false）。(optional)If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Array
    元素的XY位置（如[100, 200]）。The XY position of the element (e.g., [100, 200])
BoxComponent
getBox( Boolean local ) : Object
返回对组件所在元素的测量矩形大小。Gets the current b...
返回对组件所在元素的测量矩形大小。Gets the current box measurements of the component's underlying element.
参数项：
  • local : Boolean
    （可选的） 如为真返回的是元素的left和top而非XY（默认为false）。(optional) If true the element's left and top are returned instead of page XY (defaults to false)
返回值：
  • Object
    box格式为{x, y, width, height}的对象（矩形）。An object in the format {x, y, width, height}
BoxComponent
updateBox( Object box ) : Ext.BoxComponent
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets t...
对组件所在元素的测量矩形大小，然后根据此值设置组件的大小。Sets the current box measurements of the component's underlying element.
参数项：
  • box : Object
    格式为{x, y, width, height}的对象。An object in the format {x, y, width, height}
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPosition( Number left, Number top ) : Ext.BoxComponent
设置组件的left和top值。要设置基于页面的XY位置，可使用setP...
设置组件的left和top值。要设置基于页面的XY位置，可使用setPagePosition。此方法触发move事件。Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the move event.
参数项：
  • left : Number
    新left。The new left
  • top : Number
    新top。The new top
返回值：
  • Ext.BoxComponent
    this
BoxComponent
setPagePosition( Number x, Number y ) : Ext.BoxComponent
设置组件页面上的left和top值。要设置left、top的位置，可使...
设置组件页面上的left和top值。要设置left、top的位置，可使用setPosition。此方法触发move事件。Sets the page XY position of the component. To set the left and top instead, use setPosition. This method fires the move event.
参数项：
  • x : Number
    新x位置。The new x position
  • y : Number
    新y位置。The new y position
返回值：
  • Ext.BoxComponent
    this
BoxComponent
syncSize() : Ext.BoxComponent
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。F...
强制重新计算组件的大小尺寸，这个尺寸是基于所属元素当前的高度和宽度。Force the component's size to recalculate based on the underlying element's current height and width.
参数项：
  • None.
返回值：
  • Ext.BoxComponent
    this
BoxComponent
Component( Ext.Element/String/Object config )
参数项：
  • config : Ext.Element/String/Object
    配置项。如果传入的是一个元素，那么它将是内置的元素以及其id将用于组件的id。如果传入的是一个字符串，那么就假设它是现有元素身上的id，也用于组件的id。否则，那应该是一个标准的配置项对象，应用到组件身上。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.
返回值：
  • void
Component
render( Element/HTMLElement/String container, String/Number position )
执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render ...

执行容器的渲染，可以将渲染执行在送入的HTML元素上面。Render this Component into the passed HTML element.

如果你在使用Container对象来存放该组件，那么就不要使用render方法。If you are using a Container object to house this Component, then do not use the render method.

一个容器的子组件可以由容器其layout属性在第一次渲染的时候来明确指定。A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.CardLayout, Ext.layout.AnchorLayout, Ext.layout.FormLayout, Ext.layout.TableLayout.

对于已渲染的组件加入新的子组件在内，就要调用doLayout方法刷新视图， 并层引发未渲染的于组件进行渲染，如果加入多个子组件渲染一次就足够了。If the Container is already rendered when a new child Component is added, you may need to call the Container's 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.

对于复杂的而言，要请楚知道的是其子项的定位与大小调节的任务是归属于容器的layout管理器的。When creating complex UIs, it is important to remember that sizing and positioning of child items is the responsibility of the Container's 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.

省略不写容器的layout配置项表示使用的最最简单的布局管理器，功能只有渲染子组件到容器中，没有大小调节和定位的功能， 不过你想实现这些功能就要为容器准备好一个你要调置的布局管理器。Omitting the Container's 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.

参数项：
  • container : Element/HTMLElement/String
    （可选的）组件准备渲染到的元素，如果基于现有的元素，那该项就应有略。(optional) The element this Component should be rendered into. If it is being created from existing markup, this should be omitted.
  • position : String/Number
    （可选的）元素ID或Dom节点索引，说明该组件在容器中的哪一个子组件之前插入（默认加在容器中最后的位置）。(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)
返回值：
  • void
Component
applyToMarkup( String/HTMLElement el )
把这个组件应用到当前有效的markup。执行该函数后，无须调用rend...
把这个组件应用到当前有效的markup。执行该函数后，无须调用render()。Apply this component to existing markup that is valid. With this function, no call to render() is required.
参数项：
  • el : String/HTMLElement
返回值：
  • void
Component
addClass( string cls ) : Ext.Component
加入CSS样式类到组件所在的元素。Adds a CSS class t...
加入CSS样式类到组件所在的元素。Adds a CSS class to the component's underlying element.
参数项：
  • cls : string
    要加入的CSS样式类。The CSS class name to add
返回值：
  • Ext.Component
    this
Component
removeClass( string cls ) : Ext.Component
移除CSS样式类到组件所属的元素。Removes a CSS clas...
移除CSS样式类到组件所属的元素。Removes a CSS class from the component's underlying element.
参数项：
  • cls : string
    要移除的CSS样式类。The CSS class name to remove
返回值：
  • Ext.Component
    this
Component
destroy()
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Cont...
清除任何的事件的句柄，在DOM中移除组件的元素，从容器Ext.Container中移除本身（如果适合的话）和在Ext.ComponentMgr注销 销毁的方法一般由框架自动执行，通常不需要直接执行。Destroys this component by purging any event listeners, removing the component's element from the DOM, removing the component from its Ext.Container (if applicable) and unregistering it from Ext.ComponentMgr. Destruction is generally handled automatically by the framework and this method should usually not need to be called directly.
参数项：
  • None.
返回值：
  • void
Component
getEl() : Ext.Element
返回所属的Ext.Element。通常这是一个<DIV>元素，由...

返回所属的Ext.Element。通常这是一个<DIV>元素，由onRender方法所创建，但也有可能是autoEl配置项所制定的那个。Returns the 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 autoEl config.

该组件若是未完全渲染完毕的话，这个元素是不存在的。The Element will not be available until this Component has been rendered.

要登记改组件的DOM事件（相当于组件本身的Observable事件而言），就要这样加入事件侦听器（如render事件）： To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), perform the adding of the listener in a render event listener:

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));
        }
    }
});
参数项：
  • None.
返回值：
  • Ext.Element
    包含该组件的元素对象。The Element which encapsulates this Component.
Component
getId() : String
返回该组件的id。Returns the id of this com...
返回该组件的id。Returns the id of this component.
参数项：
  • None.
返回值：
  • String
Component
getItemId() : String
返回该组件的item id。Returns the item id o...
返回该组件的item id。Returns the item id of this component.
参数项：
  • None.
返回值：
  • String
Component
disable() : Ext.Component
禁止该组件。Disable this component.
禁止该组件。Disable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
enable() : Ext.Component
启用该组件。Enable this component.
启用该组件。Enable this component.
参数项：
  • None.
返回值：
  • Ext.Component
    this
Component
setDisabled( Boolean disabled ) : Ext.Component
方便的函数用来控制组件禁用/可用。Convenience functi...
方便的函数用来控制组件禁用/可用。Convenience function for setting disabled/enabled by boolean.
参数项：
  • disabled : Boolean
返回值：
  • Ext.Component
    this
Component
setVisible( Boolean visible ) : Ext.Component
方便的函数用来控制组件显示/隐藏。Convenience functi...
方便的函数用来控制组件显示/隐藏。Convenience function to hide or show this component by boolean.
参数项：
  • visible : Boolean
    为True时显示/false时隐藏。True to show, false to hide
返回值：
  • Ext.Component
    this
Component
isVisible() : Boolean
该组件可见时返回true。Returns true if this c...
该组件可见时返回true。Returns true if this component is visible.
参数项：
  • None.
返回值：
  • Boolean
    为True时显示/false时隐藏。True if this component is visible, false otherwise.
Component
cloneConfig( Object overrides ) : Ext.Component
根据原始传入到该实例的配置项值，克隆一份组件。Clone the cu...
根据原始传入到该实例的配置项值，克隆一份组件。Clone the current component using the original config values passed into this instance by default.
参数项：
  • overrides : Object
    一个新配置项对象，用于对克隆版本的属性进行重写。属性id应要重写，避免重复生成一个。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.
返回值：
  • Ext.Component
    clone 克隆该组件的copy。The cloned copy of this component
Component
getXType() : String
获取Ext.ComponentMgr在已登记组件的xtypes。全部可...
获取Ext.ComponentMgr在已登记组件的xtypes。全部可用的xtypes列表，可参考Ext.Component开头，用法举例： Gets the xtype for this component as registered with Ext.ComponentMgr. For a list of all available xtypes, see the Ext.Component header. Example usage:

var t = new Ext.form.TextField();
alert(t.getXType());  // 提示alerts 'textfield'
参数项：
  • None.
返回值：
  • String
    The xtype
Component
isXType( String xtype, Boolean shallow ) : Boolean
测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为...

测试这个组件是否属于某个指定的xtype。这个方法既可测试该组件是否为某个xtype的子类，或直接是这个xtype的实例（shallow = true） 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).

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes.

全部可用的xtypes列表，可参考Ext.Component开头。For a list of all available xtypes, see the Ext.Component header.

用法举例：Example usage:

var t = new Ext.form.TextField();
var isText = t.isXType('textfield');        // true
var isBoxSubclass = t.isXType('box');       // true，textfield继承自BoxComponent  true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false，非BoxComponent本身的实例 false, not a direct BoxComponent instance
参数项：
  • xtype : String
    测试该组件的xtype。The xtype to check for this Component
  • shallow : Boolean
    （可选的）False表示为测试该组件是否为某个xtype的子类（缺省）。(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.
返回值：
  • Boolean
    true就表示为测试该组件是否这个xtype本身的实例。True if this component descends from the specified xtype, false otherwise.
Component
getXTypes() : String
返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtyp...

返回以斜杠分割的字符串，表示组件的xtype层次。全部可用的xtypes列表，可参考Ext.Component开头。Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the Ext.Component header.

如果你创建了子类，要注意必须登记一个新的xtype，让xtype的层次性发挥作用。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'
参数项：
  • None.
返回值：
  • String
    层次的字符串。The xtype hierarchy string
Component
findParentBy( Function fcn, Object scope ) : Ext.Container
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容...
在此组件之下由自定义的函数作搜索依据查找容器。如函数返回true返回容器的结果。传入的函数会有(container, this component)的参数。Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. The passed function is called with the arguments (container, this component).
参数项：
  • fcn : Function
  • scope : Object
    (optional)（可选的）
返回值：
  • Ext.Container
    首次匹配的容器。The first Container for which the custom function returns true
Component
findParentByType( String/Class xtype ) : Ext.Container
根据xtype或class查找该容器下任意层次中某个容器。Find a...
根据xtype或class查找该容器下任意层次中某个容器。Find a container above this component at any level by xtype or class
参数项：
  • xtype : String/Class
    组件的xtype字符串，或直接就是组件的类本身。The xtype string for a component, or the class of the component directly
返回值：
  • Ext.Container
    首次匹配的容器。The first Container which matches the given xtype or class
Component
nextSibling() : Ext.Component
在所属的容器范围中范围旁边下一个的组件。Returns the nex...
在所属的容器范围中范围旁边下一个的组件。Returns the next component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
previousSibling() : Ext.Component
在所属的容器范围中范围旁边上一个的组件。Returns the pre...
在所属的容器范围中范围旁边上一个的组件。Returns the previous component in the owning container
参数项：
  • None.
返回值：
  • Ext.Component
Component
getBubbleTarget() : 包含该组件的容器。the Container which owns this Component.
为Observable对象的fireEvent方法，方便对该组件的父级...
为Observable对象的fireEvent方法，方便对该组件的父级组件进行逐层上报。Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy.
参数项：
  • None.
返回值：
  • 包含该组件的容器。the Container which owns this Component.
Component
fireEvent( String eventName, Object... args ) : Boolean
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）...
触发指定的事件,并在这里把处理函数的参数传入（应该至少要有事件的名称）。Fires the specified event with the passed parameters (minus the event name).
参数项：
  • eventName : String
    事件名称The name of the event to fire. If the event is to bubble up an Observable parent hierarchy (See Ext.ComponentgetBubbleTarget) then the first argument must be passed as true, and the event name is passed as the second argument. 如果这个事件是要在Observable父类上逐层上报（参阅Ext.ComponentgetBubbleTarget），那么第一个参数一定是true，然后第二个参数是事件名称。
  • args : Object...
    传入事件处理函数的参数Variable number of parameters are passed to handlers
返回值：
  • Boolean
    从处理函数返回true或者false returns false if any of the handlers return false otherwise it returns true
Observable
addListener( String eventName, Function fn, Object scope, Object options )
加入一个事件处理函数。on是其简写方式。Appends an even...
加入一个事件处理函数。on是其简写方式。Appends an event handler to this element. The shorthand version on is equivalent.
参数项：
  • eventName : String
    事件处理函数的名称。The type of event to handle
  • fn : Function
    事件处理函数。该函数会送入以下的参数：The handler function the event invokes. This function is passed the following parameters:
    • evt : EventObject
      用于描述这次事件EventObject的事件对象。The EventObject describing the event.
    • t : Element
      事件源对象，类型是Element The Element which was the target of the event. 注意该项可能会选项delegate筛选而发生变化Note that this may be filtered by using the delegate option.
    • o : Object
      调用addListener时送入的选项对象The options object from the addListener call.
  • scope : Object
    （可选的） 事件处理函数执行时所在的作用域。处理函数“this”的上下文。(optional) The scope (The this reference) of the handler function. Defaults to this Element.
  • options : Object
    （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性： (optional) An object containing handler configuration properties. This may contain any of the following properties:
    • scope {Object} : 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。The scope in which to execute the handler function. The handler function's "this" context.
    • delegate {String} : 一个简易选择符，用于过滤目标，或是查找目标的子孙。A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} : true表示为阻止事件。即停止传播、阻止默认动作。True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} : true表示为阻止默认动作。True to prevent the default action
    • stopPropagation {Boolean} : true表示为阻止事件传播。True to prevent event propagation
    • normalized {Boolean} : false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的Ext.EventObject。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代表为事件触发后加入一个下次移除本身的处理函数。True to add a handler to handle just the next firing of the event, and then remove itself.
    • buffer {Number} : 若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会 被启用，但是新处理器句柄会安排在其位置。Causes the handler to be scheduled to run in an 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
    下面的例子，使用的是on的简写方式。和addListener是等价的。利用参数选项，可以组合成不同类型的侦听器： In the following examples, the shorthand form 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:

    这个事件的含义是，已常规化的，延时的，自动停止事件并有传入一个自定义的参数（forumId）的一次性侦听器。这些事件设置在处理函数（也就是第三个的参数）中也可以找到的。A normalized, 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:
返回值：
  • void
Observable
removeListener( String eventName, Function handler, Object scope )
移除侦听器Removes a listener
移除侦听器Removes a listener
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    移除的处理函数The handler to remove
  • scope : Object
    （可选的） 处理函数之作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
purgeListeners()
从这个对象身上移除所有的侦听器。Removes all listene...
从这个对象身上移除所有的侦听器。Removes all listeners for this object
参数项：
  • None.
返回值：
  • void
Observable
relayEvents( Object o, Array events )
Relays selected events from the spe...
Relays selected events from the specified Observable as if the events were fired by this.
参数项：
  • o : Object
    The Observable whose events this object is to relay.
  • events : Array
    Array of event names to relay.
返回值：
  • void
Observable
addEvents( Object o )
定义观察者的事件。Used to define events on t...
定义观察者的事件。Used to define events on this Observable
参数项：
  • o : Object
    定义的事件对象。object The object with the events defined
返回值：
  • void
Observable
hasListener( String eventName ) : Boolean
检测当前对象是否有指定的事件。Checks to see if thi...
检测当前对象是否有指定的事件。Checks to see if this object has any listeners for a specified event
参数项：
  • eventName : String
    要检查的事件名称。The name of the event to check for
返回值：
  • Boolean
    True表示有事件正在被监听，否则为false。True if the event is being listened for, else false
Observable
suspendEvents( Boolean queueSuspended )
暂停触发所有的事件（参阅resumeEvents）。Suspend t...
暂停触发所有的事件（参阅resumeEvents）。Suspend the firing of all events. (see resumeEvents)
参数项：
  • queueSuspended : Boolean
    Pass as true to queue up suspended events to be fired after the resumeEvents call instead of discarding all suspended events;
返回值：
  • void
Observable
resumeEvents()
重新触发事件（参阅suspendEvents）。Resume firi...
重新触发事件（参阅suspendEvents）。Resume firing events. (see suspendEvents) If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
参数项：
  • None.
返回值：
  • void
Observable
on( String eventName, Function handler, Object scope, Object options )
为该元素添加事件处理函数（addListener的简写方式）。Appe...
为该元素添加事件处理函数（addListener的简写方式）。Appends an event handler to this element (shorthand for addListener)
参数项：
  • eventName : String
    事件名称The type of event to listen for
  • handler : Function
    处理函数The method the event invokes
  • scope : Object
    （可选的） 执行处理函数的作用域。“this”对象指针(optional) The scope in which to execute the handler function. The handler function's "this" context.
  • options : Object
    （可选的）(optional)
返回值：
  • void
Observable
un( String eventName, Function handler, Object scope )
移除侦听器（removeListener的快捷方式）Removes a...
移除侦听器（removeListener的快捷方式）Removes a listener (shorthand for removeListener)
参数项：
  • eventName : String
    侦听事件的类型The type of event to listen for
  • handler : Function
    事件涉及的方法 The handler to remove
  • scope : Object
    （可选的） 处理函数的作用域(optional) The scope (this object) for the handler
返回值：
  • void
Observable
capture( Observable o, Function fn, Object scope )
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签...
开始捕捉特定的观察者。在事件触发之前，所有的事件会以“事件名称+标准签名”的形式传入到函数（传入的参数是function类型）。如果传入的函数执行后返回false，则接下的事件将不会触发。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.
参数项：
  • o : Observable
    要捕捉的观察者The Observable to capture
  • fn : Function
    要调用的函数The function to call
  • scope : Object
    （可选的） 函数作用域(optional) The scope (this object) for the fn @static
返回值：
  • void
Observable
releaseCapture( Observable o )
从Observable身上移除所有已加入的捕捉captures。Rem...
从Observable身上移除所有已加入的捕捉captures。Removes all added captures from the Observable.
参数项：
  • o : Observable
    要释放的观察者The Observable to release @static
返回值：
  • void
Observable

公共事件

事件 定义者
activate()
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板...
当面板视觉上取消活动后触发。注意面板不直接支持“取消活动”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。另外在TabPanel控制下子组件也会触发activate和deactivate事件。Fires after the Panel has been visually activated. Note that Panels do not directly support being activated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
deactivate()
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某...
当面板视觉上“反激活”过后触发。注意面板不直接支持“反激活”，但面板某些子类就支持（如Ext.Window）。TabPanel控制其子面板的激活与反激活事件。Fires after the Panel has been visually deactivated. Note that Panels do not directly support being deactivated, but some Panel subclasses do (like Ext.Window). Panels which are child Components of a TabPanel fire the activate and deactivate events under the control of the TabPanel.
侦听器会传入以下的参数：
  • None.
 Panel
resize()
当组件调节过大小后触发。Fires after the compone...
当组件调节过大小后触发。Fires after the component is resized.
侦听器会传入以下的参数：
  • None.
 BoxComponent
maximize()
当window完成最大化后触发。Fires after the win...
当window完成最大化后触发。Fires after the window has been maximized.
侦听器会传入以下的参数：
  • None.
 Window
minimize()
当window完成最小化后触发。Fires after the win...
当window完成最小化后触发。Fires after the window has been minimized.
侦听器会传入以下的参数：
  • None.
 Window
restore()
当window复原到原始的尺寸大小时触发。Fires after th...
当window复原到原始的尺寸大小时触发。Fires after the window has been restored to its original size after being maximized.
侦听器会传入以下的参数：
  • None.
 Window
bodyresize()
当面板的大小变化后触发。Fires after the Panel h...
当面板的大小变化后触发。Fires after the Panel has been resized.
侦听器会传入以下的参数：
  • None.
 Panel
titlechange()
面板的标题有改动后触发。Fires after the Panel t...
面板的标题有改动后触发。Fires after the Panel title has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
iconchange()
当面板的图标类设置了或改变了触发。Fires after the Pa...
当面板的图标类设置了或改变了触发。Fires after the Panel icon class has been set or changed.
侦听器会传入以下的参数：
  • None.
 Panel
collapse()
当面板被闭合后触发。Fires after the Panel has...
当面板被闭合后触发。Fires after the Panel has been collapsed.
侦听器会传入以下的参数：
  • None.
 Panel
expand()
当面板被展开后触发。Fires after the Panel has...
当面板被展开后触发。Fires after the Panel has been expanded.
侦听器会传入以下的参数：
  • None.
 Panel
beforecollapse()
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires...
当面板被闭合之前触发。若句柄返回false则取消闭合的动作。Fires before the Panel is collapsed. A handler can return false to cancel the collapse.
侦听器会传入以下的参数：
  • None.
 Panel
beforeexpand()
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires...
当面板被展开之前触发。若句柄返回false则取消展开的动作。Fires before the Panel is expanded. A handler can return false to cancel the expand.
侦听器会传入以下的参数：
  • None.
 Panel
beforeclose()
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如...
当面板被关闭之前触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。若句柄返回false则取消关闭的动作。Fires before the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window). This event only applies to such subclasses. A handler can return false to cancel the close.
侦听器会传入以下的参数：
  • None.
 Panel
close()
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如E...
当面板被关闭后触发。注意面板不直接支持“关闭”，不过在面板的子类（如Ext.Window）可支持即可调用该事件。Fires after the Panel is closed. Note that Panels do not directly support being closed, but some Panel subclasses do (like Ext.Window).
侦听器会传入以下的参数：
  • None.
 Panel
afterlayout()
由关联的布局管理器（layout manager）分配好容器上的组件后...
由关联的布局管理器（layout manager）分配好容器上的组件后触发 Fires when the components in this container are arranged by the associated layout manager.
侦听器会传入以下的参数：
  • None.
 Container
beforeadd()
Ext.Component要加入或要插入到容器之前触发的事件 Fire...
Ext.Component要加入或要插入到容器之前触发的事件 Fires before any Ext.Component is added or inserted into the container. A handler can return false to cancel the add.
侦听器会传入以下的参数：
  • None.
 Container
beforeremove()
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返...
任何从该容器身上移除Ext.Component之前触发的事件。若句柄返回false则取消移除。Fires before any Ext.Component is removed from the container. A handler can return false to cancel the remove.
侦听器会传入以下的参数：
  • None.
 Container
add()
@bubbles Ext.Component加入或插入到容器成功后触发...
@bubbles Ext.Component加入或插入到容器成功后触发的事件 Fires after any Ext.Component is added or inserted into the container.
侦听器会传入以下的参数：
  • None.
 Container
remove()
@bubbles 任何从该容器身上移除Ext.Component成功后...
@bubbles 任何从该容器身上移除Ext.Component成功后触发的事件。Fires after any Ext.Component is removed from the container.
侦听器会传入以下的参数：
  • None.
 Container
move()
当组件被移动过之后触发。Fires after the compone...
当组件被移动过之后触发。Fires after the component is moved.
侦听器会传入以下的参数：
  • None.
 BoxComponent
disable()
当组件禁用后触发。Fires after the component ...
当组件禁用后触发。Fires after the component is disabled.
侦听器会传入以下的参数：
  • None.
 Component
enable()
当组件被启用后触发。Fires after the component...
当组件被启用后触发。Fires after the component is enabled.
侦听器会传入以下的参数：
  • None.
 Component
beforeshow()
当组件显示出来之前触发。如返回false则阻止显示。Fires bef...
当组件显示出来之前触发。如返回false则阻止显示。Fires before the component is shown. Return false to stop the show.
侦听器会传入以下的参数：
  • None.
 Component
show()
当组件显示后触发。Fires after the component ...
当组件显示后触发。Fires after the component is shown.
侦听器会传入以下的参数：
  • None.
 Component
beforehide()
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires be...
当组件将要隐藏的时候触发。如返回false则阻止隐藏。Fires before the component is hidden. Return false to stop the hide.
侦听器会传入以下的参数：
  • None.
 Component
hide()
当组件隐藏后触发。Fires after the component ...
当组件隐藏后触发。Fires after the component is hidden.
侦听器会传入以下的参数：
  • None.
 Component
beforerender()
当组件渲染之前触发。如返回false则阻止渲染。Fires befor...
当组件渲染之前触发。如返回false则阻止渲染。Fires before the component is rendered. Return false to stop the render.
侦听器会传入以下的参数：
  • None.
 Component
render()
组件渲染之后触发。Fires after the component ...
组件渲染之后触发。Fires after the component markup is rendered.
侦听器会传入以下的参数：
  • None.
 Component
afterrender()
组件销毁之前触发。如返回false则停止销毁。Fires after ...
组件销毁之前触发。如返回false则停止销毁。Fires after the component rendering is finished.
侦听器会传入以下的参数：
  • None.
 Component
beforedestroy()
组件销毁之前触发。如返回false则停止销毁。Fires before...
组件销毁之前触发。如返回false则停止销毁。Fires before the component is destroyed. Return false to stop the destroy.
侦听器会传入以下的参数：
  • None.
 Component
destroy()
组件销毁之后触发。Fires after the component ...
组件销毁之后触发。Fires after the component is destroyed.
侦听器会传入以下的参数：
  • None.
 Component
beforestaterestore()
当组件的状态复原之前触发。如返回false则停止复原状态。Fires ...
当组件的状态复原之前触发。如返回false则停止复原状态。Fires before the state of the component is restored. Return false to stop the restore.
侦听器会传入以下的参数：
  • None.
 Component
staterestore()
当组件的状态复原后触发。Fires after the state o...
当组件的状态复原后触发。Fires after the state of the component is restored.
侦听器会传入以下的参数：
  • None.
 Component
beforestatesave()
当组件的状态被保存到state provider之前触发。如返回fal...
当组件的状态被保存到state provider之前触发。如返回false则停止保存。Fires before the state of the component is saved to the configured state provider. Return false to stop the save.
侦听器会传入以下的参数：
  • None.
 Component
statesave()
当组件的状态被保存到state provider后触发。Fires a...
当组件的状态被保存到state provider后触发。Fires after the state of the component is saved to the configured state provider.
侦听器会传入以下的参数：
  • None.
 Component


类Ext.WindowGroup

包： | Ext
定义的文件： | WindowManager.js
类全称： | Ext.WindowGroup
继承自于： | Object
此对象代表一组Ext.Window的实例并提供z-order的管理和window激活的行为。
An object that represents a group of Ext.Window instances and provides z-order management and window activation behavior.

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Number z-index的值。The z-index value windows的初始z-idnex（缺省为9000）。The sta... windows的初始z-idnex（缺省为9000）。The starting z-index for windows (defaults to 9000) | WindowGroup

公共方法

方法 定义者
WindowGroup()
参数项：
  • None.
返回值：
  • void
WindowGroup
get( String/Object id ) : Ext.Window
返回指定id的window。Gets a registered win...
返回指定id的window。Gets a registered window by id.
参数项：
  • id : String/Object
    window的id或Ext.Window实例。The id of the window or a Ext.Window instance
返回值：
  • Ext.Window
WindowGroup
bringToFront( String/Object win ) : Boolean
将指定的window居于其它活动的window前面。Brings th...
将指定的window居于其它活动的window前面。Brings the specified window to the front of any other active windows.
参数项：
  • win : String/Object
    window的id或Ext.Window实例。The id of the window or a Ext.Window instance
返回值：
  • Boolean
    True表示为对话框成功居前，else则本身已是在前面。True if the dialog was brought to the front, else false if it was already in front
WindowGroup
sendToBack( String/Object win ) : Ext.Window
将指定的window居于其它活动的window后面。Sends the...
将指定的window居于其它活动的window后面。Sends the specified window to the back of other active windows.
参数项：
  • win : String/Object
    window的id或Ext.Window实例。The id of the window or a Ext.Window instance
返回值：
  • Ext.Window
    The window
WindowGroup
hideAll()
隐藏组内的所有的window。Hides all windows in...
隐藏组内的所有的window。Hides all windows in the group.
参数项：
  • None.
返回值：
  • void
WindowGroup
getActive() : Ext.Window
返回组内的当前活动的window。Gets the currently...
返回组内的当前活动的window。Gets the currently-active window in the group.
参数项：
  • None.
返回值：
  • Ext.Window
    活动的window。The active window
WindowGroup
getBy( Function fn, Object scope ) : Array
传入一个制定的搜索函数到该方法内，返回组内的零个或多个windows。...
传入一个制定的搜索函数到该方法内，返回组内的零个或多个windows。函数一般会接收Ext.Window的引用作为其唯一的函数，若window符合搜索的标准及返回true，否则应返回false。Returns zero or more windows in the group using the custom search function passed to this method. The function should accept a single Ext.Window reference as its only argument and should return true if the window matches the search criteria, otherwise it should return false.
参数项：
  • fn : Function
    搜索函数。The search function
  • scope : Object
    （可选的）执行函数的作用域（若不指定便是window会传入）。(optional) The scope in which to execute the function (defaults to the window that gets passed to the function if not specified)
返回值：
  • Array
    零个或多个匹配的window。An array of zero or more matching windows
WindowGroup
each( Function fn, Object scope )
在组内的每一个window上执行指定的函数，传入window自身作为唯...
在组内的每一个window上执行指定的函数，传入window自身作为唯一的参数。若函数返回false即停止迭代。Executes the specified function once for every window in the group, passing each window as the only parameter. Returning false from the function will stop the iteration.
参数项：
  • fn : Function
    每一项都会执行的函数。The function to execute for each item
  • scope : Object
    （可选的）执行函数的作用域。(optional) The scope in which to execute the function
返回值：
  • void
WindowGroup

公共事件

这个类没有公告事件。


类Ext.WindowMgr

包： | Ext
定义的文件： | WindowManager.js
类全称： | Ext.WindowMgr
继承自于： | Ext.WindowGroup
自动创建的window组管理器，全局的。要创建其他的组管理器，提供z-order的堆，实例化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 Ext.WindowGroup as needed. @singleton

配置项

这个类没有配置项。

公告属性

属性 |  | 定义者
 | : Number z-index的值。The z-index value windows的初始z-idnex（缺省为9000）。The sta... windows的初始z-idnex（缺省为9000）。The starting z-index for windows (defaults to 9000) | WindowGroup

公共方法

方法 定义者
WindowMgr()
参数项：
  • None.
返回值：
  • void
WindowMgr
WindowGroup()
参数项：
  • None.
返回值：
  • void
WindowGroup
get( String/Object id ) : Ext.Window
返回指定id的window。Gets a registered win...
返回指定id的window。Gets a registered window by id.
参数项：
  • id : String/Object
    window的id或Ext.Window实例。The id of the window or a Ext.Window instance
返回值：
  • Ext.Window
WindowGroup
bringToFront( String/Object win ) : Boolean
将指定的window居于其它活动的window前面。Brings th...
将指定的window居于其它活动的window前面。Brings the specified window to the front of any other active windows.
参数项：
  • win : String/Object
    window的id或Ext.Window实例。The id of the window or a Ext.Window instance
返回值：
  • Boolean
    True表示为对话框成功居前，else则本身已是在前面。True if the dialog was brought to the front, else false if it was already in front
WindowGroup
sendToBack( String/Object win ) : Ext.Window
将指定的window居于其它活动的window后面。Sends the...
将指定的window居于其它活动的window后面。Sends the specified window to the back of other active windows.
参数项：
  • win : String/Object
    window的id或Ext.Window实例。The id of the window or a Ext.Window instance
返回值：
  • Ext.Window
    The window
WindowGroup
hideAll()
隐藏组内的所有的window。Hides all windows in...
隐藏组内的所有的window。Hides all windows in the group.
参数项：
  • None.
返回值：
  • void
WindowGroup
getActive() : Ext.Window
返回组内的当前活动的window。Gets the currently...
返回组内的当前活动的window。Gets the currently-active window in the group.
参数项：
  • None.
返回值：
  • Ext.Window
    活动的window。The active window
WindowGroup
getBy( Function fn, Object scope ) : Array
传入一个制定的搜索函数到该方法内，返回组内的零个或多个windows。...
传入一个制定的搜索函数到该方法内，返回组内的零个或多个windows。函数一般会接收Ext.Window的引用作为其唯一的函数，若window符合搜索的标准及返回true，否则应返回false。Returns zero or more windows in the group using the custom search function passed to this method. The function should accept a single Ext.Window reference as its only argument and should return true if the window matches the search criteria, otherwise it should return false.
参数项：
  • fn : Function
    搜索函数。The search function
  • scope : Object
    （可选的）执行函数的作用域（若不指定便是window会传入）。(optional) The scope in which to execute the function (defaults to the window that gets passed to the function if not specified)
返回值：
  • Array
    零个或多个匹配的window。An array of zero or more matching windows
WindowGroup
each( Function fn, Object scope )
在组内的每一个window上执行指定的函数，传入window自身作为唯...
在组内的每一个window上执行指定的函数，传入window自身作为唯一的参数。若函数返回false即停止迭代。Executes the specified function once for every window in the group, passing each window as the only parameter. Returning false from the function will stop the iteration.
参数项：
  • fn : Function
    每一项都会执行的函数。The function to execute for each item
  • scope : Object
    （可选的）执行函数的作用域。(optional) The scope in which to execute the function
返回值：
  • void
WindowGroup

公共事件

这个类没有公告事件。


类Ext.XTemplate

包： | Ext
定义的文件： | XTemplate.js
类全称： | Ext.XTemplate
继承自于： | Object

支持高级功能的模板类， 如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量， 直接执行代码和更多的功能。XTemplate亦提供相应的机制整合到 Ext.DataView.

XTemplate有些特殊的标签和内建的操作运算符，是模板创建时生成的，不属于API条目的一部分。下面的例子就演示了这些特殊部分的用法。每一个例子使用的数据对象如下：

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标签内的模板代码块，输出数组内的每一条内容： 自动数组输出和作用域切换。

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<p>{name}</p>',
    '</tpl></p>'
);
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);

数组元素索引和简单匹配支持。 当正在处理数组的时候，特殊变量#表示当前数组索引+1（由1开始，不是0）。/。

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age > 1">',
            '<p>{#}: {name}</p>',  // <-- 每一项都加上序号
            '<p>In 5 Years: {age+5}</p>',  // <-- 简单的运算
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);

自动渲染单根数组（flat arrays）。 单根数组（Flat arrays），指的是不包含分支对象只包含值的数组。使用特殊变量{.}可循环输出这类型的数组：

var tpl = new Ext.XTemplate(
    '<p>{name}\'s favorite beverages:</p>',
    '<tpl for="drinks">',
       '<div> - {.}</div>',
    '</tpl>'
);
tpl.overwrite(panel.body, data);

基本的条件逻辑判断 配合标签tpl和操作符if的使用，可为你执行条件判断，以决定模板的哪一部分需要被渲染出来。注意这没有else的操作符－－如需要，就要写两个逻辑相反的if的语句。属性项要记得进行编码，好像下面的例子：

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age &gt; 1">',  // <-- 注意>要被编码
            '<p>{name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);

即时执行任意的代码
在XTemplate中，{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量：

  • values：当前作用域下的值。若想改变其中的值，你可以切换子模板的作用域。
  • parent：父级模板的对象
  • xindex：若是循环模板，这是当前循环的索引index（从1开始）。
  • xcount：若是循环模板，这是循环的次数。
  • fm：Ext.util.Format的简写方式。
这是一个例子说明怎么利用这个知识点生成交错行：

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Company: {[company.toUpperCase() + ', ' + 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>',
        '<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>', {
     isGirl: function(name){
         return name == 'Sara Grace';
     },
     isBaby: function(age){
        return age < 1;
     }
});
tpl.overwrite(panel.body, data);

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
  XTemplate( String/Array/Object parts )
参数项：
  • parts : String/Array/Object
    HTML判断或片断组成的数组，或多个参数然后执行join("")。
返回值：
  • void
XTemplate
  apply()
applyTemplate的简写方式。
applyTemplate的简写方式。
参数项：
  • None.
返回值：
  • void
XTemplate
  applyTemplate( Object/Array values ) : String
返回HTML片断,这块片断是由数据填充模板之后而成的。
返回HTML片断,这块片断是由数据填充模板之后而成的。
参数项：
  • values : Object/Array
    模板填充值。该参数可以是一个数组(如果参数是数值型,如{0},或是一个对象,如{foo: 'bar'}.
返回值：
  • String
    HTML片断
XTemplate
  compile() : Function
把这个模板编译为一个函数，推荐多次使用这个模板时用这个方法，以提供性能。
把这个模板编译为一个函数，推荐多次使用这个模板时用这个方法，以提供性能。
参数项：
  • None.
返回值：
  • Function
    编译后的函数
XTemplate
  from( String/HTMLElement el ) : Ext.Template
从某个元素的value或innerHTML中创建模板（推荐displa...
从某个元素的value或innerHTML中创建模板（推荐display:none textarea元素）。Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
参数项：
  • el : String/HTMLElement
    DOM元素或其id。A DOM element or its id
返回值：
  • Ext.Template
    模板对象。The created Template. @static
XTemplate

公共事件

这个类没有公告事件。


类Function

包： |
定义的文件： | Ext.js
类全称： | Function
继承自于： | Object
这些函数在所有Function对象上均可用的（随便一个JavaScript函数）。These functions are available on every Function object (any JavaScript function).

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
createCallback() : Function
创建一个回调函数，该回调传递参数的形式为：arguments[0], ...
创建一个回调函数，该回调传递参数的形式为：arguments[0], arguments[1], arguments[2], ... 对于任何函数来说都是可以直接调用的，例如myFunction.createCallback(arg1, arg2)。这样就会为这个函数绑定它两个参数。如果需要指定这个函数的作用域，就应使用createDelegate。 如果这个函数需要作用域，请使用#createDelegate。本方法仅使用于Window作用域。在回调方法的参数引用中，如果是一个没有任何参数的方法，那么直接指明其引用即可，并不需要本方法，如（如callback:myFn）。然而，如果想指定带有参数的方法， 就应该使用该方法了。因为callback: myFn(arg1, arg2)会引起myFn的方法调用，而得到结果却不是函数引用而是这个函数的返回值。要得到一个加参的方法引用就需要使用本方法了，达到对函数“加壳”的目的，如下例： 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 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);
}

// 点击按钮就提示“Hi, Fred”。clicking the button alerts "Hi, Fred"
new Ext.Button({
    text: 'Say Hi',
    renderTo: Ext.getBody(),
    handler: sayHi.createCallback('Fred')
});
参数项：
  • None.
返回值：
  • Function
    新产生的函数。The new function
Function
createDelegate( Object obj, Array args, Boolean/Number appendArgs ) : Function
创建一个委派对象（就是回调），该对象的作用域指向obj。对于任何函数来...
创建一个委派对象（就是回调），该对象的作用域指向obj。对于任何函数来说都是可以直接调用的。例如：this.myFunction.createDelegate(this) 将创建一个函数，该函数的作用域会自动指向this。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']));
参数项：
  • obj : Object
    （可选的） 自定义的作用域对象。(optional) The object for which the scope is set
  • args : Array
    （可选的） 覆盖该次调用的参数列表。（默认为该函数的arguments）。(optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
  • appendArgs : Boolean/Number
    （可选的） 如果该参数为true，将args加载到该函数的后面，如果该参数为数字类型，则args将插入到所指定的位置。(optional) if True args are appended to call args instead of overriding, if a number the args are inserted at the specified position
返回值：
  • Function
    新产生的函数。The new function
Function
defer( Number millis, Object obj, Array args, Boolean/Number appendArgs ) : Number
延迟调用该函数。你可以加入一个作用域的参数，例如： Calls thi...
延迟调用该函数。你可以加入一个作用域的参数，例如： Calls this function after the number of millseconds specified, optionally in a specific scope. Example usage:

var sayHi = function(name){
    alert('Hi, ' + name);
}

//即刻执行的：
sayHi('Fred');

// 两秒过后执行的：
sayHi.defer(2000, this, ['Fred']);

// 有时候加上一个匿名函数也是很方便的：this syntax is sometimes useful for deferring
// execution of an anonymous function:
(function(){
    alert('Anonymous');
}).defer(100);
参数项：
  • millis : Number
    延迟时间，以毫秒为单位（如果是0则立即执行）。The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
  • obj : Object
    （可选的） fcn的作用域（默认指向原函数或window）。(optional) The object for which the scope is set
  • args : Array
    （可选的） 覆盖原函数的参数列表（默认为该函数的arguments）。(optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
  • appendArgs : Boolean/Number
    （可选的）如果该参数为true，将args加载到该函数的后面，如果该参数为数字类型，则args将插入到所指定的位置。(optional) if True args are appended to call args instead of overriding,if a number the args are inserted at the specified position
返回值：
  • Number
    可被clearTimeout所使用的timeout id。The timeout id that can be used with clearTimeout
Function
createSequence( Function fcn, Object scope ) : Function
创建一个组合函数，调用次序为：原函数 + 参数中的函数。该函数返回了原...
创建一个组合函数，调用次序为：原函数 + 参数中的函数。该函数返回了原函数执行的结果（也就是返回了原函数的返回值）。在参数中传递的函数fcn，它的参数也是原函数的参数。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'); // 提示 "Hi, Fred"

var sayGoodbye = sayHi.createSequence(function(name){
    alert('Bye, ' + name);
});

sayGoodbye('Fred'); // both alerts show
参数项：
  • fcn : Function
    将要进行组合的函数。The function to sequence
  • scope : Object
    （可选的）fcn的作用域（默认指向原函数或window）。(optional) The scope of the passed fcn (Defaults to scope of original function or window)
返回值：
  • Function
    新产生的函数。The new function
Function
createInterceptor( Function fcn, Object scope ) : Function
创建一个拦截器函数。传递的参数fcn被原函数之前调用。如果fcn的返回...
创建一个拦截器函数。传递的参数fcn被原函数之前调用。如果fcn的返回值为false，则原函数不会被调用。在返回函数中，将返回原函数的返回值。参数fcn会被调用，fcn被调用时会被传入原函数的参数。Creates an interceptor function. The passed fcn 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 fcn is called with the parameters of the original function. 例如：Example usage:

var sayHi = function(name){
    alert('Hi, ' + name);
}

sayHi('Fred'); // 提示"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');  // 没提示
sayHiToFriend('Brian'); // 提示 "Hi, Brian"
参数项：
  • fcn : Function
    在原函数被调用前调用的函数。The function to call before the original
  • scope : Object
    （可选的）fcn的作用域（默认指向原函数或window）。(optional) The scope of the passed fcn (Defaults to scope of original function or window)
返回值：
  • Function
    新产生的函数。The new function
Function

公共事件

这个类没有公告事件。


类Number

包： |
定义的文件： | Ext.js
类全称： | Number
继承自于： | Object

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
constrain( Number min, Number max ) : Number
否则返回超出那个范围边界的值（最大，最小）。若数字是在范围内的就返回数...
否则返回超出那个范围边界的值（最大，最小）。若数字是在范围内的就返回数字，否则最小或最大的极限值，那个极限值取决于数字是倾向那一面（最大、最小）。注意返回的极限值并不会影响当前的值。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.
参数项：
  • min : Number
    范围中最小的极限值。The minimum number in the range
  • max : Number
    范围中最大的极限值。The maximum number in the range
返回值：
  • Number
    若在范围内，返回原值，否则返回超出那个范围边界的值。The constrained value if outside the range, otherwise the current value
Number

公共事件

这个类没有公告事件。


类String

包： |
定义的文件： | Ext.js
类全称： | String
继承自于： | Object
为JavaScript的String对象添加静态方法。These functions are available as static methods on the JavaScript String object.

配置项

这个类没有配置项。

公告属性

这个类没有公告属性。

公共方法

方法 定义者
escape( String string ) : String
把输入的' 与 \字符转义。Escapes the passed st...
把输入的' 与 \字符转义。Escapes the passed string for ' and \
参数项：
  • string : String
    要转义的字符。
返回值：
  • String
    以转义的字符。The escaped string @static
String
leftPad( String string, Number size, String char ) : String
在字符串左边填充指定字符。这对于统一字符或日期标准格式非常有用。Pad...
在字符串左边填充指定字符。这对于统一字符或日期标准格式非常有用。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 现在是：'00123's now contains the string: '00123'
参数项：
  • string : String
    源字符串。The original string
  • size : Number
    源+填充字符串的总长度。The total length of the output string
  • char : String
    （可选的） 填充字符串（默认是" "）。(optional) The character with which to pad the original string (defaults to empty string " ")
返回值：
  • String
    填充后的字符串。The padded string @static
String
format( String string, String value1, String value2 ) : String
定义带标记的字符串，并用传入的字符替换标记。每个标记必须是唯一的，而且...
定义带标记的字符串，并用传入的字符替换标记。每个标记必须是唯一的，而且必须要像{0},{1}...{n}这样地自增长。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现在是字符串：s now contains the string: '<div class="my-class">Some text</div>'
参数项：
  • string : String
    带标记的字符串。The tokenized string to be formatted
  • value1 : String
    第一个值，替换{0}。The value to replace token {0}
  • value2 : String
    第二个值，替换{1}...等等（可以有任意多个）。Etc...
返回值：
  • String
    转化过的字符串。The formatted string @static
String
toggle( String value, String other ) : String
比较并交换字符串的值。参数中的第一个值与当前字符串对象比较，如果相等则...
比较并交换字符串的值。参数中的第一个值与当前字符串对象比较，如果相等则返回传入的第一个参数，否则返回第二个参数。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');
参数项：
  • value : String
    第一个参数，与函数相等则返回。The value to compare to the current string
  • other : String
    传入的第二个参数，不等返回。The new value to use if the string already equals the first value passed in
返回值：
  • String
    新值。The new value
String
trim() : String
裁剪字符串两旁的空白符，保留中间空白符，例如： Trims white...
裁剪字符串两旁的空白符，保留中间空白符，例如： 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-"
参数项：
  • None.
返回值：
  • String
    已裁剪的字符串。The trimmed string
String

公共事件

这个类没有公告事件。


类类

包： |
定义的文件： | Action.js
类全称： | 类
继承自于： | Ext.form.Action

Ext.form.BasicForm处理从服务器加载数据到的字段的类。A class which handles loading of data from a server into the Fields of an Ext.form.BasicForm.

该类的实例仅在Form表单加载的时候才被创建。Instances of this class are only created by a Form。when loading.

相应数据包必须包含一个boolean类型的success属性，和data属性。data属性包含了表单字段要加载的数据。每个值对象被传递到字段的setValue方法里。A response packet must contain a boolean success property, and a data property. The data property contains the values of Fields to load. The individual value object for each Field is passed to the Field's setValue method.

默认情况下，相应数据包会被认为是一个JSON对象，所以典型的相应数据包看起来是这样的: By default, response packets are assumed to be JSON, so a typical response packet may look like this:

{
    success: true,
    data: {
        clientName: "Fred. Olsen Lines",
        portOfLoading: "FXT",
        portOfDischarge: "OSL"
    }
}

其他的数据可以由Form的回调函数甚至是事件处理函数置入response对象进行处理。解码的JSON对象在result属性里。Other data may be placed into the response for processing the Form's callback or event handler methods. The object decoded from this JSON is available in the result property.

配置项

配置项 定义者
url : String
调用的URL资源。The URL that the Action is...
调用的URL资源。The URL that the Action is to invoke.
Action
reset : Boolean
当设置为true的时候，导致表单重置reset 如果指定了该值，re...
当设置为true的时候，导致表单重置reset 如果指定了该值，reset将在表单的success 回调函数前和actioncomplete事件被激发前执行。When set to true, causes the Form to be reset on Action success. If specified, this happens before the success callback is called and before the Form's actioncomplete event fires.
Action
method : String
获取请求的URL的HTTP方法。默认为Ext.form.BasicFo...
获取请求的URL的HTTP方法。默认为Ext.form.BasicForm的方法。如果没有指定，使用DOM表单的方法。The HTTP method to use to access the requested URL. Defaults to the Ext.form.BasicForm's method, or if that is not specified, the underlying DOM form's method.
Action
params : Mixed
传递到额外值。它们添加到表单的Ext.form.BasicFormba...
传递到额外值。它们添加到表单的Ext.form.BasicFormbaseParams由表单的输入字段传递到指定的URL。Extra parameter values to pass. These are added to the Form's Ext.form.BasicFormbaseParams and passed to the specified URL along with the Form's input fields.
Action
timeout : Number
在服务端返回CONNECT_FAILURE这样的failureType...
在服务端返回CONNECT_FAILURE这样的failureType之前等待的毫秒数。The number of milliseconds to wait for a server response before failing with the failureType as Action.CONNECT_FAILURE.
Action
success : Function
当接收到一个有效的成功返回的数据包的时候调用的回调函数。这个函数传递以...
当接收到一个有效的成功返回的数据包的时候调用的回调函数。这个函数传递以下的参数: 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
    Action类。该对象的result属性可能被检查，用来执行自定义的后期处理。The Action class. The result property of this object may be examined to perform custom postprocessing.
 Action
failure : Function
当接收到一个返回失败的数据包或者在Ajax通信时发生错误调用的回调函数...
当接收到一个返回失败的数据包或者在Ajax通信时发生错误调用的回调函数。这个函数传递以下的参数: 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
    Action类。如果发生了Ajax异常，错误类型会在failureType里。该对象的result属性可能被检查，用来执行自定义的后期处理。The Action class. If an Ajax error ocurred, the failure type will be in failureType. The result property of this object may be examined to perform custom postprocessing.
 Action
scope : Object
回调函数执行的范围。指改回调函数的this。The scope in ...
回调函数执行的范围。指改回调函数的this。The scope in which to call the callback functions (The this reference for the callback functions).
Action
waitMsg : String
在调用一个action的处理过程中调用Ext.MessageBoxwa...
在调用一个action的处理过程中调用Ext.MessageBoxwait显示的内容。The message to be displayed by a call to Ext.MessageBoxwait during the time the action is being processed.
Action
waitTitle : String
在调用一个action的处理过程中调用Ext.MessageBoxwa...
在调用一个action的处理过程中调用Ext.MessageBoxwait显示的标题。The title to be displayed by a call to Ext.MessageBoxwait during the time the action is being processed.
Action

公告属性

属性 |  | 定义者
 | : {String} 改Action的实例执行的action类型。目前仅支持“提交”和“加... 改Action的实例执行的action类型。目前仅支持“提交”和“加载”。The type of action this Action instance performs.Currently only "submit" and "load" are supported. | Action
 | failureType: {String} 错误检查类型。可参阅{@link link Ext.form.Act... 错误检查类型。可参阅{@link link Ext.form.Action#Action.CLIENT_INVALID CLIENT_INVALID}、 {@link link Ext.form.Action#Action.SERVER_INVALID SERVER_INVALID}、 Ext.form.ActionAction.CONNECT_FAILURE CONNECT_FAILURE、LOAD_FAILURE。The type of failure detected. See {@link link Ext.form.Action#Action.CLIENT_INVALID CLIENT_INVALID}, {@link link Ext.form.Action#Action.SERVER_INVALID SERVER_INVALID}, Ext.form.ActionAction.CONNECT_FAILURE CONNECT_FAILURE, LOAD_FAILURE | Action
 | response: {Object} 用来执行action的XMLHttpRequest对象。The XM... 用来执行action的XMLHttpRequest对象。The XMLHttpRequest object used to perform the action. | Action
 | result: {Object} 解码了的response对象包含一个boolean类型的succes... 解码了的response对象包含一个boolean类型的success属性和一些action的属性。The decoded response object containing a boolean success property and other, action-specific properties. | Action

公共方法

方法 定义者
Load()
参数项：
  • None.
返回值：
  • void
类

公共事件

这个类没有公告事件。


2006-11-21 jvs:
ext-all.css contains all of the other css files combined and stripped of comments (except themes).


The source code

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        layout:'absolute',
        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
        }]
    });

    var window = new Ext.Window({
        title: 'Resize Me',
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: form,

        buttons: [{
            text: 'Send'
        },{
            text: 'Cancel'
        }]
    });

    window.show();
});


The source code

/**
 * @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',

    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

/**
 * @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 = function(){
    this.locked = false;
    Ext.grid.AbstractSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.grid.AbstractSelectionModel, Ext.util.Observable,  {

/**
     * The GridPanel for which this SelectionModel is handling selection. Read-only.
     * @type Object
     * @property grid
     */

    /** @ignore Called by the grid automatically. Do not call directly. */
    init : function(grid){
        this.grid = grid;
        this.initEvents();
    },

/**
     * Locks the selections.
     */
    lock : function(){
        this.locked = true;
    },

/**
     * Unlocks the selections.
     */
    unlock : function(){
        this.locked = false;
    },

/**
     * Returns true if the selections are locked.
     * @return {Boolean}
     */
    isLocked : function(){
        return this.locked;
    },

    destroy: function(){
        this.purgeListeners();
    }
});


The source code

/**
 * @class Ext.layout.AccordionLayout
 * @extends Ext.layout.FitLayout
 *
This is a layout that contains multiple panels in an expandable accordion style such that only
 * one panel can be open at any given time.  Each panel has built-in support for expanding and collapsing.
 *
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,

    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.activeItem = c;
        }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);
    },

    // 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.activeItem = p;
        if(this.activeOnTop){
            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
        }
        this.layout();
    },

    // private
    setItemSize : function(item, size){
        if(this.fill && item){
            var hh = 0;
            this.container.items.each(function(p){
                if(p != item){
                    hh += p.header.getHeight();
                }
            });
            size.height -= hh;
            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){
        item = this.container.getComponent(item);
        if(this.activeItem != item){
            if(item.rendered && item.collapsed){
                item.expand();
            }else{
                this.activeItem = item;
            }
        }

    }
});
Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;

//backwards compat
Ext.layout.Accordion = Ext.layout.AccordionLayout;


The source code

/**
 * @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.
 */

/**
 * 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;
        var method = this.getMethod();
        var isGet = method == 'GET';
        if(o.clientValidation === false || this.form.isValid()){
            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
            }));
        }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 submit a form through Ext.Direct.
 *

var myFormPanel = new Ext.form.FormPanel({
    // configs for FormPanel
    title: 'Basic Information',
    border: false,
    padding: 10,
    buttons:[{
        text: 'Submit',
        handler: function(){
            basicInfo.getForm().submit({
                params: {
                    uid: 5
                }
            });
        }
    }],

    // configs apply to child items
    defaults: {anchor: '100%'},
    defaultType: 'textfield',
    items: [
        // form fields go here
    ],

    // configs for BasicForm
    api: {
        load: Profile.getBasicInfo,
        // The server-side must mark the submit handler as a 'formHandler'
        submit: Profile.updateBasicInfo
    },
    paramOrder: ['uid']
});

// load the form
myFormPanel.getForm().load({
    params: {
        uid: 5
    }
});
 *

 */
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;
    }
});

/**
 * @class Ext.form.Action.DirectSubmit
 * @extends Ext.form.Action.Submit
 * Provides Ext.direct support for submitting form data.
 * See {@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;
    }
});

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

/**
 * @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 = function(config){
    this.initialConfig = config;
    this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
    this.items = [];
}

Ext.Action.prototype = {

/**
     * @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 in which the {@link #handler} function will execute.
     */

    // 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 in which the function will execute
     */
    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 in which the function will execute
     */
    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

Ext.onReady(function(){
    // The action
    var action = new Ext.Action({
        text: 'Action 1',
        handler: function(){
            Ext.example.msg('Click','You clicked on "Action 1".');
        },
        iconCls: 'blist'
    });

    var panel = new Ext.Panel({
        title: 'Actions',
        width:600,
        height:300,
        bodyStyle: 'padding:10px;',     // lazy inline style

        tbar: [
            action, {                   // <-- Add the action directly to a toolbar
                text: 'Action Menu',
                menu: [action]          // <-- Add the action directly to a menu
            }
        ],

        items: [
           new Ext.Button(action)       // <-- Add the action as a button
        ],

        renderTo: Ext.getBody()
    });

    var tb = panel.getTopToolbar();
    // Buttons added to the toolbar of the Panel above
    // to test/demo doing group operations with an action
    tb.add('->', {
        text: 'Disable',
        handler: function(){
            action.setDisabled(!action.isDisabled());
            this.setText(action.isDisabled() ? 'Enable' : 'Disable');
        }
    }, {
        text: 'Change Text',
        handler: function(){
            Ext.Msg.prompt('Enter Text', 'Enter new text for Action 1:', function(btn, text){
                if(btn == 'ok' && text){
                    action.setText(text);
                    action.setHandler(function(){
                        Ext.example.msg('Click','You clicked on "'+text+'".');
                    });
                }
            });
        }
    }, {
        text: 'Change Icon',
        handler: function(){
            action.setIconClass(action.getIconClass() == 'blist' ? 'bmenu' : 'blist');
        }
    });
    tb.doLayout();
});


The source code

// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    },

    password : function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },

    passwordText : 'Passwords do not match'
});

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

        /*
         * ================  Date Range  =======================
         */

    var dr = new Ext.FormPanel({
      labelWidth: 125,
      frame: true,
      title: 'Date Range',
      bodyStyle:'padding:5px 5px 0',
      width: 350,
      defaults: {width: 175},
      defaultType: 'datefield',
      items: [{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
      },{
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
      }]
    });

    dr.render('dr');

    /*
     * ================  Password Verification =======================
     */

    var pwd = new Ext.FormPanel({
      labelWidth: 125,
      frame: true,
      title: 'Password Verification',
      bodyStyle:'padding:5px 5px 0',
      width: 350,
      defaults: {
        width: 175,
        inputType: 'password'
      },
      defaultType: 'textfield',
      items: [{
        fieldLabel: 'Password',
        name: 'pass',
        id: 'pass'
      },{
        fieldLabel: 'Confirm Password',
        name: 'pass-cfrm',
        vtype: 'password',
        initialPassField: 'pass' // id of the initial password field
      }]
    });

    pwd.render('pw');
});


The source code

/* AIRAliases.js - Revision: 0.15 */

// Copyright (c) 2007. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

var air;
if (window.runtime)
{
    if (!air) air = {};
    // functions
    air.trace = window.runtime.trace;
    air.navigateToURL = window.runtime.flash.net.navigateToURL;
    air.sendToURL = window.runtime.flash.net.sendToURL;

    // file
    air.File = window.runtime.flash.filesystem.File;
    air.FileStream = window.runtime.flash.filesystem.FileStream;
    air.FileMode = window.runtime.flash.filesystem.FileMode;

    // events
    air.AsyncErrorEvent = window.runtime.flash.events.AsyncErrorEvent;
    air.DataEvent = window.runtime.flash.events.DataEvent;
    air.DRMAuthenticateEvent = window.runtime.flash.events.DRMAuthenticateEvent;
    air.DRMStatusEvent = window.runtime.flash.events.DRMStatusEvent;
    air.Event = window.runtime.flash.events.Event;
    air.EventDispatcher = window.runtime.flash.events.EventDispatcher;
    air.FileListEvent = window.runtime.flash.events.FileListEvent;
    air.HTTPStatusEvent = window.runtime.flash.events.HTTPStatusEvent;
    air.IOErrorEvent = window.runtime.flash.events.IOErrorEvent;
    air.InvokeEvent = window.runtime.flash.events.InvokeEvent;
    air.NetStatusEvent = window.runtime.flash.events.NetStatusEvent;
    air.OutputProgressEvent = window.runtime.flash.events.OutputProgressEvent;
    air.ProgressEvent = window.runtime.flash.events.ProgressEvent;
    air.SecurityErrorEvent = window.runtime.flash.events.SecurityErrorEvent;
    air.StatusEvent = window.runtime.flash.events.StatusEvent;
    air.TimerEvent = window.runtime.flash.events.TimerEvent;
    air.NativeDragEvent = window.runtime.flash.events.NativeDragEvent;
    air.ActivityEvent = window.runtime.flash.events.ActivityEvent;
    air.KeyboardEvent = window.runtime.flash.events.KeyboardEvent;
    air.MouseEvent = window.runtime.flash.events.MouseEvent;

    // native window
    air.NativeWindow = window.runtime.flash.display.NativeWindow;
    air.NativeWindowDisplayState = window.runtime.flash.display.NativeWindowDisplayState;
    air.NativeWindowInitOptions = window.runtime.flash.display.NativeWindowInitOptions;
    air.NativeWindowSystemChrome = window.runtime.flash.display.NativeWindowSystemChrome;
    air.NativeWindowResize = window.runtime.flash.display.NativeWindowResize;
    air.NativeWindowType = window.runtime.flash.display.NativeWindowType;

    air.NativeWindowBoundsEvent = window.runtime.flash.events.NativeWindowBoundsEvent;
    air.NativeWindowDisplayStateEvent = window.runtime.flash.events.NativeWindowDisplayStateEvent;

    // geom
    air.Point = window.runtime.flash.geom.Point;
    air.Rectangle = window.runtime.flash.geom.Rectangle;
    air.Matrix = window.runtime.flash.geom.Matrix;

    // net
    air.FileFilter = window.runtime.flash.net.FileFilter;

    air.LocalConnection = window.runtime.flash.net.LocalConnection;
    air.NetConnection = window.runtime.flash.net.NetConnection;

    air.URLLoader = window.runtime.flash.net.URLLoader;
    air.URLLoaderDataFormat = window.runtime.flash.net.URLLoaderDataFormat;
    air.URLRequest = window.runtime.flash.net.URLRequest;
    air.URLRequestDefaults = window.runtime.flash.net.URLRequestDefaults;
    air.URLRequestHeader = window.runtime.flash.net.URLRequestHeader;
    air.URLRequestMethod = window.runtime.flash.net.URLRequestMethod;
    air.URLStream = window.runtime.flash.net.URLStream;
    air.URLVariables = window.runtime.flash.net.URLVariables;
    air.Socket = window.runtime.flash.net.Socket;
    air.XMLSocket = window.runtime.flash.net.XMLSocket;

    air.Responder = window.runtime.flash.net.Responder;
    air.ObjectEncoding = window.runtime.flash.net.ObjectEncoding;

    air.NetStream = window.runtime.flash.net.NetStream;
    air.SharedObject = window.runtime.flash.net.SharedObject;
    air.SharedObjectFlushStatus = window.runtime.flash.net.SharedObjectFlushStatus;

    // system
    air.Capabilities = window.runtime.flash.system.Capabilities;
    air.System = window.runtime.flash.system.System;
    air.Security = window.runtime.flash.system.Security;
    air.Updater = window.runtime.flash.desktop.Updater;

    air.LoaderContext = window.runtime.flash.system.LoaderContext;
    air.ApplicationDomain = window.runtime.flash.system.ApplicationDomain;

    // desktop
    air.Clipboard = window.runtime.flash.desktop.Clipboard;
    air.ClipboardFormats = window.runtime.flash.desktop.ClipboardFormats;
    air.ClipboardTransferMode = window.runtime.flash.desktop.ClipboardTransferMode;

    air.NativeDragManager = window.runtime.flash.desktop.NativeDragManager;
    air.NativeDragOptions = window.runtime.flash.desktop.NativeDragOptions;
    air.NativeDragActions = window.runtime.flash.desktop.NativeDragActions;

    air.Icon = window.runtime.flash.desktop.Icon;
    air.DockIcon = window.runtime.flash.desktop.DockIcon;
    air.InteractiveIcon = window.runtime.flash.desktop.InteractiveIcon;
    air.NotificationType = window.runtime.flash.desktop.NotificationType;
    air.SystemTrayIcon = window.runtime.flash.desktop.SystemTrayIcon;

    air.NativeApplication = window.runtime.flash.desktop.NativeApplication;

    // display
    air.NativeMenu = window.runtime.flash.display.NativeMenu;
    air.NativeMenuItem = window.runtime.flash.display.NativeMenuItem;
    air.Screen = window.runtime.flash.display.Screen;

    air.Loader  = window.runtime.flash.display.Loader;
    air.Bitmap = window.runtime.flash.display.Bitmap;
    air.BitmapData = window.runtime.flash.display.BitmapData;

    // ui
    air.Keyboard = window.runtime.flash.ui.Keyboard;
    air.KeyEquivalent = window.runtime.flash.ui.KeyEquivalent;
    air.Mouse = window.runtime.flash.ui.Mouse;

    // utils
    air.ByteArray = window.runtime.flash.utils.ByteArray;
    air.CompressionAlgorithm = window.runtime.flash.utils.CompressionAlgorithm;
    air.Endian = window.runtime.flash.utils.Endian;
    air.Timer = window.runtime.flash.utils.Timer;
    air.XMLSignatureValidator = window.runtime.flash.security.XMLSignatureValidator;

    air.HTMLLoader = window.runtime.flash.html.HTMLLoader;

    // media
    air.ID3Info = window.runtime.flash.media.ID3Info;
    air.Sound = window.runtime.flash.media.Sound;
    air.SoundChannel = window.runtime.flash.media.SoundChannel;
    air.SoundLoaderContext = window.runtime.flash.media.SoundLoaderContext;
    air.SoundMixer = window.runtime.flash.media.SoundMixer;
    air.SoundTransform = window.runtime.flash.media.SoundTransform;
    air.Microphone = window.runtime.flash.media.Microphone;
    air.Video = window.runtime.flash.media.Video;
    air.Camera = window.runtime.flash.media.Camera;

    // data
    air.EncryptedLocalStore = window.runtime.flash.data.EncryptedLocalStore;
    air.SQLCollationType = window.runtime.flash.data.SQLCollationType;
    air.SQLColumnNameStyle = window.runtime.flash.data.SQLColumnNameStyle;
    air.SQLColumnSchema = window.runtime.flash.data.SQLColumnSchema;
    air.SQLConnection = window.runtime.flash.data.SQLConnection;
    air.SQLError = window.runtime.flash.errors.SQLError;
    air.SQLErrorEvent = window.runtime.flash.events.SQLErrorEvent;
    air.SQLErrorOperation = window.runtime.flash.errors.SQLErrorOperation;
    air.SQLEvent = window.runtime.flash.events.SQLEvent;
    air.SQLIndexSchema = window.runtime.flash.data.SQLIndexSchema;
    air.SQLMode = window.runtime.flash.data.SQLMode;
    air.SQLResult = window.runtime.flash.data.SQLResult;
    air.SQLSchema = window.runtime.flash.data.SQLSchema;
    air.SQLSchemaResult = window.runtime.flash.data.SQLSchemaResult;
    air.SQLStatement = window.runtime.flash.data.SQLStatement;
    air.SQLTableSchema = window.runtime.flash.data.SQLTableSchema;
    air.SQLTransactionLockType = window.runtime.flash.data.SQLTransactionLockType;
    air.SQLTriggerSchema = window.runtime.flash.data.SQLTriggerSchema;
    air.SQLUpdateEvent = window.runtime.flash.events.SQLUpdateEvent;
    air.SQLViewSchema = window.runtime.flash.data.SQLViewSchema;

    // service monitoring framework
    air.__defineGetter__("ServiceMonitor", function() { return window.runtime.air.net.ServiceMonitor; })
    air.__defineGetter__("SocketMonitor", function() { return window.runtime.air.net.SocketMonitor; })
    air.__defineGetter__("URLMonitor", function() { return window.runtime.air.net.URLMonitor; })
}


The source code

 Ext.sql.AirConnection = Ext.extend(Ext.sql.Connection, {
    // abstract methods
    open : function(db){
        this.conn = new air.SQLConnection();
        var file = air.File.applicationDirectory.resolvePath(db);
        this.conn.open(file);
        this.openState = true;
        this.fireEvent('open', this);
    },

    close : function(){
        this.conn.close();
        this.fireEvent('close', this);
    },

    createStatement : function(type){
        var stmt = new air.SQLStatement();
        stmt.sqlConnection = this.conn;
        return stmt;
    },

    exec : function(sql){
        var stmt = this.createStatement('exec');
        stmt.text = sql;
        stmt.execute();
    },

    execBy : function(sql, args){
        var stmt = this.createStatement('exec');
        stmt.text = sql;
        this.addParams(stmt, args);
        stmt.execute();
    },

    query : function(sql){
        var stmt = this.createStatement('query');
        stmt.text = sql;
        stmt.execute(this.maxResults);
        return this.readResults(stmt.getResult());
    },

    queryBy : function(sql, args){
        var stmt = this.createStatement('query');
        stmt.text = sql;
        this.addParams(stmt, args);
        stmt.execute(this.maxResults);
        return this.readResults(stmt.getResult());
    },

    addParams : function(stmt, args){
        if(!args){ return; }
        for(var key in args){
            if(args.hasOwnProperty(key)){
                if(!isNaN(key)){
                    var v = args[key];
                    if(Ext.isDate(v)){
                        v = v.format(Ext.sql.Proxy.DATE_FORMAT);
                    }
                    stmt.parameters[parseInt(key)] = v;
                }else{
                    stmt.parameters[':' + key] = args[key];
                }
            }
        }
        return stmt;
    },

    readResults : function(rs){
        var r = [];
        if(rs && rs.data){
            var len = rs.data.length;
            for(var i = 0; i < len; i++) {
                r[r.length] = rs.data[i];
            }
        }
        return r;
    }
});


The source code

/* AIRIntrospector.js - Revision: 0.15.88 */

// Copyright 2007-2008. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

var air;

(function(){

if(typeof air=='undefined') air = {};
air.Introspector = {};

// Check the runtime.
if(typeof window.runtime!='undefined' && typeof window.nativeWindow!='undefined')
    var isAppSandbox = true;
else
    var isAppSandbox = false;

//=======================================================================================================================================================
//Introspector.js
//=======================================================================================================================================================

//----------------------------------------------------------------------------------------------------

/**
*	@API air.Introspector.Console
*	@description Exposes log, warn, info, error, dump to the user
*	THIS IS THE ONLY SUPPORTED APIs
*/

air.Introspector.Console = {
         log: function(){
               air.Introspector.logArguments(arguments,
                     {htmlLoader:isAppSandbox?window.htmlLoader:null});
         },

         warn : function(){
                air.Introspector.logArguments(arguments,
                         {htmlLoader:isAppSandbox?window.htmlLoader:null, type:'warn'});
         },

         info : function(){
                air.Introspector.logArguments(arguments,
                         {htmlLoader:isAppSandbox?window.htmlLoader:null, type:'info'});
         },

         error : function(){
                air.Introspector.logArguments(arguments,
                         {htmlLoader:isAppSandbox?window.htmlLoader:null, type:'error'});
         },
         dump : function(obj, level){
            air.Introspector.logArguments(air.Introspector.dump(obj, level),
                     {htmlLoader: isAppSandbox?window.htmlLoader:null, usePre:true});
         }
};

//----------------------------------------------------------------------------------------------------

air.Introspector.config = {
    showTimestamp: true,						//Make the console show time stamps before each line
    showSender: true,							//Make the console show time stamps
    wrapColumns: 2000,							//Source files are soft-wrapped at around 2000 columns by default
    flashTabLabels: true,						//Console and xhr columns can flash whenever something happend to them (eg. logged something). You can turn it off
                                                //by setting this to false
    closeIntrospectorOnExit: true,				//Makes the inspector window close when the last window closed
    debugRuntimeObjects: true,					//Also expand ActionScript objects
    introspectorKey:122,						//Inspect key - by default it is F11 (122)
    debuggerKey:123, 							//Toggle inspectors visibility - by default it is F12 (123)
    useAirDebugHtml: false,						//Internal only
};

/**
*	@module air.Introspector
*/

air.Introspector.extend = function(dst, src){
    //Take every property from src and put it in dst
    for(var i in src){
        dst[i]=src[i];
    }
};

//	Checking if the user has configured Introspector using global AIRIntrospectorConfig variable
if(typeof AIRIntrospectorConfig!='undefined'){
    air.Introspector.extend(air.Introspector.config, AIRIntrospectorConfig);
}

var eventListeners = [];

//	Can not expand ActionScript objects from remote sandbox - we can not even access ActionScript from there
//	just disabled this feature
if(!isAppSandbox) air.Introspector.config.debugRuntimeObjects = false;

//	Made this use g/setters in order to make it easy to send its value over the bridge
air.Introspector.__defineGetter__('inspect', function(){
    return air.Introspector._inspect;
});

air.Introspector.__defineSetter__('inspect', function(value){
    air.Introspector._inspect=value;
    if(!isAppSandbox){
        setTimeout(function(){
            air.Introspector.noBridge(function(){
                parentSandboxBridge.air_Introspector_setInspect(value);
            });
        }, 0);
    }else{
        if(!value){
            air.Introspector.hideHighlight();
        }
    }
});

air.Introspector.extend(air.Introspector, {

/**
    *	Makes it easier to acces runtime packages
    *	it makes sense only in the application sandbox
    */
    runtime: isAppSandbox?{
        HTMLLoader : window.runtime.flash.html.HTMLLoader,
        Event : window.runtime.flash.events.Event,
        IOErrorEvent: window.runtime.flash.events.IOErrorEvent,
        NativeApplication: window.runtime.flash.desktop.NativeApplication,
        URLLoader : window.runtime.flash.net.URLLoader,
        URLRequest : window.runtime.flash.net.URLRequest,
        NativeWindowInitOptions : window.runtime.flash.display.NativeWindowInitOptions,
        Capabilities: window.runtime.flash.system.Capabilities,
        trace : window.runtime.trace,
    }:null,

    _inspect: false,
    remoteInspect: false,
    canClick: false,

    bridgeCallbacks: [],

/**
    *	Different coloring styles for tag names, by default 'default' is used
    *	Undocumented feature
    *		- you can change the color of elements while inspecting by tag name, check bellow the body: 0x00CC00 line,
    *		  uncomment that line, duplicate and change it with your own colors
    */
    highlightBgColors: {
        'default': 0xFFCC00,
        //body: 0x00CC00,

    },

    /**
    *	@function trimRegExp
    *	@description Trims spaces from a string
    *	@private
    */
    trimRegExp: /^[\s\r\n]*([\s\S]*?)[\s\r\n]*$/g,
    trim:function(str){
        return str.replace(air.Introspector.trimRegExp, '$1');
    },

/**
    *	@function blockWrap
    *	@description Wraps a string by air.Introspector.config.wrapColumns columns
    */
    blockWrap: function(str){
        //used for spliting large lines in
        var cols = air.Introspector.config.wrapColumns;
        var lines = str.split(/\n/);
        var buffer = [];
        var l = lines.length;
        var lineNumbers = [];
        for(var i=0;icols){
                buffer.push(line.substr(0, cols));
                line = line.substr(cols);
                lineNumbers.push('');
            }
            buffer.push(line);
        }
        lineNumbers.push('EOF');
        return [buffer.join('\n'), lineNumbers.join('\n')];
    },

/**
    *	@function getTextFormat
    *	@description Returns a new flash TextField
    */
    createTextField: function(parentSprite, fontSize, fontBold) {
        if(isAppSandbox){
               var tf = new runtime.flash.text.TextField();
            tf.embedFonts = false;
            tf.autoSize = runtime.flash.text.TextFieldAutoSize.LEFT;
            tf.antiAliasType = runtime.flash.text.AntiAliasType.ADVANCED;
            tf.defaultTextFormat = air.Introspector.getTextFormat(fontSize, fontBold);
            tf.selectable = false;
            tf.mouseEnabled = true;
            tf.x = 4;
            tf.text = "";
            if(parentSprite.numChildren > 0) {
                var sibling = parentSprite.getChildAt(parentSprite.numChildren - 1);
                tf.y = sibling.y + sibling.height + 15;
            }
            parentSprite.addChild(tf);
            return tf;
        }else{
            //should not get here
            return null;
        }
    },

/**
    *	@function getTextFormat
    *	Returns a new flash TextFormat
    *	see createTextField
    */
    getTextFormat: function(fontSize, fontBold){
        if(isAppSandbox){
            var format = new runtime.flash.text.TextFormat();
            format.size = fontSize;
            format.font = "Tahoma";
            format.bold = fontBold;
            format.color = 0x330066;
            return format;
        }else{
            //should not get here
            return null;
        }
    },

/**
    *	@function extendRect
    *	@description Initializes the sprite with values from the rectangle
    */
    extendRect: function(sprite, rect){
        sprite.x = rect.x;
        sprite.y = rect.y;
        sprite.width = rect.width;
        sprite.height = rect.height;
        sprite.scaleX = rect.scaleX;
        sprite.scaleY = rect.scaleY;
    },

/**
    *	@function showHighlight
    *	@description Shows a highlighting flash sprite using coordinates from rectangle
    */
    showHighlight: function(rect){
        if(isAppSandbox){
            //dehilight everyone else
            var ownedWindows = air.Introspector.getHtmlWindows();
            for(var i=ownedWindows.length-1;i>=0;i--){
                    try{
                        ownedWindows[i].htmlLoader.window.air.Introspector.hideHighlight();
                    }catch(e){
                        //no air.Introspector
                    }
            }
            air.Introspector.extendRect(air.Introspector.highlightSprite, rect);
        }else{
            setTimeout(function(){
                air.Introspector.noBridge(function(){
                    parentSandboxBridge.air_Introspector_showHighlight(rect);
                });

            }, 0);

        }
    },

/**
    *	@function hideHighlight
    *	@description Make the higlight box go away
    */
    hideHighlight: function(){
        if(isAppSandbox){
            air.Introspector.extendRect(air.Introspector.highlightSprite, {x:0, y:0, width:0, height:0, scaleX:0, scaleY:0});
            air.Introspector.highlightText.visible = false;
        }else{
            setTimeout(function(){
                try{
                    parentSandboxBridge.air_Introspector_hideHighlight();
                }catch(e){
                        // no bridge yet
                    }
            }, 0);
        }
    },

/**
    *	@function remoteClick
    *	@description Make the remote sandbox know that the inspection finished
    */
    remoteClick: function(){
        air.Introspector.debugWindow.finishInspect(false);
        air.Introspector.hideHighlight();
    },

/**
    *	@function createHighlight
    *	@description 	Creates a flash sprite used to higlight elements
    *				    By using this method we are sure that no dom manipulation is done and
    *				    no style is changed in HTML.
    */
    createHighlight: function(){
        if(isAppSandbox){
            var sprite = new runtime.flash.display.Sprite();
            sprite.mouseEnabled =  false;
            sprite.width = 0;
            sprite.height = 0;
            sprite.buttonMode = true;
            var prevent = function(element, event, isClick){
                air.Introspector.addEventListener(element, event, function(e){
                    if((air.Introspector.inspect||air.Introspector.remoteInspect) &&sprite.hitTestPoint(e.stageX, e.stageY)){
                        e.preventDefault();
                        e.stopPropagation();
                        e.stopImmediatePropagation();
                           if(isClick&&air.Introspector.canClick){
                            if(air.Introspector.remoteInspect){
                                try{
                                    air.Introspector.inspectFrame.contentWindow.childSandboxBridge.air_Introspector_remoteClick();
                                }catch(e){ air.Introspector.noChildBridge(air.Introspector.inspectFrame); }
                            }else{
                                air.Introspector.debugWindow.finishInspect(false);
                                air.Introspector.hideHighlight();
                            }
                        }
                    }

                }, true, 2000000);
            };
            var check = function(element, event){
                air.Introspector.addEventListener(element, event, function(e){
                   if((air.Introspector.inspect||air.Introspector.remoteInspect)&&nativeWindow.active){
                        setTimeout(function(){
                            air.Introspector.canClick = true;
                        }, 100);
                   }
                }, true, 200000);
            }

            var labelMover = function(element, event){
                air.Introspector.addEventListener(element, event, function(e){
                   if((air.Introspector.inspect||air.Introspector.remoteInspect)){
                      air.Introspector.highlightText.x = e.stageX+15;
                      air.Introspector.highlightText.y = e.stageY+15;
//					  air.Introspector.highlightText.visible = true;
                   }else{

                      air.Introspector.highlightText.visible = false;
                   }
                }, true, 200000);
            }
           prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.CLICK, true);
           prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_DOWN);
           prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_UP);
           prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.DOUBLE_CLICK);
           check(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_MOVE);
           check(nativeWindow, runtime.flash.events.Event.ACTIVATE);
           labelMover(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_MOVE);
           window.htmlLoader.stage.addChild(sprite);
           air.Introspector.highlightSprite = sprite;

           air.Introspector.highlightText = new runtime.flash.display.Sprite();
           window.htmlLoader.stage.addChild(air.Introspector.highlightText);

           air.Introspector.highlightText.graphics.beginFill(0xeeeeee, 0.8);
           air.Introspector.highlightText.graphics.lineStyle(1, 0xeeeeee, 0.9, false);
           air.Introspector.highlightText.graphics.drawRect(0, 0, 250, 40);
           air.Introspector.highlightText.visible = false;
           air.Introspector.highlightLine1 = air.Introspector.createTextField(air.Introspector.highlightText, 16, true);
           air.Introspector.highlightLine2 = air.Introspector.createTextField(air.Introspector.highlightText, 10, false);
       }else{
            //should not be here
       }
    },

/**
    *	@function addEventListener
    *	@description Add a listener and stores it for future cleanup
    */
    addEventListener: function(obj, eventName, listener, capture, priority){
        eventListeners.push([obj, eventName, listener, capture]);
        obj.addEventListener(eventName, listener, capture, priority);
    },

/**
    *	@function removeEventListener
    *	@description Removes listener
    */
    removeEventListener: function(obj, eventName, listener, capture){
        for(var i=eventListeners.length-1;i>=0;i--){
            var l = eventListeners[i];
            if(l[0]==obj && l[1]==eventName && l[2]==listener && l[3]==capture)
                {
                    eventListeners.splice(i, 1);
                    break;
                }
        }
        obj.removeEventListener(eventName, listener, capture);
    },

/**
    *	@function drawRect
    *	@description Draw a rectangle using ActionScript, also use tagName to find out which color to use
    *	@see air.Introspector.highlightBgColors
    */
    drawRect: function (rect, tagName){
            var htmlLoaderBounds = htmlLoader.getBounds(htmlLoader.stage);
            rect.x += htmlLoaderBounds.x;
            rect.y += htmlLoaderBounds.y;
            rect.scaleX = 1;
            rect.scaleY = 1;
            air.Introspector.showHighlight(rect);
            air.Introspector.highlightSprite.graphics.clear();
            var bgColor = air.Introspector.highlightBgColors[tagName.toLowerCase()];
            if(typeof bgColor=='undefined')
                 bgColor = air.Introspector.highlightBgColors['default'];
            air.Introspector.highlightSprite.graphics.beginFill(bgColor, 0.2);
            air.Introspector.highlightSprite.graphics.lineStyle(3, bgColor, 0.9, false);
            air.Introspector.highlightSprite.graphics.drawRect(0, 0, rect.width, rect.height);
    },

/**
    *	@function highlightElement
    *	@description Highlight element e. Get its bounding box and send it directly or over the bridge to air.Introspector.drawRect
    *	@also air.Introspector.drawRect
    */
    highlightElement: function(e, callback){
        var rect = air.Introspector.getBorderBox(e);
           if(rect==false)
            return;

        if(isAppSandbox){
            air.Introspector.drawRect(rect, e.tagName);
        }else{
            setTimeout(function(){
                try{
                    if(!isNaN(rect.width)&&!isNaN(rect.x)){
                        air.Introspector.noBridge(function(){
                            parentSandboxBridge.air_Introspector_drawRect(rect, e.tagName);
                        });
                    }
                }catch(e){
                    air.Introspector.Console.error(e);
                }
                if(typeof callback!='undefined') callback();
            }, 0);
        }
    },

/**
    *	@function addKeyboardEvents
    *	@description 	Registers events on every window that includes AIRDebug.js.
    *
    *	By default F11 enables the inspect tool
    *			   F12 pops up the debug tool
    */
    addKeyboardEvents: function(sprite){
        air.Introspector.addEventListener(sprite, runtime.flash.events.KeyboardEvent.KEY_DOWN, function(e){
            if(e.keyCode==air.Introspector.config.introspectorKey){ //F11 key pressed
                if(typeof air.Introspector.lastElement!='undefined'&&(air.Introspector.lastElement.nodeName=='IFRAME'||air.Introspector.lastElement.nodeName=='FRAME')){
                    try{
                        var contentWindow = air.Introspector.lastElement.contentWindow;
                        if(typeof contentWindow.childSandboxBridge!='undefined'&&
                            typeof contentWindow.childSandboxBridge.air_Introspector_isDebugOpen!='undefined'&&
                            typeof contentWindow.childSandboxBridge.air_Introspector_toggleInspect!='undefined')
                        {
                            if(contentWindow.childSandboxBridge.air_Introspector_isDebugOpen()){
                                contentWindow.childSandboxBridge.air_Introspector_toggleInspect();
                                e.preventDefault();
                                e.stopPropagation();
                                return;
                            }
                        }
                    }catch(e){
                        //it looks like no debugger in that iframe. go ahead with app sandbox debugger
                    }
                }
                air.Introspector.init(false, true, function(){
                    air.Introspector.debugWindow.toggleInspect();
                });

                e.preventDefault();
                e.stopPropagation();
            }else if(e.keyCode==air.Introspector.config.debuggerKey){ //F12 key pressed
                air.Introspector.toggleWindow();
                e.preventDefault();
                e.stopPropagation();
            }else if(e.keyCode==27&&air.Introspector.inspect){
                air.Introspector.debugWindow.finishInspect();
                air.Introspector.hideHighlight();
                e.preventDefault();
                        e.stopPropagation();
            }else if(e.ctrlKey==true&&e.altKey==false){
                var tab = null;
                switch(e.keyCode){
                    case runtime.flash.ui.Keyboard.NUMBER_1:
                        tab = 0;
                    break;
                    case runtime.flash.ui.Keyboard.NUMBER_2:
                        tab = 1;
                    break;
                    case runtime.flash.ui.Keyboard.NUMBER_3:
                        tab = 2;
                    break;
                    case runtime.flash.ui.Keyboard.NUMBER_4:
                        tab = 3;
                    break;
                    case runtime.flash.ui.Keyboard.NUMBER_5:
                        tab = 4;
                    break;
                    case runtime.flash.ui.Keyboard.NUMBER_6:
                        tab = 5;
                    break;
                }
                if(tab!=null){
                        air.Introspector.init(false, true, function(){
                            air.Introspector.debugWindow.setTab(tab);
                        });
                        e.preventDefault();
                        e.stopPropagation();
                }
            }
        }, true, 1000000);
    },

/**
    *	@function showHighlightLabels
    *	@description Make the tooltip labels near the highlighting box appear and tell the id/tag name/outer HTML
    */
    showHighlightLabels: function(id, nodeName, outerHTML){
            if(typeof id!='undefined'&&id.length!=0){
                air.Introspector.highlightLine1.text = nodeName+' - '+id;
            }else{
                air.Introspector.highlightLine1.text = nodeName;
            }
            if(air.Introspector.canClick){
                air.Introspector.highlightLine2.text = outerHTML.substr(0, 40).replace(/\n/g, '\\n')+'...';
            }else{
                air.Introspector.highlightLine2.text = 'Click to activate window';
                window.clearTimeout(air.Introspector.clickToActivateTimeout);
                air.Introspector.clickToActivateTimeout = setTimeout(function(){
                    air.Introspector.highlightLine2.text = outerHTML.substr(0, 40).replace(/\n/g, '\\n')+'...';
                }, 400)
            }
            air.Introspector.highlightText.visible = true;
    },

/**
    *	@function registerUncaughtExceptionListener
    *	@description Catches all uncaught exceptions from javascript and shows them in the console
    */
    registerUncaughtExceptionListener: function(){

            air.Introspector.addEventListener(window.htmlLoader,
                    runtime.flash.events.HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION ,
                    function(e){
                        if(e.exceptionValue &&
                                e.exceptionValue.air_Introspector_setParentSandboxBridge == true &&
                                e.exceptionValue.air_Introspector_version == air.Introspector.version)
                            {
                                air.Introspector.registerFramesParentSandboxBridge();
                                e.preventDefault();
                                return;
                            }

                        air.Introspector.logError(e.exceptionValue, {htmlLoader:window.htmlLoader});
                        //	e.preventDefault();
                    });

    },

/**
    *	@function registerCloseEventListener
    *	@description
    */
    registerCloseEventListener: function(){
        air.Introspector.addEventListener(window.nativeWindow, air.Introspector.runtime.Event.CLOSE, function(){
                var debugWindow = air.Introspector.findDebugWindow();
                if(debugWindow!=null){
                    debugWindow.closedWindow(window.htmlLoader);
                }

            });

    },

/**
    *	@function registerCompleteEventLisener
    *	@description Make the Introspector window knwo that we are complete. Register parentSandboxBridge on every frame
    */
    registerCompleteEventListener: function(){
        air.Introspector.addEventListener(window.htmlLoader, air.Introspector.runtime.Event.COMPLETE, function(){
                    air.Introspector.removeEventListener(window.htmlLoader, air.Introspector.runtime.Event.COMPLETE, arguments.callee);
                    try{
                        //announce the debugWindow to refresh DOM and assets
                        var debugWindow = air.Introspector.findDebugWindow();
                        if(debugWindow!=null){
                            if(debugWindow.isLoaded){
                                debugWindow.completeWindow(window.htmlLoader);
                            }
                        }

                        air.Introspector.registerFramesParentSandboxBridge();
                    }catch(e){
                        runtime.trace(e);
                        runtime.trace(e.line);
                        air.Introspector.Console.log(e);
                    }
            });
    },

/**
    *	@function registerFramesParentSandboxBridge
    *	@description All frames should know about us - registering parentSandboxBridge
    */

    registerFramesParentSandboxBridge: function(){
            //var modified = false;
            var iframes = document.getElementsByTagName('iframe');
            for(var i=iframes.length-1;i>=0;i--){
                air.Introspector.registerFrame(iframes[i]);
            }

            var frames = document.getElementsByTagName('frame');
            for(var i=frames.length-1;i>=0;i--){
                air.Introspector.registerFrame(frames[i]);
            }
            //return modified;
    },

/**
    *	@function registerDeactivateEventLisener
    *	@description Hides the highlighting rectangle and deactivates inspect-clicking for this window
    */
    registerDeactivateEventListener: function(){
            air.Introspector.addEventListener(window.nativeWindow, air.Introspector.runtime.Event.DEACTIVATE, function(){ air.Introspector.hideHighlight(); air.Introspector.canClick =false; });
    },

/**
    *	@function registerChildSandboxBridge
    *	@description Register childSandboxBridge for current iframe
    */
    registerChildSandboxBridge: function(){

        if(typeof childSandboxBridge=='undefined')
            childSandboxBridge={};
            try{
        childSandboxBridge.air_Introspector_remoteClick = function (){
            try{
                air.Introspector.remoteClick();
            }catch(e){ alert(e+' '+e.line); }
        }

        childSandboxBridge.air_Introspector_isDebugOpen = function(){
            return typeof air.Introspector.debugWindow!='undefined';
        }

        childSandboxBridge.air_Introspector_toggleInspect = function (){
            air.Introspector.init(false, true, function()
            {
                   air.Introspector.debugWindow.toggleInspect();
            });
        }

        childSandboxBridge.air_Introspector_bridgeLoaded = function(){
            var l = air.Introspector.bridgeCallbacks;
            for(var i=0;i/**
    *	@function createOpenConsoleButton
    *	@description Creates a button on the top-right corent of the iframe that will open the introspector
    */
    createOpenConsoleButton: function(){
        var consoleButton = document.createElement('input');
        consoleButton.onclick = function(){
            air.Introspector.init(true, true, function(){ });
        }
        consoleButton.style.zIndex = 1000000;
        consoleButton.style.position = 'fixed';
        consoleButton.style.right = '10px';
        consoleButton.style.top = '10px';
        consoleButton.type = 'button';
        consoleButton.value = 'Open Introspector';
        document.body.appendChild(consoleButton);
    },

/**
    *	@function registerDOMEventListeners
    *	@description Registers DOMSubtreeModified, DOMCharacterDataModified, mouseover
    */
    registerDOMEventListeners: function(){
        var hoverTimeout = null;
        //debugWindow should know about any dom change
        document.addEventListener('DOMSubtreeModified', function(e){
            var debugWindow = air.Introspector.findDebugWindow();
            if(debugWindow!=null&&debugWindow.isLoaded){
                debugWindow.dom3Event(e);
            }
        });
        document.addEventListener('DOMCharacterDataModified', function(e){
            var debugWindow = air.Introspector.findDebugWindow();
            if(debugWindow!=null&&debugWindow.isLoaded){
                debugWindow.dom3Event(e);
            }
        });

           document.body.addEventListener('mouseover', function(e){
               if(air.Introspector.inspect){
                setTimeout(function(){
                    if(isAppSandbox){
                            if(!nativeWindow.active)
                                nativeWindow.activate();
                    }
                    if(e.srcElement){
                        if(isAppSandbox){
                            air.Introspector.highlightElement(e.srcElement);
                            air.Introspector.showHighlightLabels(e.srcElement.id, e.srcElement.nodeName, e.srcElement.outerHTML);
                        }else{
                            air.Introspector.highlightElement(e.srcElement, function(){
                                air.Introspector.noBridge(function(){
                                    parentSandboxBridge.air_Introspector_showHighlightLabels(e.srcElement.id, e.srcElement.nodeName, e.srcElement.outerHTML);
                                });
                            });
                        }
                        if(hoverTimeout) clearTimeout(hoverTimeout);
                        hoverTimeout = setTimeout(function(){
                            air.Introspector.init(false, true, function (){
                                air.Introspector.debugWindow.setInspectElement(e.srcElement);
                            });
                        }, 100);
                    }else{
                        air.Introspector.hideHighlight();
                    }
                }, 0);
             }else if(isAppSandbox){
                        air.Introspector.lastElement = e.srcElement;
             }

           }, true);

        //document.body.addEventListener('mouseout', function(e){
        //		air.Introspector.hideHighlight();
        //});
    },

/**
    *	@function cleanup
    *	@description Cleans up the html loader
    *
    */
    cleanup: function(){
            for(var i=eventListeners.length-1;i>=0;i--){
                var l = eventListeners[i];
                try{
                    l[0].removeEventListener(l[1], l[2], l[3]);
                }catch(e){}
            }
            eventListeners = [];
            try{
                window.htmlLoader.stage.removeChild(air.Introspector.highlightText);
            }catch(e){}
    },

/**
    *	@function register
    *	@description Registers current window in debugger
    *
    *	Captures every XHR object created and any uncaught exception
    *	and sends it to the debugger
    */
    register: function(){

        if (window.XMLHttpRequest && window.XMLHttpRequest.prototype){
                    window.XMLHttpRequest.prototype.debugopen = window.XMLHttpRequest.prototype.open;
                    window.XMLHttpRequest.prototype.debugsend = window.XMLHttpRequest.prototype.send;
                    window.XMLHttpRequest.prototype.open = function(method, url, asyncFlag, username, password){
                        if(typeof this.doNotDebug=='undefined'){
                               var debugWindow = air.Introspector.findDebugWindow();
                            if(debugWindow!=null){
                                debugWindow.logNet(this, method, url, asyncFlag);
                            }
                        }
                        return this.debugopen(method, url, asyncFlag, username, password);
                    };
                    window.XMLHttpRequest.prototype.send = function(obj){
                        if(typeof this.doNotDebug=='undefined'){
                            var self = this;
                            var debugWindow = air.Introspector.findDebugWindow();
                            if(debugWindow!=null){
                                    var a = this.onreadystatechange;
                                    this.onreadystatechange = function(){
                                         if (typeof a == 'function')a.call(self);
                                             debugWindow.logNet(self, 'unknown', '', false);
                                    };
                                if(typeof self.doNotDebug=='undefined')
                                        debugWindow.logNetSend(this, obj);
                            }
                            var ret = this.debugsend(obj);
                            if(debugWindow!=null){
                                    debugWindow.logNetSend(this, obj);
                            }
                            return ret;
                        }else{
                            return this.debugsend(obj);
                        }

                    }
        }

        if(isAppSandbox){
                air.Introspector.addKeyboardEvents(window.htmlLoader.stage);
                air.Introspector.registerUncaughtExceptionListener();
                air.Introspector.registerCloseEventListener();
                air.Introspector.registerCompleteEventListener();
                air.Introspector.registerDeactivateEventListener();
                 air.Introspector.createHighlight();
            }else{
                air.Introspector.registerChildSandboxBridge();
            }
            air.Introspector.waitForBody(document, function(){
                try{
                    if(!isAppSandbox){ air.Introspector.createOpenConsoleButton(); }
                    air.Introspector.registerDOMEventListeners();
                    window.addEventListener('unload', function(){
                        try{
                            air.Introspector.cleanup();
                            if(!isAppSandbox){
                                //our debugger can NOT live without its parent
                                air.Introspector.debugWindow.window.close();
                            }
                        }catch(e){  }
                    });
                }catch(e){
                    if(isAppSandbox){
                        runtime.trace(e);
                        runtime.trace(e.line);
                    }
                    air.Introspector.Console.log(e);
                }
         });

    },

/**
    *	@function registerFrame
    *	@description Makes the parentSandboxBridge available to frame
    */
    registerFrame: function(frame){
        if(typeof frame.contentWindow.parentSandboxBridge=='undefined')
            frame.contentWindow.parentSandboxBridge = {};

        /*frame.contentWindow.parentSandboxBridge.trace = function(a){
            runtime.trace(a);
        };*/
        //checking that the bridge is not already there
        /*var modified = typeof frame.contentWindow.parentSandboxBridge.air_Introspector_hideHighlight=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_showHighlight=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_drawRect=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_setInspect=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_getWindowTitle=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_checkNativeWindow=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToClipboard=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToFile=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_writeConfigFile=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_readConfigFile=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_showHighlightLabels=='undefined'
            || typeof frame.contentWindow.parentSandboxBridge.air_Introspector_getFrameId=='undefined';*/

        frame.contentWindow.parentSandboxBridge.air_Introspector_hideHighlight = function(){
                air.Introspector.hideHighlight();
        };

        frame.contentWindow.parentSandboxBridge.air_Introspector_showHighlight = function(rect){
                air.Introspector.showHighlight(rect);
        };

        frame.contentWindow.parentSandboxBridge.air_Introspector_drawRect = function(rect, tagName){
                var frameRect = air.Introspector.getBorderBox(frame);
                var blw = air.Introspector.getIntProp(frame, "border-left-width");
                var btw = air.Introspector.getIntProp(frame, "border-top-width");
                if(frameRect==null) return;
                rect.x+=frameRect.x+2*blw;
                rect.y+=frameRect.y+2*btw;
                air.Introspector.drawRect(rect, tagName);
        };

        frame.contentWindow.parentSandboxBridge.air_Introspector_setInspect = function(enabled){
                air.Introspector.inspectFrame = enabled?frame:null;
                air.Introspector.remoteInspect = enabled;
                if(!enabled){
                    air.Introspector.hideHighlight();
                }
        };
        frame.contentWindow.parentSandboxBridge.air_Introspector_getWindowTitle = function(){
            return document.title;
        };
        frame.contentWindow.parentSandboxBridge.air_Introspector_checkNativeWindow = function(title){
            var htmlWindows = air.Introspector.runtime.NativeApplication.nativeApplication.openedWindows;
            for(var i=htmlWindows.length-1;i>=0;i--){
                if(htmlWindows[i].title==title){
                    return true;
                }
            }
            return false;
        };

        frame.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToClipboard = function(str){
            air.Introspector.writeConsoleToClipboard(str);
        };

        frame.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToFile = function(str){
            air.Introspector.writeConsoleToFile(str);
        };

        frame.contentWindow.parentSandboxBridge.air_Introspector_writeConfigFile = function(config){
            return air.Introspector.writeConfigFile(config, true);
        }

        frame.contentWindow.parentSandboxBridge.air_Introspector_readConfigFile = function(){
            return air.Introspector.readConfigFile(true);
        }

        frame.contentWindow.parentSandboxBridge.air_Introspector_showHighlightLabels = function(id, nodeName, outerHTML){
            air.Introspector.showHighlightLabels(id, nodeName, outerHTML);
        };

        frame.contentWindow.parentSandboxBridge.air_Introspector_getFrameId = function(){
            return frame.id;
        }

        if(typeof frame.contentWindow.childSandboxBridge!='undefined'
                && typeof frame.contentWindow.childSandboxBridge.air_Introspector_bridgeLoaded!='undefined'){
            frame.contentWindow.childSandboxBridge.air_Introspector_bridgeLoaded();
        }

        //return modified;
    },

/**
    *	@function waitForBody
    *	@description Wait until document.body is available
    */
    waitForBody: function(document, callback){
        if(document.body){
            callback();
        }else{
            setTimeout(air.Introspector.waitForBody, 10, document, callback);
        }
    },

/**
    *	@function toggleWindow
    *	@description Shows/Hides the debug tool
    */
    toggleWindow:function(){
        air.Introspector.init(true, false, function(justCreated){
            if(!justCreated)
                air.Introspector.debugWindow.nativeWindow.visible ^= true;
        });

    },

/**
    *	@function init
    *	@description Makes sure the debug tool is enabled
    */
    init: function(showLoader, toggle, callback){
        if(!air.Introspector.canInit())
            return;

        if(typeof showLoader=='undefined') showLoader = false;
        if(typeof toggle=='undefined') toggle = true;

        if(isAppSandbox){

            if(typeof air.Introspector.debugWindow=='undefined' || air.Introspector.debugWindow.nativeWindow.closed){
                delete air.Introspector.debugWindow;
               var debugWindow = air.Introspector.findDebugWindow();
               if(debugWindow!=null && !debugWindow.nativeWindow.closed){
                   air.Introspector.debugWindow = debugWindow;
                if(toggle){
                    air.Introspector.debugWindow.nativeWindow.visible = true;
                    if(!showLoader){
                        nativeWindow.activate();
                    }
                }
                callback(false);
               }else{
                   air.Introspector.loadDebugger(function(debugWindow){
                        air.Introspector.debugWindow = debugWindow;
                        callback(true);
                   }, showLoader);
               }
            }else{
                if(toggle){
                    if(showLoader){
                        air.Introspector.debugWindow.nativeWindow.activate();
                    }
                }
                callback(false);
            }
        }else{
            if(typeof activeWindow=='undefined'){
                air.Introspector.registerChildSandboxBridge();
            }

            if(typeof air.Introspector.debugWindow=='undefined'||
                typeof air.Introspector.debugWindow.window.air=='undefined'){
/*				(air.Introspector.debugWindow.isWindowCreated
                    &&air.Introspector.debugWindow.isLoaded
                      &&air.Introspector.debugWindow.window
                        &&!parentSandboxBridge.air_Introspector_checkNativeWindow(air.Introspector.parentWindowTitle + ': '+air.Introspector.debugWindow.window.document.title))){*/
                delete air.Introspector.debugWindow;

                air.Introspector.loadDebugger(function(debugWindow){
                        air.Introspector.debugWindow = debugWindow;
                        callback(true);
                   });
//				air.Introspector.debugWindow = new air.Introspector.DebugWindow ({activateDebug: showLoader, activeWindow: window});
            }else if(!air.Introspector.debugWindow.isWindowCreated){
                return;
            }else{
                callback(false);
            }
        }
    },
    times:0,	//make the window.open page name unique - this is the number of opened and closed introspector windows

/**
    *	@function tryCreateWindow
    *	@description window.Open in browser/remote sandbox is not allowed if the action is not iniated by the user (eg. user gesture, mouse click)
    *				 We can only wait for that moment. Until that happends we record all the callbacks and run them when the Introspector is laoded
    *	@runs in remote sandbox only
    */
    tryCreateWindow: function(callbacks){
//		try{
            var self = this;
            var w;
            var iframeId;

/*			if(typeof parentSandboxBridge=='undefined'){
                air.Introspector.noBridge(function(){
                    air.Introspector.tryCreateWindow(callbacks);
                });
                return;
            }*/

            air.Introspector.parentWindowTitle = parentSandboxBridge.air_Introspector_getWindowTitle();

            if(typeof parentSandboxBridge!='undefined'&&typeof parentSandboxBridge.air_Introspector_getFrameId!='undefined')
                iframeId  = parentSandboxBridge.air_Introspector_getFrameId();

            air.Introspector.times++;

            if(typeof air.Introspector.config.useAirDebugHtml=='undefined'||air.Introspector.config.useAirDebugHtml==false){
                w = window.open('about:blank', 'debugger'+air.Introspector.times, 'width=640,height=480,resizable=1');
                if(w&&w.document){
                    w.isAppSandbox = isAppSandbox;
                    w.opener = window;
                    w.iframeId = iframeId;
                    w.initCallbacks = callbacks;
                    w.activeWindow = window;
                    w.isLoaded = false;
                    w.config = air.Introspector.config;
                    w.document.write(air.Introspector.contentString);
                    w.document.close();
                }
            }else{
                w = window.open('DebugUI.html', 'debugger'+air.Introspector.times, 'width=640,height=480,resizable=1');

                if(w&&w.document){
                    w.opener = window;
                    w.iframeId = iframeId;
                    w.activeWindow = window;
                    w.config = air.Introspector.config;
                    w.initCallbacks = callbacks;
                    w.isLoaded = false;
                    w.isAppSandbox = isAppSandbox;
                }
            }
            return w;
//		}catch(e){
//			alert(e+' '+e.line);
//		}
    },

/**
    *	@function loadDebugger
    *	@description Loads the debugger window, register callbacks until it is ready
    *	@runs in application sandbox only
    */
    loadDebugger: function(callback, activateDebug){
            var htmlLoader;
            var loadDebugger = arguments.callee;
            if(loadDebugger.htmlLoader && typeof loadDebugger.htmlLoader.window.isLoaded != 'undefined'){
                if(loadDebugger.htmlLoader.window.isLoaded){
                    callback(loadDebugger.htmlLoader.window.debugWindow);
                }else{
                    if(loadDebugger.htmlLoader.window.initCallbacks){
                        loadDebugger.htmlLoader.window.initCallbacks.push(callback);
                    }else{
                        loadDebugger.initCallbacks.push(callback);
                    }
                }
                return;
            }
            if(typeof loadDebugger.initCallbacks=='undefined'){
                loadDebugger.initCallbacks = [function(){
                    delete loadDebugger.initCallbacks;
                }, callback];
            }else{
                loadDebugger.initCallbacks.push(callback);
            }
            if(isAppSandbox){
                htmlLoader = air.Introspector.runtime.HTMLLoader.createRootWindow(false);
                air.Introspector.addEventListener(htmlLoader, air.Introspector.runtime.Event.HTML_DOM_INITIALIZE, function(){
                    try{
                        air.Introspector.removeEventListener(htmlLoader, air.Introspector.runtime.Event.HTML_DOM_INITIALIZE, arguments.callee);
                        htmlLoader.window.initCallbacks = loadDebugger.initCallbacks;
                        htmlLoader.window.isLoaded = false;
                        htmlLoader.window.config = air.Introspector.config;
                        htmlLoader.window.activateDebug = activateDebug;
                        htmlLoader.window.isAppSandbox = isAppSandbox;
                    }catch(e){
                        air.Introspector.runtime.trace(e);
                        air.Introspector.runtime.trace(e.line);
                    }
                });
                htmlLoader.window.isLoaded = false;

                var nativeWindow = htmlLoader.stage.nativeWindow;
                nativeWindow.width = 640;
                nativeWindow.height = 480;
                air.Introspector.addEventListener(htmlLoader, runtime.flash.events.HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION, function(e){
                     air.Introspector.logError(e.exceptionValue, {htmlLoader: self.htmlLoader});
                     e.preventDefault();
                });
                if(typeof air.Introspector.config.useAirDebugHtml=='undefined'||air.Introspector.config.useAirDebugHtml==false){
                    htmlLoader.loadString(air.Introspector.contentString);
                }else{
                    htmlLoader.load(new air.Introspector.runtime.URLRequest('app:/DebugUI.html'));
                }
            }else{
                air.Introspector.noBridge(function(){
                    var w = air.Introspector.tryCreateWindow(loadDebugger.initCallbacks);
                    if(w){
                        var htmlLoader = {window: w};
                        loadDebugger.htmlLoader = htmlLoader;
                    }
                });
            }
            loadDebugger.htmlLoader = htmlLoader;
    },

/**
    *	@function findDebugWindow
    *	@description Look up the Introspector in other windows. Maybe somebody else just opened it before us.
    */
    findDebugWindow: function(){
        if(isAppSandbox){
            try{
                if(air.Introspector.debugWindow&&air.Introspector.debugWindow.nativeWindow.closed==false)
                   return air.Introspector.debugWindow;
            }catch(e){
            }
            try{
                var htmlWindows = air.Introspector.getHtmlWindows(true);
                for(var i=htmlWindows.length-1;i>=0;i--){
                    try{
                        if(typeof htmlWindows[i].htmlLoader.window.air!='undefined'
                           && typeof htmlWindows[i].htmlLoader.window.air.Introspector!='undefined'
                               && typeof htmlWindows[i].htmlLoader.window.air.Introspector.debugWindow!='undefined'
                                && htmlWindows[i].htmlLoader.window.air.Introspector.debugWindow.nativeWindow.closed==false
                                    && htmlWindows[i].htmlLoader.window.isAppSandbox )
                            {
                                return htmlWindows[i].htmlLoader.window.air.Introspector.debugWindow;
                            }
                    }catch(e){
                        //this window is not initialized yet
                        //just get next window
                    }
                }
            }catch(e){}
        }else{
            return air.Introspector.debugWindow;
        }
        return null;
    },

    //application browser formats
    //		0 - text
    //		1 - images
    //		2 - xml (you may want to add your own xml type here)
    formats : { 'png':1, 'gif':1, 'zip':1, 'air':1, 'jpg':1, 'jpeg':1,
                 'txt':0, 'html':0, 'js':0, 'xml':2, 'opml':2, 'css':0, 'htm':0, '':0 },

/**
    *	@function canInit
    *	@description Check if we got parentSandboxBridge available
    *	@disabled
    */
    canInit: function(){
/*		if(!isAppSandbox&&typeof parentSandboxBridge=='undefined'){
            alert('You need to include AIRIntrospector.js in application sandbox too!');
            return false;
        }*/
        return true;
    },

/**
    *	@function logArguments
    *	@description
    */
    logArguments: function(args, config){
        if(!air.Introspector.canInit()) return;
        config.timestamp = new Date();
           air.Introspector.init(config.type=='error', true, function(){
            air.Introspector.debugWindow.logArguments(args, config);
        });

    },

/**
    *	@function logError
    *	@description
    */
    logError: function(error, config){
        air.Introspector.init(false, true, function(){
            air.Introspector.debugWindow.logError(error, config);
        });
    },

/**
    *	@function showCssElement
    *	@description
    */
    showCssElement: function(element){
        var debugWindow = air.Introspector.findDebugWindow();
        if(debugWindow){
            debugWindow.showCssElement(element);
        }
    },

/**
    *	@function findLoader
    *	@description Finds the first HTMLLoader in flash display object list
    */
    findLoader: function (stage){
        try{
            for(var i=stage.numChildren-1;i>=0;i--){
                var child = stage.getChildAt(i);
                var str=child.toString();
                if(str=='[object HTMLLoader]'||child.name=="FlexHTMLLoader7"){
                    return child;
                }
            }
            for(var i=stage.numChildren-1;i>=0;i--){
                var child = stage.getChildAt(i);
                var loader = air.Introspector.findLoader(child);
                if(loader!=null)
                    return  loader;
            }
        }catch(e){
        }
        return null;
    },

/**
    *	@function getHtmlWindows
    *	@description Returns an array of all HTML windows
    */
    getHtmlWindows: function(includeInspectors){
        if(isAppSandbox){
            var windowNodes = [];
            var windows = air.Introspector.runtime.NativeApplication.nativeApplication.openedWindows;
            for(var i=windows.length-1;i>=0;i--){
                var loader = air.Introspector.findLoader(windows[i].stage);
                if(loader!=null){
                    if(typeof includeInspectors=='undefined' && typeof loader.window!='undefined' && typeof loader.window.air!='undefined' && typeof loader.window.air.Introspector!='undefined' &&
                        typeof loader.window.air.Introspector.localIframeDebug != 'undefined' )
                            continue;
                    windowNodes.push({
                        nativeWindow: windows[i],
                        stage: windows[i].stage,
                        htmlLoader : loader
                    });
                }
            }
            return windowNodes;
        }else{
            //should not be here
            return [];
        }
   },

/**
    *	@function twoDigits
    *	@description int 2 string with two digits
    */
    twoDigits: function(val){
         if(val<10) return '0'+val;
         return val+'';
    },

/**
    *	@function escapeHtml
    *	@description Escapes html in order to display it in html
    */
    escapeHtml: function(html){
         return (html+'').replace(/&/g, '&').replace(/"/g, """).replace(//g, '>');
    },

       tree: { },

/**
    *	@function isNumberObject
    *	@description
    */
    isNumberObject: function(obj){
         try{
             //can we catch isNaN only for NaN
             return (obj+0==obj&&!isNaN(obj));
         }catch(e){
         }
         return false;
     },

/**
    *	@function isStringObject
    *	@description
    */
    isStringObject: function(obj){
        try{
            return (typeof(obj.match) != "undefined" && obj.match.toString().indexOf("[native code]")>0);
        }catch(e){
        }
        return false;
    },

/**
    *	@function isDateObject
    *	@description
    */
    isDateObject: function(obj){
        try{
            return (typeof(obj.getDate) != "undefined" && obj.getDate.toString().indexOf("[native code]")>0);
        }catch(e){
        }
        return false;
    },

/**
    *	@function isArgumentsObject
    *	@description
    */
   isArgumentsObject: function(obj){
       try{
           return obj.toString()=='[object Arguments]';
       }catch(e){
       }
       return false;
   },

/**
    *	@function isXMLObject
    *	@description
    */
    isXMLObject: function(obj){
        try{
            if(obj.xmlVersion&&obj.firstChild!=null)
                return obj.xmlVersion!='';
        }catch(e){
        }
        return false;
    },

/**
    *	@function isArrayObject
    *	@description
    */
    isArrayObject: function(obj){
       try{
           return (typeof(obj.push) != "undefined" && obj.push.toString().indexOf("[native code]")>0);
       }catch(e){
       }
       return false;
    },

/**
    *	@function isItemNative
    *	@description
    */
    isItemNative: function(obj){
       try{
           return (typeof(obj.item) != "undefined" && obj.item.toString().indexOf("[native code]")>0);
       }catch(e){
       }
       return false;
    },

/**
    *	@function dump
    *	@description
    */

    dump: function (obj, levels, level){
        if(air.Introspector.isArgumentsObject(obj)&&obj.length==1)
            return air.Introspector.dump(obj[0]);
        if(typeof levels=='undefined') { levels=1; }
        if(typeof level=='undefined') { level=0; }
        try{
            if(typeof obj=='undefined'){ return '[undefined]'; }
            if(obj==null){	return '[null]'; }
            var list = [];
//            if(air.Introspector.isXMLObject(obj)){
//		disable for the moment
//            	return;
//            }
            if(air.Introspector.isStringObject(obj)
                ||air.Introspector.isNumberObject(obj)
                    ||air.Introspector.isDateObject(obj)){
                if(level==0){
                    try{
                        return obj+'';
                    }catch(e){
                        return e+'';
                    };
                }
                return'';
            }
            var isItemNative = air.Introspector.isItemNative(obj);
            var parseArray = air.Introspector.isArrayObject(obj)||air.Introspector.isArgumentsObject(obj)||isItemNative;
            var parseHash =  !parseArray || isItemNative;
            if (parseArray){
                var l = obj.length;
                for(var i=0;i0;i--) prefix+='    ';
                var l = list.length;
                var strList = [];
                if(parseArray)	strList.push(prefix+'[\n');
                else			strList.push(prefix+'{\n');
                for(var i=0;i/**
    *	---------------------------------------------------------------------------------------
    *	@extracted This is extracted from spry framework and removed support for other browsers.
    *	@description Finds the precise position of the dom element node
    */

/**
    *	@function camelize
    *	@description
    */

    camelize : function(stringToCamelize)
            {
                if (stringToCamelize.indexOf('-') == -1){
                    return stringToCamelize;
                }
                var oStringList = stringToCamelize.split('-');
                var isFirstEntry = true;
                var camelizedString = '';

                for(var i=0; i < oStringList.length; i++)
                {
                    if(oStringList[i].length>0)
                    {
                        if(isFirstEntry)
                        {
                            camelizedString = oStringList[i];
                            isFirstEntry = false;
                        }
                        else
                        {
                            var s = oStringList[i];
                            camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
                        }
                    }
                }

                return camelizedString;
            },

/**
    *	@function getStyleProp
    *	@description
    */
    getStyleProp : function(element, prop)
            {
                var value;
                try
                {
                    if (element.style)
                        value = element.style[air.Introspector.camelize(prop)];

                    if (!value)
                    {
                        if (document.defaultView && document.defaultView.getComputedStyle)
                        {
                            var css = document.defaultView.getComputedStyle(element, null);
                            value = css ? css.getPropertyValue(prop) : null;
                        }
                        else if (element.currentStyle)
                        {
                                value = element.currentStyle[air.Introspector.camelize(prop)];
                        }
                    }
                }
                catch (e) {}

                return value == 'auto' ? null : value;
            },

/**
    *	@function getIntProp
    *	@description
    */
    getIntProp : function(element, prop){
                var a = parseInt(air.Introspector.getStyleProp(element, prop),10);
                if (isNaN(a))
                    return 0;
                return a;
            },

/**
    *	@function getBorderBox
    *	@description
    */
    getBorderBox : function (el, doc) {
                doc = doc || document;
                if (typeof(el) == 'string') {
                    el = doc.getElementById(el);
                }

                if (!el) {
                    return false;
                }

                if (el.parentNode === null || air.Introspector.getStyleProp(el, 'display') == 'none') {
                    //element must be visible to have a box
                    return false;
                }

                var ret = {x:0, y:0, width:0, height:0};
                var parent = null;
                var box;

                var str = el.nodeName;

                ret.x = el.offsetLeft;
                ret.y = el.offsetTop;
                ret.width = el.offsetWidth;
                ret.height = el.offsetHeight;

                parent = el.offsetParent;

                if (parent != el) {
                    while (parent) {
                        ret.x += parent.offsetLeft;
                        ret.y += parent.offsetTop;
                        str+=':'+parent.nodeName;
                        parent = parent.offsetParent;
                    }
                }

                var blw = air.Introspector.getIntProp(el, "border-left-width");
                var btw = air.Introspector.getIntProp(el, "border-top-width");
                ret.x -= blw;
                ret.y -= btw;
                // opera & (safari absolute) incorrectly account for body offsetTop
                switch (air.Introspector.getStyleProp(el, 'position')){
                     case 'absolute':
                        ret.y -= doc.body.offsetTop;
                        break;
                    case 'fixed':
                        ret.y += doc.body.scrollTop;
                        ret.x += doc.body.scrollLeft;
                        break;
                };

                if (el.parentNode)
                    parent = el.parentNode;
                else
                    parent = null;

                if (parent!=null&&parent.nodeName){
                    var cas = parent.nodeName.toUpperCase();
                    while (parent && cas != 'HTML') {
                        cas = parent.nodeName.toUpperCase();
                        ret.x -= parent.scrollLeft;
                        ret.y -= parent.scrollTop;
                        if (parent.parentNode)
                            parent = parent.parentNode;
                        else
                            parent = null;
                    }
                }

/*				ret.y -= el.ownerDocument.body.scrollTop;
                ret.x -= el.ownerDocument.body.scrollLeft;
*/
                // adjust the margin
                var gi = air.Introspector.getIntProp;
                var btw = gi(el, "margin-top");
                var blw = gi(el, "margin-left");
                var bbw = gi(el, "margin-bottom");
                var brw = gi(el, "margin-right");
                ret.x -= blw;
                ret.y -= btw;
                ret.height += btw + bbw;
                ret.width += blw + brw;

            //	air.Introspector.Console.log(ret);
                return ret;
            },

/**
    *	---------------------------------------------------------------------------------------
    */

/**
    *	@function writeConfigFile
    *	@description
    */
    writeConfigFile: function(config, fromRemoteSandbox){
        if(isAppSandbox){
            var file = runtime.flash.filesystem.File.applicationStorageDirectory.resolvePath('AIRIntrospector'+(fromRemoteSandbox?'Remote':'')+'.cfg');
            var fs = new runtime.flash.filesystem.FileStream();
            fs.open(file, runtime.flash.filesystem.FileMode.WRITE);
            fs.writeObject(config);
            fs.close();
        }else{
            if(typeof activeWindow=='undefined'){
                air.Introspector.noBridge(function(){
                    parentSandboxBridge.air_Introspector_writeConfigFile(config);
                });
            }else{
                activeWindow.setTimeout(function(){
                    activeWindow.air.Introspector.writeConfigFile(config);
                }, 0);
            }
        }
    },

/**
    *	@function readConfigFile
    *	@description
    */
    readConfigFile: function (fromRemoteSandbox, callback){
        if(isAppSandbox){
            var file = runtime.flash.filesystem.File.applicationStorageDirectory.resolvePath('AIRIntrospector'+(fromRemoteSandbox?'Remote':'')+'.cfg');
            if(file.exists){
                var fs = new runtime.flash.filesystem.FileStream();
                fs.open(file, runtime.flash.filesystem.FileMode.READ);
                var config = fs.readObject();
                fs.close();
                return config;
            }
        }else{
            if(typeof activeWindow=='undefined'){
                air.Introspector.noBridge(function(){
                    var config = parentSandboxBridge.air_Introspector_readConfigFile();
                    callback(config);
                });
            }else{
                activeWindow.setTimeout(function(){
                    if(typeof activeWindow!='undefined'){
                        var config = activeWindow.air.Introspector.readConfigFile(true, function(config){
                            setTimeout(function(){ callback(config); });
                        });
                    }
                });
            }
        }
        return {};
    },

/**
    *	@function writeConsoleToClipboard
    *	@description
    */

    writeConsoleToClipboard: function(str){
        if(isAppSandbox){
            runtime.flash.desktop.Clipboard.generalClipboard.clear();
            runtime.flash.desktop.Clipboard.generalClipboard.setData(runtime.flash.desktop.ClipboardFormats.TEXT_FORMAT,
                    str, false);
        }else{
            if(typeof activeWindow=='undefined'){
                air.Introspector.noBridge(function(){
                    parentSandboxBridge.air_Introspector_writeConsoleToClipboard(str);
                });
            }else{
                activeWindow.setTimeout(function(){
                    activeWindow.air.Introspector.writeConsoleToClipboard(str);
                });
            }
        }
    },

/**
    *	@function writeConsoleToFile
    *	@description
    */
    writeConsoleToFile: function(str){
        if(isAppSandbox){
            var file = runtime.flash.filesystem.File.desktopDirectory;
            var self = this;
            file.addEventListener(runtime.flash.events.Event.SELECT, function(evt){
                var newFile = evt.target;
                  var stream = new runtime.flash.filesystem.FileStream();
                    stream.open(newFile, runtime.flash.filesystem.FileMode.WRITE);
                    stream.writeUTFBytes(str);
                    stream.close();
                });
            file.browseForSave('Console dump file...');
        }else{
            if(typeof activeWindow=='undefined'){
                air.Introspector.noBridge(function(){
                    parentSandboxBridge.air_Introspector_writeConsoleToFile(str);
                });
            }else{
                activeWindow.setTimeout(function(){
                    activeWindow.air.Introspector.writeConsoleToFile(str);
                });
            }
        }
    },

/**
    *	@function noBridge
    *	@description Alerts the user that no parent sandbox bridge is installed
    */
    noBridge: function(callback){
        try{
            callback();
            return;
        }catch(e){
            air.Introspector.bridgeCallbacks.push(callback);
            air.Introspector.registerChildSandboxBridge();
            setTimeout(function(){
                throw { air_Introspector_setParentSandboxBridge: true, air_Introspector_version: air.Introspector.version , toString: function(){ return 'You need to include AIRIntrospector.js in your application sandbox.'; } };
            }, 0);
        }

    },

/**
    *	@function noChildBridge
    *	@description Alerts the user that no child sandbox bridge is installed
    */
    noChildBridge: function(iframe){
        if(!air.Introspector.secondBridgeTry){
            var iframeStr = '';
            if(typeof iframe!='undefined'){
                iframeStr = " Check the following iframe [id: "+iframe.id+"]";
            }
            alert('Child sandbox bridge is not defined or has been rewritten. You need to include AIRIntrospector.js in child sandbox.'+iframeStr);
            air.Introspector.secondBridgeTry = true;
        }
    },

});//-------------------------------------------------------------------------------------------------------------------------------------------------------
air.Introspector.version = '0.15.88';
})();

air.Introspector.contentString = '\n\n\n\nADOBE AIR HTML\/JS Application Introspector<\/title>\n<style>\n\tbody{\n\t\toverflow:hidden;\n\t\t-khtml-user-select:none;\n\t}\n\t\n\t*{ -khtml-user-drag:none; }\n\n\ta:focus{outline:none;}\n\n\t#tabPages{\n\tposition:absolute;\n\tleft:0px;\n\ttop:80px;\n\tright:0px;\n\tbottom:0px;\n\tborder-top:1px solid #999999;\n\t}\n\t\n\t#preventClickingTabLabels{\n\t\t  position:absolute;\n\t\t  left:0px;\n\t\t  top:60px;\n\t\t  height:10px;\n\t\t  right:0px;\n\t\t  background:#666666;\n\t}\n\t\n\t#tabPages>div{\n\t\tposition:absolute;\n\t\tleft:0px;\n\t\ttop:0px;\n\t\tbottom:0px;\n\t\tright:0px;\n\t\tvisibility:hidden;\n\t\toverflow:auto;\n\t}\n\t\n\t#tabPages>div.selected{\n\t\tvisibility:visible;\n\t}\n\t\n\t#windowSelector{\n\tposition:absolute;\n\ttop:0px;\n\tright:0px;\n\ttext-align:right;\n\tbackground:#4F4F4F;\n\tleft:300px;\n\tpadding: 10px;\n\tvertical-align: middle;\n\theight: 30px;\n\t\n\t}\n\t\n\t#domTab{\n\t\toverflow:auto;\n\t}\n\t\n\t#console {\n\t\tposition:absolute;\n\t\tleft:0px;\n\t\ttop:0px;\n\t\tbottom:30px;\n\t\tright:0px;\n\t\tmargin:0px;\n\t\tpadding:0px;\n\t\tlist-style-image:none;\n\t\tlist-style-type:none;\n\t\toverflow:auto;\n\t}\n\t\n\t\n\t#console > li{\n\t\tborder-bottom:1px solid #CCCCCC;\n\t\tposition:relative;\n\t}\n\n\t\n\t.typeBox{\n\t\tposition:absolute;\n\t\tleft:0px;\n\t\ttop:0px;\n\t\twidth:10px;\n\t\tmargin-left:0px !important;\n\t\theight:13px;\n\t\ttext-align:center;\n\t\tpadding:3px;\n\t\tpadding-top:0px;\n\t\tfont-family:Verdana;\n\t\tborder:1px solid #000000;\n\t\t-webkit-border-top-left-radius:9px;\n\t\t-webkit-border-top-right-radius:9px;\t\t\n\t\t-webkit-border-bottom-left-radius:9px;\t\t\n\t\t-webkit-border-bottom-right-radius:9px;\t\t\n\t}\n\t\n\t#console > li > *{\n\t\tmargin-left:10px;\n\t}\n\t\n\t.consoleFrom, .consoleTimestamp{\n\t\tcolor:#999999;\n\t}\n\t.consoleItemText{\n\t\tcolor:#003366;\n\t     \/*font-weight:bold;*\/\n\t\tmargin-left:2px ! important;\n\t\tpadding:3px;\n\t\t-khtml-user-select:auto;\n\t}\n\t\n\t.error .consoleItemText{\n        background:#FFFFE0;\n        color:#FF3030;\n    }\n    \n    .warn .consoleItemText{\n        background:#00FFFF;\n        color: #000000;\n    }\n\n\t.warn .typeBox{\n\t\tborder:1px solid #8db047;\n\t\tcolor:#000000;\n\t\tbackground:#ffff00;\n\t}\n\t.error .typeBox{\n\t\tborder:1px solid #c00504;\n\t\tcolor:#ffffff;\n\t\tfont-weight:bold;\n\t\tbackground:#fe0000;\n\t}\n\t.info .typeBox{\n\t\tborder:1px solid #113c9f;\n\t\tcolor:#ffffff;\n\t\tfont-style:italic;\n\t\tbackground:#0053fe;\n\t}\n\t.warn .consoleItemText, .info .consoleItemText, .error .consoleItemText{\n\t\tmargin-left:20px ! important;\n\t}\n\t\n\t#evalConsole{\n\t\tposition:absolute;\n\t\tleft:0px;\n\t\tbottom:0px;\n\t\theight:30px;\n\t\tright:0px;\n\t\tborder-top:1px solid #999999;\n\t}\n\t#evalConsoleText{\n\t\tposition:absolute;\n\t\tleft:30px;bottom:0px;\n\t\ttop:0px;right:0px;\n\t\tborder:none;\n\t}\n\t#evalConsoleLabel{\n\t\tposition:absolute;\n\t\tleft:0px;bottom:0px;\n\t\ttop:0px;\n\t\tpadding-top:5px;\n\t\tborder:none;\n\t}\n\t#tabLabels{\n\t\toverflow:hidden;\n\tmargin:0px;\n\tlist-style-image:none;\n\tlist-style-type:none;\n\tposition:absolute;\n\ttop:50px;\n\tleft:70px;\n\tright:0px;\n\theight:30px;\n\tpadding-left:5px;\n\tborder-top-width: 0px;\n\tborder-top-style: solid;\n\tborder-top-color: #999999;\n\tbackground-color: #BBBBBB;\n\tborder-left-width: 2px;\n\tborder-left-style: solid;\n\tborder-left-color: #4F4F4F;\n\tpadding-top: 0px;\n\tpadding-right: 0px;\n\tpadding-bottom: 0px;\n\t}\n\t#tabLabels>li, #tabLabels>li.bounceOff{\n\tdisplay:block;\n\tpadding:5px;\n\tcursor:pointer;\n\tfloat:left;\n\theight:12px;\n\t-webkit-border-top-left-radius:5px;\n\t-webkit-border-top-right-radius:5px;\n\tfont-family: Arial, Helvetica, sans-serif;\n\tfont-size: 11px;\n\tfont-style: normal;\n\tfont-weight: 600;\n\tcolor: #5A6F7F;\n\tline-height: normal;\n\tmargin-top: 5px;\n\tmargin-right: 2px;\n\tmargin-bottom: 2px;\n\tmargin-left: 2px;\n\ttext-transform: uppercase;\n\t}\n\t\n\t\n\t#tabLabels>li.bounceOn{\n\t\tbackground:#BDB0FF;\n\t\tborder-bottom:none;\n\t\txcolor:#ffffff;\n\t}\n\t\n\t#tabLabels>li.selected{\n\t\tbackground:#DADADA;\n\t\tcolor:#0066CC;\n\t}\n\t\n\t#tabLabels>li:hover{\n\tbackground-color: #DADADA;\n\tcolor: #0066CC;\n\t}\n\t\n\t\n\t#toolToggle{\n\tmargin:0px;\n\tlist-style-image:none;\n\tlist-style-type:none;\n\tposition:absolute;\n\ttop:50px;\n\tleft:-2px;\n\tright:0px;\n\theight:30px;\n\tpadding-left:5px;\n\tborder-top-width: 0px;\n\tborder-top-style: solid;\n\tborder-top-color: #999999;\n\tbackground-color: #BBBBBB;\n\tborder-left-width: 2px;\n\tborder-left-style: solid;\n\tborder-left-color: #4F4F4F;\n\tpadding-top: 0px;\n\tpadding-right: 0px;\n\tpadding-bottom: 0px;\n\twidth: 95px;\n\t}\n\t\n\t#toolToggle>li, #tabLabels>li.bounceOff{\n\tdisplay:block;\n\tpadding:5px;\n\tcursor:pointer;\n\tfloat:left;\n\theight:12px;\n\t-webkit-border-top-left-radius:5px;\n\t-webkit-border-top-right-radius:5px;\n\tfont-family: Arial, Helvetica, sans-serif;\n\tfont-size: 11px;\n\tfont-style: normal;\n\tfont-weight: bold;\n\tcolor: #4F4F4F;\n\tline-height: normal;\n\tmargin-top: 5px;\n\tmargin-right: 2px;\n\tmargin-bottom: 2px;\n\tmargin-left: 2px;\n\ttext-transform: uppercase;\n\t}\n\t\n\t#toolToggle>li.selected{\n\t\tbackground:#DADADA;\n\t\tcolor:#333333;\n\t}\n\t\n\t#toolToggle>li:hover{\n\tbackground-color: #DADADA;\n\tcolor: #333333;\n\t}\n\t\n\t.selected2Tree > .treeLabel{\n\t\tfont-weight:bold;\n\t}\n\t.selected2Tree {\n\t\tborder:1px solid #eeeeee;\n\t\tmargin:-1px;\n\t}\n\t\n\t\n\t#toolsLabels{\n\tmargin:0px;\n\tlist-style-image:none;\n\tlist-style-type:none;\n\tposition:absolute;\n\ttop:0px;\n\tleft:0px;\n\tpadding-left:10px;\n\twidth:320px;\n\theight:40px;\n\tbackground:#4F4F4F;\n\tpadding-top: 10px;\n\tpadding-right: 10px;\n\tpadding-bottom: 5px;\n\tcolor:#FFFFFF;\n\tfont-size:14px;\n\tfont-family:Verdana, Arial, Helvetica, sans-serif;\n\tfont-weight:bold;\n\ttext-shadow:2px 2px 2px black;\n\t}\n\t#toolsLabels span{\n\t\t\tposition:relative;\n\t\t\ttop:-3px;\n\t\t\tleft:1px;\n\t\t\tfont-size:10px;\n\t\t\tfont-weight:normal;\n\t\t}\n\t\n\t#toolsLabels>li{\n\tpadding:5px;\n\tmargin:3px;\n\tmargin-right:0px;\n\tfloat:left;\n\theight:12px;\n\tbackground-color: #3C3C3C;\n\t}\n\t\n\t#toolsLabels>li.selected{\n\t\tbackground:#666666;\n\t\tcolor:#FFFFFF;\n\t}\n\t\n\t#toolsLabels>li:hover{\n\t\ttext-decoration:underline;\n\t}\n\t\n\t\n\t.treeNode{\n\t\tdisplay:block;\n\t\tposition:relative;\n\t\tpadding-top:20px;\n\t\ttext-decoration:none;\n\t\tcolor:#000000;\n\t}\n\t\n\t.selected3Tree > .treeLabel{\n\t\tfont-weight: normal !important;\n\t\tbackground: #FFCC00 !important;\n\t}\n\t\n\n\t.hover > .treeLabel, .hover  >.treeLabel2{\n\t\tbackground:#FFFFCC;\n\t\t-khtml-user-select:text;\n\t}\n\t\n\t.treeLabel{\n\t\tposition:absolute;\n\t\ttop:0px;\n\t\tleft:20px;\n\t\twidth:200px;\n\t\toverflow:hidden;\n\t\tcursor:pointer;\n\t\twhite-space:nowrap;\n\t}\n\t\n\t.noLabel2 > .treeLabel{\n\t\twidth:auto !important;\n\t\toverflow:auto !important;\n\t}\n\t\n\t.treeLabel2, .treeEdit{\n\t\tposition:absolute;\n\t\ttop:0px;\n\t\tleft:220px;\n\t\tpadding-left:2px;\n\t\tcursor:pointer;\n\t\twhite-space:nowrap;\n\t}\t\n\t\n\n\t.editing > .treeEdit{\n\t\tdisplay:block !important;\n\t\twidth:400px;\n\t\tleft:220px;\n\t\tright:0px;\n\t}\n\t\n\t.treeNode > .treeEdit{\n\t\tdisplay:none;\n\t}\n\t\n\t.tagDomNodeName{\n\t\tcolor:#ee00ee;\n\t}\n\t\n\t.domTreeNode .treeLabel{\n\t\twidth:auto;\n\t}\n\t\n\t.tagDomNodeAttribute{\n        color:#0000ee;\n    }\n\t\n\t.editing > .treeLabel2{\n\t\tdisplay:none !important;\n\t}\n\t.treeNode > .treeLabel2{\n\t\tdisplay:block;\n\t}\n\t\t\n\t.treeAnchorMac{\n\t\tposition:absolute;\n\t\ttop:0px;\n\t\tleft:0px;\n\t\tmargin:1px;\n\t\twidth:12px;\n\t\theight:12px;\n\t\tcursor:pointer;\n\t\tfont-size:13px;\n\t\toverflow:hidden;\n\t\tcolor:#ffffff;\n\t\tbackground:#cccccc;\n\t\t-webkit-border-radius:6px;\n\t}\n\t.treeAnchorMac div{\n\t\tmargin-top: -3px;\n\t\twidth:25px;\n\t\tmargin-left: -6px;\n\t\tmargin-right: -2px;\n\t\ttext-align:center;\n\t}\n\t.treeNodeEmpty{\n\t\tdisplay:none;\n\t}\n\t.treeAnchorWin{\n\t\tposition:absolute;\n\t\ttop:0px;\n\t\tleft:0px;\n\t\tmargin:1px;\n\/*\t\tborder:1px solid #999999;\n\t\tborder-left:1px solid #eeeeee;\n\t\tborder-top:1px solid #eeeeee;*\/\n\t\twidth:12px;\n\t\theight:12px;\n\t\tcursor:pointer;\n\t\tfont-size:15px;\n\t\toverflow:hidden;\n\t\tcolor:#ffffff;\n\t\tbackground:#cccccc;\n\t\t-webkit-border-radius:6px;\n\t}\n\t.treeAnchorWin div{\n\t\tmargin-top: -4px;\n\t\twidth:25px;\n\t\tmargin-left: -6px;\n\t\tmargin-right: -3px;\n\t\ttext-align:center;\n\t}\n\t\n\t.treeChildren{\n\t\tmargin-left:20px;\n\t}\n\t\n\t.nodeEndLabelDiv, .nodeEndLabelDiv *{\n\t   display:none;\t\n\t}\n\t\n\t.nodeEndLabelDivVisible{\n       margin-left:20px;\n\t   padding-bottom:5px;  \n\t   white-space:nowrap;\n    }\n\t\n\t.treeText{\n\t\tposition:relative;\n\t\tmargin:0px;\n\t\ttext-decoration:none;\n\t\tcolor:#000000;\n\t\tpadding:0px;\n\t\n\t\t\n\t}\n\t.treePreLine{\n\t\tposition:absolute;\n\t\ttop:0px;\n\t\ttext-align:right;\n\t\twidth:45px;\n\t\tpadding-right:3px;\n\t\tpadding:0px;\n\t\tbackground:#eeeeee;\n\t}\n\t\n\t.selected3Tree > .treePreLine{\n\t\tbackground:#cccccc;\n\t\tcolor:blue;\n\t}\n\t\n\t.selected3Tree > img{\n\t\toutline: 1px solid blue;\n\t}\n\t.treePreText{\n\t\tmargin-left:49px;\n\t\tpadding-left:4px;\n\t\t-khtml-user-select:auto;\n        border: 1px solid #ffffff;\n\t}\n\t\n\t.inPlaceEditor{\n                cursor:pointer;\n                display:inline;\n                position:relative;\n     }\n\t\n\t\/* TREE CLASSES\n\t*\/\n\t#html2Tab{\n\t\toverflow:hidden !important;\n\t}\n\t#html2Div{\n\t\tposition:absolute;\n\t\tleft:0px;\n\t\ttop:0px;\n\t\tbottom:0px;\n\t\toverflow:auto;\n\t}\n\t#html2Split{\n\t\tposition:absolute;\n\t\twidth:5px;\n\t\ttop:0px;\n\t\tbottom:0px;\n\t\tbackground:#cccccc;\n\t\tcursor:pointer;\n\t}\n\t#css2Div{\n\t\tposition:absolute;\n\t\ttop:0px;\n\t\tbottom:0px;\n\t\tright:0px;\n\t}\n\t#css2TabLabels{\n\t\tmargin:0px;\n\t\tpadding:0px;\n\t\tbackground:#cccccc;\n\t\tlist-style-image:none;\n\t\tlist-style-type:none;\n\t\tposition:absolute;\n\t\tborder-bottom:5px solid #666666;\n\t\ttop:0px;\n\t\tleft:0px;\n\t\tright:0px;\n\t\theight:20px;\n\t\tpadding-left:0px;\n\t}\n\t#css2TabLabels>li{\n\t\tdisplay:block;\n\t\tpadding:3px;\n\t\tpadding-bottom:0px;\n\t\tmargin:2px;\n\t\tmargin-left:0px;\n\t\tmargin-bottom:0px;\n\t\tfloat:left;\n\t\theight:15px;\n\t\tbackground:#ffffff;\n\t\t-webkit-border-top-left-radius:5px;\n\t\t-webkit-border-top-right-radius:5px;\t\t\n\t\t\tcursor:pointer;\n\t}\n\t\n\t#css2TabLabels>li.selected{\n\t\tbackground:#666666;\n\t\tcolor:#FFFFFF;\n\t}\n\t\n\t\n\t#css2TabPages{\n\t\tposition:absolute;\n\t\tleft:0px;\n\t\ttop:24px;\n\t\tright:0px;\n\t\tbottom:0px;\n\t\tborder-top:1px solid #999999;\n\t}\n\n\t#css2TabPages>div{\n\t\tposition:absolute;\n\t\tleft:0px;\n\t\ttop:0px;\n\t\tbottom:0px;\n\t\tright:0px;\n\t\tvisibility:hidden;\n\t\toverflow:auto;\n\t}\n\t\n\t#tabPages>div.selected  #css2TabPages>div.selected{\n\t\tvisibility:visible;\n\t}\n\t\n\t#windowList{\n\t\twidth:100px;\n\t\t\n\t}\n\t.menu {\n\t\tposition:absolute;\n\t\tdisplay:none;\n\t\tbackground:white;\n\t\tborder-bottom:1px solid #cccccc;\n\t\tborder-right:1px solid #cccccc;\t\t\n\t\tfont-size:12px;\n\t\tbackground:#eeeeee;\n\t\twidth:170px;\n\t}\n\t.menu ul{\n\t\tmargin:0px;\n\t\tpadding:0px;\n\t\tlist-style-image:none;\n\t\tlist-style-type:none;\n\t}\n\t.menu li a{\n\t\tdisplay:block;\n\t\tpadding:5px;\n\t\tcolor:#333333;\n\t\tborder-bottom:1px solid #eeeeee;\n\t\ttext-decoration:none;\n\t}\n\t.menu li a:hover{\n\t\tbackground:blue;\n\t\tcolor:white;\n\t}\n\t\n\t#searchTextBox{\n\t\tposition:absolute;\n\t\tright:20px;\n\t\tbottom:40px;\n\t\tdisplay:none;\n\t\tbackground:white;\n\t\tborder:1px solid #cccccc;\n\t\tpadding:5px;\n\t\t-webkit-border-radius:5px;\t\t\n\t}\n\t.searchselect{\n\t\toutline: 1px solid #333333 !important;\n\t\tbackground:#FFFF99;\n\t}\n\tpre{\n\t\tmargin:0px;\n\t\tpadding:0px;\n\t}\n<\/style>\n<script>\n\/\/<![CDATA[\n\t\n\tvar air;\n\t\nfunction cloneConfig()\n{\n\tif(typeof config==\'undefined\') return;\n\tfor(var i in config){\n\t\tair.Introspector.config[i]=config[i];\n\t}\n}\n\nfunction doLoad(){\n\n\/*\tif(typeof runtime==\'undefined\'&&opener){\n\t\tvar air = opener.air;\n\t}else{\n\t\tloadMyAir();\n\t}*\/\n\tcloneConfig();\n\tdebugWindow = new air.Introspector.DebugWindow();\n\tair.Introspector.debugWindow = debugWindow;\n\ttry{\n\t\tdebugWindow.init(window);\n\t}catch(e) { alert(e+\' \'+e.line); }\t\n\t\n\ttry{\n\t\tvar l =initCallbacks.length;\n\t\tfor(var i=0;i<l;i++){\n\t\t\tinitCallbacks[i](debugWindow);\n\t\t}\n\t}catch(e){alert(e+\' \'+e.line);}\n\tisLoaded = true;\n\n\t\t\n}\n\nfunction doUnload(){\n\tdebugWindow.dispose();\n}\n\n\nif(typeof air==\'undefined\') air = {};\nair.Introspector = { localIframeDebug: true };\n\n\n(function(){\n\t\n\n\n\t\n\n\n\n\/\/----------------------------------------------------------------------------------------------------\n\<div id="prop-Ext.ux.form.DateTime-"></div>/**\n*\t@API air.Introspector.Console\n*\t@description Exposes log, warn, info, error, dump to the user\n*\tTHIS IS THE ONLY SUPPORTED APIs \n*\/\n\nair.Introspector.Console = {\n\t\t log: function(){\n\t\t   \tair.Introspector.logArguments(arguments,\n\t\t\t \t\t{htmlLoader:isAppSandbox?window.htmlLoader:null});\n\t\t },\n\n\t\t warn : function(){\n\t\t        air.Introspector.logArguments(arguments,\n\t\t\t \t\t\t{htmlLoader:isAppSandbox?window.htmlLoader:null, type:\'warn\'});        \n\t\t },\n\n\t\t info : function(){\n\t\t        air.Introspector.logArguments(arguments,\n\t\t\t \t\t\t{htmlLoader:isAppSandbox?window.htmlLoader:null, type:\'info\'});        \n\t\t },\n \n\t\t error : function(){\n\t\t        air.Introspector.logArguments(arguments,\n\t\t\t \t\t\t{htmlLoader:isAppSandbox?window.htmlLoader:null, type:\'error\'});        \n\t\t }, \n\t\t dump : function(obj, level){\n\t\t\tair.Introspector.logArguments(air.Introspector.dump(obj, level),\n\t\t\t \t\t{htmlLoader: isAppSandbox?window.htmlLoader:null, usePre:true});\n\t\t }\n};\n\n\/\/----------------------------------------------------------------------------------------------------\n\nair.Introspector.config = {\n    showTimestamp: true,\t\t\t\t\t\t\/\/Make the console show time stamps before each line\n    showSender: true,\t\t\t\t\t\t\t\/\/Make the console show time stamps\n    wrapColumns: 2000,\t\t\t\t\t\t\t\/\/Source files are soft-wrapped at around 2000 columns by default \n\tflashTabLabels: true,\t\t\t\t\t\t\/\/Console and xhr columns can flash whenever something happend to them (eg. logged something). You can turn it off\n\t\t\t\t\t\t\t\t\t\t\t\t\/\/by setting this to false\n\tcloseIntrospectorOnExit: true,\t\t\t\t\/\/Makes the inspector window close when the last window closed\n\tdebugRuntimeObjects: true,\t\t\t\t\t\/\/Also expand ActionScript objects\n\tintrospectorKey:122,\t\t\t\t\t\t\/\/Inspect key - by default it is F11 (122)\n\tdebuggerKey:123, \t\t\t\t\t\t\t\/\/Toggle inspectors visibility - by default it is F12 (123)\n    useAirDebugHtml: false,\t\t\t\t\t\t\/\/Internal only\n};\n\n\n\/**\n*\t@module air.Introspector\n*\/\n\nair.Introspector.extend = function(dst, src){\n\t\/\/Take every property from src and put it in dst\n    for(var i in src){\n        dst[i]=src[i];\n    }\n};\n\n\/\/\tChecking if the user has configured Introspector using global AIRIntrospectorConfig variable\nif(typeof AIRIntrospectorConfig!=\'undefined\'){\n\tair.Introspector.extend(air.Introspector.config, AIRIntrospectorConfig);\n}\n\nvar eventListeners = [];\n\n\/\/\tCan not expand ActionScript objects from remote sandbox - we can not even access ActionScript from there \n\/\/\tjust disabled this feature\nif(!isAppSandbox) air.Introspector.config.debugRuntimeObjects = false;\n\n\/\/\tMade this use g\/setters in order to make it easy to send its value over the bridge\nair.Introspector.__defineGetter__(\'inspect\', function(){\n    return air.Introspector._inspect;\n});\n\nair.Introspector.__defineSetter__(\'inspect\', function(value){\n    air.Introspector._inspect=value;\n    if(!isAppSandbox){\n        setTimeout(function(){\n\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\tparentSandboxBridge.air_Introspector_setInspect(value);\n\t\t\t});\n        }, 0);\n    }else{\n\t\tif(!value){\n\t\t\tair.Introspector.hideHighlight();\n\t\t}\n\t}\n});\n\t\nair.Introspector.extend(air.Introspector, { \n\n\t\/**\n\t*\tMakes it easier to acces runtime packages\n\t*\tit makes sense only in the application sandbox\n\t*\/\n\truntime: isAppSandbox?{ \n\t\tHTMLLoader : window.runtime.flash.html.HTMLLoader,\n\t\tEvent : window.runtime.flash.events.Event,\n\t\tIOErrorEvent: window.runtime.flash.events.IOErrorEvent,\n\t\tNativeApplication: window.runtime.flash.desktop.NativeApplication,\n\t\tURLLoader : window.runtime.flash.net.URLLoader,\n\t\tURLRequest : window.runtime.flash.net.URLRequest,\n\t\tNativeWindowInitOptions : window.runtime.flash.display.NativeWindowInitOptions,\n\t\tCapabilities: window.runtime.flash.system.Capabilities,\n\t\ttrace : window.runtime.trace,\n\t}:null,\n\t\n\t_inspect: false,\n\tremoteInspect: false,\n    canClick: false,\n\n\tbridgeCallbacks: [],\n\t\n\t\n\t\/**\n\t*\tDifferent coloring styles for tag names, by default \'default\' is used\n\t*\tUndocumented feature\n\t*\t\t- you can change the color of elements while inspecting by tag name, check bellow the body: 0x00CC00 line,\n\t*\t\t  uncomment that line, duplicate and change it with your own colors\n\t*\/\n    highlightBgColors: {\n        \'default\': 0xFFCC00,\n        \/\/body: 0x00CC00,\n        \n    },\n\n\t\/**\n\t*\t@function trimRegExp\n\t*\t@description Trims spaces from a string\n\t*\t@private\n\t*\/\n    trimRegExp: \/^[\\s\\r\\n]*([\\s\\S]*?)[\\s\\r\\n]*$\/g,\n    trim:function(str){\n    \treturn str.replace(air.Introspector.trimRegExp, \'$1\');\n    },\n\n\t\/**\n\t*\t@function blockWrap\n\t*\t@description Wraps a string by air.Introspector.config.wrapColumns columns\n\t*\/\n    blockWrap: function(str){\n    \t\/\/used for spliting large lines in <pre>\n    \tvar cols = air.Introspector.config.wrapColumns;\n    \tvar lines = str.split(\/\\n\/);\n    \tvar buffer = [];\n    \tvar l = lines.length;\n    \tvar lineNumbers = [];\n    \tfor(var i=0;i<l;i++){\n    \t\tlineNumbers.push(i+1);\n    \t\tvar line = lines[i];\n    \t\twhile(line.length>cols){\n    \t\t\tbuffer.push(line.substr(0, cols));\n    \t\t\tline = line.substr(cols);\n    \t\t\tlineNumbers.push(\'\');\n    \t\t}\n    \t\tbuffer.push(line);\n    \t}\n    \tlineNumbers.push(\'EOF\');\n    \treturn [buffer.join(\'\\n\'), lineNumbers.join(\'\\n\')];\n    },\n\t\n\t\/**\n\t*\t@function getTextFormat\n\t*\t@description Returns a new flash TextField\n\t*\/\n    createTextField: function(parentSprite, fontSize, fontBold) {\n\t\tif(isAppSandbox){\n       \t\tvar tf = new runtime.flash.text.TextField();\n\t        tf.embedFonts = false;\n\t        tf.autoSize = runtime.flash.text.TextFieldAutoSize.LEFT;\n\t        tf.antiAliasType = runtime.flash.text.AntiAliasType.ADVANCED;\n\t        tf.defaultTextFormat = air.Introspector.getTextFormat(fontSize, fontBold);\n\t        tf.selectable = false;\n\t        tf.mouseEnabled = true;\n\t        tf.x = 4;\n\t        tf.text = \"\";\n\t        if(parentSprite.numChildren > 0) {\n\t            var sibling = parentSprite.getChildAt(parentSprite.numChildren - 1);\n\t            tf.y = sibling.y + sibling.height + 15;\n\t        }\n\t        parentSprite.addChild(tf);\n\t        return tf;\n\t\t}else{\n\t\t\t\/\/should not get here\n\t\t\treturn null;\n\t\t}\n    },\n    \/**\n\t*\t@function getTextFormat\n\t*\tReturns a new flash TextFormat\n\t*\tsee createTextField\n\t*\/\n    getTextFormat: function(fontSize, fontBold){\n\t\tif(isAppSandbox){\n        \tvar format = new runtime.flash.text.TextFormat();\n\t        format.size = fontSize;\n\t        format.font = \"Tahoma\";\n\t        format.bold = fontBold;\n\t        format.color = 0x330066;\n        \treturn format;\n\t\t}else{\n\t\t\t\/\/should not get here\n\t\t\treturn null;\n\t\t}\n    },\n    \n\t\/**\n\t*\t@function extendRect \n\t*\t@description Initializes the sprite with values from the rectangle\n\t*\/\n\textendRect: function(sprite, rect){\n\t\tsprite.x = rect.x;\n\t\tsprite.y = rect.y;\n\t\tsprite.width = rect.width;\n\t\tsprite.height = rect.height;\n\t\tsprite.scaleX = rect.scaleX;\n\t\tsprite.scaleY = rect.scaleY;\t\t\t\n\t},\n\t\n\t\n\t\/**\n\t*\t@function showHighlight\n\t*\t@description Shows a highlighting flash sprite using coordinates from rectangle\n\t*\/\n    showHighlight: function(rect){\n\t\tif(isAppSandbox){\n\t        \/\/dehilight everyone else\n\t        var ownedWindows = air.Introspector.getHtmlWindows();\n\t        for(var i=ownedWindows.length-1;i>=0;i--){\n\t                try{\n\t                    ownedWindows[i].htmlLoader.window.air.Introspector.hideHighlight();\n\t                }catch(e){\n\t                    \/\/no air.Introspector\n\t                }\n\t        }\n\t        air.Introspector.extendRect(air.Introspector.highlightSprite, rect);\n\t\t}else{\n\t\t\tsetTimeout(function(){\n\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\tparentSandboxBridge.air_Introspector_showHighlight(rect);\t\t\t\t\n\t\t\t\t});\n\t\t\t\t\n\t\t\t}, 0);\n\t\t\t\n\t\t\t\n\t\t}\n    },\n\n\t\/**\n\t*\t@function hideHighlight\n\t*\t@description Make the higlight box go away\n\t*\/\n    hideHighlight: function(){\n\t\tif(isAppSandbox){\n        \tair.Introspector.extendRect(air.Introspector.highlightSprite, {x:0, y:0, width:0, height:0, scaleX:0, scaleY:0});\n\t        air.Introspector.highlightText.visible = false;\n\t\t}else{\n\t\t\tsetTimeout(function(){\n\t\t\t\ttry{\n\t\t\t\t\tparentSandboxBridge.air_Introspector_hideHighlight();\n\t\t\t\t}catch(e){ \n\t\t\t\t\t\t\/\/ no bridge yet\n\t\t\t\t\t}\n\t\t\t}, 0);\n\t\t}\n    },\n\n\t\/**\n\t*\t@function remoteClick\n\t*\t@description Make the remote sandbox know that the inspection finished\n\t*\/\n\tremoteClick: function(){\n\t\tair.Introspector.debugWindow.finishInspect(false);\n        air.Introspector.hideHighlight();\n\t},\n\t\n\t\n\t\/**\n\t*\t@function createHighlight\n\t*\t@description \tCreates a flash sprite used to higlight elements\n\t*\t\t\t\t    By using this method we are sure that no dom manipulation is done and  \n\t*\t\t\t\t    no style is changed in HTML.\n\t*\/\n    createHighlight: function(){\n\t\tif(isAppSandbox){\n\t        var sprite = new runtime.flash.display.Sprite();\n\t        sprite.mouseEnabled =  false;\n\t        sprite.width = 0;\n\t        sprite.height = 0;\n\t        sprite.buttonMode = true;\n\t        var prevent = function(element, event, isClick){\n\t            air.Introspector.addEventListener(element, event, function(e){\n\t                if((air.Introspector.inspect||air.Introspector.remoteInspect) &&sprite.hitTestPoint(e.stageX, e.stageY)){\n\t                    e.preventDefault();\n\t                    e.stopPropagation();\n\t                    e.stopImmediatePropagation();\n\t                   \tif(isClick&&air.Introspector.canClick){\n\t\t\t\t\t\t\tif(air.Introspector.remoteInspect){\n\t\t\t\t\t\t\t\ttry{\n\t\t\t\t\t\t\t\t\tair.Introspector.inspectFrame.contentWindow.childSandboxBridge.air_Introspector_remoteClick();\n\t\t\t\t\t\t\t\t}catch(e){ air.Introspector.noChildBridge(air.Introspector.inspectFrame); }\n\t\t\t\t\t\t\t}else{\n\t                        \tair.Introspector.debugWindow.finishInspect(false);\n\t\t                        air.Introspector.hideHighlight();\n\t\t\t\t\t\t\t}\n\t                    }\n\t                }\n\n\t            }, true, 2000000);\n\t        };\n\t        var check = function(element, event){\n\t            air.Introspector.addEventListener(element, event, function(e){\n\t               if((air.Introspector.inspect||air.Introspector.remoteInspect)&&nativeWindow.active){\n\t                    setTimeout(function(){\n\t                        air.Introspector.canClick = true;\n\t                    }, 100);\n\t               }\n\t            }, true, 200000);\n\t        }\n        \n\t        var labelMover = function(element, event){\n\t        \tair.Introspector.addEventListener(element, event, function(e){\n\t\t           if((air.Introspector.inspect||air.Introspector.remoteInspect)){\n\t                  air.Introspector.highlightText.x = e.stageX+15;\n\t                  air.Introspector.highlightText.y = e.stageY+15;\n\/\/\t\t\t\t\t  air.Introspector.highlightText.visible = true;\n\t               }else{\n\n\t                  air.Introspector.highlightText.visible = false;\n\t               }\n\t        \t}, true, 200000);\n\t        }\n\t       prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.CLICK, true);\n\t       prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_DOWN);\n\t       prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_UP);\n\t       prevent(htmlLoader.stage, runtime.flash.events.MouseEvent.DOUBLE_CLICK);\n\t       check(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_MOVE);\n\t       check(nativeWindow, runtime.flash.events.Event.ACTIVATE);\n\t       labelMover(htmlLoader.stage, runtime.flash.events.MouseEvent.MOUSE_MOVE);\n\t       window.htmlLoader.stage.addChild(sprite); \n\t       air.Introspector.highlightSprite = sprite;\n\n\t       air.Introspector.highlightText = new runtime.flash.display.Sprite();\n\t       window.htmlLoader.stage.addChild(air.Introspector.highlightText); \n\n\t       air.Introspector.highlightText.graphics.beginFill(0xeeeeee, 0.8);\n\t       air.Introspector.highlightText.graphics.lineStyle(1, 0xeeeeee, 0.9, false);\n\t       air.Introspector.highlightText.graphics.drawRect(0, 0, 250, 40);\n\t       air.Introspector.highlightText.visible = false;\n\t       air.Introspector.highlightLine1 = air.Introspector.createTextField(air.Introspector.highlightText, 16, true);\n\t       air.Introspector.highlightLine2 = air.Introspector.createTextField(air.Introspector.highlightText, 10, false);\n       }else{\n\t\t\t\/\/should not be here\n\t   }\n    },\n    \n\t\/**\n\t*\t@function addEventListener\n\t*\t@description Add a listener and stores it for future cleanup\n\t*\/\n\taddEventListener: function(obj, eventName, listener, capture, priority){\n\t\teventListeners.push([obj, eventName, listener, capture]);\n\t\tobj.addEventListener(eventName, listener, capture, priority);\n\t},\n\t\n\t\/**\n\t*\t@function removeEventListener\n\t*\t@description Removes listener\n\t*\/\n\tremoveEventListener: function(obj, eventName, listener, capture){\n\t\tfor(var i=eventListeners.length-1;i>=0;i--){\n\t\t\tvar l = eventListeners[i];\n\t\t\tif(l[0]==obj && l[1]==eventName && l[2]==listener && l[3]==capture)\n\t\t\t\t{\n\t\t\t\t\teventListeners.splice(i, 1);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t}\n\t\tobj.removeEventListener(eventName, listener, capture);\n\t},\t\n\t\n\t\/**\n\t*\t@function drawRect\n\t*\t@description Draw a rectangle using ActionScript, also use tagName to find out which color to use \n\t*\t@see air.Introspector.highlightBgColors\n\t*\/\n\tdrawRect: function (rect, tagName){\n\t\t\tvar htmlLoaderBounds = htmlLoader.getBounds(htmlLoader.stage);\n\t    \trect.x += htmlLoaderBounds.x;\n\t\t    rect.y += htmlLoaderBounds.y;\n\t\t\trect.scaleX = 1;\n\t\t    rect.scaleY = 1;\n\t\t    air.Introspector.showHighlight(rect);\n\t\t    air.Introspector.highlightSprite.graphics.clear();\n\t\t    var bgColor = air.Introspector.highlightBgColors[tagName.toLowerCase()];\n\t\t    if(typeof bgColor==\'undefined\')\n\t\t         bgColor = air.Introspector.highlightBgColors[\'default\'];\n\t\t    air.Introspector.highlightSprite.graphics.beginFill(bgColor, 0.2);\n\t\t    air.Introspector.highlightSprite.graphics.lineStyle(3, bgColor, 0.9, false);\n\t\t    air.Introspector.highlightSprite.graphics.drawRect(0, 0, rect.width, rect.height);\n\t},\n\t\n\t\/**\n\t*\t@function highlightElement\n\t*\t@description Highlight element e. Get its bounding box and send it directly or over the bridge to air.Introspector.drawRect\n\t*\t@also air.Introspector.drawRect\n\t*\/\n    highlightElement: function(e, callback){\n\t\tvar rect = air.Introspector.getBorderBox(e);\n\t   \tif(rect==false)\n\t\t\treturn;\n\t\n\t\tif(isAppSandbox){\t\t\t\n\t\t\tair.Introspector.drawRect(rect, e.tagName);\n\t\t}else{\n\t\t\tsetTimeout(function(){\n\t\t\t\ttry{\n\t\t\t\t\tif(!isNaN(rect.width)&&!isNaN(rect.x)){\n\t\t\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\t\t\tparentSandboxBridge.air_Introspector_drawRect(rect, e.tagName);\t\t\t\t\t\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}catch(e){\n\t\t\t\t\tair.Introspector.Console.error(e);\n\t\t\t\t}\n\t\t\t\tif(typeof callback!=\'undefined\') callback();\n\t\t\t}, 0);\n\t\t}\n    },\n    \n\t\/**\n\t*\t@function addKeyboardEvents\n\t*\t@description \tRegisters events on every window that includes AIRDebug.js.\n\t*\n\t*\tBy default F11 enables the inspect tool\n\t*\t\t\t   F12 pops up the debug tool\n\t*\/\n\taddKeyboardEvents: function(sprite){\n\t\tair.Introspector.addEventListener(sprite, runtime.flash.events.KeyboardEvent.KEY_DOWN, function(e){\n            if(e.keyCode==air.Introspector.config.introspectorKey){ \/\/F11 key pressed\n\t\t\t\tif(typeof air.Introspector.lastElement!=\'undefined\'&&(air.Introspector.lastElement.nodeName==\'IFRAME\'||air.Introspector.lastElement.nodeName==\'FRAME\')){\n\t\t\t\t\ttry{\n\t\t\t\t\t\tvar contentWindow = air.Introspector.lastElement.contentWindow;\n\t\t\t\t\t\tif(typeof contentWindow.childSandboxBridge!=\'undefined\'&&\n\t\t\t\t\t\t\ttypeof contentWindow.childSandboxBridge.air_Introspector_isDebugOpen!=\'undefined\'&&\n\t\t\t\t\t\t\ttypeof contentWindow.childSandboxBridge.air_Introspector_toggleInspect!=\'undefined\')\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tif(contentWindow.childSandboxBridge.air_Introspector_isDebugOpen()){\n\t\t\t\t\t\t\t\tcontentWindow.childSandboxBridge.air_Introspector_toggleInspect();\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\treturn;\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}catch(e){\n\t\t\t\t\t\t\/\/it looks like no debugger in that iframe. go ahead with app sandbox debugger\n\t\t\t\t\t}\n\t\t\t\t}\n                air.Introspector.init(false, true, function(){\n                \tair.Introspector.debugWindow.toggleInspect();\t\t\t\t\t\n\t\t\t\t});\n\n                e.preventDefault();\n\t\t\t\te.stopPropagation();\n            }else if(e.keyCode==air.Introspector.config.debuggerKey){ \/\/F12 key pressed\n                air.Introspector.toggleWindow();\n                e.preventDefault();\n\t\t\t\te.stopPropagation();\n            }else if(e.keyCode==27&&air.Introspector.inspect){\n                air.Introspector.debugWindow.finishInspect();\n                air.Introspector.hideHighlight();\n                e.preventDefault();\n\t\t\t\t\t\te.stopPropagation();\n            }else if(e.ctrlKey==true&&e.altKey==false){\n\t\t\t\tvar tab = null;\n\t\t\t\tswitch(e.keyCode){\n\t\t\t\t\tcase runtime.flash.ui.Keyboard.NUMBER_1:\n\t\t\t\t\t\ttab = 0;\n\t\t\t\t\tbreak;\n\t\t\t\t\tcase runtime.flash.ui.Keyboard.NUMBER_2:\n\t\t\t\t\t\ttab = 1;\n\t\t\t\t\tbreak;\n\t\t\t\t\tcase runtime.flash.ui.Keyboard.NUMBER_3:\n\t\t\t\t\t\ttab = 2;\n\t\t\t\t\tbreak;\n\t\t\t\t\tcase runtime.flash.ui.Keyboard.NUMBER_4:\n\t\t\t\t\t\ttab = 3;\n\t\t\t\t\tbreak;\n\t\t\t\t\tcase runtime.flash.ui.Keyboard.NUMBER_5:\n\t\t\t\t\t\ttab = 4;\n\t\t\t\t\tbreak;\n\t\t\t\t\tcase runtime.flash.ui.Keyboard.NUMBER_6:\n\t\t\t\t\t\ttab = 5;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tif(tab!=null){\n\t\t\t\t\t\tair.Introspector.init(false, true, function(){\n\t\t\t\t\t\t\tair.Introspector.debugWindow.setTab(tab);\t\t\t\t\t\t\t\n\t\t\t\t\t\t});\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t}\n        }, true, 1000000);\n\t},\n\t\n\t\/**\n\t*\t@function showHighlightLabels\n\t*\t@description Make the tooltip labels near the highlighting box appear and tell the id\/tag name\/outer HTML\n\t*\/\n\tshowHighlightLabels: function(id, nodeName, outerHTML){\n\t\t\tif(typeof id!=\'undefined\'&&id.length!=0){\n                air.Introspector.highlightLine1.text = nodeName+\' - \'+id;\n            }else{\n                air.Introspector.highlightLine1.text = nodeName;  \n            }\n            if(air.Introspector.canClick){\n                air.Introspector.highlightLine2.text = outerHTML.substr(0, 40).replace(\/\\n\/g, \'\\\\n\')+\'...\';\n            }else{\n                air.Introspector.highlightLine2.text = \'Click to activate window\';\n                window.clearTimeout(air.Introspector.clickToActivateTimeout);\n                air.Introspector.clickToActivateTimeout = setTimeout(function(){\n                    air.Introspector.highlightLine2.text = outerHTML.substr(0, 40).replace(\/\\n\/g, \'\\\\n\')+\'...\';\n                }, 400)\n            }\n        \tair.Introspector.highlightText.visible = true;\t\n\t},\n\t\n\t\n\t\/**\n\t*\t@function registerUncaughtExceptionListener\n\t*\t@description Catches all uncaught exceptions from javascript and shows them in the console\n\t*\/\n\tregisterUncaughtExceptionListener: function(){\n\t\t\n\t\t\tair.Introspector.addEventListener(window.htmlLoader,\n\t\t\t\t\truntime.flash.events.HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION , \n\t\t\t\t\tfunction(e){\n\t\t\t\t\t\tif(e.exceptionValue && \n\t\t\t\t\t\t\t\te.exceptionValue.air_Introspector_setParentSandboxBridge == true &&\n\t\t\t\t\t\t\t\te.exceptionValue.air_Introspector_version == air.Introspector.version)\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tair.Introspector.registerFramesParentSandboxBridge();\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\tair.Introspector.logError(e.exceptionValue, {htmlLoader:window.htmlLoader});\n\t\t\t\t\t\t\/\/\te.preventDefault();\n\t\t        \t});\n\t\t\n\t\t\n\t},\n\n\n\t\/**\n\t*\t@function registerCloseEventListener\n\t*\t@description \n\t*\/\n\tregisterCloseEventListener: function(){\n\t\tair.Introspector.addEventListener(window.nativeWindow, air.Introspector.runtime.Event.CLOSE, function(){\n\t            var debugWindow = air.Introspector.findDebugWindow();\n\t            if(debugWindow!=null){\n\t                debugWindow.closedWindow(window.htmlLoader);\n\t            }\n\t\n\t        });\n\t\t\t\n\t\t\n\t},\n\n\t\/**\n\t*\t@function registerCompleteEventLisener\n\t*\t@description Make the Introspector window knwo that we are complete. Register parentSandboxBridge on every frame\n\t*\/\n\tregisterCompleteEventListener: function(){\n\t\tair.Introspector.addEventListener(window.htmlLoader, air.Introspector.runtime.Event.COMPLETE, function(){\n\t\t\t\t\tair.Introspector.removeEventListener(window.htmlLoader, air.Introspector.runtime.Event.COMPLETE, arguments.callee);\n\t\t\t\t\ttry{\n\t\t           \t \/\/announce the debugWindow to refresh DOM and assets\n\t\t\t            var debugWindow = air.Introspector.findDebugWindow();\n\t\t\t            if(debugWindow!=null){\n\t\t\t            \tif(debugWindow.isLoaded){\n\t\t\t                    debugWindow.completeWindow(window.htmlLoader);\n\t\t\t            \t}\n\t\t\t            }\n\t\t\t\t\t\n\t\t\t\t\t\tair.Introspector.registerFramesParentSandboxBridge();\n\t\t\t\t\t}catch(e){\n\t\t\t\t\t\truntime.trace(e);\n\t\t\t            runtime.trace(e.line);\n\t\t\t\t\t\tair.Introspector.Console.log(e);\n\t\t\t\t\t}\n\t\t\t});\n\t},\n\n\t\/**\n\t*\t@function registerFramesParentSandboxBridge\n\t*\t@description All frames should know about us - registering parentSandboxBridge\n\t*\/\n\t\n\tregisterFramesParentSandboxBridge: function(){\n\t\t\t\/\/var modified = false;\n\t\t\tvar iframes = document.getElementsByTagName(\'iframe\');\n\t\t\tfor(var i=iframes.length-1;i>=0;i--){\n\t\t\t\tair.Introspector.registerFrame(iframes[i]);\n\t\t\t}\n\n\t\t\tvar frames = document.getElementsByTagName(\'frame\');\n\t\t\tfor(var i=frames.length-1;i>=0;i--){\n\t\t\t\tair.Introspector.registerFrame(frames[i]);\t\t\t\t\n\t\t\t}\n\t\t\t\/\/return modified;\n\t},\n\t\n\t\/**\n\t*\t@function registerDeactivateEventLisener\n\t*\t@description Hides the highlighting rectangle and deactivates inspect-clicking for this window\n\t*\/\n\tregisterDeactivateEventListener: function(){\n\t\t\tair.Introspector.addEventListener(window.nativeWindow, air.Introspector.runtime.Event.DEACTIVATE, function(){ air.Introspector.hideHighlight(); air.Introspector.canClick =false; });\n\t},\n\t\n\t\/**\n\t*\t@function registerChildSandboxBridge\n\t*\t@description Register childSandboxBridge for current iframe\n\t*\/\n\tregisterChildSandboxBridge: function(){\n\t\t\n\t\tif(typeof childSandboxBridge==\'undefined\')\n\t\t\tchildSandboxBridge={};\n\t\t\ttry{\n\t\tchildSandboxBridge.air_Introspector_remoteClick = function (){\n\t\t\ttry{\n\t\t\t\tair.Introspector.remoteClick();\n\t\t\t}catch(e){ alert(e+\' \'+e.line); }\n\t\t}\n\t\t\n\t\tchildSandboxBridge.air_Introspector_isDebugOpen = function(){\n\t\t\treturn typeof air.Introspector.debugWindow!=\'undefined\';\n\t\t}\n\t\t\n\t\tchildSandboxBridge.air_Introspector_toggleInspect = function (){\n\t\t\tair.Introspector.init(false, true, function()\n\t\t\t{\n               \tair.Introspector.debugWindow.toggleInspect();\t\t\t\t\t\t\t\n\t\t\t});\n\t\t}\n\t\t\n\t\tchildSandboxBridge.air_Introspector_bridgeLoaded = function(){\n\t\t\tvar l = air.Introspector.bridgeCallbacks;\n\t\t\tfor(var i=0;i<l;i++){\n\t\t\t\ttry{\n\t\t\t\t\tair.Introspector.bridgeCallbacks[i]();\n\t\t\t\t}catch(e){\n\t\t\t\t\tair.Introspector.logError(e);\n\t\t\t\t}\n\t\t\t}\n\t\t\tair.Introspector.bridgeCallbacks = [];\n\t\t}\n\t\t\t}\n\t\t\tcatch(e){}\n\t},\n\t\n\t\/**\n\t*\t@function createOpenConsoleButton\n\t*\t@description Creates a button on the top-right corent of the iframe that will open the introspector\n\t*\/\n\tcreateOpenConsoleButton: function(){\n\t\tvar consoleButton = document.createElement(\'input\');\n\t\tconsoleButton.onclick = function(){\n\t\t\tair.Introspector.init(true, true, function(){ });\n\t\t}\n\t\tconsoleButton.style.zIndex = 1000000;\n\t\tconsoleButton.style.position = \'fixed\';\n\t\tconsoleButton.style.right = \'10px\';\n\t\tconsoleButton.style.top = \'10px\';\n\t\tconsoleButton.type = \'button\';\n\t\tconsoleButton.value = \'Open Introspector\';\n\t\tdocument.body.appendChild(consoleButton);\t\t\t\t\t\t\t\t\n\t},\n\t\n\t\/**\n\t*\t@function registerDOMEventListeners\n\t*\t@description Registers DOMSubtreeModified, DOMCharacterDataModified, mouseover\n\t*\/\n\tregisterDOMEventListeners: function(){\n\t\tvar hoverTimeout = null;\n\t\t\/\/debugWindow should know about any dom change\n\t\tdocument.addEventListener(\'DOMSubtreeModified\', function(e){\n            var debugWindow = air.Introspector.findDebugWindow();\n            if(debugWindow!=null&&debugWindow.isLoaded){\n\t\t\t\tdebugWindow.dom3Event(e);\n            }\n\t\t});\n\t\tdocument.addEventListener(\'DOMCharacterDataModified\', function(e){\n            var debugWindow = air.Introspector.findDebugWindow();\n            if(debugWindow!=null&&debugWindow.isLoaded){\n\t\t\t\tdebugWindow.dom3Event(e);\n            }\n\t\t});\n\t\t\n\n           document.body.addEventListener(\'mouseover\', function(e){\n               if(air.Introspector.inspect){\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\tif(isAppSandbox){\n\t\t\t\t\t\t\tif(!nativeWindow.active)\n\t\t\t\t\t\t\t\tnativeWindow.activate();\n\t\t\t\t\t}\n                    if(e.srcElement){\n\t\t\t\t\t\tif(isAppSandbox){\n                        \tair.Introspector.highlightElement(e.srcElement);\n\t\t\t\t\t\t\tair.Introspector.showHighlightLabels(e.srcElement.id, e.srcElement.nodeName, e.srcElement.outerHTML);\n\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\tair.Introspector.highlightElement(e.srcElement, function(){\n\t\t\t\t\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\t\t\t\t\tparentSandboxBridge.air_Introspector_showHighlightLabels(e.srcElement.id, e.srcElement.nodeName, e.srcElement.outerHTML);\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif(hoverTimeout) clearTimeout(hoverTimeout);\n\t\t\t\t\t\thoverTimeout = setTimeout(function(){\n\t                        air.Introspector.init(false, true, function (){\n\t\t\t\t\t\t\t\tair.Introspector.debugWindow.setInspectElement(e.srcElement);\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}, 100); \n                    }else{\n                        air.Introspector.hideHighlight();\n                    }\n\t\t\t\t}, 0);\n             }else if(isAppSandbox){\n\t\t\t\t\t\tair.Introspector.lastElement = e.srcElement;\n\t\t\t }\n\n           }, true);\n\n\t\t\/\/document.body.addEventListener(\'mouseout\', function(e){\n\t\t\/\/\t\tair.Introspector.hideHighlight();\n        \/\/});\n\t},\n\t\n\t\/**\n\t*\t@function cleanup\n\t*\t@description Cleans up the html loader\n\t*\n\t*\/\n    cleanup: function(){\n\t\t\tfor(var i=eventListeners.length-1;i>=0;i--){\n\t\t\t\tvar l = eventListeners[i];\n\t\t\t\ttry{\n\t\t\t\t\tl[0].removeEventListener(l[1], l[2], l[3]);\t\n\t\t\t\t}catch(e){}\n\t\t\t}\n\t\t\teventListeners = [];\n\t\t\ttry{\n\t\t    \twindow.htmlLoader.stage.removeChild(air.Introspector.highlightText); \n\t\t\t}catch(e){}\t    \n\t},\n\t\n\t\/**\n\t*\t@function register\n\t*\t@description Registers current window in debugger\n\t*\n\t*\tCaptures every XHR object created and any uncaught exception \n\t*\tand sends it to the debugger\n\t*\/\n    register: function(){\n    \t\n    \tif (window.XMLHttpRequest && window.XMLHttpRequest.prototype){\n                    window.XMLHttpRequest.prototype.debugopen = window.XMLHttpRequest.prototype.open;\n\t\t\t\t\twindow.XMLHttpRequest.prototype.debugsend = window.XMLHttpRequest.prototype.send;\n                    window.XMLHttpRequest.prototype.open = function(method, url, asyncFlag, username, password){\n\t\t\t\t\t\tif(typeof this.doNotDebug==\'undefined\'){\n\t                   \t    var debugWindow = air.Introspector.findDebugWindow();\n\t\t\t                if(debugWindow!=null){\n\t\t\t\t\t\t\t\tdebugWindow.logNet(this, method, url, asyncFlag);\n\t\t\t                }\n\t\t\t\t\t\t}\n                        return this.debugopen(method, url, asyncFlag, username, password);\n                    };\n\t\t\t\t\twindow.XMLHttpRequest.prototype.send = function(obj){\n\t\t\t\t\t\tif(typeof this.doNotDebug==\'undefined\'){\n\t                \t    var self = this;\n\t\t\t\t\t\t\tvar debugWindow = air.Introspector.findDebugWindow();\n\t\t\t\t            if(debugWindow!=null){\n\t\t\t\t\t\t        \tvar a = this.onreadystatechange;\n\t\t                            this.onreadystatechange = function(){\n\t\t                            \t if (typeof a == \'function\')a.call(self);\n\t\t                            \t \tdebugWindow.logNet(self, \'unknown\', \'\', false);\n\t\t\t\t                    };\n\t\t\t\t\t\t\t\tif(typeof self.doNotDebug==\'undefined\')\n\t\t                           \t debugWindow.logNetSend(this, obj);\n\t\t\t                }\n\t                        var ret = this.debugsend(obj);\n\t\t\t\t\t\t\tif(debugWindow!=null){\n\t\t\t\t\t\t\t\t\tdebugWindow.logNetSend(this, obj);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn ret;\n\t\t\t\t\t\t}else{\n\t                        return this.debugsend(obj);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t}\n        }\n\n\t\tif(isAppSandbox){  \n\t\t\t\tair.Introspector.addKeyboardEvents(window.htmlLoader.stage);\n\t\t\t\tair.Introspector.registerUncaughtExceptionListener();\n\t\t\t\tair.Introspector.registerCloseEventListener();\n\t\t\t\tair.Introspector.registerCompleteEventListener();\n\t        \tair.Introspector.registerDeactivateEventListener();\n\t \t\t    air.Introspector.createHighlight();\n\t\t\t}else{\n\t\t\t\tair.Introspector.registerChildSandboxBridge();\n\t\t\t}\n\t\t\tair.Introspector.waitForBody(document, function(){\n\t\t        try{\n\t\t\t\t\tif(!isAppSandbox){ air.Introspector.createOpenConsoleButton(); }\n\t\t\t\t\tair.Introspector.registerDOMEventListeners();\n\t\t\t\t\twindow.addEventListener(\'unload\', function(){\n\t\t\t\t\t\ttry{\n\t\t\t\t\t\t\tair.Introspector.cleanup();\n\t\t\t\t\t\t\tif(!isAppSandbox){\n\t\t\t\t\t\t\t\t\/\/our debugger can NOT live without it\'s parent\n\t\t\t\t\t\t\t\tair.Introspector.debugWindow.window.close();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}catch(e){  }\n\t\t\t\t\t});\n\t\t\t\t}catch(e){\n\t\t\t\t\tif(isAppSandbox){ \n\t\t\t\t\t\truntime.trace(e);\n\t\t            \truntime.trace(e.line);\n\t\t\t\t\t}\n\t\t\t\t\tair.Introspector.Console.log(e);\n            \t}\n\t     });\n\n\t\n    },\n\n\n\t\/**\n\t*\t@function registerFrame\n\t*\t@description Makes the parentSandboxBridge available to frame \n\t*\/\n\tregisterFrame: function(frame){\n\t\tif(typeof frame.contentWindow.parentSandboxBridge==\'undefined\')\n\t\t\tframe.contentWindow.parentSandboxBridge = {};\n\t\t\t\n\t\t\/*frame.contentWindow.parentSandboxBridge.trace = function(a){\n\t\t\truntime.trace(a);\n\t\t};*\/\n\t\t\/\/checking that the bridge is not already there\n\t\t\/*var modified = typeof frame.contentWindow.parentSandboxBridge.air_Introspector_hideHighlight==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_showHighlight==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_drawRect==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_setInspect==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_getWindowTitle==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_checkNativeWindow==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToClipboard==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToFile==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_writeConfigFile==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_readConfigFile==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_showHighlightLabels==\'undefined\'\n\t\t\t|| typeof frame.contentWindow.parentSandboxBridge.air_Introspector_getFrameId==\'undefined\';*\/\n\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_hideHighlight = function(){\n\t\t\t\tair.Introspector.hideHighlight();\n\t\t};\n\t\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_showHighlight = function(rect){\n\t\t\t\tair.Introspector.showHighlight(rect);\n\t\t};\n\t\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_drawRect = function(rect, tagName){\n\t\t\t\tvar frameRect = air.Introspector.getBorderBox(frame);\n\t\t\t\tvar blw = air.Introspector.getIntProp(frame, \"border-left-width\");\n                var btw = air.Introspector.getIntProp(frame, \"border-top-width\");\n\t\t\t\tif(frameRect==null) return;\n\t\t\t\trect.x+=frameRect.x+2*blw;\n\t\t\t\trect.y+=frameRect.y+2*btw;\n\t\t\t\tair.Introspector.drawRect(rect, tagName);\n\t\t};\n\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_setInspect = function(enabled){\n\t\t\t\tair.Introspector.inspectFrame = enabled?frame:null;\n\t\t\t\tair.Introspector.remoteInspect = enabled;\n\t\t\t\tif(!enabled){\n\t\t\t\t\tair.Introspector.hideHighlight();\n\t\t\t\t}\n\t\t};\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_getWindowTitle = function(){\n\t\t\treturn document.title;\n\t\t};\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_checkNativeWindow = function(title){\n\t\t\tvar htmlWindows = air.Introspector.runtime.NativeApplication.nativeApplication.openedWindows;\n\t\t\tfor(var i=htmlWindows.length-1;i>=0;i--){\n\t\t\t\tif(htmlWindows[i].title==title){\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t};\n\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToClipboard = function(str){\n\t\t\tair.Introspector.writeConsoleToClipboard(str);\n\t\t};\n\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_writeConsoleToFile = function(str){\n\t\t\tair.Introspector.writeConsoleToFile(str);\n\t\t};\n\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_writeConfigFile = function(config){\n\t\t\treturn air.Introspector.writeConfigFile(config, true);\t\t\t\n\t\t}\n\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_readConfigFile = function(){\n\t\t\treturn air.Introspector.readConfigFile(true);\n\t\t}\n\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_showHighlightLabels = function(id, nodeName, outerHTML){\n\t\t\tair.Introspector.showHighlightLabels(id, nodeName, outerHTML);\n\t\t};\n\t\t\n\t\tframe.contentWindow.parentSandboxBridge.air_Introspector_getFrameId = function(){\n\t\t\treturn frame.id;\n\t\t}\n\t\t\n\t\tif(typeof frame.contentWindow.childSandboxBridge!=\'undefined\'\n\t\t\t\t&& typeof frame.contentWindow.childSandboxBridge.air_Introspector_bridgeLoaded!=\'undefined\'){\n\t\t\tframe.contentWindow.childSandboxBridge.air_Introspector_bridgeLoaded();\n\t\t}\n\t\t\n\t\t\n\t\t\/\/return modified;\n\t},\n\t\n\t\/**\n\t*\t@function waitForBody\n\t*\t@description Wait until document.body is available\n\t*\/\n\twaitForBody: function(document, callback){\n\t\tif(document.body){\n\t\t\tcallback();\n\t\t}else{\n\t\t\tsetTimeout(air.Introspector.waitForBody, 10, document, callback);\n\t\t}\n\t},\n    \n\t\/**\n\t*\t@function toggleWindow\n\t*\t@description Shows\/Hides the debug tool\n\t*\/\n    toggleWindow:function(){\n        air.Introspector.init(true, false, function(justCreated){\n\t\t\tif(!justCreated)\n\t\t\t\tair.Introspector.debugWindow.nativeWindow.visible ^= true;\n\t\t});\n        \n    },\n\t\n\t\n\t\/**\n\t*\t@function init\n\t*\t@description Makes sure the debug tool is enabled\n\t*\/\n    init: function(showLoader, toggle, callback){\n\t\tif(!air.Introspector.canInit())\n\t\t\treturn;\n\t\n\t\tif(typeof showLoader==\'undefined\') showLoader = false;\n\t\tif(typeof toggle==\'undefined\') toggle = true;\n\t\n\t\tif(isAppSandbox){\n\t\t\t\n\t\t\tif(typeof air.Introspector.debugWindow==\'undefined\' || air.Introspector.debugWindow.nativeWindow.closed){\n\t\t\t\tdelete air.Introspector.debugWindow;\n\t           var debugWindow = air.Introspector.findDebugWindow();\n\t           if(debugWindow!=null && !debugWindow.nativeWindow.closed){\n\t               air.Introspector.debugWindow = debugWindow;\n\t\t\t\tif(toggle){\n\t\t\t\t\tair.Introspector.debugWindow.nativeWindow.visible = true;\t\t\t   \n\t\t\t\t\tif(!showLoader){\n\t\t\t\t\t\tnativeWindow.activate();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tcallback(false);\n\t           }else{\n\t\t\t\t   air.Introspector.loadDebugger(function(debugWindow){\n\t\t\t\t\t\tair.Introspector.debugWindow = debugWindow;\n\t\t\t\t\t\tcallback(true);\n\t\t\t\t   }, showLoader);\n\t           }\n\t        }else{\n\t\t\t\tif(toggle){\n\t\t\t\t\tif(showLoader){\n\t\t\t\t\t\tair.Introspector.debugWindow.nativeWindow.activate(); \n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tcallback(false);\n\t\t\t}\n\t\t}else{\n\t\t\tif(typeof activeWindow==\'undefined\'){\n\t\t\t\tair.Introspector.registerChildSandboxBridge();\n\t\t\t}\n\t\t\t\n\t\t\tif(typeof air.Introspector.debugWindow==\'undefined\'||\n\t\t\t\ttypeof air.Introspector.debugWindow.window.air==\'undefined\'){ \n\/*\t\t\t\t(air.Introspector.debugWindow.isWindowCreated\n\t\t\t\t\t&&air.Introspector.debugWindow.isLoaded \n\t\t\t\t\t  &&air.Introspector.debugWindow.window \n\t\t\t\t\t\t&&!parentSandboxBridge.air_Introspector_checkNativeWindow(air.Introspector.parentWindowTitle + \': \'+air.Introspector.debugWindow.window.document.title))){*\/\n\t\t\t\tdelete air.Introspector.debugWindow;\n\n\n\t\t\t\tair.Introspector.loadDebugger(function(debugWindow){\n\t\t\t\t\t\tair.Introspector.debugWindow = debugWindow;\n\t\t\t\t\t\tcallback(true);\n\t\t\t\t   });\n\/\/\t\t\t\tair.Introspector.debugWindow = new air.Introspector.DebugWindow ({activateDebug: showLoader, activeWindow: window});\n\t\t\t}else if(!air.Introspector.debugWindow.isWindowCreated){\n\t\t\t\treturn;\n\t\t\t}else{\n\t\t\t\tcallback(false);\n\t\t\t}\n\t\t}\n    },\n    times:0,\t\/\/make the window.open page name unique - this is the number of opened and closed introspector windows\n\t\/**\n\t*\t@function tryCreateWindow\n\t*\t@description window.Open in browser\/remote sandbox is not allowed if the action is not iniated by the user (eg. user gesture, mouse click)\n\t*\t\t\t\t We can only wait for that moment. Until that happends we record all the callbacks and run them when the Introspector is laoded \n\t*\t@runs in remote sandbox only\n\t*\/\n\ttryCreateWindow: function(callbacks){\n\/\/\t\ttry{\n\t\t\tvar self = this;\n\t\t\tvar w;\n\t\t\tvar iframeId;\n\t\t\t\n\/*\t\t\tif(typeof parentSandboxBridge==\'undefined\'){\n\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\tair.Introspector.tryCreateWindow(callbacks);\t\t\t\t\t\n\t\t\t\t});\n\t\t\t\treturn;\n\t\t\t}*\/\n\n\t\t\tair.Introspector.parentWindowTitle = parentSandboxBridge.air_Introspector_getWindowTitle();\n\n\t\t\tif(typeof parentSandboxBridge!=\'undefined\'&&typeof parentSandboxBridge.air_Introspector_getFrameId!=\'undefined\')\n\t\t\t\tiframeId  = parentSandboxBridge.air_Introspector_getFrameId();\n\t\t\t\n\t\t\tair.Introspector.times++;\n\t\t\t\n\t\t\tif(typeof air.Introspector.config.useAirDebugHtml==\'undefined\'||air.Introspector.config.useAirDebugHtml==false){\n\t\t\t\tw = window.open(\'about:blank\', \'debugger\'+air.Introspector.times, \'width=640,height=480,resizable=1\');\n\t\t\t\tif(w&&w.document){\n\t\t\t\t\tw.isAppSandbox = isAppSandbox;\n\t\t\t\t\tw.opener = window;\n\t\t\t\t\tw.iframeId = iframeId;\n\t\t\t\t\tw.initCallbacks = callbacks;\t\n\t\t\t\t\tw.activeWindow = window;\n\t\t\t\t\tw.isLoaded = false;\n\t\t\t\t\tw.config = air.Introspector.config;\n\t\t\t\t\tw.document.write(air.Introspector.contentString);\n\t\t\t\t\tw.document.close();\n\t\t\t\t}\n\t\t\t}else{\n\t\t\t\tw = window.open(\'DebugUI.html\', \'debugger\'+air.Introspector.times, \'width=640,height=480,resizable=1\');\n\t\t\t\t\n\t\t\t\tif(w&&w.document){\n\t\t\t\t\tw.opener = window;\n\t\t\t\t\tw.iframeId = iframeId;\n\t\t\t\t\tw.activeWindow = window;\t\t\t\t\n\t\t\t\t\tw.config = air.Introspector.config;\n\t\t\t\t\tw.initCallbacks = callbacks;\t\t\t\t\n\t\t\t\t\tw.isLoaded = false;\n\t\t\t\t\tw.isAppSandbox = isAppSandbox;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn w;\n\/\/\t\t}catch(e){\n\/\/\t\t\talert(e+\' \'+e.line);\n\/\/\t\t}\n\t},\n\t\n\t\/**\n\t*\t@function loadDebugger\n\t*\t@description Loads the debugger window, register callbacks until it is ready\n\t*\t@runs in application sandbox only\n\t*\/\n\tloadDebugger: function(callback, activateDebug){\n\t\t\tvar htmlLoader;\n\t\t\tvar loadDebugger = arguments.callee;\n\t\t\tif(loadDebugger.htmlLoader && typeof loadDebugger.htmlLoader.window.isLoaded != \'undefined\'){\n\t\t\t\tif(loadDebugger.htmlLoader.window.isLoaded){\n\t\t\t\t\tcallback(loadDebugger.htmlLoader.window.debugWindow);\n\t\t\t\t}else{\n\t\t\t\t\tif(loadDebugger.htmlLoader.window.initCallbacks){\n\t\t\t\t\t\tloadDebugger.htmlLoader.window.initCallbacks.push(callback); \n\t\t\t\t\t}else{\n\t\t\t\t\t\tloadDebugger.initCallbacks.push(callback); \t\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif(typeof loadDebugger.initCallbacks==\'undefined\'){\n\t\t\t\tloadDebugger.initCallbacks = [function(){\n\t\t\t\t\tdelete loadDebugger.initCallbacks;\n\t\t\t\t}, callback];\n\t\t\t}else{\n\t\t\t\tloadDebugger.initCallbacks.push(callback);\n\t\t\t}\n\t\t\tif(isAppSandbox){\n\t\t\t    htmlLoader = air.Introspector.runtime.HTMLLoader.createRootWindow(false);\n\t\t\t    air.Introspector.addEventListener(htmlLoader, air.Introspector.runtime.Event.HTML_DOM_INITIALIZE, function(){\n\t\t\t\t\ttry{ \n\t\t\t\t\t\tair.Introspector.removeEventListener(htmlLoader, air.Introspector.runtime.Event.HTML_DOM_INITIALIZE, arguments.callee);\n\t\t\t\t\t\thtmlLoader.window.initCallbacks = loadDebugger.initCallbacks;\n\t\t\t\t\t\thtmlLoader.window.isLoaded = false;\n\t\t\t\t\t\thtmlLoader.window.config = air.Introspector.config;\n\t\t\t\t\t\thtmlLoader.window.activateDebug = activateDebug;\n\t\t\t\t\t\thtmlLoader.window.isAppSandbox = isAppSandbox;\n\t\t\t\t\t}catch(e){ \n\t\t\t\t\t\tair.Introspector.runtime.trace(e); \n\t\t\t\t\t\tair.Introspector.runtime.trace(e.line); \n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\thtmlLoader.window.isLoaded = false;\n\n\t\t\t    var nativeWindow = htmlLoader.stage.nativeWindow;\n\t\t\t\tnativeWindow.width = 640;\n\t\t\t\tnativeWindow.height = 480;\n\t\t\t    air.Introspector.addEventListener(htmlLoader, runtime.flash.events.HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION, function(e){\n\t\t\t         air.Introspector.logError(e.exceptionValue, {htmlLoader: self.htmlLoader});\n\t\t\t         e.preventDefault();\n\t\t\t    });\n\t\t\t    if(typeof air.Introspector.config.useAirDebugHtml==\'undefined\'||air.Introspector.config.useAirDebugHtml==false){\n\t\t\t        htmlLoader.loadString(air.Introspector.contentString);\n\t\t\t    }else{\n\t\t\t        htmlLoader.load(new air.Introspector.runtime.URLRequest(\'app:\/DebugUI.html\'));\n\t\t\t    }\n\t\t\t}else{\n\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\tvar w = air.Introspector.tryCreateWindow(loadDebugger.initCallbacks);\n\t\t\t\t\tif(w){\n\t\t\t\t\t\tvar htmlLoader = {window: w};\t\n\t\t\t\t\t\tloadDebugger.htmlLoader = htmlLoader;\t\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\t\n\t\t\tloadDebugger.htmlLoader = htmlLoader;\t\t\n\t},\n\n\t\/**\n\t*\t@function findDebugWindow\n\t*\t@description Look up the Introspector in other windows. Maybe somebody else just opened it before us. \n\t*\/\n    findDebugWindow: function(){\n\t\tif(isAppSandbox){\n\t\t\ttry{\n\t    \t\tif(air.Introspector.debugWindow&&air.Introspector.debugWindow.nativeWindow.closed==false)\n\t\t    \t   return air.Introspector.debugWindow;\n\t\t\t}catch(e){\n\t\t\t}\n\t\t\ttry{\n\t\t        var htmlWindows = air.Introspector.getHtmlWindows(true);\n\t\t        for(var i=htmlWindows.length-1;i>=0;i--){\n\t\t            try{\n\t\t                if(typeof htmlWindows[i].htmlLoader.window.air!=\'undefined\'\n\t\t                   && typeof htmlWindows[i].htmlLoader.window.air.Introspector!=\'undefined\'\n\t\t                       && typeof htmlWindows[i].htmlLoader.window.air.Introspector.debugWindow!=\'undefined\'\n\t\t\t\t\t\t\t\t&& htmlWindows[i].htmlLoader.window.air.Introspector.debugWindow.nativeWindow.closed==false \n\t\t\t\t\t\t\t\t\t&& htmlWindows[i].htmlLoader.window.isAppSandbox )\n\t\t                    {\n\t\t                        return htmlWindows[i].htmlLoader.window.air.Introspector.debugWindow;\n\t\t                    }\n\t\t            }catch(e){\n\t\t                \/\/this window is not initialized yet\n\t\t                \/\/just get next window\n\t\t            }\n\t\t        }\n\t\t\t}catch(e){}\n\t\t}else{\n\t\t\treturn air.Introspector.debugWindow;\n\t\t}\n        return null;\n    },\n\n\t\/\/application browser formats\n\t\/\/\t\t0 - text\n\t\/\/\t\t1 - images\n\t\/\/\t\t2 - xml (you may want to add your own xml type here)\n    formats : { \'png\':1, \'gif\':1, \'zip\':1, \'air\':1, \'jpg\':1, \'jpeg\':1,\n                 \'txt\':0, \'html\':0, \'js\':0, \'xml\':2, \'opml\':2, \'css\':0, \'htm\':0, \'\':0 },\n    \n\n\t\/**\n\t*\t@function canInit\n\t*\t@description Check if we got parentSandboxBridge available\n\t*\t@disabled \n\t*\/\n\tcanInit: function(){\n\/*\t\tif(!isAppSandbox&&typeof parentSandboxBridge==\'undefined\'){\n\t\t\talert(\'You need to include AIRIntrospector.js in application sandbox too!\');\n\t\t\treturn false;\n\t\t}*\/\n\t\treturn true;\n\t},\n\n\t\/**\n\t*\t@function logArguments\n\t*\t@description \n\t*\/\n\tlogArguments: function(args, config){\n\t\tif(!air.Introspector.canInit()) return;\n\t\tconfig.timestamp = new Date();\n       \tair.Introspector.init(config.type==\'error\', true, function(){\n\t\t\tair.Introspector.debugWindow.logArguments(args, config);\n\t\t});\n        \n    },\n    \/**\n\t*\t@function logError\n\t*\t@description \n\t*\/\n    logError: function(error, config){\n        air.Introspector.init(false, true, function(){\n\t\t\tair.Introspector.debugWindow.logError(error, config);\n\t\t});\n    },\n    \n\t\/**\n\t*\t@function showCssElement\n\t*\t@description \n\t*\/\n\tshowCssElement: function(element){\n\t\tvar debugWindow = air.Introspector.findDebugWindow();\n\t\tif(debugWindow){\n\t\t\tdebugWindow.showCssElement(element);\n\t\t}\n\t},\n\n\t\/**\n\t*\t@function findLoader\n\t*\t@description Finds the first HTMLLoader in flash display object list\n\t*\/\n    findLoader: function (stage){\n\t\ttry{\n\t        for(var i=stage.numChildren-1;i>=0;i--){\n\t            var child = stage.getChildAt(i);\n\t\t\t\tvar str=child.toString();\n\t            if(str==\'[object HTMLLoader]\'||child.name==\"FlexHTMLLoader7\"){\n\t                return child;\n\t            }\n\t        }\n\t        for(var i=stage.numChildren-1;i>=0;i--){\n\t            var child = stage.getChildAt(i);\n\t\t\t\tvar loader = air.Introspector.findLoader(child);\n\t\t\t\tif(loader!=null)\n\t\t\t\t\treturn  loader;\n\t\t\t}\n\t\t}catch(e){\n\t\t}\n        return null;\n    }, \n    \n\t\/**\n\t*\t@function getHtmlWindows\n\t*\t@description Returns an array of all HTML windows\n\t*\/\n    getHtmlWindows: function(includeInspectors){\n\t\tif(isAppSandbox){\n \t       var windowNodes = [];\n\t        var windows = air.Introspector.runtime.NativeApplication.nativeApplication.openedWindows;\n\t        for(var i=windows.length-1;i>=0;i--){\n\t            var loader = air.Introspector.findLoader(windows[i].stage);\n\t            if(loader!=null){\n\t\t\t\t\tif(typeof includeInspectors==\'undefined\' && typeof loader.window!=\'undefined\' && typeof loader.window.air!=\'undefined\' && typeof loader.window.air.Introspector!=\'undefined\' &&\n\t\t\t\t\t\ttypeof loader.window.air.Introspector.localIframeDebug != \'undefined\' )\n\t\t\t\t\t\t\tcontinue;\n\t                windowNodes.push({\n\t                    nativeWindow: windows[i],\n\t                    stage: windows[i].stage,\n\t                    htmlLoader : loader\n\t                });\n\t            }\n\t        }\n\t        return windowNodes;\n\t\t}else{\n\t\t\t\/\/should not be here\n\t\t\treturn [];\n\t\t}\n   },\n   \n\t\/**\n\t*\t@function twoDigits\n\t*\t@description int 2 string with two digits\n\t*\/\n\ttwoDigits: function(val){\n\t     if(val<10) return \'0\'+val;\n\t     return val+\'\';\n\t},\n\n\t\/**\n\t*\t@function escapeHtml\n\t*\t@description Escapes html in order to display it in html\n\t*\/\n\tescapeHtml: function(html){      \n\t     return (html+\'\').replace(\/&\/g, \'&\').replace(\/\"\/g, \""\").replace(\/<\/g, \'<\').replace(\/>\/g, \'>\');\n\t},\n\n   \ttree: { },\n\n\n\t\/**\n\t*\t@function isNumberObject\n\t*\t@description \n\t*\/\n\tisNumberObject: function(obj){\n\t     try{\n\t         \/\/can we catch isNaN only for NaN\n\t         return (obj+0==obj&&!isNaN(obj));\n\t     }catch(e){\n\t     }\n\t     return false;\n\t },\n\n\t\/**\n\t*\t@function isStringObject\n\t*\t@description \n\t*\/\n\tisStringObject: function(obj){\n\t    try{\n\t        return (typeof(obj.match) != \"undefined\" && obj.match.toString().indexOf(\"[native code]\")>0);\n\t    }catch(e){\n\t    }\n\t    return false;\n\t},\n\n\t\/**\n\t*\t@function isDateObject\n\t*\t@description \n\t*\/\n\tisDateObject: function(obj){\n\t    try{\n\t        return (typeof(obj.getDate) != \"undefined\" && obj.getDate.toString().indexOf(\"[native code]\")>0);\n\t    }catch(e){\n\t    }\n\t    return false;\n\t},\n\n\t\/**\n\t*\t@function isArgumentsObject\n\t*\t@description \n\t*\/\n   isArgumentsObject: function(obj){\n       try{\n           return obj.toString()==\'[object Arguments]\';\n       }catch(e){\n       }\n       return false;\n   },\n\n\t\/**\n\t*\t@function isXMLObject\n\t*\t@description \n\t*\/\n\tisXMLObject: function(obj){\n\t\ttry{\n\t\t\tif(obj.xmlVersion&&obj.firstChild!=null)\n\t        \treturn obj.xmlVersion!=\'\';\n\t    }catch(e){\n\t    }\n\t    return false;\n\t},\n\n\t\/**\n\t*\t@function isArrayObject\n\t*\t@description \n\t*\/\n\tisArrayObject: function(obj){\n       try{\n           return (typeof(obj.push) != \"undefined\" && obj.push.toString().indexOf(\"[native code]\")>0);\n       }catch(e){\n       }\n       return false;\n\t},\n\n\t\/**\n\t*\t@function isItemNative\n\t*\t@description \n\t*\/\n\tisItemNative: function(obj){\n       try{\n           return (typeof(obj.item) != \"undefined\" && obj.item.toString().indexOf(\"[native code]\")>0);\n       }catch(e){\n       }\n       return false;\n\t},\n   \n\n\t\/**\n\t*\t@function dump\n\t*\t@description \n\t*\/\n\n\tdump: function (obj, levels, level){\n\t\tif(air.Introspector.isArgumentsObject(obj)&&obj.length==1)\n\t\t\treturn air.Introspector.dump(obj[0]);\n\t\tif(typeof levels==\'undefined\') { levels=1; }\n\t\tif(typeof level==\'undefined\') { level=0; }\t\t\n        try{\n            if(typeof obj==\'undefined\'){ return \'[undefined]\'; }\n\t\t\tif(obj==null){\treturn \'[null]\'; }\n\t\t\tvar list = [];\n\/\/            if(air.Introspector.isXMLObject(obj)){\n\/\/\t\tdisable for the moment\n\/\/            \treturn;\n\/\/            }  \n\t\t\tif(air.Introspector.isStringObject(obj)\n\t\t\t\t||air.Introspector.isNumberObject(obj)\n\t\t\t\t\t||air.Introspector.isDateObject(obj)){\n\t\t\t\tif(level==0){\n\t\t\t\t\ttry{\n\t\t\t\t\t\treturn obj+\'\';\n\t\t\t\t\t}catch(e){ \n\t\t\t\t\t\treturn e+\'\'; \n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\treturn\'\';\n\t\t\t}\n            var isItemNative = air.Introspector.isItemNative(obj);\n            var parseArray = air.Introspector.isArrayObject(obj)||air.Introspector.isArgumentsObject(obj)||isItemNative;\n            var parseHash =  !parseArray || isItemNative;\n            if (parseArray){\n\t\t\t\tvar l = obj.length;\n            \tfor(var i=0;i<l;i++){\n                    var value;\n                    try{\n                        value = obj[i];\n\t\t\t\t\t\tif(typeof value==\'undefined\') {value = \'[undefined]\'};\n                    }catch(e){\n                        value = e+\'\';\n                    }\n\t\t\t\t\tlist.push([i,value]);\n                }\n            } \n            if(parseHash) {\n                for(var i in obj){\n                    var value;\n                    try{\n                        value = obj[i];\n\t\t\t\t\t\tif(typeof value==\'undefined\') {value = \'[undefined]\'};\n                    }catch(e){\n                        value = e+\'\';\n                    }\n\t\t\t\t\tlist.push([i,value]);\n                }\n            }\n\n\t\t\tif(air.Introspector.config.debugRuntimeObjects){\n\t\t\t\ttry{\n\t\t\t\t\tvar typeDescription = runtime.flash.utils.describeType(obj);\n\t\t\t\t\tif(!this.domParser) this.domParser = new DOMParser();\n\t\t\t\t\tvar typeXml = this.domParser.parseFromString(typeDescription, \"text\/xml\");\n\t\t\t\t\tvar child = typeXml.firstChild.firstChild;\n\t\t\t\t\twhile(child){\n\t\t\t\t\t\tif(child.nodeName==\'accessor\'||child.nodeName==\'constant\'||child.nodeName==\'method\'||child.nodeName==\'variable\'){\n\t\t\t\t\t\t\tvar name = child.getAttribute(\'name\');\n\t\t\t\t\t\t\tif(name!=null && name!=\'prototype\'){\n\t\t\t                    try{\n\t\t\t\t\t\t\t\t\tlist.push([name,obj[name]]);\n\t\t\t                    }catch(e){\n\t\t\t\t\t\t\t\t\tlist.push([name,\'\']+\'\');\n\t\t\t                    }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tchild = child.nextSibling;\n\t\t\t\t\t}\n\t\t\t\t}catch(e){\n\t\t\t\t\t\/\/just hide the error\n\t\t\t\t}\n            }\n            list.sort(function(node1, node2){\n            \tvar isNode1Number = parseInt(node1[0])==node1[0];\n            \tvar isNode2Number = parseInt(node2[0])==node2[0];\n            \tif(isNode1Number&&isNode2Number){\n            \t\treturn parseInt(node1[0])-parseInt(node2[0]);\n            \t} \n            \tif(isNode1Number){\n            \t\treturn -1;\n            \t}\n            \tif(isNode2Number){\n            \t\treturn 1;\n            \t}\n            \tif(node1[0].toLowerCase()==node2[0].toLowerCase())\n                   return 0;\n                if(node1[0].toLowerCase()<node2[0].toLowerCase())\n                   return -1;\n                return 1;\n            });\n\t\t\tif(list.length){\n\t\t\t\tvar prefix = \'\';\n\t\t\t\tfor(var i=level;i>0;i--) prefix+=\'    \';\n\t\t\t\tvar l = list.length;\n\t\t\t\tvar strList = [];\n\t\t\t\tif(parseArray)\tstrList.push(prefix+\'[\\n\');\n\t\t\t\telse\t\t\tstrList.push(prefix+\'{\\n\');\n\t\t\t\tfor(var i=0;i<l;i++){\n\t\t\t\t\ttry{\n\t\t\t\t\t\tvar zl = (list[i][0]+\'\').length+1;\n\t\t\t\t\t\tvar miniPrefix = \'\';\n\t\t\t\t\t\tfor(var j=0;j<zl;j++) miniPrefix+=\' \';\n\t\t\t\t\t\tif(typeof list[i][1]==\'function\'){\n\t\t\t\t\t\t\tstrList.push(prefix+\'  \'+list[i][0]+\'=[function],\\n\');\n\t\t\t\t\t\t}else if(air.Introspector.isDateObject(list[i][1])){\n\t\t\t\t\t\t\tstrList.push(prefix+\'  \'+list[i][0]+\'=\'+(new Date(list[i][1])+\'\').replace(\/\\n\/g, \'\\n\'+prefix+miniPrefix)+\',\\n\');\n\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\tstrList.push(prefix+\'  \'+list[i][0]+\'=\'+(list[i][1]+\'\').replace(\/\\n\/g, \'\\n\'+prefix+miniPrefix)+\',\\n\');\n\t\t\t\t\t\t}\n\t\t\t\t\t}catch(e){\n\t\t\t\t\t\tstrList.push(prefix+\'  \'+list[i][0]+\'=\'+e+\',\\n\');\n\t\t\t\t\t}\n\t\t\t\t\tif(level<levels){\n\t\t\t\t\t\tstrList.push(air.Introspector.dump(list[i][1], levels, level+1));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif(parseArray)\tstrList.push(prefix+\']\\n\');\n\t\t\t\telse\t\t\tstrList.push(prefix+\'}\\n\');\n\t\t\t\tif(level){\n\t\t\t\t\treturn strList.join(\'\');\n\t\t\t\t}else{\n\t\t\t\t\treturn (strList.join(\'\'));\n\t\t\t\t}\n\t\t\t}\n        }catch(e){\n            air.Introspector.Console.error(e);\n        } \n\t\treturn \'\';\n\t},\n\n\n\n\n    \/**\n\t*\t---------------------------------------------------------------------------------------\n\t*\t@extracted This is extracted from spry framework and removed support for other browsers.\n\t*\t@description Finds the precise position of the dom element node\n\t*\/   \n\t\n\t\/**\n\t*\t@function camelize\n\t*\t@description \n\t*\/\n\t\n\tcamelize : function(stringToCamelize)\n            {\n                if (stringToCamelize.indexOf(\'-\') == -1){\n                    return stringToCamelize;    \n                }\n                var oStringList = stringToCamelize.split(\'-\');\n                var isFirstEntry = true;\n                var camelizedString = \'\';\n            \n                for(var i=0; i < oStringList.length; i++)\n                {\n                    if(oStringList[i].length>0)\n                    {\n                        if(isFirstEntry)\n                        {\n                            camelizedString = oStringList[i];\n                            isFirstEntry = false;\n                        }\n                        else\n                        {\n                            var s = oStringList[i];\n                            camelizedString += s.charAt(0).toUpperCase() + s.substring(1);\n                        }\n                    }\n                }\n            \n                return camelizedString;\n            },\n\n\t\/**\n\t*\t@function getStyleProp\n\t*\t@description \n\t*\/\n\tgetStyleProp : function(element, prop)\n            {\n                var value;\n                try\n                {\n                    if (element.style)\n                        value = element.style[air.Introspector.camelize(prop)];\n            \n                    if (!value)\n                    {\n                        if (document.defaultView && document.defaultView.getComputedStyle)\n                        {\n                            var css = document.defaultView.getComputedStyle(element, null);\n                            value = css ? css.getPropertyValue(prop) : null;\n                        }\n                        else if (element.currentStyle) \n                        {\n                                value = element.currentStyle[air.Introspector.camelize(prop)];\n                        }\n                    }\n                }\n                catch (e) {}\n            \n                return value == \'auto\' ? null : value;\n            },\n   \n\n\t\/**\n\t*\t@function getIntProp\n\t*\t@description \n\t*\/\n\tgetIntProp : function(element, prop){\n                var a = parseInt(air.Introspector.getStyleProp(element, prop),10);\n                if (isNaN(a))\n                    return 0;\n                return a;\n            },\n\n\n\t\/**\n\t*\t@function getBorderBox\n\t*\t@description \n\t*\/\n\tgetBorderBox : function (el, doc) {\n                doc = doc || document;\n                if (typeof(el) == \'string\') {\n                    el = doc.getElementById(el);\n                }\n            \n                if (!el) {\n                    return false;\n                }\n            \n                if (el.parentNode === null || air.Introspector.getStyleProp(el, \'display\') == \'none\') {\n                    \/\/element must be visible to have a box\n                    return false;\n                }\n            \n                var ret = {x:0, y:0, width:0, height:0};\n                var parent = null;\n                var box;\n\n            \tvar str = el.nodeName;\n\t\t\t\n                ret.x = el.offsetLeft;\n                ret.y = el.offsetTop;\n                ret.width = el.offsetWidth;\n                ret.height = el.offsetHeight;\n\n\t\t\t\tparent = el.offsetParent;\n\n                if (parent != el) {\n                    while (parent) {\n                        ret.x += parent.offsetLeft;\n                        ret.y += parent.offsetTop;\n\t\t\t\t\t\tstr+=\':\'+parent.nodeName;\n                        parent = parent.offsetParent;\n                    }\n                }\n\n\n                var blw = air.Introspector.getIntProp(el, \"border-left-width\");\n                var btw = air.Introspector.getIntProp(el, \"border-top-width\");\n                ret.x -= blw;\n                ret.y -= btw;\n                \/\/ opera & (safari absolute) incorrectly account for body offsetTop\n                switch (air.Introspector.getStyleProp(el, \'position\')){\n \t\t\t\t\tcase \'absolute\':\n                    \tret.y -= doc.body.offsetTop;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase \'fixed\':\n\t                    ret.y += doc.body.scrollTop;\n\t                    ret.x += doc.body.scrollLeft;\n\t\t\t\t\t\tbreak;\n\t\t\t\t};\n                    \n                if (el.parentNode)\n                    parent = el.parentNode;\n                else\n                    parent = null;\n                \n\t\t\t\tif (parent!=null&&parent.nodeName){\n                    var cas = parent.nodeName.toUpperCase();\n                    while (parent && cas != \'HTML\') {\n                        cas = parent.nodeName.toUpperCase();\n                        ret.x -= parent.scrollLeft;\n                        ret.y -= parent.scrollTop;\n                        if (parent.parentNode)\n                            parent = parent.parentNode;\n                        else\n                            parent = null;\n                    }\n                }\n\n\/*\t\t\t\tret.y -= el.ownerDocument.body.scrollTop;\n\t\t\t\tret.x -= el.ownerDocument.body.scrollLeft;\t\t\t\t\n*\/\n                \/\/ adjust the margin\n                var gi = air.Introspector.getIntProp;\n                var btw = gi(el, \"margin-top\");\n                var blw = gi(el, \"margin-left\");\n                var bbw = gi(el, \"margin-bottom\");\n                var brw = gi(el, \"margin-right\");\n                ret.x -= blw;\n                ret.y -= btw;\n                ret.height += btw + bbw;\n                ret.width += blw + brw;\n\n\t\t\t\/\/\tair.Introspector.Console.log(ret);\n                return ret;\n            },\n\n\t\/**\n\t*\t---------------------------------------------------------------------------------------\n\t*\/\n\n\t\/**\n\t*\t@function writeConfigFile\n\t*\t@description \n\t*\/\n\twriteConfigFile: function(config, fromRemoteSandbox){\n\t\tif(isAppSandbox){\n\t\t\tvar file = runtime.flash.filesystem.File.applicationStorageDirectory.resolvePath(\'AIRIntrospector\'+(fromRemoteSandbox?\'Remote\':\'\')+\'.cfg\');\n\t\t\tvar fs = new runtime.flash.filesystem.FileStream();\n\t\t\tfs.open(file, runtime.flash.filesystem.FileMode.WRITE);\n\t\t\tfs.writeObject(config);\n\t\t\tfs.close();\n\t\t}else{\n\t\t\tif(typeof activeWindow==\'undefined\'){\n\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\tparentSandboxBridge.air_Introspector_writeConfigFile(config);\n\t\t\t\t});\n\t\t\t}else{\n\t\t\t\tactiveWindow.setTimeout(function(){\n\t\t\t\t\tactiveWindow.air.Introspector.writeConfigFile(config);\t\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t}\n\t},\n\n\n\n\t\/**\n\t*\t@function readConfigFile\n\t*\t@description \n\t*\/\n\treadConfigFile: function (fromRemoteSandbox, callback){\n\t\tif(isAppSandbox){\n\t\t\tvar file = runtime.flash.filesystem.File.applicationStorageDirectory.resolvePath(\'AIRIntrospector\'+(fromRemoteSandbox?\'Remote\':\'\')+\'.cfg\');\n\t\t\tif(file.exists){\n\t\t\t\tvar fs = new runtime.flash.filesystem.FileStream();\n\t\t\t\tfs.open(file, runtime.flash.filesystem.FileMode.READ);\n\t\t\t\tvar config = fs.readObject();\n\t\t\t\tfs.close();\n\t\t\t\treturn config;\n\t\t\t}\n\t\t}else{\n\t\t\tif(typeof activeWindow==\'undefined\'){\n\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\tvar config = parentSandboxBridge.air_Introspector_readConfigFile();\n\t\t\t\t\tcallback(config);\n\t\t\t\t});\t\t\t\t\n\t\t\t}else{\n\t\t\t\tactiveWindow.setTimeout(function(){\n\t\t\t\t\tif(typeof activeWindow!=\'undefined\'){\n\t\t\t\t\t\tvar config = activeWindow.air.Introspector.readConfigFile(true, function(config){\n\t\t\t\t\t\t\tsetTimeout(function(){ callback(config); });\t\t\t\t\t\t\t\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn {};\n\t},\n\t\n\t\n\t\n\t\/**\n\t*\t@function writeConsoleToClipboard\n\t*\t@description \n\t*\/\n\n\twriteConsoleToClipboard: function(str){\n\t\tif(isAppSandbox){\t\t\n\t\t\truntime.flash.desktop.Clipboard.generalClipboard.clear();\n\t\t\truntime.flash.desktop.Clipboard.generalClipboard.setData(runtime.flash.desktop.ClipboardFormats.TEXT_FORMAT, \n\t\t\t\t\tstr, false);\t\t\n\t\t}else{\n\t\t\tif(typeof activeWindow==\'undefined\'){\n\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\tparentSandboxBridge.air_Introspector_writeConsoleToClipboard(str);\n\t\t\t\t});\t\t\t\t\n\t\t\t}else{\n\t\t\t\tactiveWindow.setTimeout(function(){\n\t\t\t\t\tactiveWindow.air.Introspector.writeConsoleToClipboard(str);\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t},\t\n\n\n\t\/**\n\t*\t@function writeConsoleToFile\n\t*\t@description \n\t*\/\n\twriteConsoleToFile: function(str){\n\t\tif(isAppSandbox){\t\t\n\t\t\tvar file = runtime.flash.filesystem.File.desktopDirectory;\n\t\t\tvar self = this;\n\t\t\tfile.addEventListener(runtime.flash.events.Event.SELECT, function(evt){ \n\t\t\t\tvar newFile = evt.target;\n  \t\t\t    var stream = new runtime.flash.filesystem.FileStream();\n\t\t\t        stream.open(newFile, runtime.flash.filesystem.FileMode.WRITE);\n\t\t\t        stream.writeUTFBytes(str);\n\t\t\t        stream.close();\n\t\t\t\t});\n\t\t\tfile.browseForSave(\'Console dump file...\');\n\t\t}else{\n\t\t\tif(typeof activeWindow==\'undefined\'){\n\t\t\t\tair.Introspector.noBridge(function(){\n\t\t\t\t\tparentSandboxBridge.air_Introspector_writeConsoleToFile(str);\n\t\t\t\t});\t\t\t\t\n\t\t\t}else{\n\t\t\t\tactiveWindow.setTimeout(function(){\n\t\t\t\t\tactiveWindow.air.Introspector.writeConsoleToFile(str);\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t},\n\t\n\t\n\t\n\t\n\t\/**\n\t*\t@function noBridge\n\t*\t@description Alerts the user that no parent sandbox bridge is installed \n\t*\/\n\tnoBridge: function(callback){\n\t\ttry{\n\t\t\tcallback();\n\t\t\treturn;\n\t\t}catch(e){\n\t\t\tair.Introspector.bridgeCallbacks.push(callback);\n\t\t\tair.Introspector.registerChildSandboxBridge();\n\t\t\tsetTimeout(function(){\n\t\t\t\tthrow { air_Introspector_setParentSandboxBridge: true, air_Introspector_version: air.Introspector.version , toString: function(){ return \'You need to include AIRIntrospector.js in your application sandbox.\'; } };\n\t\t\t}, 0);\t\t\t\t\n\t\t}\n\t\t\n\t},\n\t\n\t\/**\n\t*\t@function noChildBridge\n\t*\t@description Alerts the user that no child sandbox bridge is installed \n\t*\/\n\tnoChildBridge: function(iframe){\n\t\tif(!air.Introspector.secondBridgeTry){\n\t\t\tvar iframeStr = \'\';\n\t\t\tif(typeof iframe!=\'undefined\'){\n\t\t\t\tiframeStr = \" Check the following iframe [id: \"+iframe.id+\"]\";\n\t\t\t}\n\t\t\talert(\'Child sandbox bridge is not defined or has been rewritten. You need to include AIRIntrospector.js in child sandbox.\'+iframeStr);\t\t\t\n\t\t\tair.Introspector.secondBridgeTry = true;\n\t\t}\n\t},\n\t\n\n});air.Introspector.tree.node = function(nodeLabel, config){\n    this.nodeLabel = nodeLabel;\n    this.openable = true;\n    this.nodeLabel2 = \'\';\n    this.items = [];\n    this.editable = false;\n    \n    if(typeof config!=\'undefined\')\n       air.Introspector.extend(this, config);\n    this.unselectOnBlur = true;\n    this.created = false;\n    this.opened = false;\n    this.shouldOpenFlag = false;\n    this.shouldSelectFlag = false;\n    \n};\n\nair.Introspector.tree.node.openedTagMac = \'<div>><\/div>\';\/\/\'→\';\nair.Introspector.tree.node.closedTagMac = \'<div>∨<\/div>\';\/\/\'↓\';\n\nair.Introspector.tree.node.openedTagWin = \'<div>+<\/div>\';\/\/\'→\';\nair.Introspector.tree.node.closedTagWin = \'<div>-<\/div>\';\/\/\'↓\';\n\n\nair.Introspector.tree.node.putDisposeInPrototype = function(e){\n\te.prototype.dispose = air.Introspector.tree.node.prototype.dispose;\n\te.prototype.clearItems = air.Introspector.tree.node.prototype.clearItems;\n\te.prototype.clearListeners = air.Introspector.tree.node.prototype.clearListeners;\t\n\te.prototype.registerListener = air.Introspector.tree.node.prototype.registerListener;\n\te.prototype.registerEvents = air.Introspector.tree.node.prototype.registerEvents;\n\te.prototype.select = air.Introspector.tree.node.prototype.select;\n\te.prototype.unselect = air.Introspector.tree.node.prototype.unselect;\n}\n\nair.Introspector.tree.node.prototype={\n    onshow: function(){\n        \/\/dummy function overriden by config\n    },\n    \n    onclick: function(){\n        \/\/dummy function overriden by config\n    },\n    \n    onhide: function(){\n        \/\/dummy function overriden by config\n    },\n\n\tonselect: function(){\n\t\t\n\t},    \n\n    toggle: function(){\n        if(this.opened){\n            this.hide();\n        }else{\n            this.show();\n        }\n    },\n    \n    shouldOpen: function(){\n        this.opened = true;\n        this.shouldOpenFlag=true;\n    },\n    \n    shouldSelect: function(value){\n        if(typeof value==\'undefined\') value=true;\n        this.shouldSelectFlag = value;\n    },\n\n    addSelectedCss: function(){\n\t\tif(self.element){\n\t\t\tself.element.className += \' selected3Tree\';\n\t\t}\n\t},\n\n\tselect: function(throwEvent){\n        this.shouldSelectFlag = true;\n\t\tif(this.element){\n\t\t\tthis.element.className += \' selected3Tree\';\n\t\t}\n\t\t\n\t\t\n\t\tif(this.element){\n\t\t\tthis.focusLink.focus();\n\t\t\tif(this.nodeLabelDiv)\n\t\t\t\tthis.nodeLabelDiv.scrollIntoViewIfNeeded();\n\t\t\telse\n\t\t\t\tthis.element.scrollIntoViewIfNeeded();\n\t\t}\n\t\t\n\t\tif(this.onselect)\n\t\t\tthis.onselect(this, (typeof throwEvent==\'undefined\'||throwEvent));\n\t},\n\n\tunselect: function(){\n        this.shouldSelectFlag = false;\n\t\tif(this.element){\n\t\t\tthis.element.className = this.element.className.replace(\/ selected3Tree\/g, \'\');\n\t\t}\n\n\t},\n\n\tclearItems: function(){\n\t\tif(this.items){\n\t\t\tfor(var i=this.items.length-1;i>=0;i--){\n\t\t\t\ttry{\n\t\t\t\t\tthis.items[i].dispose();\n\t\t\t\t}catch(e){ air.Introspector.Console.log(e);}\n\t\t\t\tthis.items[i]=null;\n\t\t\t}\n\t\t\tthis.items.length=0;\n\t\t}\n\t},\n\tclearListeners: function(){\n\t\tif(this.listeners){\n\t\t\tfor(var i=this.listeners.length-1;i>=0;i--){\n\t\t\t\tvar listener = this.listeners[i];\n\t\t\t\tlistener.element.removeEventListener(listener.ev, listener.fn, listener.capture);\n\t\t\t\tlistener.fn = null;\n\t\t\t\tthis.listeners[i]=null;\n\t\t\t}\n\t\t}\n\t\tdelete this.listeners;\n\t},\n\tdispose: function(){\n\t\tthis.clearItems();\n\t\tthis.clearListeners();\n\t\tvar self = this;\n\t\tfor(var i in self){\n\t\t\tself[i] = null;\n\t\t}\n\t},\n\t\n\tregisterListener:function(element, ev, fn, capture){\n\t\tif(!this.listeners){\n\t\t\tthis.listeners = [];\n\t\t}\n\n\t\tthis.listeners.push({element:element, ev:ev, fn: fn, capture:capture});\t\t\n\t\telement.addEventListener(ev, fn, capture);\t\t\n\t},\n\n\tshowElements: function(){\n\t\tthis.opened = true;\n        this.onshow(this);\n\t\tthis.refreshNodeAnchor();\n        this.refreshChildren();\t\n\t},\n    show: function(){\n        if(!this.openable)\n          return;\n\t\tthis.showElements();        \n        \n        if(air.Introspector.tree.node.traceElement){\n        \tair.Introspector.tree.node.traceElement.className = air.Introspector.tree.node.traceElement.className.replace(\/ selected2Tree\/g, \'\');\n        }\n        this.element.className += \' selected2Tree\';\n        air.Introspector.tree.node.traceElement = this.element;\n        var self = this;\n        setTimeout(function(){\n\t\t\tif(self.element){\n\t\t\t\tself.element.className = self.element.className.replace(\/ selected2Tree\/g, \'\');\n\t\t\t}\n        },1500);\n        air.Introspector.tree.node.traceElement = this.element;\n        \n        \/\/this.nodeChildren.scrollIntoViewIfNeeded();\n        this.element.scrollIntoViewIfNeeded();\n        \n        \n    },\n    refresh: function(){\n\t\tthis.clearListeners();\n\t\tif(this.element){\n\t\t\tvar oldElement = this.element;\n\t\t\tthis.createDiv(oldElement.ownerDocument);\n\t\t\toldElement.parentNode.replaceChild(this.element, oldElement);\n\t\t}\n\t},\n    refreshChildren: function(){\n        if(this.created){\n            if(this.shouldOpenFlag){\n                this.onshow(this);\n                this.shouldOpenFlag = false;\n            }\n            \n            var document = this.element.ownerDocument;\n            \/*if(this.nodeChildren!=null){\n                this.element.removeChild(this.nodeChildren);\n                this.nodeChildren = null;\n            }*\/\n            var nodeChildren = this.nodeChildren;\/\/ document.createElement(\'div\');\n            nodeChildren.innerHTML = \'\';\n            this.nodeChildren.className = \'treeChildren\';\n            for(var i=0;i<this.items.length;i++){\n                 var childElement = this.items[i].createDiv(document, true);\n\t\t\t\t this.items[i].registerEvents(this, i);\n                 nodeChildren.appendChild(childElement);\n            }\n            \/\/this.element.appendChild(nodeChildren);\n            \/\/this.nodeChildren = nodeChildren;\n\t\t\tif(this.nodeEndLabelDiv)\n\t            this.nodeEndLabelDiv.className = \'nodeEndLabelDivVisible\';\n        }\n    },\n\n\tregisterEvents: function(parentNode, index){\n\t\tthis.parentNode = parentNode;\n\t\tthis.parentIndex = index;\n\t\tvar self = this;\n\n\t\tif(this.unselectOnBlur||this.readOnly)\n\t\t{\n\t\t\tthis.registerListener(this.focusLink, \'blur\', function(ev){\n\t\t\t\tself.unselect();\n\t\t\t}, true);\n\t\t}\n\t\t\n\t\tvar findFirstElement = function(node){\n\t\t\tif(node==null) return null;\n\t\t\tif(!node.items) return node;\n\t\t\tif(!node.opened) return node;\t\t\t\n\t\t\tif(node.items.length==0) return node;\n\t\t\treturn node.items[0];\n\t\t\t\/\/return findFirstElement(node.items[0]);\t\n\t\t};\n\t\tvar findLastElement = function(node){\n\t\t\tif(node==null) return null;\n\t\t\tif(!node.items) return node;\n\t\t\tif(!node.opened) return node;\t\t\t\n\t\t\tif(node.items.length==0) return node;\n\t\t\treturn findLastElement(node.items[node.items.length-1]);\t\t\t\n\t\t};\n\n\t\tvar findNextParent = function(node){\n\t\t\tif(node==null||node.parentNode==null||node.parentNode.parentNode==null) return null;\n\t\t\tif(node.parentNode.parentNode&&node.parentNode.parentNode.items.length>node.parentNode.parentIndex+1)\n\t\t\t\treturn node.parentNode.parentNode.items[node.parentNode.parentIndex+1];\n\t\t\treturn findNextParent(node.parentNode);\n\t\t}\n\t\t\n\t\tthis.registerListener(this.element, \'keydown\', function(ev){\n\t\t\tif(self.state){\n\t\t\t\tev.stopPropagation();\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t\t\n\t\t\tvar stopPropagation = true;\n\t\t\tswitch(ev.keyIdentifier){\n\t\t\t\tcase \'Left\':\n\t\t\t\t\tif(self.opened){\n\t\t\t\t\t\tif(self.hide)\n\t\t\t\t\t\t\tself.hide();\n\t\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t\tcase \'Right\':\n\t\t\t\t\tif(!self.opened){\n\t\t\t\t\t\tif(self.show)\n\t\t\t\t\t\t\tself.show();\n\t\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t\tcase \'Up\':\n\t\t\t\t\tif(self.parentNode){\n\t\t\t\t\t\tself.unselect();\n\t\t\t\t\t\tif(self.parentIndex==0){\n\t\t\t\t\t\t\tself.parentNode.select(true);\n\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\tvar element = findLastElement(self.parentNode.items[self.parentIndex-1]);\n\t\t\t\t\t\t\tif(element){\n\t\t\t\t\t\t\t\telement.select(true);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\tself.parentNode.items[self.parentIndex-1].select(true);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t\tcase \'Down\':\n\t\t\t\t\tif(self.parentNode){\n\t\t\t\t\t\tvar element = findFirstElement(self);\n\t\t\t\t\t\tif(element!=null&&element!=self){\n\t\t\t\t\t\t\tself.unselect();\n\t\t\t\t\t\t\telement.select(true);\n\t\t\t\t\t\t}else if(self.parentIndex+1>=self.parentNode.items.length){\n\t\t\t\t\t\t\tvar element = findNextParent(self);\n\t\t\t\t\t\t\tif(element){\n\t\t\t\t\t\t\t\tself.unselect();\n\t\t\t\t\t\t\t\telement.select(true);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\tself.unselect();\n\t\t\t\t\t\t\tself.parentNode.items[self.parentIndex+1].select(true);\n\t\t\t\t\t\t}\n\t\t\t\t\t}else{\n\t\t\t\t\t\tif(self.items.length>0){\n\t\t\t\t\t\t\tself.unselect();\n\t\t\t\t\t\t\tself.items[0].select(true);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t\tcase \'Enter\':\n\t\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t\tif(self.editable){\n\t\t\t\t\t\t\tself.toggleEdit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tstopPropagation = false;\n\t\t\t}\n\t\t\tif(stopPropagation){\n\/\/\t\t\t\truntime.trace(ev.keyIdentifier);\n\t\t\t\tev.stopPropagation();\n\t\t\t\tev.preventDefault();\n\t\t\t}\n\t\t});\n\t},\n    \n    refreshLabel : function(){\n       if(this.created){\n           this.nodeLabelDiv.innerHTML = air.Introspector.escapeHtml(this.nodeLabel);\n\t\t\tif(this.element){\n\t\t\t\tif(this.nodeLabel2.length==0){\n\t\t\t\t\tthis.element.className += \' noLabel2\';\n\t\t\t\t}else{\n\t\t\t\t\tthis.element.className = this.element.className.replace(\/ noLabel2\/g, \'\');\n\t\t\t\t}\n\t\t\t}\n           this.nodeLabel2Div.innerHTML = air.Introspector.escapeHtml(this.nodeLabel2).substr(0, 1000);\n       }\n    },\n    \n    hide: function(){\n        if(!this.openable)\n          return;\n        this.opened = false;\n        this.onhide(this);\n\t\tthis.refreshNodeAnchor();\n        \/*if(this.nodeChildren!=null){\n            this.element.removeChild(this.nodeChildren);\n            this.nodeChildren = null;\n        }*\/\n        \n        if(air.Introspector.tree.node.traceElement){\n            air.Introspector.tree.node.traceElement.className = air.Introspector.tree.node.traceElement.className.replace(\/ selected2Tree\/g, \'\');\n            air.Introspector.tree.node.traceElement = null;\n        }\n        this.element.className = this.element.className.replace(\/ selected2Tree\/g, \'\');\n        this.nodeChildren.innerHTML = \'\';\n        this.nodeChildren.className = \'\';\n        \n        if(this.nodeEndLabelDiv)\n            this.nodeEndLabelDiv.className = \'nodeEndLabelDiv\';\n    },\n    \n    showHover: function(visible){\n        if(visible){\n           this.element.className+=\' hover\';    \n        }else{\n           this.element.className = this.element.className.replace(\/ hover\/g, \'\');\n        }\n    },\n    toggleEdit: function(toggle){\n        if(!this.editVisible&&typeof toggle==\'undefined\'){\n            this.element.className += \' editing\';\n            this.nodeEdit.value = this.getEditValue();\n\t        this.editVisible = true;\n            this.nodeEdit.focus();\t\n\t\t\tthis.addSelectedCss();\n\t\t\tthis.state =1;\n        }else if(this.editVisible){\n            this.element.className = this.element.className.replace(\' editing\', \'\');\n\n            if(toggle){\n                 this.setEditValue(this.nodeEdit.value);\n            }else{\n\t             this.editVisible = false;\n\t\t\t}\n\n\t\t\tvar self = this;\n\t\t\t\n\t\t\tsetTimeout(function(){\n\t\t\t\tself.select();\n            \tself.editVisible = false;\n\t\t\t}, 0);\n\t\t\tthis.state = 0;\n        }\n    },\n    \n\trefreshNodeAnchor: function(){\n\t\tif(!this.nodeAnchor) return;\n\t\tif(!this.openable){\n\t\t\tthis.nodeAnchor.innerHTML= \'\';\n\t\t\tthis.nodeAnchor.className = \'treeNodeEmpty\';\n\t\t}else if(!isAppSandbox){\n\t\t\t\tthis.nodeAnchor.innerHTML = this.opened?air.Introspector.tree.node.closedTagMac:air.Introspector.tree.node.openedTagMac;\n\t\t\t\tthis.nodeAnchor.className=\'treeAnchorMac\';\t\n\t\t}else if(air.Introspector.runtime.Capabilities.os.substr(0,3).toLowerCase() == \'mac\'){\n\t\t\tthis.nodeAnchor.innerHTML = this.opened?air.Introspector.tree.node.closedTagMac:air.Introspector.tree.node.openedTagMac;\n\t\t\tthis.nodeAnchor.className=\'treeAnchorMac\';\n\t\t}else{\n\t\t\tthis.nodeAnchor.innerHTML = this.opened?air.Introspector.tree.node.closedTagWin:air.Introspector.tree.node.openedTagWin;\n\t\t\tthis.nodeAnchor.className=\'treeAnchorWin\';\n\t\t}\n\t\t\n\t},\n\t\n    createDiv: function(document, isChild){\n        var self = this;\n        var element = document.createElement(\'span\');\n\t\t\/\/element.href= \"javascript:void(0)\"; \n\t\tthis.focusLink = document.createElement(\"a\");\n\t\tthis.focusLink.href=\"#\";\n\t\telement.appendChild(this.focusLink);\n\t\n        element.className=\'treeNode\';\n        this.element = element;\n        \n        var nodeLabelDiv = document.createElement(\'div\');\n        nodeLabelDiv.innerHTML = air.Introspector.escapeHtml(this.nodeLabel);\n        nodeLabelDiv.className=\'treeLabel\'; \/\/+ (this.shouldSelectFlag?\' selectedTreeLabel\':\'\');\n\t\t\n\t\t\n\t\tif(this.shouldSelectFlag){\n\t\t\tthis.addSelectedCss();\n\t\t}\n\t\t\n\t\tif(this.onselect){\n\t\t\tthis.onselect(this, false);\n\t\t}\n\t\t\n        if(this.openable){\n           this.registerListener(nodeLabelDiv, \'click\', function(e){ if(!self.opened) self.show(); self.onclick(); \tself.select(); } );\n        }else{\n           this.registerListener(nodeLabelDiv, \'click\', function(e){ self.onclick(); \tself.select(); } );\n        }\n        this.registerListener(nodeLabelDiv, \'mouseover\', function(e){ self.showHover(true) } );\n        this.registerListener(nodeLabelDiv, \'mouseout\', function(e){ self.showHover(false) } );\n        \n        element.appendChild(nodeLabelDiv);\n        this.nodeLabelDiv = nodeLabelDiv;\n        \n        var nodeLabel2 = document.createElement(\'div\');\n        nodeLabel2.innerHTML = air.Introspector.escapeHtml(this.nodeLabel2).substr(0, 1000);\n        nodeLabel2.className=\'treeLabel2\';\n        if(this.openable){\n            this.registerListener(nodeLabel2, \'click\', function(e){ if(!self.opened) self.show() } );\n        }else if(this.editable){\n            this.editVisible = false;\n            this.registerListener(nodeLabel2, \'click\', function(e){ self.toggleEdit() } );\n            var nodeEdit = document.createElement(\'input\');\n            nodeEdit.value = \'\';\n            nodeEdit.className = \'treeEdit\';\n            element.appendChild(nodeEdit);\n            \n            this.registerListener(nodeEdit, \'blur\', function(e){  self.toggleEdit(true); } );\n            this.registerListener(nodeEdit, \'keypress\', function(e){ if(e.keyCode == 13) { self.toggleEdit(true); return false;}  else if(e.keyCode == 27){ self.toggleEdit(false); return false;}} );\n            this.nodeEdit = nodeEdit;\n        }\n        this.registerListener(nodeLabel2, \'mouseover\', function(e){ self.showHover(true) } );\n        this.registerListener(nodeLabel2, \'mouseout\', function(e){ self.showHover(false) } );\n        \n        element.appendChild(nodeLabel2);\n        this.nodeLabel2Div = nodeLabel2;\n        \n\t\tif(this.nodeLabel2.length==0){\n\t\t\tthis.element.className += \' noLabel2\';\n\t\t}\n        var nodeAnchor = document.createElement(\'div\');\n        this.nodeAnchor = nodeAnchor;\n\t\tthis.refreshNodeAnchor();\n        element.appendChild(nodeAnchor);\n        this.registerListener(nodeAnchor, \'click\', function(e){ self.select(); self.toggle() } );\n        \/\/nodeAnchor.style.visibility = this.openable?\'visible\':\'hidden\';\n\n        this.created = true;\n        \n        \n        var nodeChildren =  document.createElement(\'div\');\n        \n        element.appendChild(nodeChildren);\n        this.nodeChildren = nodeChildren;\n        \n        if(this.opened){\n           this.refreshChildren();\n        }\n        \n\t\tsetTimeout(function(){\n\t\t\tif(self.shouldSelectFlag)\n\t\t\t\tself.focusLink.focus();\n\t\n\t\t}, 0);\n\t\n\t\tif(!isChild){\n\t\t\tthis.registerEvents(null, 0);\n\t\t}\n        return element;\n    }\n};\n\nair.Introspector.tree.textNode = function(value){\n    this.nodeValue = value;\n};\n\nair.Introspector.tree.textNode.prototype = {\n    createDiv: function(document){\n\t    var element = document.createElement(\'span\');\n\/\/element.href= \"javascript:void(0)\"; \nthis.focusLink = document.createElement(\"a\");\nthis.focusLink.href=\"#\";\nelement.appendChild(this.focusLink);\n\t    element.className=\'treeText\';\n\t    \n\t    var elementText = document.createElement(\'div\');\n\t    elementText.className=\'treePreText\';\n\t    var elementLines = document.createElement(\'div\');\n\t    elementLines.className=\'treePreLine\';\n\t    var splitText = air.Introspector.blockWrap(this.nodeValue);\n\t    elementText.innerHTML = \'<pre>\'+air.Introspector.escapeHtml(splitText[0])+\'\\n\\n <\/pre>\';\n\t    \n\t    elementLines.innerHTML = \'<pre>\'+splitText[1]+\'<\/pre>\';\n\t    \n\t    element.appendChild(elementLines);\n\t    element.appendChild(elementText);\n\t    \n\t    this.element = element;\n\t    this.elementText = elementText;\n        this.elementLines = elementLines;\n\t    return element;\n    }\n};\n\nair.Introspector.tree.node.putDisposeInPrototype(air.Introspector.tree.textNode);\n\nair.Introspector.tree.textDownloadNode = function(file){\n    this.file = file;\n};\n\nair.Introspector.tree.textDownloadNode.prototype = {\n    createDiv: function(document){\n        var element = document.createElement(\'span\');\n\/\/element.href= \"javascript:void(0)\"; \nthis.focusLink = document.createElement(\"a\");\nthis.focusLink.href=\"#\";\nelement.appendChild(this.focusLink);\n        element.className=\'treeText\';\n\n        var elementText = document.createElement(\'div\');\n        elementText.className=\'treePreText\';\n        var elementLines = document.createElement(\'div\');\n        elementLines.className=\'treePreLine\';\n        \n        elementText.innerHTML =\'Loading...\';\n        \n        \n        element.appendChild(elementLines);\n        element.appendChild(elementText);\n\t\tvar self = this;\n        if(isAppSandbox){\n        \tvar scriptLoader = new air.Introspector.runtime.URLLoader();\n\t        scriptLoader.addEventListener(air.Introspector.runtime.Event.COMPLETE, function(e){\n\t        \t    var value = air.Introspector.blockWrap(scriptLoader.data);\n\t\t        \telementText.innerHTML = \'<pre>\'+air.Introspector.escapeHtml(value[0])+\'\\n\\n<\/pre>\';\n\t\t\t        elementLines.innerHTML = \'<pre>\'+value[1]+\'<\/pre>\';\n\t\t\t\t\tscriptLoader = null;\n\t\t        });\n\t\t\tscriptLoader.addEventListener(air.Introspector.runtime.IOErrorEvent.IO_ERROR, function(e){\n\t\t\t\tvar value = air.Introspector.blockWrap(\'Error reading file \"\'+self.file+\'\"\');\n\t        \telementText.innerHTML = \'<pre>\'+air.Introspector.escapeHtml(value[0])+\'\\n\\n<\/pre>\';\n\t\t        elementLines.innerHTML = \'<pre>\'+value[1]+\'<\/pre>\';\n\t\t\t});\n\t\t\tscriptLoader.load(new air.Introspector.runtime.URLRequest(this.file));\n\t\t}else{\n\t\t\tvar myWindow = window;\n\t\t\tif(typeof activeWindow!=\'undefined\'){\n\t\t\t\tvar self = this;\n\t\t\t\tactiveWindow.setTimeout(function(){\n\t\t\t\t\tvar xhr = new activeWindow.XMLHttpRequest();\n\t\t\t\t\txhr.doNotDebug = true;\n\t\t\t\t\txhr.onreadystatechange = function(){\n\t\t\t\t\t\tif(this.readyState == 4){\n\t\t\t\t\t\t \tif(this.status == 200) {\n\t\t\t\t\t\t\t\tvar responseText = xhr.responseText;\n\t\t\t\t\t\t\t\tmyWindow.setTimeout(function(){\n\t\t\t\t\t\t\t\t\t\tvar value = air.Introspector.blockWrap(responseText);\n\t\t\t\t\t\t\t        \telementText.innerHTML = \'<pre>\'+air.Introspector.escapeHtml(value[0])+\'\\n\\n<\/pre>\';\n\t\t\t\t\t\t\t\t        elementLines.innerHTML = \'<pre>\'+value[1]+\'<\/pre>\';\n\t\t\t\t\t\t\t\t}, 0);\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\tmyWindow.setTimeout(function(){\n\t\t\t\t\t\t\t\t\tvar value = air.Introspector.blockWrap(\'Error reading file \"\'+self.file+\'\"\');\n\t\t\t\t\t\t        \telementText.innerHTML = \'<pre>\'+air.Introspector.escapeHtml(value[0])+\'\\n\\n<\/pre>\';\n\t\t\t\t\t\t\t        elementLines.innerHTML = \'<pre>\'+value[1]+\'<\/pre>\';\n\t\t\t\t\t\t\t\t}, 0);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\txhr = null;\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\txhr.open(\'GET\', self.file, true);\n\t\t\t\t\txhr.send();\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t}\n        this.element = element;\n        this.elementText = elementText;\n        this.elementLines = elementLines;\n        return element;\n    }\n};\nair.Introspector.tree.node.putDisposeInPrototype(air.Introspector.tree.textDownloadNode);\n\nair.Introspector.tree.imageDownloadNode = function(file){\n    this.file = file;\n};\n\nair.Introspector.tree.imageDownloadNode.prototype = {\n    createDiv: function(document){\n        var element = document.createElement(\'span\');\n\/\/element.href= \"javascript:void(0)\"; \nthis.focusLink = document.createElement(\"a\");\nthis.focusLink.href=\"#\";\nelement.appendChild(this.focusLink);\n        element.className=\'treeImage\';\n        var imgElement = document.createElement(\'img\');\n        imgElement.src = this.file;\n        element.appendChild(imgElement);\n        this.element = element;\n        this.imgElement = imgElement;\n        return element;\n    }\n};\nair.Introspector.tree.node.putDisposeInPrototype(air.Introspector.tree.imageDownloadNode);\n\nair.Introspector.tree.domNode = function(domNode, config){\n   this.domNode = domNode;\n   this.readOnly = false;\n   air.Introspector.tree.node.call(this, \'\', config);\n   this.openable = true;\n   this.unselectOnBlur = false;\n};\n\nair.Introspector.tree.domNode.prototype = {\n\tcreateAttribute: function(document, att){\n\t\tvar element = document.createElement(\'span\');\n\t\t\n\t\telement.appendChild(document.createTextNode(\' \'));\n\t\t\n\t\t var tagName = document.createElement(\'span\');\n         tagName.className = \'tagDomNodeAttribute\';\n         tagName.innerHTML = att.nodeName;\n         element.appendChild(tagName);\n\t\t element.appendChild(document.createTextNode(\'=\"\'));\n\t\t\n\t\tvar editor = new air.Introspector.tree.inPlaceEditor(function(){ return att.nodeValue.replace(\/\\n\/g, \'\\\\n\') }, \n\t\tfunction(value){att.nodeValue = value.replace(\/\\\\n\/g, \'\\n\')});\n\t\t editor.attributeName = att.nodeName;\n\t\tthis.registerEditor(editor);\n\t\telement.appendChild(editor.createDiv(document));\n\t\telement.appendChild(document.createTextNode(\'\"\'));\n\t\t\n\t\tthis.registerListener(element, \'mousedown\', function(e){ air.Introspector.debugWindow.setHoverDomElementAttribute(att); }, true );\n\/\/        this.registerListener(element, \'mouseout\', function(e){ air.Introspector.debugWindow.clearHoverDomElementAttribute(); }, true );\n\t\t\n\t\treturn element;\n\t},\n\t\n\t\n\ttoggleAttribute: function(attributeName){\n\t\tfor(var i=this.editors.length-1;i>=0;i--){\n\t\t\tif(typeof this.editors[i].attributeName!=\'undefined\'&&this.editors[i].attributeName==attributeName){\n\t\t\t\tthis.editors[i].toggleEditing();\n\t\t\t\treturn;\t\n\t\t\t}\n\t\t}\n\t},\n\t\n\tregisterEditor: function(editor){\n\t\tif(!this.editors)\n\t\t\tthis.editors = [];\n\t\teditor.parent = this;\n\t\tthis.editors.push(editor);\n\t},\n\tclearEditors: function(){\n\t\tif(this.editors){\n\t\t\tfor(var i=this.editors.length-1;i>=0;i--){\n\t\t\t\tthis.editors[i].dispose();\n\t\t\t}\n\t\t}\n\t},\n\tdispose: function(){\n\t\tthis.clearEditors();\n\t\tair.Introspector.tree.node.prototype.dispose.call(this);\n\t},\n\tshowDomHover:function(visible){\n\t\t\/\/air.Introspector.init();\n\t\tif(visible){\n\t\t\tair.Introspector.debugWindow.highlight(this.domNode);\n\t\t\tif(!this.readOnly)\n\t\t\t\t{air.Introspector.debugWindow.setHoverDomElement(this);}\n\t\t}else{\n\t\t\tair.Introspector.debugWindow.highlight();\n\t\t\tif(!this.readOnly)\t\t\t\n\t\t\t\t{air.Introspector.debugWindow.clearHoverDomElement();}\n\t\t}\n\t},\n\tonselect: function(sender, throwevent){\n\t\tif(this.readOnly)\n\t\t\treturn;\n\t\t\t\n\t\tif(air.Introspector.tree.domNode.lastSelectedNode&&\n\t\t\tair.Introspector.tree.domNode.lastSelectedNode.unselect&&\n\t\t\t\tair.Introspector.tree.domNode.lastSelectedNode!=sender){\n\t\t\t\t\tair.Introspector.tree.domNode.lastSelectedNode.unselect();\n\t\t}\n\t\t\t\t\t\t\n   \t   air.Introspector.tree.domNode.lastSelectedNode = sender;\n\t\n\t   if(typeof throwevent==\'undefined\'||throwevent==true){\n\t   \t\tair.Introspector.showCssElement(this.domNode);\n\t   }\t\n\t},\n\t\n\texpandAll: function(){\n\t\tthis.show();\n\t\tfor(var i=this.items.length-1;i>=0;i--)\n\t\t\tthis.items[i].expandAll();\n\t},\n\t\n\tcollapse: function(){\n\t\tfor(var i=this.items.length-1;i>=0;i--)\n\t\t\tthis.items[i].collapse();\n\t\tthis.hide();\n\t},\n\t\n\trefreshAttributes: function(){\n\t\tvar attributesTag  = this.attributesTag;\n        var atts  = this.domNode.attributes;\n\t\tattributesTag.innerHTML = \'\';\n        if(atts&&atts.length>0){\n        \tattributesTag.appendChild(document.createTextNode(\' \'));\n             for(var i=0;i<atts.length;i++){\n\t\t\t\tif(atts[i].nodeName.toLowerCase()==\'id\'){\n                \tattributesTag.appendChild(this.createAttribute(document, atts[i]));\n\t\t\t\t}\n             }\n             for(var i=0;i<atts.length;i++){\n\t\t\t\tif(atts[i].nodeName.toLowerCase()!=\'id\'){\n                \tattributesTag.appendChild(this.createAttribute(document, atts[i]));\n\t\t\t\t}\n             }\n        }\n\t},\n    createDiv: function(document, isChild){\n         var self = this;\n        var element = document.createElement(\'span\');\n\t\t\/\/element.href= \"javascript:void(0)\"; \n\t\tthis.focusLink = document.createElement(\"a\");\n\t\tthis.focusLink.href=\"#\";\n\t\telement.appendChild(this.focusLink);\n\n        element.className=\'treeNode domTreeNode\';\n        this.element = element;\n        \n        var nodeLabelDiv = document.createElement(\'div\');\n        var nodeEndLabelDiv = null;\n        \/\/should add parameters here\n        \/\/nodeLabelDiv.innerHTML = air.Introspector.escapeHtml(this.domNode.nodeName);\n        var shouldAddEndTag = false;\n        \n        switch(this.domNode.nodeType){\n        \tcase Node.DOCUMENT_NODE:\n        \tcase Node.ELEMENT_NODE:\n\t\t        nodeLabelDiv.appendChild(document.createTextNode(\'<\'));\n\t\t        var tagName = document.createElement(\'span\');\n\t\t        tagName.className = \'tagDomNodeName\';\n\t\t\t\tvar nodeName = this.domNode.nodeName;\n\t\t\t\tif(this.domNode.nodeType==Node.DOCUMENT_NODE)\n\t\t \t\t    nodeName = \'Root\';\n\t \t\t    tagName.innerHTML = nodeName;\n\t\t        nodeLabelDiv.appendChild(tagName);\n\t\t\n\t\t\n\t\t\t\tvar attributesTag = document.createElement(\'span\');\n\t\t\t\tthis.attributesTag = attributesTag;\n\t\t\t\tnodeLabelDiv.appendChild(attributesTag);\n\t\t\t\tthis.refreshAttributes();\n\t\t\t\t\n\t\t        if(this.domNode.hasChildNodes()){\n\t\t        \tshouldAddEndTag = this.domNode.firstChild.nextSibling!=null || this.domNode.firstChild.nodeType!=Node.TEXT_NODE;\n\t\t        \tif(!shouldAddEndTag){\n\t\t        \t\tnodeLabelDiv.appendChild(document.createTextNode(\'>\'));\n\t\t        \t\tvar editor = new air.Introspector.tree.inPlaceEditor(function(){ return self.domNode.firstChild.nodeValue.replace(\/\\n\/g, \'\\\\n\') }, \n                            function(value){self.domNode.firstChild.nodeValue = value.replace(\/\\\\n\/g, \'\\n\')});\n\t\t\t\t\t\t\tthis.registerEditor(editor);\n                        nodeLabelDiv.appendChild(editor.createDiv(document));\n                        \n                        var endTagName = document.createElement(\'span\');\n                        endTagName.className = \'tagDomNodeName\';\n                        endTagName.innerHTML = nodeName;\n                        nodeLabelDiv.appendChild(document.createTextNode(\'<\/\'));\n                        nodeLabelDiv.appendChild(endTagName);\n\t\t        \t\tnodeLabelDiv.appendChild(document.createTextNode(\'>\'));\n\t\t\n\t\t\n\t\t        \t}else{\n\t\t        \t\t nodeLabelDiv.appendChild(document.createTextNode(\'>\'));\n\t\t        \t}\n\t\t        }else{\n\t\t        \t   nodeLabelDiv.appendChild(document.createTextNode(\'\/>\'));\n\t\t        }\n\t            this.openable = shouldAddEndTag;\n\t            if(shouldAddEndTag){\n\t                    nodeEndLabelDiv = document.createElement(\'span\');\n                \t    nodeEndLabelDiv.className = this.opened?\'nodeEndLabelDivVisible\':\'nodeEndLabelDiv\';\n\t            \t    var endTagName = document.createElement(\'span\');\n                        endTagName.className = \'tagDomNodeName\';\n                        endTagName.innerHTML = nodeName;\n                        \n                        nodeEndLabelDiv.appendChild(document.createTextNode(\'<\/\'));\n                        nodeEndLabelDiv.appendChild(endTagName);\n                        nodeEndLabelDiv.appendChild(document.createTextNode(\'>\'));\n                       \n\t            \t\n                   \/\/ nodeLabelDiv.addEventListener(\'click\', function(e){ self.toggle(); e.stopPropagation(); } );\n                    var nodeAnchor = document.createElement(\'div\');\n\t\t\t        element.appendChild(nodeAnchor);\n\n\t\t\t\t\t\n\t\t\t        this.registerListener(nodeAnchor, \'mouseover\', function(e){ self.showDomHover(true);  self.showHover(true); e.stopPropagation();} );\n                    this.registerListener(nodeAnchor, \'mouseout\', function(e){ self.showDomHover(false);  self.showHover(false); e.stopPropagation(); } );\n        \t\t\tthis.nodeAnchor = nodeAnchor;\n\t\t\t\t\tthis.refreshNodeAnchor();\n\t\t\t\t\t\n\t\t\t        this.registerListener(nodeEndLabelDiv, \'mouseover\', function(e){ self.showDomHover(true);  self.showHover(true); e.stopPropagation();} );\n                    this.registerListener(nodeEndLabelDiv, \'mouseout\', function(e){ self.showDomHover(false);  self.showHover(false); e.stopPropagation(); } );\n\n                    this.registerListener(nodeAnchor, \'click\', function(e){ self.select(); self.toggle(); e.stopPropagation(); } );\n\t\t\t\t\tif(this.domNode.nodeType==Node.DOCUMENT_NODE)\n\t\t\t\t\t\tthis.shouldOpen();\n                }else{\n                \tthis.opened = false;\n                }\n            break;\n            case Node.TEXT_NODE:\n               var editor = new air.Introspector.tree.inPlaceEditor(function(){ return self.domNode.nodeValue.replace(\/\\n\/g, \'\\\\n\') }, \n                            function(value){self.domNode.nodeValue = value.replace(\/\\\\n\/g, \'\\n\')});\n                   this.registerEditor(editor);\n               nodeLabelDiv.appendChild(editor.createDiv(document));\n               this.openable = false;\n               this.opened = false;\n        \tbreak;\n\t\t\tdefault:\n\t\t\t\tnodeLabelDiv.appendChild(document.createTextNode(\'<\'));\n\t\t        var tagName = document.createElement(\'span\');\n\t\t        tagName.className = \'tagDomNodeName\';\n\t \t\t    tagName.innerHTML = this.domNode.nodeName;\n\t\t        nodeLabelDiv.appendChild(tagName);\n\t\t\t\tnodeLabelDiv.appendChild(document.createTextNode(\'>\'));\n\t\t\tbreak;\n        }\n        \n         \/*var child = this.domNode.firstChild;\n         while(child)\n         {\n                node.items.push(this.createDomTreeNode(child)); \/\/, this.createGetter(obj, i), this.createSetter(obj, i)));\n                child = child.nextSibling;\n         }*\/   \n        \n        nodeLabelDiv.className=\'treeLabel\';\/\/ + (this.shouldSelectFlag?\' selectedTreeLabel\':\'\');\n\n\t\tif(this.shouldSelectFlag){\n\t\t\tthis.addSelectedCss();\n\t\t}\n        \n\n       this.registerListener( nodeLabelDiv, \'mouseover\', function(e){ self.showDomHover(true);  self.showHover(true); e.stopPropagation(); }, true );\n       this.registerListener(nodeLabelDiv, \'mouseout\', function(e){ self.showDomHover(false);  self.showHover(false); e.stopPropagation(); }, true );\n\n        element.appendChild(nodeLabelDiv);\n        this.nodeLabelDiv = nodeLabelDiv;\n\n       this.registerListener(nodeLabelDiv, \'click\', function(e){\n\t\t\tself.select();\n\t\t\t   \/\/self.toggle();\n\t\t\t   self.show();\n               air.Introspector.debugWindow.showDomElementPath(self.domNode);\n\t\t});\n        \n        this.registerListener(element, \'dblclick\', function(e){\n\t\t\t   \te.stopPropagation();  \n\t\t\/\/\t\tself.toggle();\n\t\t\/\/\t\tself.select();\n               \/\/air.Introspector.debugWindow.gotoConsoleTab();\n\/\/               air.Introspector.debugWindow.showDomElementPath(self.domNode);\n                } );\n        \n        \n        \/\/nodeAnchor.style.visibility = this.openable?\'visible\':\'hidden\';\n\n        this.created = true;\n        \n        \n        var nodeChildren =  document.createElement(\'div\');\n        element.appendChild(nodeChildren);\n        this.nodeChildren = nodeChildren;\n        \n        if(nodeEndLabelDiv){\n\t\t\tthis.registerListener(nodeEndLabelDiv, \'click\', function(e){\n\/\/\t\t\t\t\tself.toggle();\n\t\t\t\t\tself.select();\n\t               air.Introspector.debugWindow.showDomElementPath(self.domNode);\n\t\t\t});\n\t \t\telement.appendChild(nodeEndLabelDiv);\n\t\t}\n        this.nodeEndLabelDiv = nodeEndLabelDiv;\n        \n        if(this.opened){\n          this.refreshChildren();\n        }\n       \n \t\tif(!isChild){\n\t\t\tthis.registerEvents(null, 0);\n\t\t}\n\t\t\n        return element;\n    }\n};\n\nair.Introspector.tree.domNode.prototype.__proto__ = air.Introspector.tree.node.prototype;\n\nair.Introspector.tree.inPlaceEditor = function(getter, setter, className){\n    this.getter = getter;\n    this.setter = setter; \n    if(typeof className!=\'undefined\'){\n        this.className = \' \'+className;\n    }else{\n        this.className = \'\';\n    }\n};\n\nair.Introspector.tree.inPlaceEditor.prototype = {\n\tnoZeroLength: function(e){\n\t\ttry{\n\t\t  var str = e+\'\';\n\t\t  if(air.Introspector.trim(e).length==0){\n\t\t  \treturn \'[Empty string - click to edit]\';\n\t\t  }\n\t\t  return str;\n\t\t}catch(e){\n\t\t\treturn e+\'\';\n\t\t}\n\t},\n\ttoggleEditing: function(){\n\t\tthis.onclick();\n\t},\n\tselectParent: function(){\n\t\tif(this.parent&&this.parent.select){\n\t\t\tthis.parent.select(true);\n\t\t}\n\t},\n\t\n\tonclick: function(){\n\t\tvar self = this;\n\t\tthis.selectParent();\n\t\tif(this.parent&&this.parent.readOnly)\n\t\t\t{return;}\n\t\tif(this.state==0){\/\/not editing\n\t\t  var editor = document.createElement(\'input\');\n\t\t  editor.type = \'text\';\n\t\t\n\t\t  try{\n\t         editor.value = this.getter();\n\t      }catch(e){\n\t         editor.value = e;  \n\t      }\n\t\n          editor.style.width = this.element.clientWidth+\'px\';\n\t\t  this.editor = editor;\n\t\t  this.element.innerHTML = \'\';\n\t\t  this.element.appendChild(editor);\n\t\t  this.saveValue = true;\n\t\t  \n\t\t  this.registerListener(editor,\'dblclick\', function(e){\n                        e.stopPropagation(); \n          }, true );\n\t\t  this.registerListener(editor, \'click\', function(e){ e.stopPropagation(); }, true );\n\t\t  this.registerListener(editor, \'keypress\', function(e){ if(self.state) { if(e.keyCode == 13) { self.saveValue=true; editor.blur(); return false;} else if(e.keyCode == 27){ self.saveValue=false; editor.blur(); return false;}}} );\n\t\t  this.registerListener(editor, \'blur\', function(){ if(self.state) self.onclick(); } );\n\t\t  editor.focus();\n\t\t}else{ \/\/editing mode\n\t\t\t\/\/set the value to setter\n\t\t\tif(this.saveValue){\n\t\t\t  try{\n\t            this.setter(this.editor.value);\t\t  \n\t\t\t  }catch(e){\n\t\t\t  }\n\t\t\t}\n\t\t  setTimeout(function(){\n\t\t      try{\n\t            self.element.innerHTML = self.noZeroLength(air.Introspector.escapeHtml(self.getter()));\n\t\t      }catch(e){\n\t\t        \/\/self.element.innerHTML = air.Introspector.escapeHtml(e);  \n\t\t      } \n\t      }, 100);\n\t\t}\n\t\tthis.state ^= 1 ;\n\t\tif(this.parent)\n\t\t\tthis.parent.state = this.state;\n\t},\n    createDiv: function(document){\n\t\tvar element = document.createElement(\'div\');\n        element.className=\'inPlaceEditor\'+this.className;\n\n    \tvar self = this;\n    \tthis.state = 0; \/\/not editing\n\n        \n        try{\n            element.innerHTML = this.noZeroLength(air.Introspector.escapeHtml(this.getter()));\n        }catch(e){\n            element.innerHTML = air.Introspector.escapeHtml(e);\t\n        }\n        \n        this.registerListener(element, \'click\', function(e){ if(self.state==0) self.onclick(); e.stopPropagation(); } , true );\n        \n      \/\/  element.addEventListener(\'dblclick\', function(e){\n      \/\/                  e.stopPropagation(); \n      \/\/          }, true );\n        \n        \n        this.element = element;\n        return element;\n    }\n};\nair.Introspector.tree.node.putDisposeInPrototype(air.Introspector.tree.inPlaceEditor);\n\nair.Introspector.split = function(element, leftElement, rightElement, firstWidth, minWidth){\n\tthis.element = element;\n\tthis.leftElement = leftElement;\n\tthis.rightElement = rightElement;\n\tvar self = this;\n\tthis.dragging = false;\n\t\n\tthis.element.style.right = (firstWidth)+\'px\';\n\tthis.leftElement.style.right = (firstWidth+this.element.clientWidth)+\'px\';\n\tthis.rightElement.style.width = (firstWidth)+\'px\';\t\n\tthis.firstWidth = firstWidth;\n\tthis.minWidth = minWidth;\n\tif(isAppSandbox){\n\t\tthis.element.ownerDocument.defaultView.nativeWindow.stage.addEventListener(runtime.flash.events.MouseEvent.MOUSE_MOVE, function(ev){\n\t\t\tself.mousemove(ev);\n\t\t}, true);\n\t}else{\n\t\tthis.element.ownerDocument.addEventListener(\"mousemove\", function(ev){self.mousemove(ev);}, true);\n\t}\n\tthis.element.ownerDocument.addEventListener(\"mouseup\", function(ev){ self.mouseup(ev); }, true);\n\tthis.element.addEventListener(\"mousedown\", function(ev){self.mousedown(ev)}, true);\t\t\n};\n\nair.Introspector.split.prototype = {\n\tmousemove:function(ev){\n\t\tif(this.dragging){\n\t\t\tif(isAppSandbox){\n\t\t\t\tvar delta = this.firstX-ev.localX;\n\t\t\t}else{\n\t\t\t\tvar delta = this.firstX-ev.clientX;\n\t\t\t}\n\t\t\t\t\n\t\t\tvar currentWidth = this.firstWidth + delta;\n\n\t\t\tif(currentWidth<this.minWidth){\n\t\t\t\tcurrentWidth=this.minWidth;\n\t\t\t}\n\t\t\t\n\t\t\tthis.currentWidth = currentWidth;\n\t\t\tthis.element.style.right = (currentWidth)+\'px\';\n\t\t\tthis.leftElement.style.right = (currentWidth+this.element.clientWidth)+\'px\';\n\t\t\tthis.rightElement.style.width = (currentWidth)+\'px\';\t\n\t\t\tif(isAppSandbox){\n\t\t\t\tev.stopImmediatePropagation();\n\t\t\t}\n\t\t\tev.stopPropagation();\t\n\t\t\tev.preventDefault();\n\t\t}\n\t},\n\tmousedown: function(ev){\n\t\tthis.dragging = true;\n\t\tthis.firstX = ev.clientX;\n\t\tthis.currentWidth = this.firstWidth;\n\t\tev.stopPropagation();\t\t\n\t\tev.preventDefault();\n\t},\n\tmouseup: function(ev){\n\t\tif(this.dragging){\n\n\t\t\tthis.dragging = false;\n\t\t\tthis.firstWidth = this.currentWidth;\n\t\t\tev.stopPropagation();\n\t\t\tev.preventDefault();\n\t\t}\n\t}\n};\n\nair.Introspector.getCssGroups = function(){\n\t\tvar cssGroupNames = {\n\t0: \"Background\",\n\t1: \"Box Model\",\n\t2: \"Layout\",\n\t3: \"Text\",\n\t4: \"Other\",\n\tlength: 5\n};\n\nvar cssGroups = [];\n\n\/*\n$group = 0;\n\/\/Background - 0\ncssGroups[\'background-attachment\']=$group;\ncssGroups[\'background-color\']=$group;\ncssGroups[\'background-image\']=$group;\ncssGroups[\'background-position\']=$group;\ncssGroups[\'background-repeat\']=$group;\ncssGroups[\'opacity\']=$group;\ncssGroups[\'-webkit-background-clip\']=$group;\ncssGroups[\'-webkit-background-composite\']=$group;\ncssGroups[\'-webkit-background-origin\']=$group;\ncssGroups[\'-webkit-background-size\']=$group;\n\n$group = 1;\n\/\/Box Model - 1\ncssGroups[\'border-bottom-color\']=$group;\ncssGroups[\'border-bottom-style\']=$group;\ncssGroups[\'border-bottom-width\']=$group;\ncssGroups[\'border-collapse\']=$group;\ncssGroups[\'border-left-color\']=$group;\ncssGroups[\'border-left-style\']=$group;\ncssGroups[\'border-left-width\']=$group;\ncssGroups[\'border-right-color\']=$group;\ncssGroups[\'border-right-style\']=$group;\ncssGroups[\'border-right-width\']=$group;\ncssGroups[\'border-top-color\']=$group;\ncssGroups[\'border-top-style\']=$group;\ncssGroups[\'border-top-width\']=$group;\ncssGroups[\'bottom\']=$group;\ncssGroups[\'height\']=$group;\ncssGroups[\'left\']=$group;\ncssGroups[\'top\']=$group;\ncssGroups[\'right\']=$group;\ncssGroups[\'width\']=$group;\ncssGroups[\'padding-bottom\']=$group;\ncssGroups[\'padding-left\']=$group;\ncssGroups[\'padding-right\']=$group;\ncssGroups[\'padding-top\']=$group;\ncssGroups[\'margin-bottom\']=$group;\ncssGroups[\'margin-left\']=$group;\ncssGroups[\'margin-right\']=$group;\ncssGroups[\'margin-top\']=$group;\ncssGroups[\'-webkit-border-fit\']=$group;\ncssGroups[\'-webkit-border-horizontal-spacing\']=$group;\ncssGroups[\'-webkit-border-vertical-spacing\']=$group;\ncssGroups[\'-webkit-box-align\']=$group;\ncssGroups[\'-webkit-box-direction\']=$group;\ncssGroups[\'-webkit-box-flex\']=$group;\ncssGroups[\'-webkit-box-flex-group\']=$group;\ncssGroups[\'-webkit-box-lines\']=$group;\ncssGroups[\'-webkit-box-ordinal-group\']=$group;\ncssGroups[\'-webkit-box-orient\']=$group;\ncssGroups[\'-webkit-box-pack\']=$group;\ncssGroups[\'-webkit-box-shadow\']=$group;\ncssGroups[\'-webkit-border-bottom-left-radius\']=$group;\ncssGroups[\'-webkit-border-bottom-right-radius\']=$group;\ncssGroups[\'-webkit-border-top-left-radius\']=$group;\ncssGroups[\'-webkit-border-top-right-radius\']=$group;\ncssGroups[\'-webkit-margin-bottom-collapse\']=$group;\ncssGroups[\'-webkit-margin-top-collapse\']=$group;\n\n\n$group = 2;\n\/\/Layout - 2\ncssGroups[\'position\']=$group;\ncssGroups[\'visibility\']=$group;\ncssGroups[\'display\']=$group;\ncssGroups[\'z-index\']=$group;\ncssGroups[\'overflow-x\']=$group;\ncssGroups[\'overflow-y\']=$group;\ncssGroups[\'white-space\']=$group;\ncssGroups[\'clear\']=$group;\ncssGroups[\'float\']=$group;\ncssGroups[\'-webkit-box-sizing\']=$group;\n\n$group = 3;\n\/\/Text - 3\ncssGroups[\'text-align\']=$group;\ncssGroups[\'text-decoration\']=$group;\ncssGroups[\'text-indent\']=$group;\ncssGroups[\'text-shadow\']=$group;\ncssGroups[\'text-transform\']=$group;\ncssGroups[\'font-family\']=$group;\ncssGroups[\'font-size\']=$group;\ncssGroups[\'font-style\']=$group;\ncssGroups[\'font-variant\']=$group;\ncssGroups[\'font-weight\']=$group;\ncssGroups[\'letter-spacing\']=$group;\ncssGroups[\'line-height\']=$group;\ncssGroups[\'-webkit-text-decorations-in-effect\']=$group;\ncssGroups[\'-webkit-text-fill-color\']=$group;\ncssGroups[\'-webkit-text-security\']=$group;\ncssGroups[\'-webkit-text-stroke-color\']=$group;\ncssGroups[\'-webkit-text-stroke-width\']=$group;\ncssGroups[\'word-spacing\']=$group;\ncssGroups[\'word-wrap\']=$group;\n\n\n\n$group = 4;\n\/\/Other - 4\n\ncssGroups[\'caption-side\']=$group;\ncssGroups[\'color\']=$group;\ncssGroups[\'cursor\']=$group;\ncssGroups[\'direction\']=$group;\ncssGroups[\'empty-cells\']=$group;\n\n\ncssGroups[\'list-style-image\']=$group;\ncssGroups[\'list-style-position\']=$group;\ncssGroups[\'list-style-type\']=$group;\ncssGroups[\'max-height\']=$group;\ncssGroups[\'max-width\']=$group;\ncssGroups[\'min-height\']=$group;\ncssGroups[\'min-width\']=$group;\n\ncssGroups[\'orphans\']=$group;\ncssGroups[\'outline-color\']=$group;\ncssGroups[\'outline-style\']=$group;\ncssGroups[\'outline-width\']=$group;\n\n\ncssGroups[\'page-break-after\']=$group;\ncssGroups[\'page-break-before\']=$group;\ncssGroups[\'page-break-inside\']=$group;\n\ncssGroups[\'resize\']=$group;\n\ncssGroups[\'table-layout\']=$group;\n\ncssGroups[\'unicode-bidi\']=$group;\ncssGroups[\'vertical-align\']=$group;\n\n\ncssGroups[\'widows\']=$group;\n\ncssGroups[\'-webkit-appearance\']=$group;\ncssGroups[\'-webkit-column-break-after\']=$group;\ncssGroups[\'-webkit-column-break-before\']=$group;\ncssGroups[\'-webkit-column-break-inside\']=$group;\ncssGroups[\'-webkit-column-count\']=$group;\ncssGroups[\'-webkit-column-gap\']=$group;\ncssGroups[\'-webkit-column-rule-color\']=$group;\ncssGroups[\'-webkit-column-rule-style\']=$group;\ncssGroups[\'-webkit-column-rule-width\']=$group;\ncssGroups[\'-webkit-column-width\']=$group;\ncssGroups[\'-webkit-highlight\']=$group;\ncssGroups[\'-webkit-line-break\']=$group;\ncssGroups[\'-webkit-line-clamp\']=$group;\ncssGroups[\'-webkit-marquee-direction\']=$group;\ncssGroups[\'-webkit-marquee-increment\']=$group;\ncssGroups[\'-webkit-marquee-repetition\']=$group;\ncssGroups[\'-webkit-marquee-style\']=$group;\ncssGroups[\'-webkit-nbsp-mode\']=$group;\ncssGroups[\'-webkit-rtl-ordering\']=$group;\ncssGroups[\'-webkit-user-drag\']=$group;\ncssGroups[\'-webkit-user-modify\']=$group;\ncssGroups[\'-webkit-user-select\']=$group;\ncssGroups[\'-webkit-dashboard-region\']=$group;\n\n*\/\n\ncssGroups[0]=[\'background-attachment\', \'background-color\', \'background-image\', \'background-position\', \'background-repeat\', \'opacity\', \'-webkit-background-clip\', \'-webkit-background-composite\', \'-webkit-background-origin\', \'-webkit-background-size\', ];\n\n\/\/Box Model - 1\ncssGroups[1]=[\'border-bottom-color\', \'border-bottom-style\', \'border-bottom-width\', \'border-collapse\', \'border-left-color\', \'border-left-style\', \'border-left-width\', \'border-right-color\', \'border-right-style\', \'border-right-width\', \'border-top-color\', \'border-top-style\', \'border-top-width\', \'bottom\', \'height\', \'left\', \'top\', \'right\', \'width\', \'padding-bottom\', \'padding-left\', \'padding-right\', \'padding-top\', \'margin-bottom\', \'margin-left\', \'margin-right\', \'margin-top\', \'-webkit-border-fit\', \'-webkit-border-horizontal-spacing\', \'-webkit-border-vertical-spacing\', \'-webkit-box-align\', \'-webkit-box-direction\', \'-webkit-box-flex\', \'-webkit-box-flex-group\', \'-webkit-box-lines\', \'-webkit-box-ordinal-group\', \'-webkit-box-orient\', \'-webkit-box-pack\', \'-webkit-box-shadow\', \'-webkit-border-bottom-left-radius\', \'-webkit-border-bottom-right-radius\', \'-webkit-border-top-left-radius\', \'-webkit-border-top-right-radius\', \'-webkit-margin-bottom-collapse\', \'-webkit-margin-top-collapse\', ];\n\n\n\/\/Layout - 2\ncssGroups[2]=[\'position\', \'visibility\', \'display\', \'z-index\', \'overflow-x\', \'overflow-y\', \'white-space\', \'clear\', \'float\', \'-webkit-box-sizing\', ];\n\n\/\/Text - 3\ncssGroups[3]=[\'text-align\', \'text-decoration\', \'text-indent\', \'text-shadow\', \'text-transform\', \'font-family\', \'font-size\', \'font-style\', \'font-variant\', \'font-weight\', \'letter-spacing\', \'line-height\', \'-webkit-text-decorations-in-effect\', \'-webkit-text-fill-color\', \'-webkit-text-security\', \'-webkit-text-stroke-color\', \'-webkit-text-stroke-width\', \'word-spacing\', \'word-wrap\', ];\n\n\n\/\/Other - 4\n\ncssGroups[4]=[\'caption-side\', \'color\', \'cursor\', \'direction\', \'empty-cells\', \n\t\'list-style-image\', \'list-style-position\', \'list-style-type\', \'max-height\', \'max-width\', \'min-height\', \'min-width\', \n\t\'orphans\', \'outline-color\', \'outline-style\', \'outline-width\', \n\t\'page-break-after\', \'page-break-before\', \'page-break-inside\', \n\t\'resize\', \n\t\'table-layout\', \n\t\'unicode-bidi\', \'vertical-align\', \n\t\'widows\', \n\t\'-webkit-appearance\', \'-webkit-column-break-after\', \'-webkit-column-break-before\', \'-webkit-column-break-inside\', \'-webkit-column-count\', \'-webkit-column-gap\', \'-webkit-column-rule-color\', \'-webkit-column-rule-style\', \'-webkit-column-rule-width\', \'-webkit-column-width\', \'-webkit-highlight\', \'-webkit-line-break\', \'-webkit-line-clamp\', \'-webkit-marquee-direction\', \'-webkit-marquee-increment\', \'-webkit-marquee-repetition\', \'-webkit-marquee-style\', \'-webkit-nbsp-mode\', \'-webkit-rtl-ordering\', \'-webkit-user-drag\', \'-webkit-user-modify\', \'-webkit-user-select\', \'-webkit-dashboard-region\',];\n\n\n\n\n\t\t\treturn [cssGroupNames, cssGroups];\n\t\t}\t\n\t\t\n\t\t\/\/=======================================================================================================================================================\n\t\t\/\/DebugWindow.js\n\t\t\/\/=======================================================================================================================================================\n\t\t\n\nair.Introspector.DebugWindow = function(config){\n    var self = this;\n    this.logLines = [];\n    this.domList = [];\n    this.isLoaded =  false;\n\n\tif(isAppSandbox){\n    \tthis.activeWindow = air.Introspector.runtime.NativeApplication.nativeApplication.activeWindow;\n\t}else{\n\t\t\/\/will get it from config later\n\t\tthis.activeWindow = activeWindow;\n\t}\n\n    this.isInspecting = false;\n    this.evalHistory = [];\n    this.evalHistoryPos = -1;\n    this.selectedTab = \'console\';\n    this.scrollDisabled = false;\n    this.requestLog = [];\n    this.activeTab = 0;\n    this.tabs = [\'console\', \'html2\', \'dom\',\'assets\',\'source\',\'net\'];\n\tthis.cssTabs = [\'css2Dom\', \'css2Style\', \'css2Box\'];\n\tthis.activeCssTab = 0;\n\tthis.activateDebug = false;\n\tthis.isWindowCreated = false;\n\tthis.isMenuVisible = false;\n    \/\/var initOptions = new air.Introspector.runtime.NativeWindowInitOptions();\n    \/\/initOptions.transparent = true;\n    \/\/initOptions.systemChrome = \"none\";\n    if(typeof config!=\'undefined\'){\n\t\tair.Introspector.extend(this, config);\n\t}\n\tvar css = air.Introspector.getCssGroups();\n\tthis.cssGroupNames = css[0];\n\tthis.cssGroups = css[1];\n\tthis.isAppSandbox = isAppSandbox;\n}\n\t\t\/\/-------------------------------------------------------------------------------------------------------------------------------------------------------\n\n\t\tair.Introspector.DebugWindow.prototype = \n\t\t{\n\n\t\t\/\/=======================================================================================================================================================\n\t\t\/\/DebugWindow.INIT.js\n\t\t\/\/=======================================================================================================================================================\n\t\tsaveConfig: function(force){\n\tif(this.evalHistory&&this.evalHistory.length>30){\n\t\tthis.evalHistory.splice(0, this.evalHistory.length-30);\n\t\tthis.evalHistoryPos = this.evalHistory.length;\n\t}\n\t\n\tvar config = {\n\t\tevalHistory : this.evalHistory\n\t};\n\t\n\tif(isAppSandbox){\n\t\tif(this.nativeWindow.displayState==runtime.flash.display.NativeWindowDisplayState.NORMAL){\n\t\t\tconfig.rect = {\n\t\t\t\tx:this.nativeWindow.x,\n\t\t\t\ty:this.nativeWindow.y,\n\t\t\t\twidth:this.nativeWindow.width,\n\t\t\t\theight:this.nativeWindow.height\n\t\t\t};\n\t\t}else if(this.lastConfig){\n\t\t\tconfig.rect = this.lastConfig.rect;\n\t\t}\n\t\tconfig.windowState = this.nativeWindow.displayState;\n\t}else{\n\t\tconfig.rect = {\n\t\t\tx:this.window.screenX,\n\t\t\ty:this.window.screenY,\n\t\t\twidth:this.window.outerWidth,\n\t\t\theight:this.window.outerHeight\n\t\t};\n\t}\n\n\tvar ok = typeof force!=\'undefined\'?force:false;\n\tif(!ok&&this.lastConfig){\n\t\tif(!ok&&this.lastConfig.rect&&config.rect){\n\t\t\tif(config.rect.x!=this.lastConfig.rect.x) ok=true;\n\t\t\tif(config.rect.y!=this.lastConfig.rect.y) ok=true;\n\t\t\tif(config.rect.width!=this.lastConfig.rect.width) ok=true;\n\t\t\tif(config.rect.height!=this.lastConfig.rect.height) ok=true;\t\t\t\n\t\t}else{ ok=true; }\n\t\tif(!ok&&this.lastConfig.windowState&&config.windowState){\n\t\t\tif(config.windowState!=this.lastConfig.windowState) ok=true;\t\t\t\n\t\t}else{ ok=true; }\n\t}\n\tif(!ok)return;\n\tif(this.writeTimeout){\n\t\tclearTimeout(this.writeTimeout);\n\t\tthis.writeTimeout = null;\n\t}\n\t\n\tthis.writeTimeout = setTimeout(function(){ \n\t\tair.Introspector.writeConfigFile(config);\t\t\n\t}, 300);\n\n\tthis.lastConfig = config;\n},\n\nreadConfig: function(config){\n\tif(config.evalHistory){\n\t\tthis.evalHistory = config.evalHistory;\n\t\tthis.evalHistoryPos = config.evalHistory.length;\n\t}\n\tif(isAppSandbox){\n\t\tif(config.rect){\n\t\t\tthis.nativeWindow.x = config.rect.x;\n\t\t\tthis.nativeWindow.y = config.rect.y;\n\t\t\tthis.nativeWindow.width = config.rect.width;\n\t\t\tthis.nativeWindow.height = config.rect.height;\n\t\t}\n\t\tif(config.windowState){\n\t\t\tswitch(config.windowState){\n\t\t\t\tcase runtime.flash.display.NativeWindowDisplayState.MAXIMIZED:\n\t\t\t\t\tthis.nativeWindow.maximize();\t\t\t\t\t\n\t\t\t\t\tbreak;\n\t\t\t\tcase runtime.flash.display.NativeWindowDisplayState.MINIMIZED:\n\t\t\t\t\tthis.nativeWindow.minimize();\t\t\t\t\t\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}else{\n\t\tif(config.rect){\n\t\t\tthis.window.moveTo(config.rect.x, config.rect.y);\n\t\t\tthis.window.resizeTo(config.rect.width, config.rect.height);\n\t\t}\n\t}\n\tthis.lastConfig = config;\n},\n\n\ninitConfigFile: function(){\n\tvar self = this;\n\n\tif(isAppSandbox){\n\t\tvar config = air.Introspector.readConfigFile();\n\t\tif(typeof config==\'undefined\') config = {};\n\t\tthis.readConfig(config);\n\t\tthis.nativeWindow.addEventListener(runtime.flash.events.NativeWindowBoundsEvent.MOVE , function(){ self.saveConfig(); });\n\t\tthis.nativeWindow.addEventListener(runtime.flash.events.NativeWindowBoundsEvent.RESIZE , function(){ self.saveConfig(); });\t\n\t}else{\n\t\tair.Introspector.readConfigFile(true, function(config){\n\t\t\tif(typeof config==\'undefined\') config = {};\n\t\t\tself.readConfig(config);\n\t\t\tsetInterval(function() { self.saveConfig();  }, 900);\n\t\t});\n\t}\n},\n\n\n\nloadUIElements: function(){\n\t\tthis.consoleDiv = this.htmlLoader.window.document.getElementById(\'console\');\n\t    this.windowsDiv = this.htmlLoader.window.document.getElementById(\'windowList\');\n\t    this.tabLabels = this.htmlLoader.window.document.getElementById(\'tabLabels\');\n\n\t\/\/        this.consoleTabLabel = this.htmlLoader.window.document.getElementById(\'consoleTabLabel\');\n\t\/\/        this.html2TabLabel = this.htmlLoader.window.document.getElementById(\'html2TabLabel\');\n\n\t    this.evalConsoleText = this.htmlLoader.window.document.getElementById(\'evalConsoleText\');\n\t    this.tabPages = this.htmlLoader.window.document.getElementById(\'tabPages\');\n\n\t    this.cssTabLabels = this.htmlLoader.window.document.getElementById(\'css2TabLabels\');\n\t    this.cssTabPages = this.htmlLoader.window.document.getElementById(\'css2TabPages\');\n\n\n\t    this.domDiv = this.htmlLoader.window.document.getElementById(\'domTab\');\n\t    \/\/this.htmlDiv = this.htmlLoader.window.document.getElementById(\'htmlTab\');\n\t    this.netTabDiv = this.htmlLoader.window.document.getElementById(\'netTab\');\n\t    this.html2TabDiv = this.htmlLoader.window.document.getElementById(\'html2Tab\');\n\t\tthis.html2Div = this.htmlLoader.window.document.getElementById(\'html2Div\');\n\t\tthis.html2Split = this.htmlLoader.window.document.getElementById(\'html2Split\');\n\t\tthis.css2Div = this.htmlLoader.window.document.getElementById(\'css2Div\');\n\t\tthis.css2SplitObj = new air.Introspector.split(this.html2Split, this.html2Div, this.css2Div , 300, 150);\n\t    this.assetsTabDiv = this.htmlLoader.window.document.getElementById(\'assetsTab\');\n\t    this.sourcesTabDiv = this.htmlLoader.window.document.getElementById(\'sourceTab\');\n\t    this.inspectToolLabel = this.htmlLoader.window.document.getElementById(\'inspectToolLabel\');\n\t    this.consoleMenuDiv = this.htmlLoader.window.document.getElementById(\'consoleMenuDiv\');\n\t    this.domMenuDiv = this.htmlLoader.window.document.getElementById(\'domMenuDiv\');\t\n\t\tthis.menuDiv = this.htmlLoader.window.document.getElementById(\'menuDiv\');\t\n\n\t\tthis.domRemoveAttributeMenuDiv = this.htmlLoader.window.document.getElementById(\'domRemoveAttributeMenuDiv\');\n\n\t\tthis.css2DomTab = this.htmlLoader.window.document.getElementById(\'css2DomTab\');\n\t\tthis.css2StyleTab = this.htmlLoader.window.document.getElementById(\'css2StyleTab\');\n\t\tthis.searchTextBox = this.htmlLoader.window.document.getElementById(\'searchTextBox\');\n\t\tthis.txtSearch = this.htmlLoader.window.document.getElementById(\'txtSearch\');\n\n\t\tthis.refreshActiveWindowButton = this.htmlLoader.window.document.getElementById(\'refreshActiveWindow\');\n\t\n\t},\n\t\n\ncreateMenu: function(){\n\tvar self = this;\n\tif(isAppSandbox){\n\t\tvar consoleMenu = new runtime.flash.display.NativeMenu();\n\t\tvar domMenu = new runtime.flash.display.NativeMenu();\n\t\t\n\t\tvar clearMenu = new runtime.flash.display.NativeMenuItem(\'Clear console\');\n\t\tclearMenu.addEventListener(runtime.flash.events.Event.SELECT, function(){ self.clearConsole(); });\n\n\t\tvar saveMenu = new runtime.flash.display.NativeMenuItem(\'Save console to file...\');\n\t\tsaveMenu.addEventListener(runtime.flash.events.Event.SELECT, function(){ self.saveConsoleToFile(); });\n\n\t\tvar clipboardMenu = new runtime.flash.display.NativeMenuItem(\'Save console to clipboard\');\n\t\tclipboardMenu.addEventListener(runtime.flash.events.Event.SELECT, function(){ self.saveConsoleToClipboard(); });\n\n\n\t\tvar copyMenu = new runtime.flash.display.NativeMenuItem(\'Copy\');\n\t\tcopyMenu.addEventListener(runtime.flash.events.Event.SELECT, function(){ air.Introspector.runtime.NativeApplication.nativeApplication.copy() });\n\n\n\t\t\n\t\tvar domMenuExpand = new runtime.flash.display.NativeMenuItem(\'Expand All\');\n\t\tdomMenuExpand.addEventListener(runtime.flash.events.Event.SELECT, function(){ self.expandHoverDomElement(); });\t\t\n\t\tthis.domMenuExpand = domMenuExpand;\n\t\t\n\t\tvar domMenuCollapse = new runtime.flash.display.NativeMenuItem(\'Collapse\');\n\t\tdomMenuCollapse.addEventListener(runtime.flash.events.Event.SELECT, function(){ self.collapseHoverDomElement(); });\t\t\t\t\n\t\tthis.domMenuCollapse = domMenuCollapse;\n\t\t\n\t\tvar domMenuAddAttribute = new runtime.flash.display.NativeMenuItem(\'Add attribute\');\n\t\tdomMenuAddAttribute.addEventListener(runtime.flash.events.Event.SELECT, function(){ self.addHoverDomElementAttribute(); });\t\t\n\t\tthis.domMenuAddAttribute = domMenuAddAttribute;\n\t\t\n\t\tvar domMenuRemoveAttribute = new runtime.flash.display.NativeMenuItem(\'Remove attribute\');\n\t\tdomMenuRemoveAttribute.addEventListener(runtime.flash.events.Event.SELECT, function(){ self.removeHoverDomElementAttribute(); });\t\t\n\t\tthis.domMenuRemoveAttribute = domMenuRemoveAttribute;\n\t\t\n\t\t\n\t\t\n\t\tconsoleMenu.addItem(clearMenu);\n\t\tconsoleMenu.addItem(saveMenu);\t\n\t\tconsoleMenu.addItem(clipboardMenu);\t\n\t\tconsoleMenu.addItem(new runtime.flash.display.NativeMenuItem(\'\', true));\n\t\tconsoleMenu.addItem(copyMenu);\t\t\t\n\t\n\t\tdomMenu.addItem(domMenuExpand);\n\t\tdomMenu.addItem(domMenuCollapse);\t\t\n\t\tdomMenu.addItem(domMenuAddAttribute);\t\n\t\tdomMenu.addItem(domMenuRemoveAttribute);\t\t\t\n\t\t\t\n\t\tthis.consoleMenu = consoleMenu;\n\t\tthis.domMenu = domMenu;\n\t}else{\n\t\t\/\/preventing click when menu is visible\n\t\tthis.htmlLoader.window.document.addEventListener(\'click\', function(evt){\n\t\t\t\tif(self.isMenuVisible){\n\t\t\t\t\tvar parent = evt.srcElement;\n\t\t\t\t\twhile(parent){\n\t\t\t\t\t\tif(parent==self.menuDiv)\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\tparent = parent.parentNode;\n\t\t\t\t\t}\n\t\t\t\t\tevt.stopPropagation();\n\t\t\t\t\tself.hideMenu();\n\t\t\t\t}\n\t\t\t}, true);\n\t\t\t\n\t\t\n\t\tvar preventClosingListener = function(){\n\t\t\t\tif(this.style.display==\'block\'){\n\t\t\t\t\tif(self.menuTimeout){\n\t\t\t\t\t\tclearTimeout(self.menuTimeout);\n\t\t\t\t\t\tdelete self.menuTimeout;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\n\t\tvar hideMenuListener = function(){\n\t\t\t\tif(this.style.visibility==\'visible\'){\n\t\t\t\t\tif(!self.menuTimeout)\n\t\t\t\t\t\tself.menuTimeout = setTimeout(function(){ self.hideMenu(); }, 400);\n\t\t\t\t}\t\n\t\t\t};\n\n\t\tthis.consoleMenuDiv.addEventListener(\'mouseover\', preventClosingListener, true);\n\t\tthis.domMenuDiv.addEventListener(\'mouseover\', preventClosingListener, true);\n\t\t\n\t\tthis.consoleMenuDiv.addEventListener(\'mouseout\',hideMenuListener , true);\n\t\tthis.domMenuDiv.addEventListener(\'mouseout\',hideMenuListener , true);\t\t\n\t}\n\t\n},\t\n\nattachSearchKeys: function(){\n\tvar self = this;\n\tthis.htmlLoader.window.document.addEventListener(\'keydown\', function(evt){\n\t\tif((evt.ctrlKey||evt.metaKey)==true&&evt.altKey==false&&evt.keyCode==70){\n\t\t\tself.searchTextBox.style.display = \'block\';\n\t\t\tself.txtSearch.focus();\n\t\t\tevt.preventDefault();\n\t\t}else if( evt.keyCode==27&&(evt.ctrlKey||evt.metaKey||evt.altKey)==false){\n\t\t\tif(self.searchTextBox.style.display == \'block\'){\n\t\t\t\tself.hideSearch();\n\t\t\t\tevt.preventDefault();\n\t\t\t}\n\t\t}\n\t});\n},\n\n\n\n\nattachUIWindow: function(window){\n\tif(!isAppSandbox){\n\t\tthis.window = window;\n\t\tthis.htmlLoader = { window: window };\n\t\tthis.window.document.title = \'Non Application Sandbox - frame id=\"\'+iframeId+\'\"\';\n\t}else{\n\t\tthis.htmlLoader = window.htmlLoader;\n\t\tthis.nativeWindow = window.nativeWindow;\n\t\tthis.nativeWindow.width = 640;\n\t    this.nativeWindow.height = 480;\n\t\tthis.window = window;\n\t}\n},\n\ndispose: function(){\n\ttry{\n\t\tthis.finishInspect();\n\t\twindow.closed = true;\n\t}catch(e){}    \n},\n\ninit: function(window){\n   var self = this;\n\n   this.isWindowCreated = true;\n   this.attachUIWindow(window);\n\n\n\n   this.initConfigFile();\n\n\n\n\t\n   this.loadUIElements();\n   this.createMenu();\n   this.attachSearchKeys();\n\n\n\t\/\/restore inspecting to initial state\n\tif(this.isInspecting){\n        this.inspectToolLabel.className+=\' selected\';\n    }else{\n        this.finishInspect();\n    }\n\n\n    this.consoleDiv.addEventListener(\'scroll\', function(){self.scrollDisabled = self.consoleDiv.scrollTop != self.consoleDiv.scrollHeight-self.consoleDiv.clientHeight;});\n    \n\tthis.activateTab();\n\tthis.activateCssTab();\n\n    \n    this.isLoaded = true;\n    if(this.logLines.length>0){\n        this.refreshConsole();\n    }\n    \n    if(this.requestLog.length>0){\n        this.refreshNetConsole();\n    }\n    \n\n\tthis.refreshWindows();\n    \n\tif(isAppSandbox){\n        this.nativeWindow.visible = true;\n        if(typeof window.activateDebug!=\'undefined\'&&window.activateDebug==false)\n        {\n            try{\n               this.activeWindow.activate();\n\/\/               this.activeDebugWindow.orderToFront();\n            }catch(e){\n            }\n        }\n      \n\t   air.Introspector.addKeyboardEvents(this.htmlLoader.stage);\n    }\n\n   this.refreshDomPanel();\n\n},\n\nrefreshWindows: function(){\n    if(this.isAppSandbox){\n        this.ownedWindows = air.Introspector.getHtmlWindows();\n        this.windowsDiv.options.length = 0;\n\t\tvar windowsCount = 0;\n\t\tvar activeWindowFound = false;\n\t\tvar firstWindow = null;\n        for(var i=this.ownedWindows.length-1;i>=0;i--){\n            if(this.ownedWindows[i].nativeWindow==this.nativeWindow) continue;\n\t\t\ttry{\n\t\t\t\tif((this.ownedWindows[i].htmlLoader.window.alert+\'\').indexOf(\"[native code]\")<0) continue;\n\t\t\t}catch(e){ continue; }\n\t\t\t\twindowsCount ++;\n\t\t\tfirstWindow = this.ownedWindows[i].nativeWindow;\n\t\t\tif(this.ownedWindows[i].nativeWindow==this.activeWindow)\n\t\t\t\tactiveWindowFound = true;\n           var selected = this.ownedWindows[i].nativeWindow==this.activeWindow;\n           var option = new Option(this.ownedWindows[i].nativeWindow.title, i, selected, selected);\n\t\t\toption.innerHTML += \" \";\n           this.windowsDiv.options.add(option);\n        }\n\n\t\tif(windowsCount==0){\n\t\t\tif(air.Introspector.runtime.NativeApplication.nativeApplication.autoExit\n\t\t\t\t\t&&air.Introspector.config.closeIntrospectorOnExit){\t\t\t\n\t\t\t\tair.Introspector.runtime.NativeApplication.nativeApplication.exit();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\tif(!activeWindowFound){\n\t\t\tthis.activeWindow = firstWindow;\n\t\t\tif(this.windowsDiv.options.length>0)\n\t\t\t\tthis.windowsDiv.options[0].selected = true;\n\t\t\tthis.activeHtmlLoader = null;\n\t\t}\n        this.refreshDomPanel();\n        this.createAssetsTree();\n        this.createSourcesTree();\n\t}else{\n\t\tthis.windowsDiv.style.display=\'none\';\n\t\tthis.refreshActiveWindowButton.value=\'Refresh\';\n\t\t this.refreshDomPanel();\n\t     this.createAssetsTree();\n\t     this.createSourcesTree();\n\t}\n},\n\n\n   refreshDomPanel: function(){\n       this.makeDomDiv();\n       this.makeHtmlDiv();\n   },\n\n completeWindow: function(htmlLoader){\n        \/\/clear dom related to this htmlLoader\n        var self = this;\n        var activeHtmlLoader = this.getActiveHtmlLoader();\n        if(activeHtmlLoader==htmlLoader){\n            this.createAssetsTree();\n            this.createSourcesTree();\n        }else{\n            this.refreshWindows();\n        }\n    },\n\n  setActiveWindowById: function(id){\n\t\tif(isAppSandbox){\n \t        this.activeWindow = this.ownedWindows[id].nativeWindow;\n\t        this.activeHtmlLoader = null;\n\t        if(this.activeWindow!=null){\n\t            try{\n\t               this.logBuffer(this.activeWindow.title+\' selected\');\n\t            }catch(e){\n\t            }\n\t        }\n\t        this.refreshDomPanel();\n\t        this.createAssetsTree();\n\t        this.createSourcesTree();\n\t\t}\n    },\n\n    setActiveWindowByDocument: function(document){\n\t\tif(isAppSandbox){\n\t        for(var i=this.windowsDiv.options.length-1;i>=0;i--){\n\t        \ttry{\n\t        \t\tvar option = this.windowsDiv.options[i];\n\t\t        \tvar windowId = parseFloat(option.value);\n\t\t        \tif(this.ownedWindows[windowId].htmlLoader.window.document==document){\n\t\t        \t   option.selected = true;\n\t\t        \t   this.setActiveWindowById(windowId);\n\t\t        \t   return;\n\t\t        \t}\n\t        \t}catch(e){\n\t        \t}\n\t        }\n\t\t}\n    },\n\n  getActiveHtmlLoader: function(){\n\t\tif(isAppSandbox){\n\t        if(this.activeHtmlLoader==null&&this.activeWindow!=null){\n\t            this.activeHtmlLoader = air.Introspector.findLoader(this.activeWindow.stage);\n\t        }\n\t        return this.activeHtmlLoader;\n\t\t}else{\n\t\t\treturn {window: this.activeWindow };\n\t\t}\n    },\n\n\tsetTab: function(tab){\n\t\tthis.activeTab = tab;\n        if(this.isLoaded){\n\t\t\tthis.activateTab();\n\t\t}\n\t\t\n    },\n\tactivateTab: function(){\n        this.clearTabs();\n\t\t\n\t\tvar tabName = this.tabs[this.activeTab];\n\t\tthis.activeTabDiv = this.htmlLoader.window.document.getElementById(tabName+\'Tab\');\n\t\tthis.htmlLoader.window.document.getElementById(tabName+\'Label\').className = \'selected\';\n        this.activeTabDiv.className = \'selected\';\n\t\tthis.doFilter();\n\t\tif(this.activeTab==0){\n\t\t\tthis.evalConsoleText.focus();\n\t\t}\n\t},\n    setTool: function(toolName){\n        switch(toolName){\n            case \'inspect\':\n              this.toggleInspect();\n            break;\n        }\n    },\n    clearTabs: function(){\n        var child = this.tabLabels.firstChild;\n        while(child!=null){\n            if(child.nodeType==1)  child.className = child.className.replace(\/selected\/, \'\');\n            child=child.nextSibling;\n        }\n        var child = this.tabPages.firstChild;\n        while(child!=null){\n            if(child.nodeType==1) child.className = child.className.replace(\/selected\/, \'\');\n            child=child.nextSibling;\n        }\n    },\n\n  \n\n\ttimerBounce: function(tag){\n\t\tvar bounceTimer = 1300;\n\t\tvar hideBounce = function(){\n\t\t\tif(tag.className.indexOf(\'bounce\')==-1) return;\n\t\t\ttag.className = tag.className.replace(\/bounceOn\/g, \"bounceOff\");\n\t\t\ttag.innerHTML +=\'\'; \/\/force render\n\t\t\tsetTimeout(showBounce, bounceTimer);\n\t\t};\n\t\tvar showBounce = function(){\n\t\t\tif(tag.className.indexOf(\'bounce\')==-1) return;\n\t\t\ttag.className = tag.className.replace(\/bounceOff\/g, \"bounceOn\");\n\t\t\ttag.innerHTML +=\'\';\t\/\/force render\t\t\n\t\t\tsetTimeout(hideBounce, bounceTimer);\t\t\t\n\t\t};\n\t\tsetTimeout(hideBounce, bounceTimer);\n\t},\n\t\n\tbounceTab: function(tab){\n\t\tif(!air.Introspector.config.flashTabLabels)\n\t\t\treturn;\n\t\t\n\t\tif(this.isLoaded&&this.activeTab!=tab){\n\t\t\ttry{\n\t\t\t\tvar tabName = this.tabs[tab];\n\t\t\t\tvar tag =  this.htmlLoader.window.document.getElementById(tabName+\'Label\');\n\t\t\t\tif(tag.className.indexOf(\'bounce\')==-1){\n\t\t\t\t\ttag.className += \' bounceOn\';\n\t\t\t\t\tthis.timerBounce(tag);\n\t\t\t\t}\n\t\t\t}catch(e){\n\t\t\t\t\/\/wrong tab...\n\t\t\t}\n\t\t}\n\t},\n\t\n\t\n\tloadUrl: function(url, callback){\n    \tvar loader = new air.Introspector.runtime.URLLoader();\n        loader.addEventListener(air.Introspector.runtime.Event.COMPLETE, function(e)\n        {\n        \tcallback(loader.data);\n        });\n        loader.load(new air.Introspector.runtime.URLRequest(activeHtmlLoader.location));\n    },\n    \n    \n    \n    closedWindow: function(htmlLoader){\n\t\tvar self = this;\n\t\tthis.htmlLoader.window.setTimeout(function(){\n        \tself.refreshWindows();\n\t\t}, 0);\n    },\n   \n\thideMenu: function(ev){\n\t\tthis.isMenuVisible=false;\n\t\tthis.consoleMenuDiv.style.display = \'\';\n\t\tthis.domMenuDiv.style.display = \'\';\t\t\n\t\tthis.menuHoverDomElement = null;\t\t\n\t},\n\t\n\tshowMenu: function(ev){\n\t\tif(isAppSandbox){\n\t\t\tvar self = this;\n\t\t\tvar menu =  this.activeTab==0?this.consoleMenu:null;\n\n\t\t\tif(this.hoverDomElement){\n\t\t\t\tthis.menuHoverDomElement = this.hoverDomElement;\n\t\t\t\tthis.menuHoverDomElementAttribute = this.hoverDomElementAttribute;\n\t\t\t\tthis.domMenuRemoveAttribute.enabled = this.hoverDomElementAttribute?true:false;\n\t\t\t\tmenu = this.domMenu;\n\t\t\t}\n\t\t\t\t\t\t\n\t\t\tif(menu){\n\t\t\t\tmenu.display(nativeWindow.stage, ev.pageX, ev.pageY);\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\t\n\t\t}else{\t\n\t\t\t\n\t\t\t\n\t\t\tvar menuDiv = this.activeTab==0?this.consoleMenuDiv:null;\n\t\t\t\n\t\t\tif(this.hoverDomElement){\n\t\t\t\tthis.menuHoverDomElement = this.hoverDomElement;\n\t\t\t\tmenuDiv = this.domMenuDiv;\n\t\t\t}\n\t\t\t\n\t\t\tif(this.hoverDomElementAttribute){\n\t\t\t\tthis.menuHoverDomElementAttribute=this.hoverDomElementAttribute;\n\t\t\t\tthis.domRemoveAttributeMenuDiv.style.display = \'\'; \t\t\t\t\n\t\t\t}else{\n\t\t\t\tthis.domRemoveAttributeMenuDiv.style.display = \'none\'; \n\t\t\t}\n\t\t\t\n\t\t\tif(menuDiv){\n\t\t\t\tthis.isMenuVisible = true;\n\t\t\t\tmenuDiv.style.left=(ev.pageX-4)+\'px\';\n\t\t\t\tmenuDiv.style.top=(ev.pageY-4)+\'px\';\t\t\t\n\t\t\t\tmenuDiv.style.display = \'block\';\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\t\n\t\t}\n\n\t\treturn true;\t\n\t},\n\t\n\t\n\n\t\t\/\/-------------------------------------------------------------------------------------------------------------------------------------------------------\n\n\n\t\t\/\/=======================================================================================================================================================\n\t\t\/\/DebugWindow.ASSETS.js\n\t\t\/\/=======================================================================================================================================================\n\t\tcreateLinksTree: function(document){\n\treturn function(){\n\t\tvar alreadyAdded = {};\n    \tthis.items = [];\n    \tfor(var i=0;i<document.links.length;i++){\n    \t\tif(alreadyAdded[document.links[i].href]) continue;\n    \t\tif(document.links[i].name&&document.links[i].name.length!=0){\n    \t\t     var node = new air.Introspector.tree.node(document.links[i].name, { nodeLabel2: document.links[i].href, openable:false});\n    \t\t}else{\n    \t\t\t var node = new air.Introspector.tree.node(document.links[i].href, { nodeLabel2: \'\', openable:false});\n    \t\t}\n    \t\tthis.items.push(node);\n    \t\talreadyAdded[document.links[i].href]=true;\n    \t}\n\t};\n},\n\ncreateImagesTree: function(document){\n    return function(){\n    \tvar alreadyAdded = {};\n        this.items = [];\n        for(var i=0;i<document.images.length;i++){\n        \tif(alreadyAdded[document.images[i].src]) continue;\n\t\t\tvar title = document.images[i].src;\n\t\t\tif(isAppSandbox){\n\t\t\t\tvar file = new runtime.flash.filesystem.File(document.images[i].src);\n\t\t\t\tif(file.exists){\n\t\t\t\t\ttitle += \' [size: \'+(Math.round(file.size\/10.24)\/100)+\' KB]\';\n\t\t\t\t}else{\n\t\t\t\t\ttitle += \' [NOT FOUND]\';\n\t\t\t\t}\n\t\t\t}\n            var node = new air.Introspector.tree.node(title, {\n                src : document.images[i].src,\n                onshow:function(){\n                    if(this.items.length==0){\n                           this.items = [ new air.Introspector.tree.imageDownloadNode(this.src) ];\n                    }       \n                }, onhide: function(){\n                \t\/\/this.items.length = 0;\n\t\t\t\t\tthis.clearItems();\n                }\n            });\n            this.items.push(node);\n            alreadyAdded[document.images[i].src] = true;\n        }\n    };\n},\n\n\ncreateCssTree: function(document){\n    return function(){\n        this.items = [];\n        for(var i=0;i<document.styleSheets.length;i++){\n    \t\tvar node;\n            if(document.styleSheets[i].href){\n            \tnode = new air.Introspector.tree.node (document.styleSheets[i].href, {\n                    src : document.styleSheets[i].href,\n                    onshow:function(){\n                        if(this.items.length==0)\n                              this.items = [ new air.Introspector.tree.textDownloadNode(this.src) ];       \n                    }\n                });\n            }else{\n            \t node = new air.Introspector.tree.node (\'<style>\', {\n                    text: document.styleSheets[i].ownerNode.innerHTML,\n                    onshow:function(){\n                        if(this.items.length==0)\n                            this.items = [ new air.Introspector.tree.textNode(this.text) ];        \n                    }\n                }); \n            }\n            this.items.push(node);\n        }\n    };\n},\n\n\ncreateProjectTree: function(){\n\tif(isAppSandbox){\n\t\tvar self = this;\n    \tvar formats = air.Introspector.formats;\n    \tvar extendTree = function(parentNode, file){\n            this.items = [];\n            var files = file.getDirectoryListing();\n            for(var i=0;i<files.length;i++){\n                var node;\n                if(files[i].isDirectory){\n                     node = new air.Introspector.tree.node (files[i].name  , {\n                        src : files[i],\n                        onshow:function(){\n                            extendTree(this, this.src);\n                        },\n                        onhide:function(){\n                        \t\/\/this.items.length=0;\n\t\t\t\t\t\t\tthis.clearItems();\n                        }\n                    });\n                }else{\n\t\t\t\t\t\tvar title = files[i].name;\n\t\t\t\t\t\tvar format = formats[files[i].extension];\n\n\t\t\t\t\t\tif(isAppSandbox && format==1){\n\t\t\t\t\t\t\tvar file = files[i];\n\t\t\t\t\t\t\tif(file.exists){\n\t\t\t\t\t\t\t\ttitle += \' [size: \'+(Math.round(file.size\/10.24)\/100)+\' KB]\';\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\ttitle += \' [NOT FOUND]\';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\t\t\t\t\t\t\n\t\t\t\t\t\t\n                \t    node = new air.Introspector.tree.node (title , {\n\t                        src : \'file:\/\/\/\'+files[i].nativePath,\n\t\t\t\t\t\t\tformat: formats[files[i].extension], \n\t                        onshow:function(){\n\t                            if(this.items.length==0){\n\t                            \tif(this.format==0){\n\t                                  this.items = [ new air.Introspector.tree.textDownloadNode(this.src) ];\n\t                            \t}else if(this.format==1){\n\t                            \t   this.items = [ new air.Introspector.tree.imageDownloadNode(this.src) ];\n\t                            \t}else if(this.format==2){\n\t\t\t\t\t\t\t\t\t\tif(this.items.length==0){\n\t\t\t\t\t\t\t\t\t\t\tvar selfNode = this;\n\t\t\t\t\t\t\t\t\t\t\tif(isAppSandbox){ \/\/can not be something else\n\t\t\t\t\t\t\t\t\t        \tvar scriptLoader = new air.Introspector.runtime.URLLoader();\n\t\t\t\t\t\t\t\t\t\t        scriptLoader.addEventListener(air.Introspector.runtime.Event.COMPLETE, function(e){\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvar domParser = new DOMParser();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttry{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvar xmlData = domParser.parseFromString(scriptLoader.data, \"text\/xml\");\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tself.extendDom2TreeNode(selfNode, xmlData, true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}catch(e){\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttry{\n\t\t\t\t\t                                  \t\t\tselfNode.items = [ new air.Introspector.tree.textNode(scriptLoader.data) ];\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}catch(err){\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselfNode.items = [ new air.Introspector.tree.textNode(err+\'\') ];\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselfNode.show();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscriptLoader = null;\n\t\t\t\t\t\t\t\t\t\t\t        });\n\t\t\t\t\t\t\t\t\t\t\t\tscriptLoader.addEventListener(air.Introspector.runtime.IOErrorEvent.IO_ERROR, function(e){\n\t\t\t\t\t\t\t\t\t\t\t\t\tselfNode.items = [ new air.Introspector.tree.textNode(\"error loading file \"+e) ];\n\t\t\t\t\t\t\t\t\t\t\t\t\tselfNode.show();\n\t\t\t\t\t\t\t\t\t\t\t\t\tair.Introspector.logError(e);\n\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\tscriptLoader.load(new air.Introspector.runtime.URLRequest(this.src));\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tselfNode.items = [ new air.Introspector.tree.textNode(\"Loading...\") ];\n\t\t\t\t\t\t\t\t\t\t}\n\t                            \t}\n\t                            }       \n\t                        }, onhide: function(){ this.clearItems(); }\n\t                    });\n                }\n                parentNode.items.push(node);\n            }\n        };\n    \n        node = new air.Introspector.tree.node (\'Application files\'  , {\n                        src : runtime.flash.filesystem.File.applicationDirectory,\n                        onshow:function(){\n                            extendTree(this, this.src);\n                        },\n                        onhide:function(){\n                            \/\/this.items.length=0;\n\t\t\t\t\t\t\tthis.clearItems();\n                        }\n                    });\n        return node;\n\t}else{\n\t\treturn null;\n\t}\n},\n    \n\ncreateScriptsTree: function(document){\n    return  function(){\n        this.items = [];\n        for(var i=0;i<document.scripts.length;i++){\n\t\t\tvar node;\n        \tif(document.scripts[i].src){\n        \t\tnode = new air.Introspector.tree.node (document.scripts[i].src, {\n        \t\t\tsrc : document.scripts[i].src,\n        \t\t\tonshow:function(){\n\t    \t\t\t\tif(this.items.length==0){\t\n\t\t\t\t\t\t\tif(this.src.length>=3&&this.src.substr(this.src.length-3).toLowerCase()==\'swf\'){\n\t\t\t\t\t\t\t\tthis.items = [ new air.Introspector.tree.textNode(\"SWF file\") ];        \n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\tthis.items = [ new air.Introspector.tree.textDownloadNode(this.src) ];\t\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n        \t\t\t}\n        \t\t});\n        \t}else{\n                node = new air.Introspector.tree.node (\'<script>\', {\n                \ttext: document.scripts[i].innerText,\n                \tonshow:function(){\n                \t\tif(this.items.length==0)\n                            this.items = [ new air.Introspector.tree.textNode(this.text) ];        \n                    }\n                });\t\n        \t}\n            this.items.push(node);       \n        }\n    };\n    \n},    \n\ncreateAssetsTree: function(){\n    this.assetsTabDiv.innerHTML = \'\';\n\tif(this.assetsTabDivNode){\n\t\tthis.assetsTabDivNode.dispose();\n\t\tthis.assetsTabDivNode = null;\n\t}\n    var activeHtmlLoader = this.getActiveHtmlLoader();\n    if(activeHtmlLoader!=null){\n        var document = activeHtmlLoader.window.document;\n\t\tif(!document)return;\n        var self = this;\n        var node = new air.Introspector.tree.node(\"Assets\",{\n            onshow: function(){\n                  this.items = [\n                      new air.Introspector.tree.node(\"Links\",{openable:document.links.length!=0,  onshow:  self.createLinksTree(document) } ),\n                      new air.Introspector.tree.node(\"Images\",{openable:document.images.length!=0, onshow: self.createImagesTree(document) } ),\n                      new air.Introspector.tree.node(\"CSS (\"+document.styleSheets.length+\')\',{openable:document.styleSheets.length!=0, onshow:  self.createCssTree(document) } ),\n                      new air.Introspector.tree.node(\"JS (\"+document.scripts.length+\')\',{openable:document.scripts.length!=0, onshow:  self.createScriptsTree(document) } ),\n                  ];\n            },\n            onhide: function(){\n            \t\/\/this.items.length = 0;\n\t\t\t\tthis.clearItems();\n            }\n        });\n        node.shouldOpen();\n\t\tthis.assetsTabDivNode = node;\n        this.assetsTabDiv.appendChild(node.createDiv(this.htmlLoader.window.document));\n    }\n\n},\n\ncreateSourcesTree: function(){\n    this.sourcesTabDiv.innerHTML = \'\';\n\n\tif(this.sourceTabDivNodes){\n\t\tfor(var i=this.sourceTabDivNodes.length-1;i>=0;i--){\n\t\t\tif(this.sourceTabDivNodes[i]){\n\t\t\t\tthis.sourceTabDivNodes[i].dispose();\n\t\t\t\tthis.sourceTabDivNodes[i] = null;\n\t\t\t}\n\t\t}\n\t\tthis.sourceTabDivNodes = null;\n\t}\n\t\n\tthis.sourceTabDivNodes = [];\n    var activeHtmlLoader = this.getActiveHtmlLoader();\n    if(activeHtmlLoader!=null){\n        var document = activeHtmlLoader.window.document;\n        var self = this;\n        var node = new air.Introspector.tree.node(\"Actual source\",{\n        \tsrc: activeHtmlLoader.window.location, \n            onshow: function(){\n                this.items = [ new air.Introspector.tree.textDownloadNode(this.src) ]; \n            },\n            onhide: function(){\n                \/\/this.items.length = 0;\n\t\t\t\tthis.clearItems();\n            }\n        });\n\t\tthis.sourceTabDivNodes.push(node);\n        this.sourcesTabDiv.appendChild(node.createDiv(this.htmlLoader.window.document));\n        \n        var node = new air.Introspector.tree.node(\"Parsed source\",{\n        \t\/\/text: ,\n            onshow: function(){\n              this.items = [ new air.Introspector.tree.textNode(document.firstChild.outerHTML) ];    \n            },\n            onhide: function(){\n                \/\/this.items.length = 0;\n\t\t\t\tthis.clearItems();\n            }\n        });\n\t\tthis.sourceTabDivNodes.push(node);\n        this.sourcesTabDiv.appendChild(node.createDiv(this.htmlLoader.window.document));\n\n\t\tif(isAppSandbox){\n            var node = this.createProjectTree();\n\t\t\tthis.sourceTabDivNodes.push(node);\n            this.sourcesTabDiv.appendChild(node.createDiv(this.htmlLoader.window.document));\n\t\t}\n    }\n},\n\n\n\n\n\t\t\/\/-------------------------------------------------------------------------------------------------------------------------------------------------------\n\n\t\t\/\/=======================================================================================================================================================\n\t\t\/\/DebugWindow.CONSOLE.js\n\t\t\/\/=======================================================================================================================================================\n\t\t\n\n\n\n\n extendTreeNode: function(node, obj){\n        try{\n            var self = this;\n            var items = [];\n            if(typeof obj==\'undefined\'||obj==null)\n               return;\n            if(air.Introspector.isXMLObject(obj)){\n            \tthis.extendDom2TreeNode(node, obj);\n            \treturn;\n            }  \n            var isItemNative = air.Introspector.isItemNative(obj);\n            var parseArray = air.Introspector.isArrayObject(obj)||air.Introspector.isArgumentsObject(obj)||isItemNative;\n            var parseHash =  !parseArray || isItemNative;\n            if (parseArray){\n\t\t\t\tvar l = obj.length;\n            \tfor(var i=0;i<l;i++){\n                    var value;\n                    try{\n                        value = obj[i];\n                    }catch(e){\n                        value = e;\n                    }\n                    items.push(this.createJsTreeNode(i, value, this.createGetter(obj, i), this.createSetter(obj, i)));             \n                }\n            } \n            if(parseHash) {\n                for(var i in obj){\n                    var value;\n                    try{\n                        value = obj[i];\n                    }catch(e){\n                        value = e;\n                    }\n                    items.push(this.createJsTreeNode(i, value, this.createGetter(obj, i), this.createSetter(obj, i)));\n                }\n            }\n\n\t\t\tif(air.Introspector.config.debugRuntimeObjects){\n\t\t\t\ttry{\n\t\t\t\t\tvar typeDescription = runtime.flash.utils.describeType(obj);\n\t\t\t\t\tif(!this.domParser) this.domParser = new DOMParser();\n\t\t\t\t\tvar typeXml = this.domParser.parseFromString(typeDescription, \"text\/xml\");\n\t\t\t\t\tvar child = typeXml.firstChild.firstChild;\n\t\t\t\t\twhile(child){\n\t\t\t\t\t\tif(child.nodeName==\'accessor\'||child.nodeName==\'constant\'||child.nodeName==\'method\'||child.nodeName==\'variable\'){\n\t\t\t\t\t\t\tvar name = child.getAttribute(\'name\');\n\t\t\t\t\t\t\tif(name!=null && name!=\'prototype\'){\n\t\t\t                    try{\n\t\t\t\t\t\t\t\t\titems.push(this.createJsTreeNode(name, obj[name], this.createGetter(obj, name), this.createSetter(obj, name)));\t\t\n\t\t\t                    }catch(e){\n\t\t\t\t\t\t\t\t\titems.push(this.createJsTreeNode(name, \'\', this.createGetter(obj, name), this.createSetter(obj, name), e));\n\t\t\t                    }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tchild = child.nextSibling;\n\t\t\t\t\t}\n\t\t\t\t}catch(e){\n\t\t\t\t\t\/\/just hide the error\n\t\t\t\t}\n            }\n            items.sort(function(node1, node2){\n            \tvar isNode1Number = parseInt(node1.nodeLabel)==node1.nodeLabel;\n            \tvar isNode2Number = parseInt(node2.nodeLabel)==node2.nodeLabel;\n            \tif(isNode1Number&&isNode2Number){\n            \t\treturn parseInt(node1.nodeLabel)-parseInt(node2.nodeLabel);\n            \t}\n            \tif(isNode1Number){\n            \t\treturn -1;\n            \t}\n            \tif(isNode2Number){\n            \t\treturn 1;\n            \t}\n            \tif(node1.nodeLabel.toLowerCase()==node2.nodeLabel.toLowerCase())\n                   return 0;\n                if(node1.nodeLabel.toLowerCase()<node2.nodeLabel.toLowerCase())\n                   return -1;\n                return 1;\n            });\n        }catch(e){\n            this.logError(e);\n        }\n\t\tnode.items = items;\n    },\n\n    createGetter: function(obj, i){\n        return function(){ \n           try{\n               return obj[i];\n           }catch(e){}\n        }\n    },\n\n    createSetter: function(obj, i){\n        return function(value){ \n           try{\n               obj[i] = value;\n           }catch(e){}\n        }\n    },\n\n\n\n\n\tcreateJsTreeNode : function(stringValue, value, getter, setter, error){\n      var self = this;\n\n      var config = {\n            editable:false,\n              onshow: function(sender){\n\t\t\t\t\tself.extendTreeNode(sender, value);\n              }, \n              onhide: function(){\n\t\t\t\t\tthis.clearItems();\n\/\/                    this.items.length = 0;\n              },\n              onclick: function(){\n              \tif(typeof getter!=\'undefined\'){\n              \t   self.clicked = getter();\n              \t}\n              },\n              getEditValue: function(){\n                  if(typeof getter!=\'undefined\')\n                  {\n                      switch(this.valueType){\n                          case 0:\n                             return getter();\n                          case 1:\n                             return getter().replace(\/\\n\/g, \"\\\\n\");\n                      }\n                  }\n              },\n              setEditValue: function(value)\n              {\n                  if(typeof setter!=\'undefined\'){\n                      switch(this.valueType){\n                          case 0:\n                          var lowerCaseValue = value.toLowerCase();\n                          if(lowerCaseValue==\'true\')\n                            setter(true);\n                          else if(lowerCaseValue==\'false\')\n                            setter(false);\n                          else\n                            setter(parseFloat(value));\n                          break;\n                          case 1:\n                           setter(value.replace(\/\\\\n\/g, \"\\n\"));\n                          break;\n                   }\n                   setTimeout(function(self){\n                      if(typeof getter!=\'undefined\'){\n                              var value = getter();\n                              if(typeof value!=\'undefined\'&&value!=null){\n                                switch(self.valueType){\n                                  case 0:\n                                   self.nodeLabel2 = value;\n                                   break;\n                                  case 1:\n                                   var newValue = value.replace(\/\\n\/g, \"\\\\n\");\n                                   if(newValue.length == 0) newValue = \'[empty string - click to edit]\';\n                                       else newValue = \'\"\'+newValue +\'\"\';\n                                   self.nodeLabel2 = newValue;\n                                   break;\n                                }\n                                self.refreshLabel();\n                              }\n                         }\n                     },0,this);\n                  }\n              }\n          };\n\n      var openable = false;\n      var value2 = \'\';\n\n      if(typeof value==\'undefined\'){\n         openable = false;\n\t\tvalue2 = \'[undefined]\';\n      }else if(value==null){\n          openable = false;\n\t\tvalue2 = \'[null]\';\n      }else{\n\t\t\n\t\t\n          openable = false;\n          for(var i in value){\n              openable=true;\n              break;\n          }\n\t\tvar hasASValues = false;\n\t\tif(air.Introspector.config.debugRuntimeObjects){\n\t\t\ttry{\n\t\t\t\tvar typeDescription = runtime.flash.utils.describeType(value);\n\t\t\t\tif(!this.domParser) this.domParser = new DOMParser();\n\t\t\t\tvar typeXml = this.domParser.parseFromString(typeDescription, \"text\/xml\");\n\t\t\t\tvar child = typeXml.firstChild.firstChild;\n\t\t\t\twhile(child){\n\t\t\t\t\tif(child.nodeName==\'accessor\'||child.nodeName==\'method\'||child.nodeName==\'constant\'||child.nodeName==\'variable\'){\n\t\t\t\t\t\tif(child.getAttribute(\'declaredBy\') != \'flash.html::__HTMLScriptFunction\'){\n\t\t\t\t\t\t\topenable = true;\n\t\t\t\t\t\t\thasASValues = true;\t\n\t\t\t\t\t\t}\t\t\t\t\t\t\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t\tchild=child.nextSibling;\n\t\t\t\t}\n\t\t\t}catch(e){\n\t\t\t\t\/\/hide the error\n\t\t\t}\n\t\t}\n\tif(typeof error!=\'undefined\'){\n\t\t\n\t}else  if(air.Introspector.isNumberObject(value)){\n              value2 = value;\n              if(typeof setter!=\'undefined\'){\n                  config.editable = true;\n                  config.valueType = 0;\n              }\n              openable = false;\n          }else if(air.Introspector.isStringObject(value)){\n               value2 = value.replace(\/\\n\/g, \"\\\\n\");\n               if(value2.length == 0) value2 = \'[empty string - click to edit]\';\n                   else value2 = \'\"\'+value2 +\'\"\';\n\n              if(typeof setter!=\'undefined\'){\n                  config.editable = true;\n                  config.valueType = 1; \n              }\n              openable = false;\n          }else if(air.Introspector.isArgumentsObject(value)){\n              value2 = \'[Arguments \'+value.length+\']\';\n              openable = true;\n          }else if(air.Introspector.isArrayObject(value)||(air.Introspector.isItemNative(value)&&typeof value.length!=\'undefined\')){\n              value2 = \'[Array \'+value.length+\']\';\n              openable = true;\n          }else if(typeof value==\'function\' && !hasASValues ){\n\t\t\t\topenable = false;\n\t\t\t\tvalue2 = \"[function]\";\n\t\t  }else{\n              try{\n                 value2 = value+\'\';\n              }catch(e){\n                 value2 = e+\'\';\n              }\n          }\n      }\n\n      config.nodeLabel2 = value2;\n      config.openable = openable; \n\n      if(air.Introspector.isStringObject(stringValue)&&stringValue.length==0){\n      \tstringValue = value2;\n      \tconfig.nodeLabel2 = \'\';\n      }\n      return new air.Introspector.tree.node(stringValue,config);\n  },\n\n\n\t    logArguments: function(args, config){\n\t        if(typeof config==\'undefined\') config = {};\n\t        config.buffer=\'\';\n\t        if(args.length==1)\n\t           this.logObject(args[0], config);\n\t        else\n\t           this.logObject(args, config);\n\t    },\n\t\n\t\n\t logObject: function(obj, config){\n\t        if(typeof config==\'undefined\') config = {};\n\t        if(this.isLoaded){\n\t       \t\tif(typeof obj != \'undefined\')\n\t\t\t\t{\n\t        \t\tvar node = this.createJsTreeNode(\'\', obj);\n\t        \t\tvar addElement = true;\n\t        \t\tif(node.openable&&config.buffer==\'\'){\n\t        \t\t\ttry{\n\t\t\t\t\t\t\tif(air.Introspector.isArrayObject(obj)||air.Introspector.isArgumentsObject(obj)){\n\t\t\t\t\t\t\t\tvar l = obj.length;\n\t\t\t\t\t\t\t\tvar str = \'\';\n\t\t\t\t\t\t\t\tfor(var i=0;i<l;i++){\n\t\t\t\t\t\t\t\t\ttry{\n\t\t\t\t\t\t\t\t\t\tif(typeof obj[i]==\'undefined\')\n\t                            \t\t\tstr+= \'[undefined], \';\t\t\t\n\t\t\t\t\t\t\t\t\t\telse if(air.Introspector.isArrayObject(obj[i]))\n\t\t\t\t\t\t\t\t\t\t\tstr+=\'[Array \'+obj[i].length+\'], \';\n\t\t\t\t\t\t\t\t\t\telse if(air.Introspector.isArgumentsObject(obj[i]))\n\t\t\t\t\t\t\t\t\t\t\tstr+=\'[Arguments \'+obj[i].length+\'], \';\n\t\t\t\t\t\t\t\t\t\telse\n\t                            \t\t\tstr+= obj[i]+\', \';\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t}catch(e){\n\t\t\t\t\t\t\t\t\t\tstr+=\'[\'+e+\'], \';\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconfig.buffer = str;\n\t\t\t\t\t\t\t}\n\t\t                }catch(e){\n\t\t                }\n\t        \t\t}\n\t        \t\tif(typeof config.buffer==\'undefined\'||config.buffer==\'\'){\n\t        \t\t\ttry{\n\t        \t           config.buffer = obj+\'\';\n\t        \t           addElement = node.openable;\n\t        \t\t\t}catch(e){\n\t        \t\t\t\tconfig.buffer = e;\n\t        \t\t\t}\n\t        \t\t}\n\t        \t\tif(addElement)\n\t        \t\t  config.element = node.createDiv(this.htmlLoader.window.document);\t\n\t        \t}else if(typeof config.fromConsole==\'undefined\'||config.fromConsole==false){\n\t\t\t\t\tvar node = this.createJsTreeNode(\'[undefined]\');\n\t\t\t\t\tconfig.element = node.createDiv(this.htmlLoader.window.document);\t\n\t\t\t\t}\n\t            this.logBuffer(config.buffer, config);\n\t\t\t\tthis.bounceTab(0);\n\t        }else{\n\t           air.Introspector.extend(config, {obj: obj, isObject:true, doNotLog:true});\n\t           this.logLines.push(config);\n\t        }\n\t    },\n\n\t    showLogItem: function(logItem){\n\t        if(this.isLoaded){\n\t            var listItem = this.consoleDiv.ownerDocument.createElement(\'li\');\n\t            var listItemText = this.consoleDiv.ownerDocument.createElement(\'div\');\n\t\t\t\tif(logItem.usePre)\n\t\t\t\t{\n\t\t\t\t\tvar pre = \"<pre>\"+air.Introspector.escapeHtml(logItem.buffer).replace(\/\\n\/g, \'<\/pre><pre>\') + \"<\/pre>\";\n\t            \tlistItemText.innerHTML = logItem.specialBuffer + pre;\n\t\t\t\t}else\n\t            \tlistItemText.innerHTML = logItem.specialBuffer + air.Introspector.escapeHtml(logItem.buffer);\n\t            listItemText.className = \'\tconsoleItemText\';\n\t            listItem.appendChild(listItemText);\n\t            this.consoleDiv.appendChild(listItem);\n\t            if(typeof logItem.element!=\'undefined\'){\n\t                listItem.appendChild(logItem.element);\n\t            }\n\t            if(typeof logItem.type!=\'undefined\'){\n\t                listItem.className += \' \'+logItem.type;\n\t                var listItemType = this.consoleDiv.ownerDocument.createElement(\'div\');\n\t                listItemType.className = \'typeBox\';\n\t                switch(logItem.type){\n\t                    case \'warn\':\n\t                       listItemType.innerHTML = \'!\';\n\t                      break;\n\t                    case \'info\':\n\t                       listItemType.innerHTML = \'i\';\n\t                      break;\n\t                    case \'error\':\n\t                       listItemType.innerHTML = \'x\';\n\t                      break;\n\t                }\n\t                listItem.appendChild(listItemType);\n\t            }\n\t            this.scrollConsole();\n\t\t\t\tlogItem.displayObject = listItem;\n\t        }\n\t    },\n\t    logBuffer: function(buffer, config){\n\t        if(typeof config==\'undefined\') config = {};\n\t        if(typeof buffer==\'undefined\') buffer = \'\';\n\t        var specialBuffer = \'\';\n\t\t\tvar textSpecialBuffer = \'\';\n\t\t\t\n\t        if(air.Introspector.config.showTimestamp){\n\t           var date = typeof config.timestamp==\'undefined\'?new Date():config.timestamp;\n\t\t\t\tvar dateStr = air.Introspector.twoDigits(date.getHours())+\':\'+air.Introspector.twoDigits(date.getMinutes())+\':\'+air.Introspector.twoDigits(date.getSeconds());\n\t           specialBuffer=\'<span class=\"consoleTimestamp\">[\'+dateStr+\']<\/span> \'+specialBuffer;\n\t\t\t\ttextSpecialBuffer=  \'[\'+dateStr+\']\'+textSpecialBuffer;\n\t        }\n\t        if(air.Introspector.config.showSender&&config.htmlLoader){\n\t            try{\n\t\t\t\t  var locationStr = config.htmlLoader.window.location;\n\t              specialBuffer=\'<span class=\"consoleFrom\">[\'+locationStr+\']<\/span>\'+specialBuffer;\n\t\t\t\t  textSpecialBuffer=  \'[\'+locationStr+\']\'+textSpecialBuffer;\n\t            }catch(e){\n\t              \/\/no htmlLoader provided - use current window\n\t              buffer=\'[Debugger]\'+buffer;\n\t            }   \n\t        }\n\t        var logItem = {buffer: buffer, specialBuffer:specialBuffer, textSpecialBuffer:textSpecialBuffer};\n\t        delete config.buffer;\n\t        air.Introspector.extend(logItem, config);\n\t        this.showLogItem(logItem);\n\t        if(typeof config.doNotLog==\'undefined\'){\n\t            this.logLines.push(logItem);\n\t        }\n\t    },\n\t    scrollConsole:function(){\n\t    \tif(!this.scrollDisabled)\n\t        {\n\t        \tvar self = this;\n\t            setTimeout(function(){ self.consoleDiv.scrollTop = self.consoleDiv.scrollHeight; self.scrollDisabled = false; }, 0);\n\t        }\n\t    },\n\t    refreshConsole: function(){\n\t        this.consoleDiv.innerHTML = \'\';\n\t        for(var i=0;i<this.logLines.length;i++){\n\t            if(typeof this.logLines[i].isObject!=\'undefined\'){\n\t                \/\/air.Introspector.is an Object log\n\t                this.logObject(this.logLines[i].obj, this.logLines[i] );\n\t            }else{\n\t                this.showLogItem(this.logLines[i]);\n\t            }\n\t        }\n\t        this.scrollConsole();\n\t    },\n\t\n\t\n\t aireval : function(src, realWindow, result, error){\n\t        var self = this;\n\t\t\tvar myAir = {\n\t                Introspector: { \n\t                   loadedEval: src, \n\t                   mainWindow: realWindow,\n\t                   loaded: function(returnValue){\n\t                       if(typeof result==\'function\'){\n\t                           result.call(self, returnValue);\n\t                       }\n\t                   },\n\t                   error : function(returnValue){\n\t                       if(typeof error==\'function\'){\n\t                           error.call(self, returnValue);\n\t                       }\n\t                   },  \n\t                }\n\t           };\n\n\t\t\tif(isAppSandbox){\n\t               var htmlLoader = new  air.Introspector.runtime.HTMLLoader();\n\t               htmlLoader.addEventListener(air.Introspector.runtime.Event.HTML_DOM_INITIALIZE, function(){\n\t               \t   htmlLoader.window.clicked = self.clicked;\n\/*\t\t\t\t\t   htmlLoader.window.toXML = function(xml){\n\t\t\t\t\t\t\tvar domParser = new DOMParser();\n\t\t\t\t\t\t\treturn domParser.parseFromString(xml, \"text\/xml\");\n\t\t\t\t\t   };*\/\n\t                   htmlLoader.window.air = myAir;\n\t               });\n\t               htmlLoader.loadString(\"<script>var result; var aireval = eval; var evalSource = air.Introspector.loadedEval; try {with(air.Introspector.mainWindow){ result=aireval(evalSource); };air.Introspector.loaded(result); }catch(e){air.Introspector.error(e)}<\/\"+\"script>\");\n\t\t\t}else{\n\t\t\t\t\/\/we just don\'t need all that stuff - real eval is there (we actually run this peace of code in the same sandbox)\n\t\t\t\tvar resultvalue; \n\t\t\t\tvar aireval2 = realWindow.eval; \n\t\t\t\tvar evalSource = myAir.Introspector.loadedEval; \n\t\t\t\ttry {\n\t\t\t\t\twith(realWindow){ \n\t\t\t\t\t\tresultvalue=aireval2(evalSource); \n\t\t\t\t\t};\n\t\t\t\t\tmyAir.Introspector.loaded(resultvalue); \n\t\t\t\t}catch(e){  \n\t\t\t\t\tmyAir.Introspector.error(e); \n\t\t\t\t}\n\t\t\t}\n\t    },\n\t\n\t    historyUserInput: function(step){\n\t        if(typeof step!=\'undefined\'){\n\t            if(this.evalHistoryPos==this.evalHistory.length){\n\t                this.evalHistorySaved = this.evalConsoleText.value;\n\t            }\n\t            var newEvalHistoryPos = this.evalHistoryPos + step;\n\t            if(newEvalHistoryPos>=0){\n\t                if(newEvalHistoryPos<this.evalHistory.length){\n\t                  this.evalConsoleText.value = this.evalHistory[newEvalHistoryPos];\n\t                }else if(newEvalHistoryPos==this.evalHistory.length){\n\t                  this.evalConsoleText.value = this.evalHistorySaved;\n\t                }else{\n\t                    return;\n\t                }\n\t                this.evalHistoryPos = newEvalHistoryPos;\n\t                this.evalConsoleText.selectionStart = this.evalConsoleText.value.length;\n\t            }\n\t        }else if(this.evalHistoryPos<this.evalHistory.length&&this.evalConsoleText.value!=this.evalHistory[this.evalHistoryPos]){\n\t            this.evalHistoryPos=this.evalHistory.length;\n\t            this.evalHistorySaved = this.evalConsoleText.value;\n\t        }\n\t    },\n\n\t    evalUserInput: function(){\n\t        var htmlLoader = this.getActiveHtmlLoader();\n\t        if(htmlLoader==null){\n\t            this.logBuffer(null, \'No active window.\');\n\t            return;\n\t        }\n\t        try{\n\t            var userEval = this.evalConsoleText.value;\n\n\t            if(air.Introspector.trim(userEval).length==0)\n\t                return;\n\n\t\t\t\tthis.scrollDisabled = false;\n\n\t            this.evalHistory.push(userEval);\n\t            this.evalHistoryPos = this.evalHistory.length; \n\t\n\t \t\t\tthis.saveConfig(true);\n\n\t            this.aireval(userEval, htmlLoader.window, function(result){\n\t                \/\/if(typeof result!=\'undefined\'){\n\t\t                    this.logObject(result, {htmlLoader:htmlLoader, buffer: \'>>>\'+userEval, fromConsole:true });\n\t                \/\/}\n\t            }, function(error){\n\t                this.logError(error, {htmlLoader:htmlLoader, buffer: \'>>>\'+userEval });\n\t            });\n\n\t            this.evalConsoleText.value = \'\';\n\t        }catch(e){\n\t            this.logError(e, {htmlLoader:htmlLoader, buffer: \'>>>eval console\' });\n\t        }\n\t    },\n\n\t    logError: function(error, config){\n\t        if(typeof config==\'undefined\')\n\t           config = {};\n\t        config.type = \'error\';\n\t        this.logObject(error, config);\n\t    },\n\n\t\tgotoConsoleTab: function(){\n\t    \tthis.setTab(0);\n\t    },\n\n\n\t\tclearConsole: function(){\n\t\t\tthis.logLines = [];\n\t\t\tthis.refreshConsole();\n\t\t},\n\t\t\n\t\t\n\t\tsearchKeyDown: function(evt){\n\t\t\tif(evt.keyCode==13){\n\/\/\t\t\t\tthis.hideSearch();\n\t\t\t\tthis.searchIndex ++;\n\t\t\t\tthis.doSearchSelectIndex();\n\t\t\t}\n\t\t},\n\t\t\n\t\tdoSearchSelectIndex: function(){\n\t\t\tif(this.oldSelectedNode){\n\t\t\t\tthis.oldSelectedNode.className = (this.oldSelectedNode.className+\'\').replace(\/searchselect\/gi, \'\');\n\t\t\t\tthis.oldSelectedNode=null;\n\t\t\t}\n\t\t\t\n\t\t\tif(!this.searchBuffer||this.searchBuffer.length==0) return;\n\t\t\t\t\t\t\t\n\t\t\t\n\t\t\tif(this.searchIndex>=this.searchBuffer.length)\n\t\t\t\tthis.searchIndex = 0;\n\t\t\t\t\n\t\t\tif(this.searchIndex < 0)\n\t\t\t\tthis.searchIndex=this.searchBuffer.length-1;\n\n\t\t\tvar node = this.searchBuffer[this.searchIndex];\n\t\t\tif(!node) return;\t\t\t\n\t\t\tif(node.parentNode){\n\t\t\t\tthis.oldSelectedNode = node.parentNode;\n\t\t\t\tnode.parentNode.className+=\' searchselect\';\t\n\t\t\t\tnode.parentNode.scrollIntoViewIfNeeded();\n\t\t\t}\n\t\t},\n\t\tdoFilter: function(value){\n\t\t\tif(typeof value==\'undefined\'){ \/\/force search again\n\t\t\t\tvalue = this.consoleFilter;\n\t\t\t\tthis.consoleFilter = \'\';\n\t\t\t}\n\t\t\tif(value==this.consoleFilter) return;\n\t\t\t\n\t\t\tthis.consoleFilter = value;\n\t\t\t\t\t\t\t\t\t\t\n\/\/\t\t\tvar items = this.htmlLoader.window.document.getElementsByTagName(\'#text\');\n\t\t\tif(!value||value==\'\'){\n\t\t\t\tthis.searchBuffer = null;\t\t\t\t\n\t\t\t\tthis.doSearchSelectIndex();\n\t\t\t\treturn;\n\t\t\t} \n\t\t\t\n\t\t\tvar tw=this.htmlLoader.window.document.createTreeWalker(\n\t\t\t\t\t\tthis.activeTabDiv , this.htmlLoader.window.NodeFilter.SHOW_TEXT,\n\t\t\t\t\t { acceptNode: function(node) { return this.htmlLoader.window.NodeFilter.FILTER_ACCEPT; } },\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\t\n\t\t\tvar node;\n\t\t\tvar buf=[];\n\t\t\tvar lowValue = value.toLowerCase();\n\t\t\twhile(node=tw.nextNode())\n\t\t\t{\n\t\t\t\tif(node.nodeValue&&(node.nodeValue.toLowerCase().indexOf(lowValue)>=0))\n\t\t\t\t{\n\t\t\t\t\tif(node.parentNode&&this.htmlLoader.window.getComputedStyle(node.parentNode)[\'display\']==\'none\') continue; \n\t\t\t\t\tbuf.push(node);\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t\tthis.searchBuffer = buf;\n\t\t\tthis.searchIndex = 0;\n\t\t\tthis.doSearchSelectIndex();\n\t\t\t\n\t\t\treturn;\n\t\t\t\/*if(this.searchTextBox.style.visibility!=\'hidden\'){\n\t\t\t\t\n\t\t\t\tif(value.length==0){\n\t\t\t\t\tfor(var i=this.logLines.length-1;i>=0;i--){\n\t\t\t\t\t\tvar logLine = this.logLines[i];\n\t\t\t\t\t\tif(logLine.displayObject)\n\t\t\t\t\t\t\tlogLine.displayObject.style.display = \'\';\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t}else{\n\t\t\t\t\tfor(var i=this.logLines.length-1;i>=0;i--){\n\t\t\t\t\t\tvar logLine = this.logLines[i];\n\t\t\t\t\t\tif(logLine.displayObject&&logLine.buffer){\n\t\t\t\t\t\t\tif((logLine.displayObject.innerText+\'\').indexOf(value)>=0){\n\t\t\t\t\t\t\t\tlogLine.displayObject.style.display = \'\';\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\tlogLine.displayObject.style.display = \'none\';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}*\/\n\t\t},\n\t\thideSearch: function(){\n\t\t\tthis.txtSearch.blur();\t\t\t\n\t\t\tthis.searchTextBox.style.display=\"none\";\n\t\t\tthis.searchBuffer = null;\n\t\t\tthis.searchIndex = 0;\n\t\t\tthis.consoleFilter = \'\';\n\t\t\tthis.doFilter(\'\');\n\t\t\tthis.txtSearch.value = \'\';\n\t\t\tthis.doSearchSelectIndex();\n\t\t},\n\t\n\tsaveConsole: function(){\n\t\tvar str = \'\';\n\t    for(var i=0;i<this.logLines.length;i++){\n\t\t\tvar logItem = this.logLines[i];\n\t\t\tif(typeof logItem.type!=\'undefined\'){\n\t                switch(logItem.type){\n\t                    case \'warn\':\n\t                       str += \'[warn ]\';\n\t                      break;\n\t                    case \'info\':\n\t                       str += \'[info ]\';\n\t                      break;\n\t                    case \'error\':\n\t                       str += \'[error]\';\n\t                      break;\n\t                }\n\t            }\n\t\t   str+=logItem.textSpecialBuffer+\': \';\n           str+=logItem.buffer+\'\\r\\n\';\n        }\t\n\t\treturn str;\n\t},\n\n\tsaveConsoleToFile: function(){\n\t\ttry{\n\t\t\tair.Introspector.writeConsoleToFile(this.saveConsole());\n\t\t}catch(e){this.logError(e);}\n\t},\n\tsaveConsoleToClipboard: function(){\n\t\ttry{\n\t\t\tair.Introspector.writeConsoleToClipboard(this.saveConsole());\n\t\t}catch(e){this.logError(e);}\t\t\n\t},\t\t\/\/-------------------------------------------------------------------------------------------------------------------------------------------------------\n\n\t\t\/\/=======================================================================================================================================================\n\t\t\/\/DebugWindow.HTML.js\n\t\t\/\/=======================================================================================================================================================\n\t\tmakeHtmlDiv: function(){\n\t\tif(!this.isLoaded) return;\n       try{\n         var htmlLoader = this.getActiveHtmlLoader();\n         if(htmlLoader!=null){\n\t          \/*this.htmlDiv.innerHTML = \'\';\n\t          var domTreeDiv = this.createDomTreeNode(htmlLoader.window.document).createDiv(this.htmlLoader.window.document);\n\t          this.htmlDiv.appendChild(domTreeDiv);*\/\n\t          this.html2Div.innerHTML = \'\';\n\t\t\t\tif(this.html2Node){\n\t\t\t\t\tthis.html2Node.dispose();\n\t\t\t\t\tthis.html2Node = null;\n\t\t\t\t}\n\n\t          if(htmlLoader.window.document&&htmlLoader.window.document.firstChild){\n\t\t\t\t    var node = this.createDom2TreeNode(htmlLoader.window.document);\n\t                var domTreeDiv = node.createDiv(this.htmlLoader.window.document);\n\t\t\t\t\tthis.html2Node = node;\n\t          \t\tthis.html2Div.appendChild(domTreeDiv);\t\t\t\t\t\n\t          }\n\n         }\n       }catch(e){\n       \tair.Introspector.Console.log(e);\n       }\n   },\n\n\t\t\/\/-------------------------------------------------------------------------------------------------------------------------------------------------------\n\n\t\t\/\/=======================================================================================================================================================\n\t\t\/\/DebugWindow.XHR.js\n\t\t\/\/=======================================================================================================================================================\n\t\t\n    \n    logNet: function(xhr, method, url, asyncFlag){\n    \tvar requestLog = this.requestLog;\n    \tfor(var i=requestLog.length-1;i>=0;i--){\n            if(requestLog[i].xhr == xhr){\n                this.refreshRequestObject(requestLog[i]);\n                return;\t\n            } \t\t\n    \t}\n    \tvar request = {\n    \t\txhr: xhr, \n    \t\tmethod: method, \n    \t\turl: url,\n\t\t\tasync: asyncFlag,\n    \t\telement: null\n    \t};\n    \tif(this.isLoaded){\n    \t   this.viewRequestObject(request);\n    \t}\n    \trequestLog.push(request);\n\t\tthis.bounceTab(5);\n    },\n\n\tlogNetSend: function(xhr, obj){\n    \tvar requestLog = this.requestLog;\n    \tfor(var i=requestLog.length-1;i>=0;i--){\n            if(requestLog[i].xhr == xhr){\n\t\t\t\trequestLog[i].obj = obj;\n                this.refreshRequestObject(requestLog[i]);\n\t\t\t\treturn;\t\n            } \t\t\n    \t}\n    \tvar request = {\n    \t\txhr: xhr, \n\t\t\tobj: obj,\n    \t\tmethod: \'unknown\',\n    \t\turl: \'\', \n    \t\telement: null\n    \t};\n    \tif(this.isLoaded){\n    \t   this.viewRequestObject(request);\n    \t}\n    \trequestLog.push(request);\n\t\tthis.bounceTab(5);\n\t},\n    \n    refreshRequestObject: function(request){\n    \tvar self =this;\n    \tvar src = \'\';\n\t\tif(!request.node)\n\t\t\treturn;\n    \t\trequest.node.items = [];\n    \trequest.node.items.push( new air.Introspector.tree.node(\'readyState\' , { openable: false, nodeLabel2:request.xhr.readyState } ));\n    \ttry{\n    \t\trequest.node.items.push( new air.Introspector.tree.node(\'status\' , { openable: false, nodeLabel2:request.xhr.status } ));\n    \t}catch(e){\n    \t}\n\n    \ttry{\n\t\t\tif(typeof request.async==\'undefined\')\n\t\t\t\trequest.async = true;\n    \t\trequest.node.items.push( new air.Introspector.tree.node(\'async\' , { openable: false, nodeLabel2:request.async } ));\n    \t}catch(e){\n    \t}\n\n    \ttry{\n            request.node.items.push( new air.Introspector.tree.node(\'statusText\' , { openable: false, nodeLabel2:request.xhr.statusText } ));\n    \t}catch(e){}\n\n\t\t\ttry{\n\t\t\t\tif(typeof request.obj!=\'undefined\'&&request.obj!=null){\n\t\t\t\t\tif(this.isXMLObject(request.obj)){\n\t\t\t            request.node.items.push( new air.Introspector.tree.node(\'sent\' , { openable: true, \n\t\t\t                src: request.obj.firstChild,\n\t\t\t                onshow: function(){\n\t\t\t                    if(this.items.length==0){\n\t\t\t                        this.items = [self.createDom2TreeNode(this.src)];\n\t\t\t                    }\n\t\t\t            } } ));\n\t\t\t\t\t}else{\n\t\t\t    \t\trequest.node.items.push( new air.Introspector.tree.node(\'sent\' , { openable: true, \n\t\t\t    \t\t\tsrc: request.obj+\'\',\n\t\t\t    \t\t\tonshow: function(){\n\t\t\t\t    \t\t\tif(this.items.length==0){\n\t\t\t\t    \t\t\t\tthis.items = [new air.Introspector.tree.textNode(this.src)];\n\t\t\t\t    \t\t\t}\n\t\t\t    \t\t} } ));\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}catch(e){\n\t\t\t}\n\n    \ttry{\n    \t\trequest.node.items.push( new air.Introspector.tree.node(\'responseText\' , { openable: true, \n    \t\t\tsrc: request.xhr.responseText,\n    \t\t\tonshow: function(){\n\t    \t\t\tif(this.items.length==0){\n\t    \t\t\t\tthis.items = [new air.Introspector.tree.textNode(this.src)];\n\t    \t\t\t}\n    \t\t} } ));\n    \t}catch(e){\n    \t}\n    \t\n\t\n    \t\n    \ttry{\n\t\t\trequest.node.items.push( new air.Introspector.tree.node(\'responseXml\' , { openable: true, \n                src: request.xhr.responseXML,\n                onshow: function(){\n                    if(this.items.length==0){\n\t\t\t\t\t\tself.extendDom2TreeNode(this, this.src, true);\n\/\/                        this.items = [self.createDom2TreeNode(this.src)];\n                    }\n\t            },\n\t\t\t\tonhide: function(){\n\t\t\t\t\t\/\/this.items.length = 0;\n\t\t\t\t\tthis.clearItems();\n\t\t\t\t}\n \t\t\t} ));\n        }catch(e){\n        }\n    \t\n\t\ttry{\n\t\t\tvar headers = request.xhr.getAllResponseHeaders();\n\t\t\trequest.node.items.push( new air.Introspector.tree.node(\'responseHeaders\' , { openable: true, \n    \t\t\tsrc: headers,\n    \t\t\tonshow: function(){\n\t    \t\t\tif(this.items.length==0){\n\t    \t\t\t\tthis.items = [new air.Introspector.tree.textNode(headers)];\n\t    \t\t\t}\n    \t\t} } ));\n\t\t}catch(e){\n\t\n\t\t}\n\t\t\n\t\n\t\t\t\n    \tif(request.node.opened){\n    \t\trequest.node.refreshChildren();\n    \t}\n    \trequest.element.scrollIntoViewIfNeeded();\n    },\n    \n    viewRequestObject: function(request){\n    \ttry{\n    \t\tvar self = this;\n\t    \tvar requestElement = this.htmlLoader.window.document.createElement(\"div\");\n\t    \trequestElement.className = \"requestElement\";\n\t    \tvar node = new air.Introspector.tree.node (request.method.toUpperCase()+\' \'+request.url, {\n\t    \t\tonshow: function(){\n\t               if(this.items.length==0){\n\t               \t  self.refreshRequestObject(request);\n\t               }    \t\t     \n\t    \t    }, \n\t    \t\tonhide: function(){\n\t    \t\t\t\/\/this.items.length = 0;\n\t\t\t\t\tthis.clearItems();\n\t    \t\t}\n\t    \t});\n\t\/\/    \tnode.shouldOpen();\n\t    \trequest.node = node;\n\t    \trequest.element = requestElement;\n            this.netTabDiv.appendChild(requestElement);\t    \t\n\t    \trequestElement.appendChild(node.createDiv(this.htmlLoader.window.document));\n\n    \t}catch(e){\n    \t\tthis.logError(e);\n    \t}\n    },\n    \n    refreshNetConsole: function(){\n    \tvar requestLog = this.requestLog;\n        for(var i=0;i<requestLog.length;i++){\n            this.viewRequestObject(requestLog[i]);\n        }\n        \n    },\t\t\/\/-------------------------------------------------------------------------------------------------------------------------------------------------------\n\n\t\t\/\/=======================================================================================================================================================\n\t\t\/\/DebugWindow.XHR.js\n\t\t\/\/=======================================================================================================================================================\t\t\t\n\t\tmakeDomDiv: function(){\n    this.domDiv.innerHTML = \'\';\n\tif(this.domDivNode){\n\t\tthis.domDivNode.dispose();\n\t\tthis.domDivNode = null;\n\t}\n    try{\n        var htmlLoader = this.getActiveHtmlLoader();\n\t\t\n\t\tvar node = this.createJsTreeNode(\'window\', htmlLoader.window);\n        var treeDiv = node.createDiv(this.htmlLoader.window.document);\n\t\tthis.domDivNode = node;\n        this.domDiv.appendChild(treeDiv);\n    }catch(e){\n    }\n},\n\ndom3Event: function(ev){\n\tvar node = ev.srcElement;\n\tif(!node) return;\n\tif(node.nodeType!=Node.DOCUMENT_NODE&&node.nodeType!=Node.ELEMENT_NODE){\n\t\tnode = node.parentNode;\n\t\tif(!node) return;\n\t}\n\t\n\t\tvar i = this.findDomListElement(node);\n\t\tif(i!=-1&&this.domList[i].node2)\n\t\t{\n\t\t\tvar node2 = this.domList[i].node2;\n\t\t\tif(this.domList[i].node2.opened){\n\t\t\t\tnode2.clearItems();\n\t\t\t\tnode2.onshow(node2);\n\t\t\t}\n\t\t\tnode2.refresh();\n\t\t\tev.stopPropagation();\n\t\t\t\n\t\t\tthis.openVisibleDomTags();\n\t\t}\n\n\t\n},\n\nfindDomListElement: function(element){\n    var list = this.domList;\n    for(var i=list.length-1;i>=0;i--){\n        if(list[i].element==element)\n          return i;\n    }\n    return -1;\n},\n\nremoveDomListElement: function(element){\n    var index =  this.findDomListElement(element);\n    if(index==-1)\n       return;\n    this.domList.splice(index, 1);\n    \n    var child = element.firstChild;\n    while(child)\n    {\n       this.removeDomListElement(child);\n       child = child.nextSibling;\n    }    \n},\n\n\n extendDom2TreeNode: function(node, obj, readOnly){\n\tif(typeof readOnly==\'undefined\'){readOnly = false;}\n    try{\n        var self = this;\n        node.items.length = 0;\n        if(typeof obj==\'undefined\'||obj==null)\n           return;\n         var child = obj.firstChild;\n         while(child)\n         {\n\/\/             \tif(child.nodeType==Node.ELEMENT_NODE||child.nodeType==Node.TEXT_NODE){\n         \t\tif(child.nodeType==Node.TEXT_NODE){\n         \t\t\tvar value = air.Introspector.trim(child.nodeValue);\n         \t\t\tif(value.length==0)\n         \t\t\t{   \n         \t\t\t\tchild = child.nextSibling;\n         \t\t\t    continue;\n         \t\t\t}\n         \t\t}\n                node.items.push(this.createDom2TreeNode(child, readOnly)); \n\/\/             \t}else{\n\/\/\t\t\t\t\tair.Introspector.Console.log(child);\n\/\/\t\t\t\t}\n            child = child.nextSibling;\n         }\n    }catch(e){\n        this.logError(e);\n    }\n},\n\ncreateDom2TreeNode : function(child, readOnly){\n    var self = this;\n    \n    var config = {\n\t\t  readOnly: readOnly,\n          editable:false,\n          openable:false,\n            onshow: function(sender){\n                var domListIndex = self.findDomListElement(child);\n                if(domListIndex!=-1){\n                     self.domList[domListIndex].opened = true;\n                }\n                self.extendDom2TreeNode(sender, child, readOnly);\n            }, \n            onhide: function(sender){\n                self.removeDomListElement(child); \/\/also remove children\n                \/\/this.items.length = 0;\n\t\t\t\tthis.clearItems();\n            }\n        };\n    var node = new air.Introspector.tree.domNode(child, config);\n   \n    var domListIndex = this.findDomListElement(child);\n    if(domListIndex!=-1){\n        this.domList[domListIndex].node2 = node;\n        if(this.domList[domListIndex].opened)\n            node.shouldOpen();\n        if(this.domList[domListIndex].selected)\n            node.shouldSelect();\n    }else{\n        this.domList.push({\n            element:child, \n            node2: node,\n            node: null,\n            opened: false,\n            selected: false\n        });\n    }\n    \n    return node;\n},\n    \ncreateDomElementPath: function(element, first){\n\tvar ret = false;\n    if(typeof first==\'undefined\') first = false;\n    var domListIndex = this.findDomListElement(element);\n    if(domListIndex==-1){\n        this.domList.push({\n            element:element, \n\/\/                node: null, \n            node2 :null,\n            opened: true, \n            selected: first\n        });\n\t\tret=true;\n    }else if(!first){\n\t\tif(this.domList[domListIndex].node2){\n\t\t\tif(!this.domList[domListIndex].node2.opened && this.domList[domListIndex].node2.showElements)\n\t\t\t\tthis.domList[domListIndex].node2.showElements();\n\t\t}else{\n\t\t\tret = true;\n\t\t}\n        this.domList[domListIndex].opened = true;\n    }else{\n        this.domList[domListIndex].selected = true;\n\t\tif(this.domList[domListIndex].node2&&this.domList[domListIndex].node2.select){\n\t\t\tthis.domList[domListIndex].node2.select(false);\n\t\t}else{\n\t\t\tret = true;\n\t\t}\n    }\n    \n    var parentNode = element.parentNode;\n    if(parentNode){\n        ret|=this.createDomElementPath(parentNode);\n    }\n\treturn ret;\n},\n\nshowDomElementPath: function(element){\n    var list = this.domList;\n    for(var i=list.length-1;i>=0;i--){\n        list[i].selected = false;\n\t\tif(list[i].node2&&list[i].node2.unselect){\n\t\t\tlist[i].node2.unselect();\n\t\t}\n    }\n    var shouldRecreate = this.createDomElementPath(element, true);\n    \n    var htmlLoader = this.getActiveHtmlLoader();\n    if(htmlLoader!=null&&htmlLoader.window.document==element.ownerDocument){\n\t\tif(shouldRecreate){\n        \tthis.makeHtmlDiv(); \t\n\t\t}\n    }else{\n    \tthis.setActiveWindowByDocument(element.ownerDocument);\n    }\n    \n   \n\tthis.scrollSelectedDomItemIntoView();\n},\n\n\nputInList: function(element){\n\tvar domListIndex = this.findDomListElement(element);\n    if(domListIndex!=-1){\n\t\tthis.domList[domListIndex].opened = true;\n\t}\n},\n\n\tsetHoverDomElement: function(node){\n\t\tthis.hoverDomElement = node;\n\t},\n\t\n\tclearHoverDomElement: function(){\n\t\tthis.hoverDomElement = null;\n\t\tthis.hoverDomElementAttribute = null;\n\t},\n\n\tsetHoverDomElementAttribute: function(att){\n\t\tthis.hoverDomElementAttribute = att;\n\t},\n\t\n\texpandHoverDomElement: function(){\n\t\tif(this.menuHoverDomElement)\n\t\t\tthis.menuHoverDomElement.expandAll();\n\t},\n\t\n\tcollapseHoverDomElement: function(){\n\t\tif(this.menuHoverDomElement)\n\t\t\tthis.menuHoverDomElement.collapse();\n\t},\n\t\n\taddHoverDomElementAttribute: function(){\n\t\ttry{\n\t\tif(this.menuHoverDomElement){\n\t\t\tvar attributeName = prompt(\'Attribute name\');\n\t\t\tif(attributeName&&attributeName.length){\n\t\t\t\tif(!this.menuHoverDomElement.domNode.getAttribute(attributeName))\n\t\t\t\t\tthis.menuHoverDomElement.domNode.setAttribute(attributeName, \'\');\n\t\t\t\tthis.menuHoverDomElement.refreshAttributes();\n\t\t\t\tthis.menuHoverDomElement.toggleAttribute(attributeName);\n\t\t\t}\n\t\t}}catch(e){\n\t\t\talert(\"Invalid attribute name!\");\n\t\t}\n\t},\n\t\n\tremoveHoverDomElementAttribute: function(){\n\t\tif(this.menuHoverDomElement&&this.menuHoverDomElementAttribute){\n\t\t\t\tthis.menuHoverDomElement.domNode.removeAttribute(this.menuHoverDomElementAttribute.nodeName);\n\t\t\t\tthis.hoverDomElementAttribute = null;\n\t\t\t\tthis.menuHoverDomElement.refreshAttributes();\n\t\t}\n\t},\n\n\topenVisibleDomTags: function(){\n\/\/\t\tthis.scrollSelectedDomItemIntoView();\n\/\/\t\treturn;\n\t\tvar list = this.domList;\n\t\tvar clone = [];\n\t\t for(var i=list.length-1;i>=0;i--)\n\t\t\tclone.push(list[i].element);\n\t\t for(var i=clone.length-1;i>=0;i--){\n\t\t\tvar element = clone[i];\n\t\t\tvar parentNode = element.parentNode;\n\t\t\tif(parentNode){\n\t            this.putInList(parentNode);\n\t\t\t}\n\t\t}\n\t},\n\n    scrollSelectedDomItemIntoView: function(){\n\t\t var list = this.domList;\n\t\t for(var i=list.length-1;i>=0;i--){\n\t            if(list[i].selected){\n\t            \tif(list[i].node2){\n\t\t\t\t\t\tif(list[i].node2.nodeLabelDiv)\n\t\t\t\t\t\t\tlist[i].node2.nodeLabelDiv.scrollIntoViewIfNeeded();\n\t\t\t\t\t\telse if(list[i].node2.element)\n\t            \t\t\tlist[i].node2.element.scrollIntoViewIfNeeded();\n\t            \t\t\/\/air.Introspector.Console.log(list[i].node2);\n\t            \t\t\/\/air.Introspector.Console.log(this.html2Div);\n\t\t\t\t\t\tbreak;\n\t            \t}\n\t            }\n\t        }\n\t},\n\t\n\t\n\tsetInspect: function(value){\n        this.isInspecting = value;\n        if(this.inspectToolLabel){\n            if(value){\n                if((this.inspectToolLabel.className+\'\').indexOf(\'selected\')==-1){\n                  this.inspectToolLabel.className += \' selected\';\n                }\n            }else{\n                this.inspectToolLabel.className = this.inspectToolLabel.className.replace(\' selected\', \'\');\n            }\n        }\n\t\tif(value){\n\t\t\tthis.switchToHtmlTab();\n\t\t}\n\t\n\t\t\n\t\tif(isAppSandbox){\n\t        var ownedWindows = air.Introspector.getHtmlWindows();\n\t        for(var i=ownedWindows.length-1;i>=0;i--){\n\t            try{\n\t              ownedWindows[i].htmlLoader.window.air.Introspector.inspect=value;\n\t              ownedWindows[i].htmlLoader.window.air.Introspector.canClick=false;\n\t            }catch(e){\n\t            }\n\t        }\n\t\t}else{\n\t\t\ttry{\n\t\t\t\tthis.activeWindow.air.Introspector.inspect = value;\n\t\t\t\tthis.activeWindow.air.Introspector.canClick=false;\n\t\t\t}catch(e){}\n\t\t}\n    },\n    toggleInspect: function(){\n        this.isInspecting ^= true;\n        if(this.isInspecting){\n           this.startInspect();\n        }else{\n           this.finishInspect();\n        }\n    },\n    startInspect: function()\n    {\n        this.setInspect(true);\n        this.inspectElement = null;\n    },\n    \n    finishInspect: function(canceled){\n        this.setInspect(false);\n        if(typeof canceled==\'undefined\')\n           canceled = true;\n        if(!canceled&&typeof this.inspectElement!=\'undefined\'&&this.inspectElement){\n           this.showCssElement(this.inspectElement);\t\n           this.showDomElementPath(this.inspectElement);\n        }else{\n\t\t\tif(this.selectedElement){\n\t\t\t\tthis.showDomElementPath(this.selectedElement);\n           \t\tthis.showCssElement(this.selectedElement);\t\t\t\t\t\n\t\t\t}\n\t\t}\n        delete inspectElement;\n    }, \n    \n\tshowCssElement: function(element){\n\t\tif(!element || !element.ownerDocument || !element.ownerDocument.defaultView) return;\n\t\tif(this.selectedElement==element){ return };\n\t\tthis.selectedElement = element;\n\t\tvar self = this;\n\t\tif(this.showCssElementTimer){\n\t\t\tclearTimeout(this.showCssElementTimer);\n\t\t\tthis.showCssElementTimer = null;\n\t\t}\n\t\tthis.clearCssElement();\n\t\tthis.showCssElementTimer = setTimeout(function(){\n\t\t\tself.showCssElementTimer = null;\n\t\t\tself.showCssElementTimeout(element);\n\t\t}, 300);\n\t},\n\tclearCssElement:function(){\n\t\tif(!this.isLoaded) return;\n\t\tthis.css2DomTab.innerHTML = \'\';\n\t\tthis.css2StyleTab.innerHTML = \'\';\n\t\t\n\t\tif(this.cssElementJsNode){\n\t\t\tthis.cssElementJsNode.dispose();\n\t\t\tthis.cssElementJsNode = null;\n\t\t}\n\t},\n\tshowCssElementTimeout: function(element){\n\t\tif(!this.isLoaded) return;\t\t\n\t\tvar value = \'\';\n\/*\t\ttry{\n\t\t\tvalue = \'DOM (\' + element+\')\';\n\t\t}catch(e){}*\/\n\t\tvar jsNode = this.createJsTreeNode(value, element);\n\t\tjsNode.shouldOpen();\n        this.css2DomTab.appendChild(jsNode.createDiv(this.htmlLoader.window.document));\n\t\tthis.cssElementJsNode = jsNode;\n\n\t\tif(this.cssElementCssNode){\n\t\t\tthis.cssElementCssNode.dispose();\n\t\t\tthis.cssElementCssNode = null;\n\t\t}\n\n\t\tvar cssNode = this.createCssTreeNode(\'CSS\', element);\n\t\tcssNode.shouldOpen();\n        this.css2StyleTab.appendChild(cssNode.createDiv(this.htmlLoader.window.document));\n\t\tthis.cssElementCssNode =  cssNode;\t\n\t},\n\t\n\tcreateCssTreeNode: function (stringValue, element){\n\t\tvar self = this;\n\t\tvar config = {\n            editable:false,\n              onshow: function(sender){\n                  self.extendCssTreeNode(sender, element);\n              }, \n              onhide: function(sender){\n                  \/\/this.items.length = 0;\n\t\t\t\t\tthis.clearItems();\n              }\n          };\n\t\t return new air.Introspector.tree.node(stringValue,config);\n\t},\n\n\n\textendCssTreeNode: function(node, element){\n\t\ttry{\n\t\t\tvar self = this;\n\t\t\tif(!element.ownerDocument || !element.ownerDocument.defaultView) return;\n\t\t\tvar obj = element.ownerDocument.defaultView.getComputedStyle(element);\n\t\t\t\n\t\t\tif(obj){\n\t\t\t\tvar cssGroupNames = this.cssGroupNames;\n\t\t\t\tvar cssGroups = this.cssGroups;\t\t\t\t\n\t\t\t\t\n\t\t\t\tvar groupsCount=cssGroupNames.length;\n\n\t\t\t\tfor(var z=0;z<groupsCount;z++){\n\t\t\t\t\tvar groupNode = new air.Introspector.tree.node(cssGroupNames[z], \n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tgroup: cssGroups[z],\n\t\t\t\t\t\t\t\tonshow: function(){\n\t\t\t\t\t\t\t\t\tif(this.items.length==0){\n\t\t\t\t\t\t\t\t\t\tvar l = this.group.length;\n\t\t\t\t\t\t\t\t\t\tfor(var i=0;i<l;i++){\n\t\t\t\t\t\t\t\t\t\t\tvar name = this.group[i], value;\n\t\t\t\t\t\t\t                try{\n\t\t\t\t\t\t\t                    value = obj[name];\n\t\t\t\t\t\t\t                }catch(e){\n\t\t\t\t\t\t\t                    value = e;\n\t\t\t\t\t\t\t                }\n\t\t\t\t\t\t\t                this.items.push(self.createJsTreeNode(name, value));\n\t\t\t\t\t\t\t            }\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\tgroupNode.shouldOpen();\n\t\t\t\t\tnode.items.push(groupNode);\n\t\t\t\t}\n\t\t\t}\n\t\t}catch(e){\n\t\t\tthis.logError(e);\n\t\t}\n\t},\n\n\tswitchToHtmlTab: function () {\n\t\tthis.setTab(1);\n\t},\n\n    setInspectElement: function(element){\n        this.inspectElement = element;\n        this.showDomElementPath(this.inspectElement);\n    },\n    highlight: function(domNode){\n    \tvar htmlLoader = this.getActiveHtmlLoader();\n        if(htmlLoader!=null){\n        \ttry{\n        \t\tif(typeof domNode!=\'undefined\'){\n        \t       htmlLoader.window.air.Introspector.highlightElement(domNode);\n\t\t\t\t\n        \t\t}\n        \t    else\n        \t       htmlLoader.window.air.Introspector.hideHighlight();\n        \t}catch(e){\n        \t\t\/\/no air debug highlighter..\n        \t}\n        }\n    \t\n    },\n\n\t  setCssTab: function(tab){\n\t\t\tthis.activeCssTab = tab;\n\t        if(this.isLoaded){\n\t\t\t\tthis.activateCssTab();\n\t\t\t}\n\n\t    },\n\t\tactivateCssTab: function(){\n\t\/\/\t\tif(!this.isLoaded) return;\n\t\t\ttry{\n\t\t        this.clearCssTabs();\n\t\t\t\tvar tabName = this.cssTabs[this.activeCssTab];\n\n\t\t\t\tthis.htmlLoader.window.document.getElementById(tabName+\'Label\').className = \'selected\';\n\t\t        this.htmlLoader.window.document.getElementById(tabName+\'Tab\').className = \'selected\';\n\t\t\t}catch(e){}\n\t\t},\n\n\t \tclearCssTabs: function(){\n\t        var child = this.cssTabLabels.firstChild;\n\t        while(child!=null){\n\t            if(child.nodeType==1)  child.className = child.className.replace(\/selected\/, \'\');\n\t            child=child.nextSibling;\n\t        }\n\t        var child = this.cssTabPages.firstChild;\n\t        while(child!=null){\n\t            if(child.nodeType==1) child.className = child.className.replace(\/selected\/, \'\');\n\t            child=child.nextSibling;\n\t        }\n\t    },\t\t\/\/-------------------------------------------------------------------------------------------------------------------------------------------------------\n\n\t\t\/\/convert DebugUI.html\n\n\t\t};\n\t\t\t\t\n\t\tair.Introspector.version = \'0.15.88\';\n\t\n\n})();\n\n\t\n\n\/\/ ]]>\n<\/script>\n\t\t<xscript type=\"text\/javascript\" src=\"DebugUI.js\"><\/xscript>\n<\/head>\n\n<body onload=\'doLoad()\' onunload=\"doUnload()\" oncontextmenu=\'return debugWindow.showMenu(event);\'>\n\t<ul id=\"toolsLabels\">\n\t\tADOBE<span>©<\/span> AIR™ Introspector\n\t<\/ul>\n    <ul id=\"toolToggle\">\n<li onclick=\"debugWindow.setTool(\'inspect\')\" id=\'inspectToolLabel\'>Inspect<\/li><\/ul>\n\t<ul id=\"tabLabels\">\n   \t  <li onclick=\"debugWindow.setTab(0)\" id=\'consoleLabel\'>Console<\/li>    \t\n        <li onclick=\"debugWindow.setTab(1)\" id=\'html2Label\'>HTML<\/li>\n\t\t<li onclick=\"debugWindow.setTab(2)\" id=\'domLabel\'>DOM<\/li>\n        <li onclick=\"debugWindow.setTab(3)\" id=\'assetsLabel\'>Assets<\/li>\n        <li onclick=\"debugWindow.setTab(4)\" id=\'sourceLabel\'>Source<\/li>\n\t\t<li onclick=\"debugWindow.setTab(5)\" id=\'netLabel\'>XHR<\/li>\n\t<\/ul>\n    <div id=\"tabPages\">\n<div id=\"consoleTab\">\n        \t<ul id=\"console\"><\/ul>\n            <div id=\"evalConsole\"><span id=\"evalConsoleLabel\">>>><\/span><input type=\"text\" id=\"evalConsoleText\" value=\"\" onkeyup=\"if(event.keyCode==13){ debugWindow.evalUserInput();return true;} else if(event.keyCode==38){ debugWindow.historyUserInput(-1); return true;} else if(event.keyCode==40){ debugWindow.historyUserInput(1); return true;} else debugWindow.historyUserInput();\" \/><\/div>\n        <\/div>\n\n\t\t<div id=\"html2Tab\">\n          <div id=\"html2Div\">\n\t\t  <\/div>\n\t\t  <div id=\"html2Split\">\n\t\t  <\/div>\n\t\t  <div id=\"css2Div\">\n\t\t\t<ul id=\"css2TabLabels\">\n\t\t    \t<li onclick=\"debugWindow.setCssTab(0)\" id=\'css2DomLabel\'>DOM<\/li>    \t\n\t\t        <li onclick=\"debugWindow.setCssTab(1)\" id=\'css2StyleLabel\'>Computed style<\/li>\n\t\t    <\/ul>\n\t\t\t<div id=\"css2TabPages\">\n\t\t\t\t<div id=\'css2DomTab\'><\/div>    \t\n\t\t        <div id=\'css2StyleTab\'><\/div>\n\t\t\t<\/div>\n\t      <\/div>\n\t\t\t\n        <\/div>    \n    \t<div id=\"domTab\">\n        \t\n        <\/div>\n    \t<div id=\"assetsTab\">\n        \t\n        <\/div> \n        <div id=\"sourceTab\">\n        \t\n        <\/div>\n\t\t<div id=\"netTab\">\n            \n        <\/div>    \n<\/div>\n    \n<div id=\"windowSelector\">\n<input id=\'refreshActiveWindow\' type=\"button\" value=\"Refresh active window:\" onclick=\"debugWindow.refreshWindows()\" \/>\n\t <select id=\"windowList\" onchange=\"debugWindow.setActiveWindowById(parseFloat(this.options[this.options.selectedIndex].value))\"><\/select>\n       \n<\/div>\n\n\n\n<div id=\"menuDiv\">\n\t<div id=\"consoleMenuDiv\" class=\"menu\">\n\t\t<ul>\n\t\t\t<li><a href=\"javascript:void(0)\" onclick=\'debugWindow.clearConsole();debugWindow.hideMenu();\'>Clear console<\/a><\/li>\n\t\t\t<li><a href=\"javascript:void(0)\" onclick=\'debugWindow.saveConsoleToFile();debugWindow.hideMenu();\'>Save console to file...<\/a><\/li>\n\t\t\t<li><a href=\"javascript:void(0)\" onclick=\'debugWindow.saveConsoleToClipboard();debugWindow.hideMenu();\'>Save console to clipboard<\/a><\/li>\t\t\n\t\t<\/ul>\n\t<\/div>\n\t<div id=\"domMenuDiv\" class=\"menu\">\n\t\t<ul>\n\t\t\t\t<li><a href=\"javascript:void(0)\" onclick=\'debugWindow.expandHoverDomElement();debugWindow.hideMenu();\'>Expand all<\/a><\/li>\n\t\t\t\t<li><a href=\"javascript:void(0)\" onclick=\'debugWindow.collapseHoverDomElement();debugWindow.hideMenu();\'>Collapse<\/a><\/li>\n\t\t\t\t<li><a href=\"javascript:void(0)\" onclick=\'debugWindow.addHoverDomElementAttribute();debugWindow.hideMenu();\'>Add attribute<\/a><\/li>\n\t\t\t\t<li id=\"domRemoveAttributeMenuDiv\"><a href=\"javascript:void(0)\" onclick=\'debugWindow.removeHoverDomElementAttribute();debugWindow.hideMenu();\'>Remove attribute<\/a><\/li>\t\t\t\t\n\t\t<\/ul>\n\t<\/div>\n<\/div>\n\n\n<div id=\"searchTextBox\">\n\tSearch filter: <input type=\"text\" id=\'txtSearch\' value=\'\' onkeydown=\'debugWindow.searchKeyDown(event)\' onkeyup=\'debugWindow.doFilter(this.value);\' \/>\n\t\n<\/div>\n  \n<\/body>\n<\/html>\n';
air.Introspector.register();

</pre>
</body>
</html>


The source code

Imgorg.AlbumsPanel = Ext.extend(Ext.Panel,{
    initComponent: function() {
        Ext.apply(this, {
            layout: 'column',
            defaults: {
                border: false
            },
            autoScroll: true,
            defaultType: 'img-album',
            items: [{
                columnWidth: 0.33
            },{
                columnWidth: 0.33
            },{
                columnWidth: 0.34
            }]
        });
        Imgorg.AlbumsPanel.superclass.initComponent.call(this);
        this.loadAlbums();
        this.on('activate', this.loadAlbums, this);
    },

    afterRender: function() {
        Imgorg.AlbumsPanel.superclass.afterRender.call(this);
        this.body.on('click', this.onClick, this, {delegate: 'div.album-wrap'});
    },

    loadAlbums: function() {
        Imgorg.ss.Albums.getAllInfo({}, this.setupAlbums, this);
    },

    setupAlbums: function(data, resp) {
        var cols = [[],[],[]];
        var idx = 0;
        for (var i = 0;i < data.length;i++) {
            var a = data[i];
            cols[idx].push(a);
            if (++idx >= 3) {
                idx = 0;
            }
        }
        for (var i = 0; i < 3; i++) {
            this.items.get(i).generateAlbums(cols[i]);
        }
    },

    onClick: function(e, n) {
        var album = n.attributes.album_id.value;
        var album_name = n.attributes.album_name.value;
        this.fireEvent('openalbum', this, album, album_name);
    }
});
Ext.reg('img-albumspanel', Imgorg.AlbumsPanel);

Imgorg.Album = Ext.extend(Ext.Panel,{
    maxWidth: 150,
    maxHeight: 100,
    tpl: new Ext.XTemplate(
        '',
            '
',
                '
',
                    '{filename:this.imageFormat}',
                    '
Album: {text}
',
                    '
',
                        '
Date: {date}
',
                        '
Size: {size} images
',
                    '
',
                '
',
            '
',
        '',{
            imageFormat: function(filename, data) {
                if (filename) {
                    return String.format('  ',filename, data.height, data.width);
                } else {
                    return '
No Images in Album
';
                }
            }
        }
    ),
    generateAlbums: function(albums) {
        for(var i = 0; i < albums.length;i++) {
            if (albums[i].exif) {
                albums[i].height = Math.min(this.maxHeight, albums[i].exif.COMPUTED.Height);
                albums[i].width = Math.min(this.maxWidth, albums[i].exif.COMPUTED.Width);
            }
        }
        this.tpl.overwrite(this.body, albums);
    }
});
Ext.reg('img-album', Imgorg.Album);


The source code

Imgorg.AlbumTree = Ext.extend(Ext.tree.TreePanel,{
    initComponent: function() {
        Ext.apply(this,{
            loader: new Ext.ux.tree.DirectTreeLoader({
                api: Imgorg.ss.Albums
            }),
            root: new Ext.tree.TreeNode({
                text:'dummynode',
                expanded: true,
                leaf: false,
                cls:'album-node'
            }),
            rootVisible: false,
            clearOnLoad: false,
            autoScroll: true,
            containerScroll: true,
            enableDrop: true,
            dropConfig: {
                ddGroup: 'organizerDD',
                notifyDrop: this.onNotifyDrop.createDelegate(this)
            }
        });
        Imgorg.AlbumTree.superclass.initComponent.call(this);
        this.loader.load(this.root);

        this.editor = new Ext.tree.TreeEditor(this, {
            allowBlank: false,
            blankText: 'A name is required',
            selectOnFocus: true
        });
        this.editor.on('complete', this.onEditComplete, this);
        this.on('contextmenu', this.onContextMenu, this);
    },

    onContextMenu: function(node, e) {
        e.stopEvent();
        if(!this.contMenu) {
            this.contMenu = new Ext.menu.Menu({
                items: [{
                    text: 'Remove',
                    handler: function() {
                        var node = this.currentNode;
                        node.unselect();
                        Ext.fly(node.ui.elNode).ghost('l', {
                            callback: function() {
                                Imgorg.ss.Albums.remove({
                                    album: node.id
                                });
                                node.remove();
                            }, scope: node, duration: 0.4
                        });
                    },
                    scope: this
                }]
            });
        }
        this.currentNode = node;
        this.contMenu.showAt(e.getXY());
    },

    onNotifyDrop: function(src, e, data) {
        var nodes = data.nodes;
        var nodeIds = [];
        for (var i = 0;i < nodes.length;i++) {
            nodeIds.push(nodes[i].id);
        }
        this.addToAlbum(nodeIds, this.dropZone.dragOverData.target.attributes.id);
        return true; // cancell repair anim
    },

    addToAlbum: function(nodes, album) {
        Imgorg.ss.Images.addToAlbum({
            images: nodes,
            album: album
        });
    },

    addAlbum: function() {
        var root = this.root;
        var node = root.appendChild(new Ext.tree.TreeNode({
            text:'Album',
            cls:'album-node',
            allowDrag:false
        }));
        this.getSelectionModel().select(node);
        var ge = this.editor;
        setTimeout(function(){
            ge.editNode = node;
            ge.startEdit(node.ui.textNode);
        }, 10);
    },

    onEditComplete: function(editor, newVal, oldVal) {
        var n = editor.editNode;
        Imgorg.ss.Albums.addOrUpdate({node: n.id, text: newVal, id: n.attributes.id});
    }
});
Ext.reg('img-albumtree', Imgorg.AlbumTree);

Ext.ns('Ext.ux.tree');
Ext.ux.tree.DirectTreeLoader = Ext.extend(Ext.tree.TreeLoader,{
    baseAttrs: {
        cls:'album-node'
    },

    load : function(node, callback){
        this.requestData(node, callback);
    },

    requestData : function(node, callback){
        if(this.fireEvent("beforeload", this, node, callback) !== false){
            this.api.loadtree({
                node: node.id
            }, this.processResponse.createDelegate(this, [node, callback], true));
        }else{
            // if the load is cancelled, make sure we notify
            // the node that we are done
            if(typeof callback == "function"){
                callback();
            }
        }
    },

    processResponse : function(res, trans, node, callback){
        try {
            node.beginUpdate();
            for(var i = 0, len = res.length; i < len; i++){
                var n = this.createNode(res[i]);
                if(n){
                    node.appendChild(n);
                }
            }
            node.endUpdate();
            if(typeof callback == "function"){
                callback(this, node);
            }
        }catch(e){
            this.handleFailure(res);
        }
    }
});


The source code

Imgorg.AlbumWin = Ext.extend(Ext.Window, {
    title: 'Choose Album',
    layout: 'fit',
    closeAction: 'hide',
    width: 300,
    modal: true,

    initComponent: function() {
        Ext.apply(this, {
            items: [{
                autoHeight: true,
                xtype: 'form',
                id: 'album-select',
                bodyStyle: 'padding:15px',
                labelWidth: 50,
                items: [{
                    anchor: '95%',
                    fieldLabel: 'Album',
                    xtype: 'img-albumcombo',
                    name: 'album',
                    allowBlank: false
                }]
            }],
            buttons: [{
                text: 'Add to Album',
                handler: this.addToAlbum,
                scope: this
            },{
                text: 'Cancel',
                handler: function() {
                    this.hide();
                },
                scope: this
            }]
        });
        Imgorg.AlbumWin.superclass.initComponent.call(this);
    },

    addToAlbum: function() {
        var af = this.getComponent('album-select').getForm();
        if (af.isValid()) {
            if (this.selectedRecords) {
                var imageIds = [];
                for (var i = 0; i < this.selectedRecords.length; i++) {
                    var r = this.selectedRecords[i];
                    imageIds.push(r.data.dbid || r.data.id);
                }
                var fld = af.findField('album');
                var album = fld.getValue();

                Imgorg.ss.Images.addToAlbum({
                    images: imageIds,
                    album: album
                });
            }
            this.hide();
        }
    }
});


The source code

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        labelWidth: 55,
        url:'save-form.php',
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'Send To',
            name: 'to',
            anchor:'100%'  // anchor width by percentage
        },{
            fieldLabel: 'Subject',
            name: 'subject',
            anchor: '100%'  // anchor width by percentage
        }, {
            xtype: 'textarea',
            hideLabel: true,
            name: 'msg',
            anchor: '100% -53'  // anchor width by percentage and height by raw adjustment
        }]
    });

    var window = new Ext.Window({
        title: 'Resize Me',
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: form,

        buttons: [{
            text: 'Send'
        },{
            text: 'Cancel'
        }]
    });

    window.show();
});


The source code

/**
 * @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,

    // private
    getAnchorViewSize : function(ct, target){
        return target.dom == document.body ?
                   target.getViewSize() : target.getStyleSize();
    },

    // private
    onLayout : function(ct, target){
        Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);

        var size = this.getAnchorViewSize(ct, target);

        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 = ct.items.items, len = cs.length, i, c, a, cw, ch;
        for(i = 0; i < len; i++){
            c = cs[i];
            if(c.anchor){
                a = c.anchorSpec;
                if(!a){ // cache all anchor values
                    var 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), c) : undefined;
                ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;

                if(cw || ch){
                    c.setSize(cw || undefined, ch || undefined);
                }
            }
        }
    },

    // private
    parseAnchor : function(a, start, cstart){
        if(a && a != 'none'){
            var last;
            if(/^(r|right|b|bottom)$/i.test(a)){   // standard anchor
                var diff = cstart - start;
                return function(v){
                    if(v !== last){
                        last = v;
                        return v - diff;
                    }
                }
            }else if(a.indexOf('%') != -1){
                var ratio = parseFloat(a.replace('%', ''))*.01;   // percentage
                return function(v){
                    if(v !== last){
                        last = v;
                        return Math.floor(v*ratio);
                    }
                }
            }else{
                a = parseInt(a, 10);
                if(!isNaN(a)){                            // simple offset adjustment
                    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

/**
 * @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
         * @param {String[]}(Optional) List of available CRUD actions.  Pass in list when executing multiple times for efficiency.
         * @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]
                    };
                }
            }
        },

/**
         * 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 = 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 = {};
                switch (response.status) {
                    case 200:   // standard 200 response, send control back to HttpProxy#onWrite
                        return true;
                        break;
                    case 201:   // entity created but no response returned
                        res[reader.meta.successProperty] = true;
                        break;
                    case 204:  // no-content.  Create a fake response.
                        res[reader.meta.successProperty] = true;
                        res[reader.meta.root] = null;
                        break;
                    default:
                        return true;
                        break;
                }
                if (res[reader.meta.successProperty] === true) {
                    this.fireEvent("write", this, action, res[reader.meta.root], res, rs, o.request.arg);
                } else {
                    this.fireEvent('exception', this, 'remote', action, o, res, rs);
                }
                o.request.callback.call(o.request.scope, res[reader.meta.root], res, res[reader.meta.successProperty]);

                return false;   // <-- false to prevent intercepted function from running.
            }, proxy);
        }
    };
})();

/**
 * @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

Ext.app.App = function(cfg){
    Ext.apply(this, cfg);
    this.addEvents({
        'ready' : true,
        'beforeunload' : true
    });

    Ext.onReady(this.initApp, this);
};

Ext.extend(Ext.app.App, Ext.util.Observable, {
    isReady: false,
    startMenu: null,
    modules: null,

    getStartConfig : function(){

    },

    initApp : function(){
        this.startConfig = this.startConfig || this.getStartConfig();

        this.desktop = new Ext.Desktop(this);

        this.launcher = this.desktop.taskbar.startMenu;

        this.modules = this.getModules();
        if(this.modules){
            this.initModules(this.modules);
        }

        this.init();

        Ext.EventManager.on(window, 'beforeunload', this.onUnload, this);
        this.fireEvent('ready', this);
        this.isReady = true;
    },

    getModules : Ext.emptyFn,
    init : Ext.emptyFn,

    initModules : function(ms){
        for(var i = 0, len = ms.length; i < len; i++){
            var m = ms[i];
            this.launcher.add(m.launcher);
            m.app = this;
        }
    },

    getModule : function(name){
        var ms = this.modules;
        for(var i = 0, len = ms.length; i < len; i++){
            if(ms[i].id == name || ms[i].appType == name){
                return ms[i];
            }
        }
        return '';
    },

    onReady : function(fn, scope){
        if(!this.isReady){
            this.on('ready', fn, scope);
        }else{
            fn.call(scope, this);
        }
    },

    getDesktop : function(){
        return this.desktop;
    },

    onUnload : function(e){
        if(this.fireEvent('beforeunload', this) === false){
            e.stopEvent();
        }
    }
});


The source code

/*
 * Sample Image Organizer utilizing Ext.Direct
 * Tagging/Organizing into galleries
 * Image uploading
 */

Ext.ns('Imgorg','Imgorg.App');
Imgorg.App = function() {
    var swfu;
    SWFUpload.onload = function() {
        var settings = {
            flash_url: "SWFUpload/Flash/swfupload.swf",
            upload_url: "php/router.php",
            file_size_limit: "100 MB",
            file_types: "*.*",
            file_types_description: "Image Files",
            file_upload_limit: 100,
            file_queue_limit: 100,
            debug: false,
            button_placeholder_id: "btnUploadHolder",
            button_cursor: SWFUpload.CURSOR.HAND,
            button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
            file_queued_handler: function(file) {
                Ext.ux.SwfuMgr.fireEvent('filequeued', this, file);
            },
            upload_start_handler: function(file) {
                Ext.ux.SwfuMgr.fireEvent('uploadstart', this, file);
            },
            upload_progress_handler: function(file, complete, total) {
                Ext.ux.SwfuMgr.fireEvent('uploadprogress', this, file, complete, total);
            },
            upload_error_handler: function(file, error, message) {
                Ext.ux.SwfuMgr.fireEvent('uploaderror', this, file, error, message);
            },
            upload_success_handler: function(file, data, response) {
                Ext.ux.SwfuMgr.fireEvent('uploadsuccess', this, file, data);
            },
            minimum_flash_version: "9.0.28",
            post_params: {
                extAction: 'Images', // The class to use
                extUpload: true,
                extMethod: 'upload'  // The method to execute
                //needs extTID – Transaction ID to associate with this request.
            }
        };
        swfu = new SWFUpload(settings);
    };
    var view, thumbPanel, uploadPanel, tabPanel;
    return {
        debugSWF: false,

        init: function() {
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            Ext.QuickTips.init();
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
            Ext.Direct.addProvider(Imgorg.REMOTING_API);

            Ext.ux.SwfuMgr.on('filequeued', this.onFileQueued, this);

            new Ext.Viewport({
                layout: 'border',
                items: [{
                    xtype: 'img-albumtree',
                    id: 'album-tree',
                    region: 'west',
                    width: 180,
                    minWidth: 180,
                    maxWidth: 180,
                    collapsible: true,
                    split: true,
                    collapseMode: 'mini',
                    margins: '5 0 5 5',
                    cmargins: '0 0 0 0',
                    tbar: [{
                        text: 'Add Album',
                        iconCls: 'add',
                        scale: 'large',
                        handler: function() {
                            Ext.getCmp('album-tree').addAlbum();
                        }
                    },{
                        text: 'Upload',
                        iconCls: 'upload',
                        scale: 'large',
                        handler: function() {
                            swfu.selectFiles();
                        }
                    }],
                    listeners: {
                        click: this.onAlbumClick,
                        scope: this
                    }
                },{
                    xtype: 'tabpanel',
                    region: 'center',
                    id: 'img-tabpanel',
                    margins: '5 5 5 0',
                    activeItem: 0,
                    enableTabScroll: true,
                    items: this.getTabs()
                }]
            });

            tabPanel = Ext.getCmp('img-tabpanel');
            thumbPanel = tabPanel.getComponent('images-view');
            Imgorg.TagWin = new Imgorg.TagWindow();
        },

        getTabs: function() {
            var tabs = [{
                xtype: 'img-albumspanel',
                title: 'Albums',
                listeners: {
                    openalbum: this.onOpenAlbum,
                    scope: this
                }
            },Ext.apply({
                xtype: 'img-thumbpanel',
                itemId:'images-view'
            },this.getImageThumbConfig())];

            if (this.debugSWF) {
                tabs.push({
                    title: 'debug',
                    contentEl: 'SWFUpload_Console',
                    listeners: {
                        render: function() {
                            Ext.fly('SWFUpload_Console').applyStyles({height: '100%', width: '100%'});
                        }
                    }
                });
            }
            return tabs;
        },

        getImageThumbConfig: function() {
            return {
                dvConfig: {
                    listeners: {
                        dblclick: function(view, idx, node, e) {
                            var p = this.openImage(view.getStore().getAt(idx));
                            p.show();
                        },
                        viewitem: function(view, node) {
                            var recs = view.getSelectedRecords();
                            for (var i = 0; i < recs.length; i++) {
                                this.openImage(recs[i]);
                            }
                        },
                        scope: this
                    }
                }
            };
        },

        openImage: function(rec) {
            return tabPanel.add({
                xtype: 'img-panel',
                title: Ext.util.Format.ellipsis(rec.data.filename,15),
                url: rec.data.url,
                imageData: rec.data
            });
        },

        onOpenAlbum: function(ap, album, name) {
            var tab = tabPanel.add(Ext.apply({
                xtype: 'img-thumbpanel',
                closable: true,
                title: 'Album: '+name
            },this.getImageThumbConfig()));
            tab.albumFilter({
                id: album,
                text: name
            });
            tab.show();
        },

        onAlbumClick: function(node, e) {
            this.onOpenAlbum(null, node.attributes.id, node.attributes.text);
        },

        onFileQueued: function(swfu, file) {
            if (!uploadPanel) {
                uploadPanel = Ext.getCmp('img-tabpanel').add({
                    title: 'Upload Queue',
                    xtype: 'img-uploadqueue',
                    swfu: swfu
                });
                uploadPanel.show();
                uploadPanel.addFile(swfu, file);
            } else {
                uploadPanel.show();
            }
        },

        getSwf: function() {
            return swfu;
        }
    }
}();

Ext.onReady(Imgorg.App.init,Imgorg.App);

Ext.override(Ext.CompositeElementLite,{
    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)
                    el.dom ? el.remove() : Ext.removeNode(el);
                els.splice(val, 1);
            }
        });
        return this;
    }
});


The source code

/**
 * Ext.App
 * @extends Ext.util.Observable
 * @author Chris Scott
 */
Ext.App = function(config) {

    // set up StateProvider
    this.initStateProvider();

    // array of views
    this.views = [];

    Ext.apply(this, config);
    if (!this.api.actions) { this.api.actions = {}; }

    // init when onReady fires.
    Ext.onReady(this.onReady, this);

    Ext.App.superclass.constructor.apply(this, arguments);
}
Ext.extend(Ext.App, Ext.util.Observable, {

/***
     * response status codes.
     */
    STATUS_EXCEPTION :          'exception',
    STATUS_VALIDATION_ERROR :   "validation",
    STATUS_ERROR:               "error",
    STATUS_NOTICE:              "notice",
    STATUS_OK:                  "ok",
    STATUS_HELP:                "help",

/**
     * @cfg {Object} api
     * remoting api.  should be defined in your own config js.
     */
    api: {
        url: null,
        type: null,
        actions: {}
    },

    // private, ref to message-box Element.
    msgCt : null,

    // @protected, onReady, executes when Ext.onReady fires.
    onReady : function() {
        // create the msgBox container.  used for App.setAlert
        this.msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
        this.msgCt.setStyle('position', 'absolute');
        this.msgCt.setStyle('z-index', 9999);
        this.msgCt.setWidth(300);
    },

    initStateProvider : function() {
        /*
         * set days to be however long you think cookies should last
         */
        var days = '';        // expires when browser closes
        if(days){
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var exptime = "; expires="+date.toGMTString();
        } else {
            var exptime = null;
        }

        // register provider with state manager.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
            path: '/',
            expires: exptime,
            domain: null,
            secure: false
        }));
    },

/**
     * registerView
     * register an application view component.
     * @param {Object} view
     */
    registerView : function(view) {
        this.views.push(view);
    },

/**
     * getViews
     * return list of registered views
     */
    getViews : function() {
        return this.views;
    },

/**
     * registerActions
     * registers new actions for API
     * @param {Object} actions
     */
    registerActions : function(actions) {
        Ext.apply(this.api.actions, actions);
    },

/**
     * getAPI
     * return Ext Remoting api
     */
    getAPI : function() {
        return this.api;
    },

/***
     * setAlert
     * show the message box.  Aliased to addMessage
     * @param {String} msg
     * @param {Bool} status
     */
    setAlert : function(status, msg) {
        this.addMessage(status, msg);
    },

/***
     * adds a message to queue.
     * @param {String} msg
     * @param {Bool} status
     */
    addMessage : function(status, msg) {
        var delay = 3;    // <-- default delay of msg box is 1 second.
        if (status == false) {
            delay = 5;    // <-- when status is error, msg box delay is 3 seconds.
        }
        // add some smarts to msg's duration (div by 13.3 between 3 & 9 seconds)
        delay = msg.length / 13.3;
        if (delay < 3) {
            delay = 3;
        }
        else if (delay > 9) {
            delay = 9;
        }

        this.msgCt.alignTo(document, 't-t');
        Ext.DomHelper.append(this.msgCt, {html:this.buildMessageBox(status, String.format.apply(String, Array.prototype.slice.call(arguments, 1)))}, true).slideIn('t').pause(delay).ghost("t", {remove:true});
    },

/***
     * buildMessageBox
     */
    buildMessageBox : function(title, msg) {
        switch (title) {
            case true:
                title = this.STATUS_OK;
                break;
            case false:
                title = this.STATUS_ERROR;
                break;
        }
        return [
            '
',
            '
',
            '
', title, '
', msg, '
',
            '
',
            '
'
        ].join('');
    },

/**
     * decodeStatusIcon
     * @param {Object} status
     */
    decodeStatusIcon : function(status) {
        iconCls = '';
        switch (status) {
            case true:
            case this.STATUS_OK:
                iconCls = this.ICON_OK;
                break;
            case this.STATUS_NOTICE:
                iconCls = this.ICON_NOTICE;
                break;
            case false:
            case this.STATUS_ERROR:
                iconCls = this.ICON_ERROR;
                break;
            case this.STATUS_HELP:
                iconCls = this.ICON_HELP;
                break;
        }
        return iconCls;
    },

/***
     * setViewState, alias for Ext.state.Manager.set
     * @param {Object} key
     * @param {Object} value
     */
    setViewState : function(key, value) {
        Ext.state.Manager.set(key, value);
    },

/***
     * getViewState, aliaz for Ext.state.Manager.get
     * @param {Object} cmd
     */
    getViewState : function(key) {
        return Ext.state.Manager.get(key);
    },

/**
     * t
     * translation function.  needs to be implemented.  simply echos supplied word back currently.
     * @param {String} to translate
     * @return {String} translated.
     */
    t : function(words) {
        return words;
    },

    handleResponse : function(res) {
        if (res.type == this.STATUS_EXCEPTION) {
            return this.handleException(res);
        }
        if (res.message.length > 0) {
            this.setAlert(res.status, res.message);
        }
    },

    handleException : function(res) {
        Ext.MessageBox.alert(res.type.toUpperCase(), res.message);
    }
});


The source code

var TreeTest = function(){
    // shorthand
    var Tree = Ext.tree;

    return {
        init : function(){
            // yui-ext tree
            var tree = new Tree.TreePanel({
                animate:true,
                autoScroll:true,
                loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
                containerScroll: true,
                border: false,
                height: 300,
                width: 300
            });

            // add a tree sorter in folder mode
            new Tree.TreeSorter(tree, {folderSort:true});

            // set the root node
            var root = new Tree.AsyncTreeNode({
                text: 'Ext JS',
                draggable:false, // disable root node dragging
                id:'src'
            });
            tree.setRootNode(root);

            // render the tree
            tree.render('tree');
            root.expand(false, /*no anim*/ false);
            tree.bodyFocus.fi.setFrameEl(tree.el);
            tree.getSelectionModel().select(tree.getRootNode());
            tree.enter.defer(100, tree);
        }
    };
}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);


The source code

(function() {

Ext.a11y.ARIA = Ext.apply(new Ext.util.Observable(), function() {
    return {
        setRole : function(el, role) {
            el = Ext.getDom(el);
            if(el) {
                el.setAttribute('role', role.toString());
            }
        },

        setProperty : function(el, key, value) {
            el = Ext.getDom(el);
            if(el) {
                el.setAttribute(key.toString(), value.toString());
            }
        }
    }
}());

var ARIA = Ext.a11y.ARIA;

Ext.override(Ext.tree.TreeNode, {
    render : function(bulkRender){
        this.ui.render(bulkRender);
        if(!this.rendered){
            // make sure it is registered
            this.getOwnerTree().registerNode(this);
            this.rendered = true;
            this.fireEvent('noderender', this);
            if(this.expanded){
                this.expanded = false;
                this.expand(false, false);
            }
        }
    }
});

Ext.override(Ext.tree.TreePanel, {
    initARIA : function() {
        Ext.tree.TreePanel.superclass.initARIA.call(this);
        this.getSelectionModel().on('selectionchange', this.onNodeSelect, this);
        this.ariaTreeEl = this.body.down('.x-tree-root-ct');
        this.on('collapsenode', this.onNodeCollapse, this);
        this.on('expandnode', this.onNodeExpand, this);
    },

    // private
    registerNode : function(node){
        if(this.nodeHash[node.id] === undefined) {
            node.on('noderender', this.onNodeRender, this);
        }
        this.nodeHash[node.id] = node;
    },

    // private
    unregisterNode : function(node){
        node.un('noderender', this.onNodeRender, this);
        delete this.nodeHash[node.id];
    },

    onNodeRender : function(node) {
        var a = node.ui.anchor,
            level = this.rootVisible ? 1 : 0,
            pnode = node;

        if(node.isRoot) {
            ARIA.setRole(this.ariaTreeEl, 'tree');
            ARIA.setProperty(this.ariaTreeEl, 'aria-labelledby', Ext.id(node.ui.textNode));
            ARIA.setProperty(this.ariaTreeEl, 'aria-activedescendant', 'false');
            if(!this.rootVisible) {
                return;
            }
        }
        ARIA.setRole(node.ui.wrap, 'treeitem');
        ARIA.setProperty(node.ui.wrap, 'aria-labelledby', Ext.id(node.ui.textNode));
        ARIA.setProperty(node.ui.wrap, 'aria-expanded', 'false');
        ARIA.setProperty(node.ui.wrap, 'aria-selected', 'false');
        while (pnode.parentNode) {
            level++;
            pnode = pnode.parentNode;
        }
        ARIA.setProperty(node.ui.wrap, 'aria-level', level);
        if(!node.isLeaf()) {
            ARIA.setRole(node.ui.ctNode, 'group');
            ARIA.setProperty(node.ui.wrap, 'aria-expanded', node.isExpanded());
        }
    },

    onNodeSelect : function(sm, node) {
        ARIA.setProperty(this.ariaTreeEl, 'aria-activedescendant', Ext.id(node.ui.wrap));
        ARIA.setProperty(node.ui.wrap, 'aria-selected', 'true');
    },

    onNodeCollapse : function(node) {
        ARIA.setProperty(node.ui.wrap, 'aria-expanded', 'false');
    },

    onNodeExpand : function(node) {
        ARIA.setProperty(node.ui.wrap, 'aria-expanded', 'true');
    }
});

})();


The source code

Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    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'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '' + val + '';
        }else if(val < 0){
            return '' + val + '';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '' + val + '%';
        }else if(val < 0){
            return '' + val + '%';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.ArrayStore({
        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.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Array Grid'
    });
    grid.render('grid-example');
});


The source code

/**
 * @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 = [],
            v;

        if(!this.getRoot) {
            this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p) {return p;};
            if(s.totalProperty) {
                this.getTotal = this.getJsonAccessor(s.totalProperty);
            }
        }

        var root = this.getRoot(o);

        for(var i = 0; i < root.length; i++) {
            var n = root[i];
            var values = {};
            var 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];
                var 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;
            }
        }

        return {
            records : records,
            totalRecords : totalRecords
        };
    }
});


The source code

/**
 * @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

/**
 * @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 in which to execute the callback.
     */
    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

/**
 * @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 = function(config){
    Ext.menu.BaseItem.superclass.constructor.call(this, config);

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

Ext.extend(Ext.menu.BaseItem, 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 100)
     */
    clickHideDelay : 1,

    // private
    ctype : "Ext.menu.BaseItem",

    // private
    actionMode : "container",

    // 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, 'click', this.onClick, this);
            this.mon(this.el, 'mouseenter', this.activate, this);
            this.mon(this.el, 'mouseleave', this.deactivate, this);
        }
    },

/**
     * 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 that should be passed to the handler
     */
    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){
        if(this.hideOnClick){
            this.parentMenu.hide.defer(this.clickHideDelay, this.parentMenu, [true]);
        }
    },

    // private. Do nothing
    expandMenu : Ext.emptyFn,

    // private. Do nothing
    hideMenu : Ext.emptyFn
});
Ext.reg('menubaseitem', Ext.menu.BaseItem);


The source code

//
// Note that these are all defined as panel configs, rather than instantiated
// as panel objects.  You could just as easily do this instead:
//
// var absolute = new Ext.Panel({ ... });
//
// However, by passing configs into the main container instead of objects, we can defer
// layout AND object instantiation until absolutely needed.  Since most of these panels
// won't be shown by default until requested, this will save us some processing
// time up front when initially rendering the page.
//
// Since all of these configs are being added into a layout container, they are
// automatically assumed to be panel configs, and so the xtype of 'panel' is
// implicit.  To define a config of some other type of component to be added into
// the layout, simply provide the appropriate xtype config explicitly.
//
/*
 * ================  Start page config  =======================
 */
// The default start page, also a simple example of a FitLayout.
var start = {
    id: 'start-panel',
    title: 'Start Page',
    layout: 'fit',
    bodyStyle: 'padding:25px',
    contentEl: 'start-div'  // pull existing content from the page
};

/*
 * ================  AbsoluteLayout config  =======================
 */
var absolute = {
    id: 'absolute-panel',
    title: 'Absolute Layout',
    layout: 'absolute',
    defaults: {
        bodyStyle: 'padding:15px;',
        width: 200,
        height: 100,
        frame: true
    },
    items:[{
        title: 'Panel 1',
        x: 50,
        y: 50,
        html: 'Positioned at x:50, y:50'
    },{
        title: 'Panel 2',
        x: 125,
        y: 125,
        html: 'Positioned at x:125, y:125'
    }]
};

/*
 * ================  AccordionLayout config  =======================
 */
var accordion = {
    id: 'accordion-panel',
    title: 'Accordion Layout',
    layout: 'accordion',
    bodyBorder: false,  // useful for accordion containers since the inner panels have borders already
    bodyStyle: 'background-color:#DFE8F6',  // if all accordion panels are collapsed, this looks better in this layout
    defaults: {bodyStyle: 'padding:15px'},
    items: [{
        title: 'Introduction',
        tools: [{id:'gear'},{id:'refresh'}],
        html: '
Here is some accordion content.  Click on one of the other bars below for more.
'
    },{
        title: 'Basic Content',
        html: '
More content.  Open the third panel for a customized look and feel example.
',
        items: {
            xtype: 'button',
            text: 'Show Next Panel',
            handler: function(){
                Ext.getCmp('acc-custom').expand(true);
            }
        }
    },{
        id: 'acc-custom',
        title: 'Custom Panel Look and Feel',
        cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
        html: '
Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.
'
    }]
};

/*
 * ================  AnchorLayout config  =======================
 */
var anchor = {
    id:'anchor-panel',
    title: 'Anchor Layout',
    layout:'anchor',
    defaults: {bodyStyle: 'padding:15px'},
    items: [{
        title: 'Panel 1',
        height: 100,
        anchor: '50%',
        html: '
Width = 50% of the container
'
    },{
        title: 'Panel 2',
        height: 100,
        anchor: '-100',
        html: '
Width = container width - 100 pixels
'
    },{
        title: 'Panel 3',
        anchor: '-10, -262',
        html: '
Width = container width - 10 pixels
Height = container height - 262 pixels
'
    }]
};

/*
 * ================  BorderLayout config  =======================
 */
var border = {
    id:'border-panel',
    title: 'Border Layout',
    layout: 'border',
    bodyBorder: false,
    defaults: {
        collapsible: true,
        split: true,
        animFloat: false,
        autoHide: false,
        useSplitTips: true,
        bodyStyle: 'padding:15px'
    },
    items: [{
        title: 'Footer',
        region: 'south',
        height: 150,
        minSize: 75,
        maxSize: 250,
        cmargins: '5 0 0 0',
        html: '
Footer content
'
    },{
        title: 'Navigation',
        region:'west',
        floatable: false,
        margins: '5 0 0 0',
        cmargins: '5 5 0 0',
        width: 175,
        minSize: 100,
        maxSize: 250,
        html: '
Secondary content like navigation links could go here
'
    },{
        title: 'Main Content',
        collapsible: false,
        region: 'center',
        margins: '5 0 0 0',
        html: '
Main Page
This is where the main content would go
'
    }]
};

/*
 * ================  CardLayout config (TabPanel)  =======================
 */
// Note that the TabPanel component uses an internal CardLayout -- it is not
// something you have to explicitly configure.  However, it is still a perfect
// example of how this layout style can be used in a complex component.
var cardTabs = {
    xtype: 'tabpanel',
    id: 'card-tabs-panel',
    plain: true,  //remove the header border
    activeItem: 0,
    defaults: {bodyStyle: 'padding:15px'},
    items:[{
        title: 'Tab 1',
        html: 'This is tab 1 content.'
    },{
        title: 'Tab 2',
        html: 'This is tab 2 content.'
    },{
        title: 'Tab 3',
        html: 'This is tab 3 content.'
    }]
};

// This is a fake CardLayout navigation function.  A real implementation would
// likely be more sophisticated, with logic to validate navigation flow.  It will
// be assigned next as the handling function for the buttons in the CardLayout example.
var cardNav = function(incr){
    var l = Ext.getCmp('card-wizard-panel').getLayout();
    var i = l.activeItem.id.split('card-')[1];
    var next = parseInt(i) + incr;
    l.setActiveItem(next);
    Ext.getCmp('card-prev').setDisabled(next==0);
    Ext.getCmp('card-next').setDisabled(next==2);
};

/*
 * ================  CardLayout config (Wizard)  =======================
 */
var cardWizard = {
    id:'card-wizard-panel',
    title: 'Card Layout (Wizard)',
    layout:'card',
    activeItem: 0,
    bodyStyle: 'padding:15px',
    defaults: {border:false},
    bbar: ['->', {
        id: 'card-prev',
        text: '« Previous',
        handler: cardNav.createDelegate(this, [-1]),
        disabled: true
    },{
        id: 'card-next',
        text: 'Next »',
        handler: cardNav.createDelegate(this, [1])
    }],
    items: [{
        id: 'card-0',
        html: '
Welcome to the Demo Wizard!
Step 1 of 3
Please click the "Next" button to continue...
'
    },{
        id: 'card-1',
        html: '
Step 2 of 3
Almost there.  Please click the "Next" button to continue...
'
    },{
        id: 'card-2',
        html: '
Congratulations!
Step 3 of 3 - Complete
'
    }]
};

/*
 * ================  ColumnLayout config  =======================
 */
var column = {
    id:'column-panel',
    title: 'Column Layout',
    layout: 'column',
    bodyStyle: 'padding:5px',
    defaults: {bodyStyle:'padding:15px'},
    items: [{
        title: 'Width = 0.25',
        columnWidth: 0.25,
        html: '
This is some short content.
'
    },{
        title: 'Width = 0.75',
        columnWidth: 0.75,
        html: '
This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
This is some longer content.
'
    },{
        title: 'Width = 250px',
        width: 250,
        html: 'Not much here!'
    }]
};

/*
 * ================  FitLayout config  =======================
 */
var fit = {
    id: 'fit-panel',
    title: 'Fit Layout',
    layout: 'fit',
    items: {
        title: 'Inner Panel',
        html: '
This panel is fit within its container.
',
        bodyStyle: 'margin:15px',
        border: false
    }
};

/*
 * ================  FormLayout config  =======================
 */
// NOTE: While you can create a basic Panel with layout:'form', practically
// you should usually use a FormPanel to also get its form-specific functionality.
// Note that the layout config is not required on FormPanels.
var form = {
    xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
    id: 'form-panel',
    labelWidth: 75,
    title: 'Form Layout',
    bodyStyle: 'padding:15px',
    width: 350,
    labelPad: 20,
    layoutConfig: {
        labelSeparator: ''
    },
    defaults: {
        width: 230,
        msgTarget: 'side'
    },
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        },{
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }
    ],
    buttons: [{text: 'Save'},{text: 'Cancel'}]
};

/*
 * ================  TableLayout config  =======================
 */
var table = {
    id: 'table-panel',
    title: 'Table Layout',
    layout: 'table',
    layoutConfig: {
        columns: 4
    },
    defaults: {
        bodyStyle:'padding:15px 20px'
    },
    items: [{
        title: 'Lots of Spanning',
        html: '
Row spanning.

Row spanning.

Row spanning.

Row spanning.

Row spanning.

Row spanning.
',
        rowspan: 3
    },{
        title: 'Basic Table Cell',
        html: '
Basic panel in a table cell.
',
        cellId: 'basic-cell',
        cellCls: 'custom-cls'
    },{
        html: '
Plain panel
'
    },{
        title: 'Another Cell',
        html: '
Row spanning.

Row spanning.

Row spanning.

Row spanning.
',
        width: 300,
        rowspan: 2
    },{
        html: 'Plain cell spanning two columns',
        colspan: 2
    },{
        title: 'More Column Spanning',
        html: '
Spanning three columns.
',
        colspan: 3
    },{
        title: 'Spanning All Columns',
        html: '
Spanning all columns.
',
        colspan: 4
    }]
};

/*
 * ================  VBoxLayout config  =======================
 */
var vbox = {
    id: 'vbox-panel',
    title: 'vBox Layout',
    layout: {
        type: 'vbox',
        pack: 'start',
        align: 'stretch'
    },
    defaults: {
        frame: true
    },
    items: [{
        title: 'Panel 1',
        flex: 1,
        html: 'flex : 1'
    }, {
        title: 'Panel 2',
        height: 100,
        html: 'height: 100'
    }, {
        title: 'Panel 3',
        flex: 2,
        html: 'flex : 2'
    }]
};

/*
 * ================  HBoxLayout config  =======================
 */
var hbox = {
    id: 'hbox-panel',
    title: 'hBox Layout',
    layout: {
        type: 'hbox',
        pack: 'start',
        align: 'stretch'
    },
    defaults: {
        frame: true
    },
    items: [{
        title: 'Panel 1',
        flex: 1,
        html: 'flex : 1'
    }, {
        title: 'Panel 2',
        width: 100,
        html: 'width : 100'
    }, {
        title: 'Panel 3',
        flex: 2,
        html: 'flex : 2'
    }]
};


The source code

var ResizableExample = {
    init : function(){

        var basic = new Ext.Resizable('basic', {
                width: 200,
                height: 100,
                minWidth:100,
                minHeight:50
        });

        var animated = new Ext.Resizable('animated', {
                width: 200,
                pinned: true,
                height: 100,
                minWidth:100,
                minHeight:50,
                animate:true,
                easing: 'backIn',
                duration:.6
        });

        var wrapped = new Ext.Resizable('wrapped', {
            wrap:true,
            pinned:true,
            minWidth:50,
            minHeight: 50,
            preserveRatio: true
        });

        var transparent = new Ext.Resizable('transparent', {
            wrap:true,
            minWidth:50,
            minHeight: 50,
            preserveRatio: true,
            transparent:true
        });

        var custom = new Ext.Resizable('custom', {
            wrap:true,
            pinned:true,
            minWidth:50,
            minHeight: 50,
            preserveRatio: true,
            handles: 'all',
            draggable:true,
            dynamic:true
        });
        var customEl = custom.getEl();
        // move to the body to prevent overlap on my blog
        document.body.insertBefore(customEl.dom, document.body.firstChild);

        customEl.on('dblclick', function(){
            customEl.hide(true);
        });
        customEl.hide();

        Ext.get('showMe').on('click', function(){
            customEl.center();
            customEl.show(true);
        });

        var dwrapped = new Ext.Resizable('dwrapped', {
            wrap:true,
            pinned:true,
            width:450,
            height:150,
            minWidth:200,
            minHeight: 50,
            dynamic: true
        });

        var snap = new Ext.Resizable('snap', {
            pinned:true,
            width:250,
            height:100,
            handles: 'e',
            widthIncrement:50,
            minWidth: 50,
            dynamic: true
        });
    }
};

Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);


The source code

/**
 * @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 = function(el, config){
    Ext.apply(this, config);
    if(Ext.isString(this.paramOrder)){
        this.paramOrder = this.paramOrder.split(/[\s,|]/);
    }
    /*
     * @property items
     * A {@link Ext.util.MixedCollection MixedCollection) containing all the Ext.form.Fields in this form.
     * @type MixedCollection
     */
    this.items = new Ext.util.MixedCollection(false, function(o){
        return o.itemId || o.id || (o.id = Ext.id());
    });
    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);
};

Ext.extend(Ext.form.BasicForm, Ext.util.Observable, {

/**
     * @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,

    // 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 (baseParams and params), you will need to
     * create hidden fields within the form.

     *
The url config option is also bypassed, so set the action as well:

     *

PANEL.getForm().getEl().dom.action = 'URL'
     *

     * An example encapsulating the above:
     *

new Ext.FormPanel({
    standardSubmit: true,
    baseParams: {
        foo: 'bar'
    },
    url: 'myProcess.php',
    items: [{
        xtype: 'textfield',
        name: 'userName'
    }],
    buttons: [{
        text: 'Save',
        handler: function(){
            var O = this.ownerCt;
            if (O.getForm().isValid()) {
                if (O.url)
                    O.getForm().getEl().dom.action = O.url;
                if (O.baseParams) {
                    for (i in O.baseParams) {
                        O.add({
                            xtype: 'hidden',
                            name: i,
                            value: O.baseParams[i]
                        })
                    }
                    O.doLayout();
                }
                O.getForm().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();
    },

    // private
    destroy: function() {
        this.items.each(function(f){
            Ext.destroy(f);
        });
        if(this.el){
            this.el.removeAllListeners();
            this.el.remove();
        }
        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){
        if(this.standardSubmit){
            var v = this.isValid();
            if(v){
                this.el.dom.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){
        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 || 'Please Wait...');
            }
        }
    },

    // 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)){
            this.items.each(function(f){
                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
                    field = f;
                    return false;
                }
            });
        }
        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);
    },

    getFieldValues : function(){
        var o = {};
        this.items.each(function(f){
           o[f.getName()] = f.getValue();
        });
        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

// setup an App namespace
// This is done to prevent collisions in the global namespace
Ext.ns('App');

/**
 * App.BookStore
 * @extends Ext.data.Store
 * @cfg {String} url This will be a url of a location to load the BookStore
 * This is a specialized Store which maintains books.
 * It already knows about Amazon's XML definition and will expose the following
 * Record defintion:
 *  - Author
 *  - Manufacturer
 *  - ProductGroup
 *  - DetailPageURL
 */
App.BookStore = function(config) {
    var config = config || {};
    Ext.applyIf(config, {
        reader: new Ext.data.XmlReader({
           // records will have an "Item" tag
           record: 'Item',
           id: 'ASIN',
           totalRecords: '@total'
       }, [
           // 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',
           // Detail URL is not part of the column model of the grid
           'DetailPageURL'
       ])
    });
    // call the superclass's constructor
    App.BookStore.superclass.constructor.call(this, config);
};
Ext.extend(App.BookStore, Ext.data.Store);

/**
 * App.BookGrid
 * @extends Ext.grid.GridPanel
 * This is a custom grid which will display book information. It is tied to
 * a specific record definition by the dataIndex properties.
 *
 * It follows a very custom pattern used only when extending Ext.Components
 * in which you can omit the constructor.
 *
 * It also registers the class with the Component Manager with an xtype of
 * bookgrid. This allows the application to take care of the lazy-instatiation
 * facilities provided in Ext's Component Model.
 */
App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
    // override
    initComponent : function() {
        Ext.apply(this, {
            // Pass in a column model definition
            // Note that the DetailPageURL was defined in the record definition but is not used
            // here. That is okay.
            columns: [
                {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
                {header: "Title", dataIndex: 'Title', sortable: true},
                {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
                {header: "Product Group", dataIndex: 'ProductGroup', sortable: true}
            ],
            sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
            // Note the use of a storeId, this will register thisStore
            // with the StoreMgr and allow us to retrieve it very easily.
            store: new App.BookStore({
                storeId: 'gridBookStore',
                url: 'sheldon.xml'
            }),
            // force the grid to fit the space which is available
            viewConfig: {
                forceFit: true
            }
        });
        // finally call the superclasses implementation
        App.BookGrid.superclass.initComponent.call(this);
    }
});
// This will associate an string representation of a class
// (called an xtype) with the Component Manager
// It allows you to support lazy instantiation of your components
Ext.reg('bookgrid', App.BookGrid);

/**
 * App.BookDetail
 * @extends Ext.Panel
 * This is a specialized Panel which is used to show information about
 * a book.
 *
 * This demonstrates adding 2 custom properties (tplMarkup and
 * startingMarkup) to the class. It also overrides the initComponent
 * method and adds a new method called updateDetail.
 *
 * The class will be registered with an xtype of 'bookdetail'
 */
App.BookDetail = Ext.extend(Ext.Panel, {
    // add tplMarkup as a new property
    tplMarkup: [
        'Title: {Title}
',
        'Author: {Author}
',
        'Manufacturer: {Manufacturer}
',
        'Product Group: {ProductGroup}
'
    ],
    // startingMarup as a new property
    startingMarkup: 'Please select a book to see additional details',
    // override initComponent to create and compile the template
    // apply styles to the body of the panel and initialize
    // html to startingMarkup
    initComponent: function() {
        this.tpl = new Ext.Template(this.tplMarkup);
        Ext.apply(this, {
            bodyStyle: {
                background: '#ffffff',
                padding: '7px'
            },
            html: this.startingMarkup
        });
        // call the superclass's initComponent implementation
        App.BookDetail.superclass.initComponent.call(this);
    },
    // add a method which updates the details
    updateDetail: function(data) {
        this.tpl.overwrite(this.body, data);
    }
});
// register the App.BookDetail class with an xtype of bookdetail
Ext.reg('bookdetail', App.BookDetail);

/**
 * App.BookMasterDetail
 * @extends Ext.Panel
 *
 * This is a specialized panel which is composed of both a bookgrid
 * and a bookdetail panel. It provides the glue between the two
 * components to allow them to communicate. You could consider this
 * the actual application.
 *
 */
App.BookMasterDetail = Ext.extend(Ext.Panel, {
    // override initComponent
    initComponent: function() {
        // used applyIf rather than apply so user could
        // override the defaults
        Ext.applyIf(this, {
            frame: true,
            title: 'Book List',
            width: 540,
            height: 400,
            layout: 'border',
            items: [{
                xtype: 'bookgrid',
                itemId: 'gridPanel',
                region: 'north',
                height: 210,
                split: true
            },{
                xtype: 'bookdetail',
                itemId: 'detailPanel',
                region: 'center'
            }]
        })
        // call the superclass's initComponent implementation
        App.BookMasterDetail.superclass.initComponent.call(this);
    },
    // override initEvents
    initEvents: function() {
        // call the superclass's initEvents implementation
        App.BookMasterDetail.superclass.initEvents.call(this);

        // now add application specific events
        // notice we use the selectionmodel's rowselect event rather
        // than a click event from the grid to provide key navigation
        // as well as mouse navigation
        var bookGridSm = this.getComponent('gridPanel').getSelectionModel();
        bookGridSm.on('rowselect', this.onRowSelect, this);
    },
    // add a method called onRowSelect
    // This matches the method signature as defined by the 'rowselect'
    // event defined in Ext.grid.RowSelectionModel
    onRowSelect: function(sm, rowIdx, r) {
        // getComponent will retrieve itemId's or id's. Note that itemId's
        // are scoped locally to this instance of a component to avoid
        // conflicts with the ComponentMgr
        var detailPanel = this.getComponent('detailPanel');
        detailPanel.updateDetail(r.data);
    }
});
// register an xtype with this class
Ext.reg('bookmasterdetail', App.BookMasterDetail);

// Finally now that we've defined all of our classes we can instantiate
// an instance of the app and renderTo an existing div called 'binding-example'
// Note now that classes have encapsulated this behavior we can easily create
// an instance of this app to be used in many different contexts, you could
// easily place this application in an Ext.Window for example
Ext.onReady(function() {
    // create an instance of the app
    var bookApp = new App.BookMasterDetail({
        renderTo: 'binding-example'
    });
    // We can retrieve a reference to the data store
    // via the StoreMgr by its storeId
    Ext.StoreMgr.get('gridBookStore').load();
});


The source code

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'sheldon.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // 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',
               // Detail URL is not part of the column model of the grid
               'DetailPageURL'
           ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
        sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
        viewConfig: {
            forceFit: true
        },
        height:210,
        split: true,
        region: 'north'
    });

    // define a template to use for the detail view
    var bookTplMarkup = [
        'Title: {Title}
',
        'Author: {Author}
',
        'Manufacturer: {Manufacturer}
',
        'Product Group: {ProductGroup}
'
    ];
    var bookTpl = new Ext.Template(bookTplMarkup);

    var ct = new Ext.Panel({
        renderTo: 'binding-example',
        frame: true,
        title: 'Book List',
        width: 540,
        height: 400,
        layout: 'border',
        items: [
            grid,
            {
                id: 'detailPanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: 'Please select a book to see additional details.'
            }
        ]
    })
    grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
        var detailPanel = Ext.getCmp('detailPanel');
        bookTpl.overwrite(detailPanel.body, r.data);
    });
    store.load();
});


The source code

/**
 * @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,

    // private
    onLayout : function(ct, target){
        var collapsed;
        if(!this.rendered){
            target.addClass('x-border-layout-ct');
            var items = ct.items.items;
            collapsed = [];
            for(var i = 0, len = items.length; i < len; i++) {
                var c = items[i];
                var pos = c.region;
                if(c.collapsed){
                    collapsed.push(c);
                }
                c.collapsed = false;
                if(!c.rendered){
                    c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
                    c.render(target, i);
                }
                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 = target.getViewSize();
        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;
        var centerW = w, centerH = h, centerY = 0, centerX = 0;

        var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
        if(!c && Ext.layout.BorderLayout.WARN !== false){
            throw 'No center region defined in BorderLayout ' + ct.id;
        }

        if(n && n.isVisible()){
            var b = n.getSize();
            var 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()){
            var b = s.getSize();
            var m = s.getMargins();
            b.width = w - (m.left+m.right);
            b.x = m.left;
            var totalHeight = (b.height + m.top + m.bottom);
            b.y = h - totalHeight + m.top;
            centerH -= totalHeight;
            s.applyLayout(b);
        }
        if(west && west.isVisible()){
            var b = west.getSize();
            var m = west.getMargins();
            b.height = centerH - (m.top+m.bottom);
            b.x = m.left;
            b.y = centerY + m.top;
            var totalWidth = (b.width + m.left + m.right);
            centerX += totalWidth;
            centerW -= totalWidth;
            west.applyLayout(b);
        }
        if(e && e.isVisible()){
            var b = e.getSize();
            var m = e.getMargins();
            b.height = centerH - (m.top+m.bottom);
            var 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){
            var 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(var i = 0, len = collapsed.length; i < len; i++){
                collapsed[i].collapse(false);
            }
        }
        if(Ext.isIE && Ext.isStrict){ // workaround IE strict repainting issue
            target.repaint();
        }
    },

    destroy: function() {
        var r = ['north', 'south', 'east', 'west'];
        for (var i = 0; i < r.length; i++) {
            var 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.afterSlideIn();
            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();
        this.panel.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){
        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', 1);
        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){
                var st = new Ext.util.DelayedTask(this.slideIn, this);
                this.autoHideHd = {
                    "mouseout": function(e){
                        if(!e.within(this.el, true)){
                            st.delay(500);
                        }
                    },
                    "mouseover" : function(e){
                        st.cancel();
                    },
                    scope : this
                };
            }
            this.el.on(this.autoHideHd);
        }
    },

    // private
    clearAutoHide : function(){
        if(this.autoHide !== false){
            this.el.un("mouseout", this.autoHideHd.mouseout);
            this.el.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;
        if(ts && ts.toggle){
            ts.toggle.hide();
        }
        this.el.show();
        if(this.position == 'east' || this.position == 'west'){
            this.panel.setSize(undefined, this.collapsedEl.getHeight());
        }else{
            this.panel.setSize(this.collapsedEl.getWidth(), undefined);
        }
        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;
        }
    }
};

/**
 * @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.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;


The source code

/**
 * @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 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 {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'
    }],
});

     */

    /* // 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;
        }
        // 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);
        var aw = adj.width, ah = adj.height;
        if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
            var 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 {Number} width The new width to setThis 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.
    •
     *

     * @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 {Number} 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}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.
     */
    getResizeEl : function(){
        return this.resizeEl || this.el;
    },

    // protected
    getPositionEl : function(){
        return this.positionEl || this.el;
    },

/**
     * 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
    onRender : function(ct, position){
        Ext.BoxComponent.superclass.onRender.call(this, ct, position);
        if(this.resizeEl){
            this.resizeEl = Ext.get(this.resizeEl);
        }
        if(this.positionEl){
            this.positionEl = Ext.get(this.positionEl);
        }
    },

    // private
    afterRender : function(){
        Ext.BoxComponent.superclass.afterRender.call(this);
        this.boxReady = true;
        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

/**
 * @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
     * Defaults to '0'. Sets the padding to be applied to all child items managed by this
     * container's layout.
     */
    padding : '0',
    // documented in subclasses
    pack : 'start',

    // private
    monitorResize : true,
    scrollOffset : 0,
    extraCls : 'x-box-item',
    ctCls : 'x-box-layout-ct',
    innerCls : 'x-box-inner',

    // private
    isValidParent : function(c, target){
        return c.getEl().dom.parentNode == this.innerCt.dom;
    },

    // private
    onLayout : function(ct, target){
        var cs = ct.items.items, len = cs.length, c, i, last = len-1, cm;

        if(!this.innerCt){
            target.addClass(this.ctCls);

            // the innerCt prevents wrapping and shuffling while
            // the container is resizing
            this.innerCt = target.createChild({cls:this.innerCls});
            this.padding = this.parseMargins(this.padding);
        }
        this.renderAll(ct, this.innerCt);
    },

    // private
    renderItem : function(c){
        if(typeof c.margins == 'string'){
            c.margins = this.parseMargins(c.margins);
        }else if(!c.margins){
            c.margins = this.defaultMargins;
        }
        Ext.layout.BoxLayout.superclass.renderItem.apply(this, arguments);
    },

    getTargetSize : function(target){
        return (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getStyleSize() : target.getViewSize();
    },

    getItems: function(ct){
        var items = [];
        ct.items.each(function(c){
            if(c.isVisible()){
                items.push(c);
            }
        });
        return items;
    }

/**
     * @property activeItem
     * @hide
     */
});

/**
 * @class Ext.layout.VBoxLayout
 * @extends Ext.layout.BoxLayout
 * A layout that arranges items vertically
 */
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

/**
     * @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
    onLayout : function(ct, target){
        Ext.layout.VBoxLayout.superclass.onLayout.call(this, ct, target);

        var cs = this.getItems(ct), cm, ch, margin,
            size = this.getTargetSize(target),
            w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            l = this.padding.left, t = this.padding.top,
            isStart = this.pack == 'start',
            isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
            stretchWidth = w - (this.padding.left + this.padding.right),
            extraHeight = 0,
            maxWidth = 0,
            totalFlex = 0,
            flexHeight = 0,
            usedHeight = 0;

        Ext.each(cs, function(c){
            cm = c.margins;
            totalFlex += c.flex || 0;
            ch = c.getHeight();
            margin = cm.top + cm.bottom;
            extraHeight += ch + margin;
            flexHeight += margin + (c.flex ? 0 : ch);
            maxWidth = Math.max(maxWidth, c.getWidth() + cm.left + cm.right);
        });
        extraHeight = h - extraHeight - this.padding.top - this.padding.bottom;

        var innerCtWidth = maxWidth + this.padding.left + this.padding.right;
        switch(this.align){
            case 'stretch':
                this.innerCt.setSize(w, h);
                break;
            case 'stretchmax':
            case 'left':
                this.innerCt.setSize(innerCtWidth, h);
                break;
            case 'center':
                this.innerCt.setSize(w = Math.max(w, innerCtWidth), h);
                break;
        }

        var availHeight = Math.max(0, h - this.padding.top - this.padding.bottom - flexHeight),
            leftOver = availHeight,
            heights = [],
            restore = [],
            idx = 0,
            availableWidth = Math.max(0, w - this.padding.left - this.padding.right);

        Ext.each(cs, function(c){
            if(isStart && c.flex){
                ch = Math.floor(availHeight * (c.flex / totalFlex));
                leftOver -= ch;
                heights.push(ch);
            }
        });

        if(this.pack == 'center'){
            t += extraHeight ? extraHeight / 2 : 0;
        }else if(this.pack == 'end'){
            t += extraHeight;
        }
        Ext.each(cs, function(c){
            cm = c.margins;
            t += cm.top;
            c.setPosition(l + cm.left, t);
            if(isStart && c.flex){
                ch = Math.max(0, heights[idx++] + (leftOver-- > 0 ? 1 : 0));
                if(isRestore){
                    restore.push(c.getWidth());
                }
                c.setSize(availableWidth, ch);
            }else{
                ch = c.getHeight();
            }
            t += ch + cm.bottom;
        });

        idx = 0;
        Ext.each(cs, function(c){
            cm = c.margins;
            if(this.align == 'stretch'){
                c.setWidth((stretchWidth - (cm.left + cm.right)).constrain(
                    c.minWidth || 0, c.maxWidth || 1000000));
            }else if(this.align == 'stretchmax'){
                c.setWidth((maxWidth - (cm.left + cm.right)).constrain(
                    c.minWidth || 0, c.maxWidth || 1000000));
            }else{
                if(this.align == 'center'){
                    var diff = availableWidth - (c.getWidth() + cm.left + cm.right);
                    if(diff > 0){
                        c.setPosition(l + cm.left + (diff/2), c.y);
                    }
                }
                if(isStart && c.flex){
                    c.setWidth(restore[idx++]);
                }
            }
        }, this);
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;

/**
 * @class Ext.layout.HBoxLayout
 * @extends Ext.layout.BoxLayout
 * A layout that arranges items horizontally
 */
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 left side of the container
    •
     *
  • middle :
    child items are aligned vertically at the
     * mid-height of the container
    •
     *
  • stretch :
    child items are stretched vertically to fill
     * the height of the container
    •
     *
  • stretchmax :
    child items are stretched vertically to
     * the size of the largest item.
    •
     */
    align : 'top', // top, middle, stretch, strechmax

    /**
     * @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
    onLayout : function(ct, target){
        Ext.layout.HBoxLayout.superclass.onLayout.call(this, ct, target);

        var cs = this.getItems(ct), cm, cw, margin,
            size = this.getTargetSize(target),
            w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            l = this.padding.left, t = this.padding.top,
            isStart = this.pack == 'start',
            isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,
            stretchHeight = h - (this.padding.top + this.padding.bottom),
            extraWidth = 0,
            maxHeight = 0,
            totalFlex = 0,
            flexWidth = 0,
            usedWidth = 0;

        Ext.each(cs, function(c){
            cm = c.margins;
            totalFlex += c.flex || 0;
            cw = c.getWidth();
            margin = cm.left + cm.right;
            extraWidth += cw + margin;
            flexWidth += margin + (c.flex ? 0 : cw);
            maxHeight = Math.max(maxHeight, c.getHeight() + cm.top + cm.bottom);
        });
        extraWidth = w - extraWidth - this.padding.left - this.padding.right;

        var innerCtHeight = maxHeight + this.padding.top + this.padding.bottom;
        switch(this.align){
            case 'stretch':
                this.innerCt.setSize(w, h);
                break;
            case 'stretchmax':
            case 'top':
                this.innerCt.setSize(w, innerCtHeight);
                break;
            case 'middle':
                this.innerCt.setSize(w, h = Math.max(h, innerCtHeight));
                break;
        }

        var availWidth = Math.max(0, w - this.padding.left - this.padding.right - flexWidth),
            leftOver = availWidth,
            widths = [],
            restore = [],
            idx = 0,
            availableHeight = Math.max(0, h - this.padding.top - this.padding.bottom);

        Ext.each(cs, function(c){
            if(isStart && c.flex){
                cw = Math.floor(availWidth * (c.flex / totalFlex));
                leftOver -= cw;
                widths.push(cw);
            }
        });

        if(this.pack == 'center'){
            l += extraWidth ? extraWidth / 2 : 0;
        }else if(this.pack == 'end'){
            l += extraWidth;
        }
        Ext.each(cs, function(c){
            cm = c.margins;
            l += cm.left;
            c.setPosition(l, t + cm.top);
            if(isStart && c.flex){
                cw = Math.max(0, widths[idx++] + (leftOver-- > 0 ? 1 : 0));
                if(isRestore){
                    restore.push(c.getHeight());
                }
                c.setSize(cw, availableHeight);
            }else{
                cw = c.getWidth();
            }
            l += cw + cm.right;
        });

        idx = 0;
        Ext.each(cs, function(c){
            var cm = c.margins;
            if(this.align == 'stretch'){
                c.setHeight((stretchHeight - (cm.top + cm.bottom)).constrain(
                    c.minHeight || 0, c.maxHeight || 1000000));
            }else if(this.align == 'stretchmax'){
                c.setHeight((maxHeight - (cm.top + cm.bottom)).constrain(
                    c.minHeight || 0, c.maxHeight || 1000000));
            }else{
                if(this.align == 'middle'){
                    var diff = availableHeight - (c.getHeight() + cm.top + cm.bottom);
                    if(diff > 0){
                        c.setPosition(c.x, t + cm.top + (diff/2));
                    }
                }
                if(isStart && c.flex){
                    c.setHeight(restore[idx++]);
                }
            }
        }, this);
    }

    /**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;


The source code

Ext.onReady(function(){
    var title = new Ext.ux.BubblePanel({
    bodyStyle: 'padding-left: 8px;color: #0d2a59',
    renderTo: 'bubbleCt',
    html: '
Ext.ux.BubblePanel


The source code

Ext.ux.BubblePanel = Ext.extend(Ext.Panel, {
    baseCls: 'x-bubble',
    frame: true
});


The source code

Ext.onReady(function(){

    var store = new Ext.data.Store({
        remoteSort: true,
        baseParams: {lightWeight:true,ext: 'js'},
        sortInfo: {field:'lastpost', direction:'DESC'},
        autoLoad: {params:{start:0, limit:500}},

        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-browse-remote.php'
        }),

        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            idProperty: 'threadid',
            fields: [
                'title', 'forumtitle', 'forumid', 'author',
                {name: 'replycount', type: 'int'},
                {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                'lastposter', 'excerpt'
            ]
        })
    });

    var grid = new Ext.grid.GridPanel({
        renderTo: 'topic-grid',
        width:700,
        height:500,
        frame:true,
        title:'ExtJS.com - Browse Forums',
        trackMouseOver:false,
        autoExpandColumn: 'topic',
        store: store,

        columns: [new Ext.grid.RowNumberer({width: 30}),{
            id: 'topic',
            header: "Topic",
            dataIndex: 'title',
            width: 420,
            renderer: renderTopic,
            sortable:true
        },{
            header: "Replies",
            dataIndex: 'replycount',
            width: 70,
            align: 'right',
            sortable:true
        },{
            id: 'last',
            header: "Last Post",
            dataIndex: 'lastpost',
            width: 150,
            renderer: renderLast,
            sortable:true
        }],

        bbar: new Ext.PagingToolbar({
            store: store,
            pageSize:500,
            displayInfo:true
        }),

        view: new Ext.ux.grid.BufferView({
            // custom row height
            rowHeight: 34,
            // render rows as they come into viewable area.
            scrollDelay: false
        })
    });

    // render functions
    function renderTopic(value, p, record){
        return String.format(
                '{0}{1} Forum',
                value, record.data.forumtitle, record.id, record.data.forumid);
    }
    function renderLast(value, p, r){
        return String.format('{0}
by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
    }

});


The source code

Ext.ns('Ext.ux.grid');

/**
 * @class Ext.ux.grid.BufferView
 * @extends Ext.grid.GridView
 * A custom GridView which renders rows on an as-needed basis.
 */
Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {

/**
     * @cfg {Number} rowHeight
     * The height of a row in the grid.
     */
    rowHeight: 19,

/**
     * @cfg {Number} borderHeight
     * The combined height of border-top and border-bottom of a row.
     */
    borderHeight: 2,

/**
     * @cfg {Boolean/Number} scrollDelay
     * The number of milliseconds before rendering rows out of the visible
     * viewing area. Defaults to 100. Rows will render immediately with a config
     * of false.
     */
    scrollDelay: 100,

/**
     * @cfg {Number} cacheSize
     * The number of rows to look forward and backwards from the currently viewable
     * area.  The cache applies only to rows that have been rendered already.
     */
    cacheSize: 20,

/**
     * @cfg {Number} cleanDelay
     * The number of milliseconds to buffer cleaning of extra rows not in the
     * cache.
     */
    cleanDelay: 500,

    initTemplates : function(){
        Ext.ux.grid.BufferView.superclass.initTemplates.call(this);
        var ts = this.templates;
        // empty div to act as a place holder for a row
            ts.rowHolder = new Ext.Template(
                '
'
        );
        ts.rowHolder.disableFormats = true;
        ts.rowHolder.compile();

        ts.rowBody = new Ext.Template(
                '',
            '{cells}',
            (this.enableRowBody ? '' : ''),
            '
{body}

'
        );
        ts.rowBody.disableFormats = true;
        ts.rowBody.compile();
    },

    getStyleRowHeight : function(){
        return Ext.isBorderBox ? (this.rowHeight + this.borderHeight) : this.rowHeight;
    },

    getCalculatedRowHeight : function(){
        return this.rowHeight + this.borderHeight;
    },

    getVisibleRowCount : function(){
        var rh = this.getCalculatedRowHeight();
        var visibleHeight = this.scroller.dom.clientHeight;
        return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
    },

    getVisibleRows: function(){
        var count = this.getVisibleRowCount();
        var sc = this.scroller.dom.scrollTop;
        var start = (sc == 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1);
        return {
            first: Math.max(start, 0),
            last: Math.min(start + count + 2, this.ds.getCount()-1)
        };
    },

    doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
        var ts = this.templates, ct = ts.cell, rt = ts.row, rb = ts.rowBody, last = colCount-1;
        var rh = this.getStyleRowHeight();
        var vr = this.getVisibleRows();
        var tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;';
        // buffers
        var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
        for (var j = 0, len = rs.length; j < len; j++) {
            r = rs[j]; cb = [];
            var rowIndex = (j+startRow);
            var visible = rowIndex >= vr.first && rowIndex <= vr.last;
            if (visible) {
                for (var i = 0; i < colCount; i++) {
                    c = cs[i];
                    p.id = c.id;
                    p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                    p.attr = p.cellAttr = "";
                    p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
                    p.style = c.style;
                    if (p.value == undefined || p.value === "") {
                        p.value = " ";
                    }
                    if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
                        p.css += ' x-grid3-dirty-cell';
                    }
                    cb[cb.length] = ct.apply(p);
                }
            }
            var alt = [];
            if(stripe && ((rowIndex+1) % 2 == 0)){
                alt[0] = "x-grid3-row-alt";
            }
            if(r.dirty){
                alt[1] = " x-grid3-dirty-row";
            }
            rp.cols = colCount;
            if(this.getRowClass){
                alt[2] = this.getRowClass(r, rowIndex, rp, ds);
            }
            rp.alt = alt.join(" ");
            rp.cells = cb.join("");
            buf[buf.length] =  !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
        }
        return buf.join("");
    },

    isRowRendered: function(index){
        var row = this.getRow(index);
        return row && row.childNodes.length > 0;
    },

    syncScroll: function(){
        Ext.ux.grid.BufferView.superclass.syncScroll.apply(this, arguments);
        this.update();
    },

    // a (optionally) buffered method to update contents of gridview
    update: function(){
        if (this.scrollDelay) {
            if (!this.renderTask) {
                this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
            }
            this.renderTask.delay(this.scrollDelay);
        }else{
            this.doUpdate();
        }
    },

    doUpdate: function(){
        if (this.getVisibleRowCount() > 0) {
            var g = this.grid, cm = g.colModel, ds = g.store;
                var cs = this.getColumnData();

                var vr = this.getVisibleRows();
            for (var i = vr.first; i <= vr.last; i++) {
                // if row is NOT rendered and is visible, render it
                if(!this.isRowRendered(i)){
                    var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
                    this.getRow(i).innerHTML = html;
                }
            }
            this.clean();
        }
    },

    // a buffered method to clean rows
    clean : function(){
        if(!this.cleanTask){
            this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
        }
        this.cleanTask.delay(this.cleanDelay);
    },

    doClean: function(){
        if (this.getVisibleRowCount() > 0) {
            var vr = this.getVisibleRows();
            vr.first -= this.cacheSize;
            vr.last += this.cacheSize;

            var i = 0, rows = this.getRows();
            // if first is less than 0, all rows have been rendered
            // so lets clean the end...
            if(vr.first <= 0){
                i = vr.last + 1;
            }
            for(var len = this.ds.getCount(); i < len; i++){
                // if current row is outside of first and last and
                // has content, update the innerHTML to nothing
                if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
                    rows[i].innerHTML = '';
                }
            }
        }
    },

    layout: function(){
        Ext.ux.grid.BufferView.superclass.layout.call(this);
        this.update();
    }
});


The source code

/**
 * @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,
    /**
     * The Button's owner {@link Ext.Panel} (defaults to undefined, and is set automatically when
     * the Button is added to a container).  Read-only.
     * @type Ext.Panel
     * @property ownerCt
     */

    /**
     * @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 if 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 type of event to map to the button's event handler (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 object 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 #text}
    •
  *
  • The <button>'s {@link #type}
    •
  *
  • The {@link iconCls} applied to the <button> {@link #btnEl element}
    •
  *
  • The {@link #cls} applied to the Button's main {@link #getEl Element}
    •
  *
  • A CSS class name controlling the Button's {@link #scale} and {@link #iconAlign icon alignment}
    •
  *
  • A CSS class name which applies an arrow to the Button if configured with a {@link #menu}
    •
  *

  * @return {Object} Substitution data for a Template.
 */
    getTemplateArgs : function(){
        var cls = (this.cls || '');
        cls += (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';
        if(this.pressed){
            cls += ' x-btn-pressed';
        }
        return [this.text || ' ', this.type, this.iconCls || '', cls, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass()];
    },

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

        if(this.id){
            this.el.dom.id = this.el.id = this.id;
        }
        if(this.icon){
            btnEl.setStyle('background-image', 'url(' +this.icon +')');
        }
        if(this.tabIndex !== undefined){
            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.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){
        if(this.el){
            this.btnEl.replaceClass(this.iconCls, cls);
        }
        this.iconCls = cls;
        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();
        }
        Ext.destroy(this.menu, this.repeater);
    },

    // private
    onDestroy : function(){
        var doc = Ext.getDoc();
        doc.un('mouseover', this.monitorMouseOver, this);
        doc.un('mouseup', this.onMouseUp, this);
        if(this.rendered){
            Ext.ButtonToggleMgr.unregister(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) Scope for the function passed in. 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.el.child('td.x-btn-mc ' + this.buttonSelector).update(text);
        }
        this.doAutoWidth();
        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;
    },

    /**
     * Focus the button
     */
    focus : function(){
        this.btnEl.focus();
    },

    // 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);
            }
            this.menu.show(this.el, this.menuAlign);
        }
        return this;
    },

    /**
     * Hide this button's menu (if it has one)
     */
    hideMenu : function(){
        if(this.menu){
            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.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.menu.isVisible() && !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){
                    Ext.getDoc().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){
                Ext.getDoc().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);
        }
    },
    // 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');
            Ext.getDoc().on('mouseup', this.onMouseUp, this);
        }
    },
    // private
    onMouseUp : function(e){
        if(e.button === 0){
            this.getClickEl(e, true).removeClass('x-btn-click');
            Ext.getDoc().un('mouseup', this.onMouseUp, this);
        }
    },
    // private
    onMenuShow : function(e){
        this.ignoreNextClick = 0;
        this.el.addClass('x-btn-menu-active');
        this.fireEvent('menushow', this, this.menu);
    },
    // private
    onMenuHide : function(e){
        this.el.removeClass('x-btn-menu-active');
        this.ignoreNextClick = this.restoreClick.defer(250, this);
        this.fireEvent('menuhide', this, this.menu);
    },

    // private
    restoreClick : function(){
        this.ignoreNextClick = 0;
    }

    /**
     * @cfg {String} autoEl @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

/**
 * @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'
        }]
    }]
});
 *

 * @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

Ext.onReady(function(){

    // This function renders a block of buttons
    function renderButtons(title){

        Ext.getBody().createChild({tag: 'h2', html: title});

        new ButtonPanel(
            'Text Only',
            [{
                text: 'Add User'
            },{
                text: 'Add User',
                scale: 'medium'
            },{
                text: 'Add User',
                scale: 'large'
            }]
        );

        new ButtonPanel(
            'Icon Only',
            [{
                iconCls: 'add16'
            },{
                iconCls: 'add24',
                scale: 'medium'
            },{
                iconCls: 'add',
                scale: 'large'
            }]
        );

        new ButtonPanel(
            'Icon and Text (left)',
            [{
                text: 'Add User',
                iconCls: 'add16'
            },{
                text: 'Add User',
                iconCls: 'add24',
                scale: 'medium'
            },{
                text: 'Add User',
                iconCls: 'add',
                scale: 'large'
            }]
        );

        new ButtonPanel(
            'Icon and Text (top)',
            [{
                text: 'Add User',
                iconCls: 'add16',
                iconAlign: 'top'
            },{
                text: 'Add User',
                iconCls: 'add24',
                scale: 'medium',
                iconAlign: 'top'
            },{
                text: 'Add User',
                iconCls: 'add',
                scale: 'large',
                iconAlign: 'top'
            }]
        );

        new ButtonPanel(
            'Icon and Text (right)',
            [{
                text: 'Add User',
                iconCls: 'add16',
                iconAlign: 'right'
            },{
                text: 'Add User',
                iconCls: 'add24',
                scale: 'medium',
                iconAlign: 'right'
            },{
                text: 'Add User',
                iconCls: 'add',
                scale: 'large',
                iconAlign: 'right'
            }]
        );

        new ButtonPanel(
            'Icon and Text (bottom)',
            [{
                text: 'Add User',
                iconCls: 'add16',
                iconAlign: 'bottom'
            },{
                text: 'Add User',
                iconCls: 'add24',
                scale: 'medium',
                iconAlign: 'bottom'
            },{
                text: 'Add User',
                iconCls: 'add',
                scale: 'large',
                iconAlign: 'bottom'
            }]
        );
    }

    renderButtons('Normal Buttons');

    ButtonPanel.override({
        enableToggle: true
    });

    renderButtons('Toggle Buttons');

    ButtonPanel.override({
        enableToggle : undefined,
        menu : {items: [{text:'Menu Item 1'},{text:'Menu Item 2'},{text:'Menu Item 3'}]}
    });

    renderButtons('Menu Buttons');

    ButtonPanel.override({
        split: true,
        defaultType: 'splitbutton'
    });

    renderButtons('Split Buttons');

    ButtonPanel.override({
        split: false,
        defaultType: 'button',
        arrowAlign: 'bottom'
    });

    renderButtons('Menu Buttons (Arrow on bottom)');

    ButtonPanel.override({
        split: true,
        defaultType: 'splitbutton'
    });

    renderButtons('Split Buttons (Arrow on bottom)');
});

// Helper class for organizing the buttons
ButtonPanel = Ext.extend(Ext.Panel, {
    layout:'table',
    defaultType: 'button',
    baseCls: 'x-plain',
    cls: 'btn-panel',
    renderTo : 'docbody',
    menu: undefined,
    split: false,

    layoutConfig: {
        columns:3
    },

    constructor: function(desc, buttons){
        // apply test configs
        for(var i = 0, b; b = buttons[i]; i++){
            b.menu = this.menu;
            b.enableToggle = this.enableToggle;
            b.split = this.split;
            b.arrowAlign = this.arrowAlign;
        }
        var items = [{
            xtype: 'box',
            autoEl: {tag: 'h3', html: desc, style:"padding:15px 0 3px;"},
            colspan: 3
        }].concat(buttons);

        ButtonPanel.superclass.constructor.call(this, {
            items: items
        });
    }
});


The source code

/**
 * @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,

    constructor: function(config){
        Ext.layout.CardLayout.superclass.constructor.call(this, config);
        this.forceLayout = (this.deferredRender === false);
    },

/**
     * 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){
        item = this.container.getComponent(item);
        if(this.activeItem != item){
            if(this.activeItem){
                this.activeItem.hide();
            }
            this.activeItem = item;
            item.show();
            this.container.doLayout();
            if(this.layoutOnCardChange && item.doLayout){
                item.doLayout();
            }
        }
    },

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

/**
 * @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 = 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);
};

Ext.extend(Ext.grid.CellSelectionModel, Ext.grid.AbstractSelectionModel,  {

    /** @ignore */
    initEvents : function(){
        this.grid.on("cellmousedown", this.handleMouseDown, this);
        this.grid.getGridEl().on(Ext.EventManager.useKeydown ? "keydown" : "keypress", this.handleKeyDown, this);
        var view = this.grid.view;
        view.on("refresh", this.onViewChange, this);
        view.on("rowupdated", this.onRowUpdated, this);
        view.on("beforerowremoved", this.clearSelections, this);
        view.on("beforerowsinserted", this.clearSelections, this);
        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);
    },

    /** @ignore */
    handleKeyDown : function(e){
        if(!e.isNavKeyPress()){
            return;
        }
        var g = this.grid, s = this.selection;
        if(!s){
            e.stopEvent();
            var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
            if(cell){
                this.select(cell[0], cell[1]);
            }
            return;
        }
        var sm = this;
        var walk = function(row, col, step){
            return g.walkCells(row, col, step, sm.isSelectable,  sm);
        };
        var k = e.getKey(), r = s.cell[0], c = s.cell[1];
        var newCell;

        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);
                    e.stopEvent();
                    return;
                }
             break;
        }
        if(newCell){
            this.select(newCell[0], newCell[1]);
            e.stopEvent();
        }
    },

    acceptsNav : function(row, col, cm){
        return !cm.isHidden(col) && cm.isCellEditable(col, row);
    },

    onEditorKey : function(field, e){
        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
        if(k == e.TAB){
            if(e.shiftKey){
                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);
            }
            e.stopEvent();
        }else if(k == e.ENTER){
            ed.completeEdit();
            e.stopEvent();
        }else if(k == e.ESC){
            e.stopEvent();
            ed.cancelEdit();
        }
        if(newCell){
            g.startEditing(newCell[0], newCell[1]);
        }
    }
});


The source code

// We are adding these custom layouts to a namespace that does not
// exist by default in Ext, so we have to add the namespace first:
Ext.ns('Ext.ux.layout');

/**
 * @class Ext.ux.layout.CenterLayout
 * @extends Ext.layout.FitLayout
 *
This is a very simple layout style used to center contents within a container.  This layout works within
 * nested containers and can also be used as expected as a Viewport layout to center the page layout.

 *
As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
 * the layout.  The layout does not require any config options, although the child panel contained within the
 * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
 * default, but you can specify autoHeight:true to allow it to autosize based on its content height.
 * Example usage:

 *

// The content panel is centered in the container
var p = new Ext.Panel({
    title: 'Center Layout',
    layout: 'ux.center',
    items: [{
        title: 'Centered Content',
        width: '75%',
        html: 'Some content'
    }]
});

// If you leave the title blank and specify no border
// you'll create a non-visual, structural panel just
// for centering the contents in the main container.
var p = new Ext.Panel({
    layout: 'ux.center',
    border: false,
    items: [{
        title: 'Centered Content',
        width: 300,
        autoHeight: true,
        html: 'Some content'
    }]
});

 */
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
    // private
    setItemSize : function(item, size){
        this.container.addClass('ux-layout-center');
        item.addClass('ux-layout-center-item');
        if(item && size.height > 0){
            if(item.width){
                size.width = item.width;
            }
            item.setSize(size);
        }
    }
});

Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;


The source code

/**
 * @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.
 * @constructor
 * @xtype chart
 */

 Ext.chart.Chart = Ext.extend(Ext.FlashComponent, {
    refreshBuffer: 100,

/**
     * @cfg {Object} chartStyle
     * Sets styles for this chart. Contains a number of default values. Modifying this property will override
     * the base styles on the chart.
     */
    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.
     */
    extraStyle: 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'
        );
        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){
        var s = [];
        Ext.each(styles, function(style){
            s.push(Ext.encode(style));
        });
        this.swf.setSeriesStyles(s);
    },

    setCategoryNames : function(names){
        this.swf.setCategoryNames(names);
    },

    setTipRenderer : function(fn){
        var chart = this;
        this.tipFnName = this.createFnProxy(function(item, index, series){
            var record = chart.store.getAt(index);
            return fn(chart, record, index, series);
        }, this.tipFnName);
        this.swf.setDataTipFunction(this.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){
            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 !== this.store && this.store.autoDestroy){
                this.store.destroy();
            }
        }
        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);
        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){
            this.setTipRenderer(this.tipRenderer);
        }
        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(){
        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);
    },

    createFnProxy : function(fn, old){
        if(old){
            delete window[old];
        }
        var fnName = "extFnProxy" + (++Ext.chart.Chart.PROXY_FN_ID);
        window[fnName] = fn;
        return fnName;
    },

    onDestroy: function(){
        Ext.chart.Chart.superclass.onDestroy.call(this);
        delete window[this.tipFnName];
    }
});
Ext.reg('chart', Ext.chart.Chart);
Ext.chart.Chart.PROXY_FN_ID = 0;

/**
 * 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.7.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);

        if(this.xField){
            this.setXField(this.xField);
        }
        if(this.yField){
            this.setYField(this.yField);
        }
        if(this.xAxis){
            this.setXAxis(this.xAxis);
        }
        if(this.yAxis){
            this.setYAxis(this.yAxis);
        }
    },

    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);
    },

    setYAxis : function(value){
        this.yAxis = this.createAxis('yAxis', value);
        this.swf.setVerticalAxis(this.yAxis);
    },

    createAxis : function(axis, value){
        var o = Ext.apply({}, value), oldFn = null;
        if(this[axis]){
            oldFn = this[axis].labelFunction;
        }
        if(o.labelRenderer){
            var fn = o.labelRenderer;
            o.labelFunction = this.createFnProxy(function(v){
                return fn(v);
            }, oldFn);
            delete o.labelRenderer;
        }
        return o;
    }
});
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
};

/**
 * @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"
});

/**
 * @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
});

/**
 * @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
});

/**
 * @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
});

/**
 * @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

Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

Ext.onReady(function(){

    var store = new Ext.data.JsonStore({
        fields:['name', 'visits', 'views'],
        data: [
            {name:'Jul 07', visits: 245000, views: 3000000},
            {name:'Aug 07', visits: 240000, views: 3500000},
            {name:'Sep 07', visits: 355000, views: 4000000},
            {name:'Oct 07', visits: 375000, views: 4200000},
            {name:'Nov 07', visits: 490000, views: 4500000},
            {name:'Dec 07', visits: 495000, views: 5800000},
            {name:'Jan 08', visits: 520000, views: 6000000},
            {name:'Feb 08', visits: 620000, views: 7500000}
        ]
    });

    // extra extra simple
    new Ext.Panel({
        title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
        renderTo: 'container',
        width:500,
        height:300,
        layout:'fit',

        items: {
            xtype: 'linechart',
            store: store,
            xField: 'name',
            yField: 'visits',
            listeners: {
                itemclick: function(o){
                    var rec = store.getAt(o.index);
                    Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
                }
            }
        }
    });

    // extra simple
    new Ext.Panel({
        iconCls:'chart',
        title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
        frame:true,
        renderTo: 'container',
        width:500,
        height:300,
        layout:'fit',

        items: {
            xtype: 'linechart',
            store: store,
            url: '../../resources/charts.swf',
            xField: 'name',
            yField: 'visits',
            yAxis: new Ext.chart.NumericAxis({
                displayName: 'Visits',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            tipRenderer : function(chart, record){
                return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
            }
        }
    });

    // more complex with a custom look
    new Ext.Panel({
        iconCls:'chart',
        title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
        frame:true,
        renderTo: 'container',
        width:500,
        height:300,
        layout:'fit',

        items: {
            xtype: 'columnchart',
            store: store,
            url:'../../resources/charts.swf',
            xField: 'name',
            yAxis: new Ext.chart.NumericAxis({
                displayName: 'Visits',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            tipRenderer : function(chart, record, index, series){
                if(series.yField == 'visits'){
                    return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
                }else{
                    return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
                }
            },
            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
                    }
                },
                xAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xeeeeee}
                },
                yAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xdfe8f6}
                }
            },
            series: [{
                type: 'column',
                displayName: 'Page Views',
                yField: 'views',
                style: {
                    image:'bar.gif',
                    mode: 'stretch',
                    color:0x99BBE8
                }
            },{
                type:'line',
                displayName: 'Visits',
                yField: 'visits',
                style: {
                    color: 0x15428B
                }
            }]
        }
    });
});


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    /*====================================================================
     * Individual checkbox/radio examples
     *====================================================================*/

    // Using checkbox/radio groups will generally be easier and more flexible than
    // using individual checkbox and radio controls, but this shows that you can
    // certainly do so if you only need a single control, or if you want to control
    // exactly where each check/radio goes within your layout.
    var individual = [{
        bodyStyle: 'padding-right:5px;',
        items: {
            xtype: 'fieldset',
            title: 'Individual Checkboxes',
            autoHeight: true,
            defaultType: 'checkbox', // each item will be a checkbox
            items: [{
                xtype: 'textfield',
                name: 'txt-test1',
                fieldLabel: 'Alignment Test'
            }, {
                fieldLabel: 'Favorite Animals',
                boxLabel: 'Dog',
                name: 'fav-animal-dog'
            }, {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Cat',
                name: 'fav-animal-cat'
            }, {
                checked: true,
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Monkey',
                name: 'fav-animal-monkey'
            }]
        }
    }, {
        bodyStyle: 'padding-left:5px;',
        items: {
            xtype: 'fieldset',
            title: 'Individual Radios',
            autoHeight: true,
            defaultType: 'radio', // each item will be a radio button
            items: [{
                xtype: 'textfield',
                name: 'txt-test2',
                fieldLabel: 'Alignment Test'
            }, {
                checked: true,
                fieldLabel: 'Favorite Color',
                boxLabel: 'Red',
                name: 'fav-color',
                inputValue: 'red'
            }, {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Blue',
                name: 'fav-color',
                inputValue: 'blue'
            }, {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Green',
                name: 'fav-color',
                inputValue: 'green'
            }]
        }
    }];

    /*====================================================================
     * CheckGroup example
     *====================================================================*/
    var checkGroup = {
        xtype: 'fieldset',
        title: 'Checkbox Groups (initially collapsed)',
        autoHeight: true,
        layout: 'form',
        collapsed: true,   // initially collapse the group
        collapsible: true,
        items: [{
            xtype: 'textfield',
            name: 'txt-test3',
            fieldLabel: 'Alignment Test',
            anchor: '95%'
        },{
            // Use the default, automatic layout to distribute the controls evenly
            // across a single row
            xtype: 'checkboxgroup',
            fieldLabel: 'Auto Layout',
            items: [
                {boxLabel: 'Item 1', name: 'cb-auto-1'},
                {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-auto-3'},
                {boxLabel: 'Item 4', name: 'cb-auto-4'},
                {boxLabel: 'Item 5', name: 'cb-auto-5'}
            ]
        },{
            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'}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Multi-Column (horizontal)',
            // Distribute controls across 3 even columns, filling each row
            // from left to right before starting the next row
            columns: 3,
            items: [
                {boxLabel: 'Item 1', name: 'cb-horiz-1'},
                {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-horiz-3'},
                {boxLabel: 'Item 4', name: 'cb-horiz-4'},
                {boxLabel: 'Item 5', name: 'cb-horiz-5'}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Multi-Column (vertical)',
            itemCls: 'x-check-group-alt',
            // Distribute controls across 3 even columns, filling each column
            // from top to bottom before starting the next column
            columns: 3,
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'cb-vert-1'},
                {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-vert-3'},
                {boxLabel: 'Item 4', name: 'cb-vert-4'},
                {boxLabel: 'Item 5', name: 'cb-vert-5'}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Multi-Column
(custom widths)',
            // Specify exact column widths (could also include float values for %)
            columns: [100, 100],
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
                {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
                {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
                {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
            ]
        },{
            xtype: 'checkboxgroup',
            itemCls: 'x-check-group-alt',
            fieldLabel: 'Custom Layout
(w/ validation)',
            allowBlank: false,
            anchor: '95%',
            items: [{
                // You can pass sub-item arrays along with width/columnWidth configs
                // ColumnLayout-style for complete layout control.  In this example we
                // only want one item in the middle column, which would not be possible
                // using the columns config.  We also want to make sure that our headings
                // end up at the top of each column as expected.
                columnWidth: '.25',
                items: [
                    {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'Item 1', name: 'cb-cust-1'},
                    {boxLabel: 'Item 2', name: 'cb-cust-2'}
                ]
            },{
                columnWidth: '.5',
                items: [
                    {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
                ]
            },{
                columnWidth: '.25',
                items: [
                    {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'Item 4', name: 'cb-cust-4'},
                    {boxLabel: 'Item 5', name: 'cb-cust-5'}
                ]
            }]
        }]
    };

    /*====================================================================
     * RadioGroup examples
     *====================================================================*/
    // NOTE: These radio examples use the exact same options as the checkbox ones
    // above, so the comments will not be repeated.  Please see comments above for
    // additional explanation on some config options.

    var radioGroup = {

        xtype: 'fieldset',
        title: 'Radio Groups',
        autoHeight: true,
        items: [{
            xtype: 'textfield',
            name: 'txt-test4',
            fieldLabel: 'Alignment Test',
            anchor: '95%'
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Auto Layout',
            items: [
                {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
                {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
                {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Single Column',
            itemCls: 'x-check-group-alt',
            columns: 1,
            items: [
                {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Multi-Column
(horiz. auto-width)',
            columns: 3,
            items: [
                {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
                {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
                {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Multi-Column
(vert. auto-width)',
            itemCls: 'x-check-group-alt',
            columns: 3,
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
                {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
                {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Multi-Column
(custom widths)',
            columns: [100, 100],
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
                {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
                {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
                {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
            ]
        },{
            xtype: 'radiogroup',
            itemCls: 'x-check-group-alt',
            fieldLabel: 'Custom Layout
(w/ validation)',
            allowBlank: false,
            anchor: '95%',
            items: [{
                columnWidth: '.25',
                items: [
                    {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
                ]
            },{
                columnWidth: '.5',
                items: [
                    {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
                ]
            },{
                columnWidth: '.25',
                items: [
                    {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
                    {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
                ]
            }]
        }]
    };

    // combine all that into one huge form
    var fp = new Ext.FormPanel({
        title: 'Check/Radio Groups Example',
        frame: true,
        labelWidth: 110,
        width: 600,
        renderTo:'form-ct',
        bodyStyle: 'padding:0 10px 0;',
        items: [
            {
                layout: 'column',
                border: false,
                // defaults are applied to all child items unless otherwise specified by child item
                defaults: {
                    columnWidth: '.5',
                    border: false
                },
                items: individual
            },
            checkGroup,
            radioGroup
        ],
        buttons: [{
            text: 'Save',
            handler: function(){
               if(fp.getForm().isValid()){
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server:
'+
                        fp.getForm().getValues(true).replace(/&/g,', '));
                }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });
});


The source code

Ext.onReady(function(){
    var tree = new Ext.tree.TreePanel({
        renderTo:'tree-div',
        title: 'My Task List',
        height: 300,
        width: 400,
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        rootVisible: false,
        frame: true,
        root: {
            nodeType: 'async'
        },

        // auto create TreeLoader
        dataUrl: 'check-nodes.json',

        listeners: {
            'checkchange': function(node, checked){
                if(checked){
                    node.getUI().addClass('complete');
                }else{
                    node.getUI().removeClass('complete');
                }
            }
        },

        buttons: [{
            text: 'Get Completed Tasks',
            handler: function(){
                var msg = '', selNodes = tree.getChecked();
                Ext.each(selNodes, function(node){
                    if(msg.length > 0){
                        msg += ', ';
                    }
                    msg += node.text;
                });
                Ext.Msg.show({
                    title: 'Completed Tasks',
                    msg: msg.length > 0 ? msg : 'None',
                    icon: Ext.Msg.INFO,
                    minWidth: 200,
                    buttons: Ext.Msg.OK
                });
            }
        }]
    });

    tree.getRootNode().expand(true);
});


The source code

Ext.ns('Ext.ux.MultiCombo');

/**
 * Checkable
 * @plugin
 */
Ext.ux.MultiCombo.Checkable = function(cfg) {
    Ext.apply(this, cfg);
};
Ext.ux.MultiCombo.Checkable.prototype = {

/**
     * @cfg {String} checkSelector DomQuery config for locating checkbox
     */
    checkSelector: 'input[type=checkbox]',

/**
     * @cfg {String} itemSelector The itemSelector used with Combo's internal DataView [x-combo-list]
     */
    itemSelector : 'x-combo-list',

/**
     * @cfg {String} cls
     */
    cls: 'combo-checkable',

/**
     * @cfg {String} selectAllText The "SELECT ALL" phrase [Select All]
     */
    selectAllText: 'Select All',

/**
     * @cfg {String} clearAllText the text to display for "clear all" link
     */
    clearAllText : 'clear all',

/**
     * @cfg {String} separatorHtml arbitrary html rendered after Checkable controls.  Can be used to add an
     * html separator markup.
     */
    separatorHtml : '',

    // private {Boolean} checked
    checked : null,

    init : function(combo) {
        this.combo = combo;
        var checkable = this;
        var id = Ext.id();
        var cls = combo.itemSelector || this.itemSelector;

        if (!combo.tpl) {
            combo.tpl =['','
{'+combo.displayField+'}
','']       .  join('');
        }
        combo.tpl = [
            '
',
                '',
                    ' ',
                '',
                ' (' + this.clearAllText + ')',
            '
',
            this.separatorHtml
        ].join('') + combo.tpl.replace(new RegExp('({'+combo.displayField+'})'), "checked /> ");

        combo.on('initview', function(c, dv) {
            dv.on('containerclick', this.onContainerClick.createDelegate(this));
            dv.on('selectionchange', this.onSelectionChange.createDelegate(this));
            dv.el.on('mouseover', this.onViewOver, this);
        },this);
        combo.on('select', this.onSelect.createDelegate(this));
    },

    onViewOver : function(ev, node){
        var target = ev.getTarget('.' + this.cls, 5);
        if (target) {
            this.combo.clearHighlight();
            Ext.fly(target).addClass(this.combo.highlightClass);
        }
        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
            return;
        }
        return;
    },

    onSelect : function(rec, index) {
        // anything?
    },

/**
     * getCheckbox
     * @return {DomNode}
     */
    getCheckbox : function() {
        return this.combo.view.el.child('.'+this.cls+' '+this.checkSelector, true);
    },

/**
     * onSelectChange Fired by MultiCombo
     * @param {Object} dv
     * @param {Object} rs
     */
    onSelectionChange : function(dv, rs) {
        this.checked = (rs.length > 0 && rs.length == this.combo.store.getCount()) ? true : false;
        this.getCheckbox().checked = this.checked;

        var selector = this.checkSelector;
        setTimeout(function() {
            dv.el.select(dv.itemSelector + ' ' + selector).each(function(f) {
                f.dom.checked = false;
            });
            dv.el.select('.' + dv.selectedClass + ' ' + selector).each(function(f) {
                f.dom.checked = true;
            });
        },1);
    },

/**
     * selectNext Called by MultiCombo.  use this to apply hover-class to this row.
     * @param {Object} sender
     */
    selectNext: function(sender) {
        sender.view.el.child('.' + this.cls).addClass(sender.highlightClass);
    },

/**
     * selectPrev Called by MultiCombo, use this to apply hover class to row.
     * @param {Object} sender
     */
    selectPrev : function(sender) {
        sender.view.el.child('.' + this.cls).addClass(sender.highlightClass);
    },

/**
     * onEnter Called by MultiCombo
     * @param {Object} sender
     */
    onEnter : function(sender) {
        this.setChecked(!this.checked);
    },

/**
     * onContainerClick Fired by MultiCombo
     * @param {Object} dv
     * @param {Object} ev
     */
    onContainerClick : function(dv, ev) {
        var btnClearAll = ev.getTarget('.'+this.cls+'-clear-all');
        if (btnClearAll) {
            this.clearAll();
        }
        else {
            this.setChecked(!this.checked);
        }
        return false;
    },

    // private selectAll
    selectAll : function() {
        var value = [];
        this.combo.store.each(function(r) { value.push(r.data[this.combo.valueField]); },this);
        this.combo.setValue(value);
        this.combo.selectByValue(this.combo.getValue());
        this.combo.focus();
    },

    // private clearAll
    clearAll : function() {
        this.combo.updateValue([]);
        this.combo.selectByValue([]);
        this.combo.view.clearSelections();
        this.combo.focus();
        this.combo.fireEvent('clearall', this.combo);
    },

/**
     * setChecked
     * @param {Object} v
     */
    setChecked : function(v) {
        if (v == this.checked) {
            return;
        }
        this.checked = v;
        this.getCheckbox().checked = this.checked;
        if (this.checked == true) {
            this.selectAll();
        }
        else {
            this.clearAll();
        }
    }
}


The source code

/**
 * @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/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, 'click', this.onClick, this);
        this.mon(this.el, 'change', this.onClick, this);
    },

    // private
    getResizeEl : function(){
        return this.wrap;
    },

    // private
    getPositionEl : function(){
        return this.wrap;
    },

/**
     * @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;
        }
    },

    // 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 false;
    },

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

/**
 * @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'
        );
        Ext.form.CheckboxGroup.superclass.initComponent.call(this);
    },

    // private
    onRender : function(ct, position){
        if(!this.el){
            var panelCfg = {
                cls: this.groupCls,
                layout: 'column',
                border: false,
                renderTo: ct
            };
            var colCfg = {
                defaultType: this.defaultType,
                layout: 'form',
                border: false,
                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/**
     * {@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(id, value){
        if(this.rendered){
            if(arguments.length == 1){
                if(Ext.isArray(id)){
                    //an array of boolean values
                    Ext.each(id, function(val, idx){
                        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);
                }
            }
        }else{
            this.values = arguments;
        }
        return this;
    },

    // private
    onDestroy: function(){
        Ext.destroy(this.panel);
        Ext.form.CheckboxGroup.superclass.onDestroy.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
    eachItem: function(fn){
        if(this.items && this.items.each){
            this.items.each(fn, this);
        }
    },

/**
     * @cfg {String} name
     * @hide
     */

/**
     * @method initValue
     * @hide
     */
    initValue : Ext.emptyFn,

/**
     * @method getValue
     * @hide
     */
    getValue : Ext.emptyFn,

/**
     * @method getRawValue
     * @hide
     */
    getRawValue : Ext.emptyFn,

/**
     * @method setRawValue
     * @hide
     */
    setRawValue : Ext.emptyFn

});

Ext.reg('checkboxgroup', Ext.form.CheckboxGroup);


The source code

/**
 * @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,
    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);
    },

    // 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');
            if(row){
                var index = row.rowIndex;
                if(this.isSelected(index)){
                    this.deselectRow(index);
                }else{
                    this.selectRow(index, true);
                }
            }
        }
    },

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

Ext.ns('Ext.ux.grid');

/**
 * @class Ext.ux.grid.CheckColumn
 * @extends Object
 * GridPanel plugin to add a column with check boxes to a grid.
 *
Example usage:

 *

// create the column
var checkColumn = new Ext.grid.CheckColumn({
   header: 'Indoor?',
   dataIndex: 'indoor',
   id: 'check',
   width: 55
});

// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
       header: 'Foo',
       ...
    },
    checkColumn
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
    ...
    cm: cm,
    plugins: [checkColumn], // include plugin
    ...
});
 *

 * In addition to storing a Boolean value within the record data, this
 * class toggles a css class between 'x-grid3-check-col' and
 * 'x-grid3-check-col-on' to alter the background image used for
 * a column.
 */
Ext.ux.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype ={
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    onMouseDown : function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td';
        return '

';
    }
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;


The source code

/**
 * @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 = function(config){
    Ext.menu.CheckItem.superclass.constructor.call(this, config);
    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);
};
Ext.extend(Ext.menu.CheckItem, 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",

    // 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){
        if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
            if(this.container){
                this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
            }
            this.checked = state;
            if(suppressEvent !== true){
                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

Ext.onReady(function(){
    var chooser, btn;

    function insertImage(data){
        Ext.DomHelper.append('images', {
            tag: 'img', src: data.url, style:'margin:10px;visibility:hidden;'
        }, true).show(true).frame();
        btn.focus();
    };

    function choose(btn){
        if(!chooser){
            chooser = new ImageChooser({
                url:'get-images.php',
                width:515,
                height:350
            });
        }
        chooser.show(btn.getEl(), insertImage);
    };

    btn = new Ext.Button({
        text: "Insert Image",
        handler: choose,
        renderTo: 'buttons'
    });
});


The source code

var ImageChooser = function(config){
    this.config = config;
}

ImageChooser.prototype = {
    // cache data by image name for easy lookup
    lookup : {},

    show : function(el, callback){
        if(!this.win){
            this.initTemplates();

            this.store = new Ext.data.JsonStore({
                url: this.config.url,
                root: 'images',
                fields: [
                    'name', 'url',
                    {name:'size', type: 'float'},
                    {name:'lastmod', type:'date', dateFormat:'timestamp'}
                ],
                listeners: {
                    'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
                }
            });
            this.store.load();

            var formatSize = function(data){
                if(data.size < 1024) {
                    return data.size + " bytes";
                } else {
                    return (Math.round(((data.size*10) / 1024))/10) + " KB";
                }
            };

            var formatData = function(data){
                data.shortName = data.name.ellipse(15);
                data.sizeString = formatSize(data);
                data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
                this.lookup[data.name] = data;
                return data;
            };

            this.view = new Ext.DataView({
                tpl: this.thumbTemplate,
                singleSelect: true,
                overClass:'x-view-over',
                itemSelector: 'div.thumb-wrap',
                emptyText : '
No images match the specified filter
',
                store: this.store,
                listeners: {
                    'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
                    'dblclick'       : {fn:this.doCallback, scope:this},
                    'loadexception'  : {fn:this.onLoadException, scope:this},
                    'beforeselect'   : {fn:function(view){
                        return view.store.getRange().length > 0;
                    }}
                },
                prepareData: formatData.createDelegate(this)
            });

            var cfg = {
                title: 'Choose an Image',
                id: 'img-chooser-dlg',
                layout: 'border',
                minWidth: 500,
                minHeight: 300,
                modal: true,
                closeAction: 'hide',
                border: false,
                items:[{
                    id: 'img-chooser-view',
                    region: 'center',
                    autoScroll: true,
                    items: this.view,
                    tbar:[{
                        text: 'Filter:'
                    },{
                        xtype: 'textfield',
                        id: 'filter',
                        selectOnFocus: true,
                        width: 100,
                        listeners: {
                            'render': {fn:function(){
                                Ext.getCmp('filter').getEl().on('keyup', function(){
                                    this.filter();
                                }, this, {buffer:500});
                            }, scope:this}
                        }
                    }, ' ', '-', {
                        text: 'Sort By:'
                    }, {
                        id: 'sortSelect',
                        xtype: 'combo',
                        typeAhead: true,
                        triggerAction: 'all',
                        width: 100,
                        editable: false,
                        mode: 'local',
                        displayField: 'desc',
                        valueField: 'name',
                        lazyInit: false,
                        value: 'name',
                        store: new Ext.data.ArrayStore({
                            fields: ['name', 'desc'],
                            data : [['name', 'Name'],['size', 'File Size'],['lastmod', 'Last Modified']]
                        }),
                        listeners: {
                            'select': {fn:this.sortImages, scope:this}
                        }
                    }]
                },{
                    id: 'img-detail-panel',
                    region: 'east',
                    split: true,
                    width: 150,
                    minWidth: 150,
                    maxWidth: 250
                }],
                buttons: [{
                    id: 'ok-btn',
                    text: 'OK',
                    handler: this.doCallback,
                    scope: this
                },{
                    text: 'Cancel',
                    handler: function(){ this.win.hide(); },
                    scope: this
                }],
                keys: {
                    key: 27, // Esc key
                    handler: function(){ this.win.hide(); },
                    scope: this
                }
            };
            Ext.apply(cfg, this.config);
            this.win = new Ext.Window(cfg);
        }

        this.reset();
        this.win.show(el);
        this.callback = callback;
        this.animateTarget = el;
    },

    initTemplates : function(){
        this.thumbTemplate = new Ext.XTemplate(
            '',
                '
',
                '

',
                '{shortName}
',
            ''
        );
        this.thumbTemplate.compile();

        this.detailsTemplate = new Ext.XTemplate(
            '
',
                '',
                    '
',
                    'Image Name:',
                    '{name}',
                    'Size:',
                    '{sizeString}',
                    'Last Modified:',
                    '{dateString}
',
                '',
            '
'
        );
        this.detailsTemplate.compile();
    },

    showDetails : function(){
        var selNode = this.view.getSelectedNodes();
        var detailEl = Ext.getCmp('img-detail-panel').body;
        if(selNode && selNode.length > 0){
            selNode = selNode[0];
            Ext.getCmp('ok-btn').enable();
            var data = this.lookup[selNode.id];
            detailEl.hide();
            this.detailsTemplate.overwrite(detailEl, data);
            detailEl.slideIn('l', {stopFx:true,duration:.2});
        }else{
            Ext.getCmp('ok-btn').disable();
            detailEl.update('');
        }
    },

    filter : function(){
        var filter = Ext.getCmp('filter');
        this.view.store.filter('name', filter.getValue());
        this.view.select(0);
    },

    sortImages : function(){
        var v = Ext.getCmp('sortSelect').getValue();
        this.view.store.sort(v, v == 'name' ? 'asc' : 'desc');
        this.view.select(0);
    },

    reset : function(){
        if(this.win.rendered){
            Ext.getCmp('filter').reset();
            this.view.getEl().dom.scrollTop = 0;
        }
        this.view.store.clearFilter();
        this.view.select(0);
    },

    doCallback : function(){
        var selNode = this.view.getSelectedNodes()[0];
        var callback = this.callback;
        var lookup = this.lookup;
        this.win.hide(this.animateTarget, function(){
            if(selNode && callback){
                var data = lookup[selNode.id];
                callback(data);
            }
        });
    },

    onLoadException : function(v,o){
        this.view.getEl().update('
Error loading images.
');
    }
};

String.prototype.ellipse = function(maxLength){
    if(this.length > maxLength){
        return this.substr(0, maxLength-3) + '...';
    }
    return this;
};


The source code

Ext.BLANK_IMAGE_URL = 'images/s.gif';

Task = Ext.data.Record.create([
    {name: 'taskId', type:'string'},
    {name: 'title', type:'string'},
    {name: 'category', type:'string'},
    {name: 'description', type:'string'},
    {name: 'dueDate', type:'date', dateFormat: 'Y-m-d H:i:s'},
    {name: 'completed', type:'boolean'}
]);

Task.nextId = function(){
    // if the time isn't unique enough, the addition
    // of random chars should be
    var t = String(new Date().getTime()).substr(4);
    var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for(var i = 0; i < 4; i++){
        t += s.charAt(Math.floor(Math.random()*26));
    }
    return t;
}

// The main grid's store
TaskStore = function(conn){
    TaskStore.superclass.constructor.call(this, {
        sortInfo:{field: 'dueDate', direction: "ASC"},
        groupField:'dueDate',
        taskFilter: 'all',
        reader: new Ext.data.JsonReader({
            idProperty: 'taskId'
        }, Task)
    });

    this.proxy = new Ext.data.SqlDB.Proxy(conn, 'task', 'taskId', this);

    if(window.google){ // google needs the table created
        this.proxy.on('beforeload', this.prepareTable, conn);
    }

    this.addEvents({newcategory: true});
};

Ext.extend(TaskStore, Ext.data.GroupingStore, {
    applyFilter : function(filter){
        if(filter !== undefined){
            this.taskFilter = filter;
        }
        var value = this.taskFilter;
        if(value == 'all'){
            return this.clearFilter();
        }
        return this.filterBy(function(item){
            return item.data.completed === value;
        });
    },

    addTask : function(data){
        this.suspendEvents();
        this.clearFilter();
        this.resumeEvents();
        this.loadData([data], true);
        this.suspendEvents();
        this.applyFilter();
        this.applyGrouping(true);
        this.resumeEvents();
        this.fireEvent('datachanged', this);
        this.fireEvent('newcategory', data.category);
    },

    prepareTable : function(){
        try{
        this.createTable({
            name: 'task',
            key: 'taskId',
            fields: Task.prototype.fields
        });
        }catch(e){console.log(e)}
    }
});

// The store for Categories
CategoryStore = function(){
    CategoryStore.superclass.constructor.call(this, {
        expandData: true,
        data: [],
        fields:[{name: 'text', type:'string'}],
        sortInfo:{field:'text', direction:'ASC'},
        id: 0
    });
}

Ext.extend(CategoryStore, Ext.data.ArrayStore, {
    init : function(store){
        var cats = store.collect('category', false, true);
        this.loadData(cats);
    },

    addCategory : function(cat){
        if(cat && this.indexOfId(cat) === -1){
            this.clearFilter(true);
            this.loadData([cat], true);
            this.applySort();
        }
    }
});

// Grid column plugin that does the complete/active button in the left-most column
CompleteColumn = function(){
    var grid;

    function getRecord(t){
        var index = grid.getView().findRowIndex(t);
        return grid.store.getAt(index);
    }

    function onMouseDown(e, t){
        if(Ext.fly(t).hasClass('task-check')){
            e.stopEvent();
            var record = getRecord(t);
            record.set('completed', !record.data.completed);
            grid.store.applyFilter();
        }
    }

    function onMouseOver(e, t){
        if(Ext.fly(t).hasClass('task-check')){
            Ext.fly(t.parentNode).addClass('task-check-over');
        }
    }

    function onMouseOut(e, t){
        if(Ext.fly(t).hasClass('task-check')){
            Ext.fly(t.parentNode).removeClass('task-check-over');
        }
    }

    Ext.apply(this, {
        width: 22,
        header: '
',
        menuDisabled:true,
        fixed: true,
        id: 'task-col',
        renderer: function(){
            return '
';
        },
        init : function(xg){
            grid = xg;
            grid.on('render', function(){
                var view = grid.getView();
                view.mainBody.on('mousedown', onMouseDown);
                view.mainBody.on('mouseover', onMouseOver);
                view.mainBody.on('mouseout', onMouseOut);
            });
        }
    });
};


The source code

/**
 @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(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();
    },

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

// Create and append to the body, a Panel containing a block of code from the passed URL
function createCodePanel(url, title) {
    var panel = new Ext.Panel({
        hideMode: 'visibility',
        title: title,
        width: 750,
        style: {
            'margin-top': '10px'
        },
        hideCollapseTool: true,
        titleCollapse: true,
        collapsible: true,
        collapsed: true,
        autoScroll: true,
        renderTo: Ext.getBody(),
        listeners: {
            render: function(p) {
                p.getUpdater().setRenderer({
                    render: Ext.isIE ? function(el, response, scripts, callback) {
                        el.update('');
                        var np = el.createChild({
                            tag: 'pre',
                            cls: 'code',
                            cn: {
                                tag: 'code'
                            }
                        });
                        var t = response.responseText.split("\n");
                        var c = np.child('code', true);
                        for (var i = 0, l = t.length; i < l; i++) {
                            var pre = document.createElement('pre');
                            if (t[i].length) {
                                pre.appendChild(document.createTextNode(t[i]));
                                c.appendChild(pre);
                            } else if (i < (l - 1)) {
                                c.appendChild(document.createElement("br"));
                            }

                        }
                    } : function(el, response, scripts, callback) {
                        el.update('');
                        el.createChild({
                            tag: 'pre',
                            cls: 'code',
                            cn: {
                                tag: 'code',
                                html: response.responseText
                            }
                        });
                    }
                });
            },
            beforeexpand: function(p) {
                p.load(url);
            },
            single: true
        }
    });
}

// Patch to allow XHR to local files. From hendricd: http://extjs.com/forum/member.php?u=8730
Ext.apply( Ext.lib.Ajax ,
{ forceActiveX:false,
  createXhrObject:function(transactionId)
        {
            var obj={  status:{isError:false}
                     , tId:transactionId}, http;
            try
            {

        if(Ext.isIE7 && !!this.forceActiveX){throw("IE7forceActiveX");}

        obj.conn= new XMLHttpRequest();

            }
            catch(e)
            {
                for (var i = 0; i < this.activeX.length; ++i) {
                    try
                    {
                        obj.conn= new ActiveXObject(this.activeX[i]);

                        break;
                    }
                    catch(e) {
                    }
                }
            }
            finally
            {
                obj.status.isError = typeof(obj.conn) === undefined;
            }
            return obj;

        },

        getHttpStatus: function(reqObj){

            var statObj = {  status:0
                    ,statusText:''
                    ,isError:false
                    ,isLocal:false
                    ,isOK:false
                    ,error:null};

            try {
                if(!reqObj)throw('noobj');
                statObj.status = reqObj.status;

                statObj.isLocal = !reqObj.status && location.protocol == "file:" ||
                           Ext.isSafari && reqObj.status === undefined;

                statObj.isOK = (statObj.isLocal || (statObj.status > 199 && statObj.status < 300));
                statObj.statusText = reqObj.statusText || '';
            } catch(e){ //status may not avail/valid yet (or called too early).
              }

            return statObj;

        },
        handleTransactionResponse:function(o, callback, isAbort)
        {

        callback = callback || {};
        var responseObject=null;

         if(!o.status.isError){
            o.status = this.getHttpStatus(o.conn);
             /* create and enhance the response with proper status and XMLDOM if necessary */
             responseObject = this.createResponseObject(o, callback.argument);
         }

          if(o.status.isError){ /* checked again in case exception was raised - ActiveX was disabled during XML-DOM creation? */
              // And mixin everything the XHR object had to offer as well
           responseObject = Ext.applyIf(responseObject||{},this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false)));

         }

         responseObject.options = o.options;
         responseObject.stat = o.status;

         if (o.status.isOK && !o.status.isError) {
            if (callback.success) {
                if (!callback.scope) {
                    callback.success(responseObject);
                }
                else {
                    callback.success.apply(callback.scope, [responseObject]);
                }
            }
          } else {

            if (callback.failure) {
                if (!callback.scope) {
                    callback.failure(responseObject);
                }
                else {
                    callback.failure.apply(callback.scope, [responseObject]);
                }
            }

         }

        if(o.options.async){
            this.releaseObject(o);
            responseObject = null;
        }else{
            this.releaseObject(o);
            return responseObject;
        }

    },
    createResponseObject:function(o, callbackArg)
    {
        var obj = {};
        var headerObj = {},headerStr='';

        try{  //to catch bad encoding problems here
        obj.responseText = o.conn.responseText;
        }catch(e){obj.responseText ='';}

        obj.responseXML = o.conn.responseXML;

        try{
        headerStr = o.conn.getAllResponseHeaders()||'';
        } catch(e){}

        if(o.status.isLocal){

           o.status.isOK = ((o.status.status = (!!obj.responseText.length)?200:404) == 200);

           if(o.status.isOK && (!obj.responseXML || obj.responseXML.childNodes.length == 0)){

            var xdoc=null;
            try{   //ActiveX may be disabled
                if(typeof(DOMParser) == 'undefined'){
                    xdoc=new ActiveXObject("Microsoft.XMLDOM");
                    xdoc.async="false";
                    xdoc.loadXML(obj.responseText);

                }else{
                    try{  //Opera 9 will fail parsing non-XML content, so trap here.
                        var domParser = new DOMParser();
                        xdoc = domParser.parseFromString(obj.responseText, 'application\/xml');
                    }catch(ex){}
                    finally{domParser = null;}

                }
            } catch(ex){
                o.status.isError = true;
                o.status.error = ex;

                }

            obj.responseXML = xdoc;
            }

            if(obj.responseXML){

            var parseBad = (obj.responseXML.parseError || 0) != 0 || obj.responseXML.childNodes.length == 0;
            if(!parseBad){
                headerStr = 'Content-Type: ' + (obj.responseXML.contentType || 'text\/xml') + '\n' + headerStr ;
                }
            }

        }

       var header = headerStr.split('\n');
       for (var i = 0; i < header.length; i++) {
            var delimitPos = header[i].indexOf(':');
            if (delimitPos != -1) {
            headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
            }
        }

        obj.tId = o.tId;
        obj.status = o.status.status;
        obj.statusText = o.status.statusText;
        obj.getResponseHeader = headerObj;
        obj.getAllResponseHeaders = headerStr;
        obj.stat = o.status

        if (typeof callbackArg !== undefined) {
        obj.argument = callbackArg;
        }

        return obj;
        },

    request : function(method, uri, cb, data, options) {

                 options = Ext.apply({async:true,
               headers:false,
               userId:null,
               password:null,
               xmlData:null }, options||{});

                    var hs = options.headers;
                    if(hs){
                        for(var h in hs){
                            if(hs.hasOwnProperty(h)){
                                this.initHeader(h, hs[h], false);
                            }
                        }
                    }
                    if(options.xmlData){
                        this.initHeader('Content-Type', 'text/xml', false);
                        method = 'POST';
                        data = options.xmlData;
                    }

            return this.makeRequest(method, uri, cb, data, options);

        },
        asyncRequest:function(method, uri, callback, postData)
        {
            var o = this.getConnectionObject();

            if (!o || o.status.isError) {
                return null;
            }
            else {
                o.options = options;
                try{
            o.conn.open(method, uri, true);
        } catch(ex){
            o.status.isError = true;
            o.status.error = ex;
            return Ext.apply(o,this.handleTransactionResponse(o, callback));

        }

        if (this.useDefaultXhrHeader) {
            if (!this.defaultHeaders['X-Requested-With']) {
            this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
            }
        }

        if(postData && this.useDefaultHeader){
            this.initHeader('Content-Type', this.defaultPostHeader);
        }

         if (this.hasDefaultHeaders || this.hasHeaders) {
            this.setHeader(o);
        }

        this.handleReadyState(o, callback);

        try{ o.conn.send(postData || null);
        } catch(ex){
            o.status.isError=true;
            o.status.error = ex;
            return Ext.apply(o,this.handleTransactionResponse(o, callback));
        }

        return o;
            }
        },

        makeRequest:function(method, uri, callback, postData, options)
        {
            var o = this.getConnectionObject();

            if (!o || o.status.isError) {
                return null;
            }
            else {
                o.options = options;
                try{
            o.conn.open(method, uri, options.async, options.userId, options.password);
        } catch(ex){
            o.status.isError = true;
            o.status.error = ex;
            var r=this.handleTransactionResponse(o, callback);
            return Ext.apply(o,r);
        }

        if (this.useDefaultXhrHeader) {
            if (!this.defaultHeaders['X-Requested-With']) {
            this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
            }
        }

        if(postData && this.useDefaultHeader){
            this.initHeader('Content-Type', this.defaultPostHeader);
        }

         if (this.hasDefaultHeaders || this.hasHeaders) {
            this.setHeader(o);
        }

        if(o.options.async){ //Timers won't work here as it's a blocking call
            this.handleReadyState(o, callback);
        }

        try{ o.conn.send(postData || null);
        } catch(ex){
            //Ext.apply(o,this.handleTransactionResponse(o, callback));
        }

        return options.async?o:Ext.apply(o,this.handleTransactionResponse(o, callback));
            }
   }});

Ext.lib.Ajax.forceActiveX = (document.location.protocol == 'file:');/* or other true/false mechanism */


The source code

/**
 * @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,

/**
     * @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(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

/**
 * @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 = function(config){
    Ext.ColorPalette.superclass.constructor.call(this, config);
    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);
    }
};
Ext.extend(Ext.ColorPalette, 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,
    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
    onRender : function(container, position){
        var t = this.tpl || new Ext.XTemplate(
            ' '
        );
        var el = document.createElement('div');
        el.id = this.getId();
        el.className = this.itemCls;
        t.overwrite(el, this.colors);
        container.dom.insertBefore(el, position);
        this.el = Ext.get(el);
        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

Ext.onReady(function(){
    var tree = new Ext.ux.tree.ColumnTree({
        width: 550,
        height: 300,
        rootVisible:false,
        autoScroll:true,
        title: 'Example Tasks',
        renderTo: Ext.getBody(),

        columns:[{
            header:'Task',
            width:330,
            dataIndex:'task'
        },{
            header:'Duration',
            width:100,
            dataIndex:'duration'
        },{
            header:'Assigned To',
            width:100,
            dataIndex:'user'
        }],

        loader: new Ext.tree.TreeLoader({
            dataUrl:'column-data.json',
            uiProviders:{
                'col': Ext.ux.tree.ColumnNodeUI
            }
        }),

        root: new Ext.tree.AsyncTreeNode({
            text:'Tasks'
        })
    });
});


The source code

/**
 * @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 = function(config){
    Ext.apply(this, config);

    if(typeof this.renderer == 'string'){
        this.renderer = Ext.util.Format[this.renderer];
    } else if(Ext.isObject(this.renderer)){
        this.scope = this.renderer.scope;
        this.renderer = this.renderer.fn;
    }
    this.renderer = this.renderer.createDelegate(this.scope || config);

    if(this.id === undefined){
        this.id = ++Ext.grid.Column.AUTO_ID;
    }
    if(this.editor){
        this.editor = Ext.create(this.editor, 'textfield');
    }
};

Ext.grid.Column.AUTO_ID = 0;

Ext.grid.Column.prototype = {

/**
     * @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 #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 hide the column. Defaults to false.
     */

    /**
     * @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. Used by ColumnModel to avoid reprocessing
    isColumn : true,

    /**
     * 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(typeof value == 'string' && value.length < 1){
            return ' ';
        }
        return value;
    },

    // private
    getEditor: function(rowIndex){
        return this.editable !== false ? this.editor : null;
    },

    /**
     * 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 editor = this.getEditor(rowIndex);
        if(editor){
            if(!editor.startEdit){
                if(!editor.gridEditor){
                    editor.gridEditor = new Ext.grid.GridEditor(editor);
                }
                return editor.gridEditor;
            }else if(editor.startEdit){
                return editor;
            }
        }
        return null;
    }
};

    /**
 * @class Ext.grid.BooleanColumn
 * @extends Ext.grid.Column
 *
    A Column definition class which renders boolean data fields.  See the {@link Ext.grid.ColumnModel#xtype xtype}
 * config option of {@link Ext.grid.ColumnModel} 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.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} 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.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel}
 * 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.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} 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 = typeof Ext.isObject(this.tpl) ? 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

// private
// This is a support class used internally by the Grid components
Ext.grid.HeaderDragZone = 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;
};
Ext.extend(Ext.grid.HeaderDragZone, Ext.dd.DragZone, {
    maxDragWidth: 120,
    getDragData : function(e){
        var t = Ext.lib.Event.getTarget(e);
        var h = this.view.findHeaderCell(t);
        if(h){
            return {ddel: h.firstChild, header:h};
        }
        return false;
    },

    onInitDrag : function(e){
        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(){
        var v = this.view;
        setTimeout(function(){
            v.headersDisabled = false;
        }, 50);
    },

    afterInvalidDrop : function(){
        var v = this.view;
        setTimeout(function(){
            v.headersDisabled = false;
        }, 50);
    }
});

// private
// This is a support class used internally by the Grid components
Ext.grid.HeaderDropZone = 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);
};
Ext.extend(Ext.grid.HeaderDropZone, Ext.dd.DropZone, {
    proxyOffsets : [-4, -9],
    fly: Ext.Element.fly,

    getTargetFromEvent : function(e){
        var t = Ext.lib.Event.getTarget(e);
        var 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);
        var r = Ext.lib.Dom.getRegion(n.firstChild);
        var 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;
            var x = Ext.lib.Event.getPageX(e);
            var r = Ext.lib.Dom.getRegion(n.firstChild);
            var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
            var oldIndex = this.view.getCellIndex(h);
            var newIndex = this.view.getCellIndex(n);
            if(pt == "after"){
                newIndex++;
            }
            if(oldIndex < newIndex){
                newIndex--;
            }
            cm.moveColumn(oldIndex, newIndex);
            this.grid.fireEvent("columnmove", oldIndex, newIndex);
            return true;
        }
        return false;
    }
});

Ext.grid.GridView.ColumnDragZone = function(grid, hd){
    Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
    this.proxy.el.addClass('x-grid3-col-dd');
};

Ext.extend(Ext.grid.GridView.ColumnDragZone, Ext.grid.HeaderDragZone, {
    handleMouseDown : function(e){

    },

    callHandleMouseDown : function(e){
        Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
    }
});


The source code

/**
 * @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,

    extraCls: 'x-column',

    scrollOffset : 0,

    // private
    isValidParent : function(c, target){
        return (c.getPositionEl ? c.getPositionEl() : c.getEl()).dom.parentNode == this.innerCt.dom;
    },

    // private
    onLayout : function(ct, target){
        var cs = ct.items.items, len = cs.length, c, i;

        if(!this.innerCt){
            target.addClass('x-column-layout-ct');

            // 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'});
        }
        this.renderAll(ct, this.innerCt);

        var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();

        if(size.width < 1 && size.height < 1){ // display none?
            return;
        }

        var w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            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];
            if(!c.columnWidth){
                pw -= (c.getSize().width + c.getEl().getMargins('lr'));
            }
        }

        pw = pw < 0 ? 0 : pw;

        for(i = 0; i < len; i++){
            c = cs[i];
            if(c.columnWidth){
                c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr'));
            }
        }
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout;


The source code

/**
 * @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).  Field's 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 = 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);
};
Ext.extend(Ext.grid.ColumnModel, 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}.
     */

/**
     * 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.editor){
                    c.editor.destroy();
                }
            }
        }

        // backward compatibility
        this.defaults = Ext.apply({
            width: this.defaultWidth,
            sortable: this.defaultSortable
        }, this.defaults);

        this.config = config;
        this.lookup = {};
        // if no id, create one
        for(i = 0, len = config.length; i < len; i++){
            c = Ext.applyIf(config[i], this.defaults);
            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
     * @param {Object} scope (optional)
     * @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;
    },

/**
     * 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){
        return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
    },

/**
     * 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 hidden.
     * @param {Number} colIndex The column index
     * @return {Boolean}
     */
    isHidden : function(colIndex){
        return this.config[colIndex].hidden;
    },

/**
     * Returns true if the column width cannot be changed
     */
    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){
        Ext.destroy(this.config[col].editor);
        this.config[col].editor = editor;
    },

/**
     * Destroys this column model by purging any event listeners, and removing any editors.
     */
    destroy : function(){
        for(var i = 0, c = this.config, len = c.length; i < len; i++){
            Ext.destroy(c[i].editor);
        }
        this.purgeListeners();
    }
});

// private
Ext.grid.ColumnModel.defaultRenderer = function(value){
    if(typeof value == "string" && value.length < 1){
        return " ";
    }
    return value;
};


The source code

Ext.ns('Ext.ux.tree');

/**
 * @class Ext.ux.tree.ColumnTree
 * @extends Ext.tree.TreePanel
 *
 * @xtype columntree
 */
Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
    lines : false,
    borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
    cls : 'x-column-tree',

    onRender : function(){
        Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
        this.headers = this.header.createChild({cls:'x-tree-headers'});

        var cols = this.columns, c;
        var totalWidth = 0;
        var scrollOffset = 19; // similar to Ext.grid.GridView default

        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+scrollOffset);
        this.innerCt.setWidth(totalWidth);
    }
});

Ext.reg('columntree', Ext.ux.tree.ColumnTree);

//backwards compat
Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;

/**
 * @class Ext.ux.tree.ColumnNodeUI
 * @extends Ext.tree.TreeNodeUI
 */
Ext.ux.tree.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;
    }
});

//backwards compat
Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;


The source code

/**
 * @class Ext.ListView.ColumnResizer
 * @extends Ext.util.Observable
 *
Supporting Class for Ext.ListView.

 * @constructor
 * @param {Object} config
 */
Ext.ListView.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.ListView.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;
        var x = e.getPageX();
        var hd = e.getTarget('em', 3, true);
        if(hd){
            var r = hd.getRegion();
            var ss = hd.dom.style;
            var 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];
        var 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){
        var nw = this.proxy.getWidth();
        this.proxy.remove();

        var index = this.hdIndex;
        var vw = this.view, cs = vw.columns, len = cs.length;
        var w = this.view.innerHd.getWidth(), minPct = this.minPct * 100;

        var pct = Math.ceil((nw*100) / w);
        var diff = cs[index].width - pct;
        var each = Math.floor(diff / (len-1-index));
        var mod = diff - (each * (len-1-index));

        for(var i = index+1; i < len; i++){
            var cw = cs[i].width + each;
            var ncw = Math.max(minPct, cw);
            if(cw != ncw){
                mod += cw - ncw;
            }
            cs[i].width = ncw;
        }
        cs[index].width = pct;
        cs[index+1].width += mod;
        delete this.dragHd;
        this.view.setHdWidths();
        this.view.refresh();
        setTimeout(function(){
            vw.disableHeaders = false;
        }, 100);
    }
});


The source code

// Grid column plugin that does the complete/active button in the left-most column
CompleteColumn = function(){
    var grid;

    function getRecord(t){
        var index = grid.getView().findRowIndex(t);
        return grid.store.getAt(index);
    }

    function onMouseDown(e, t){
        if(Ext.fly(t).hasClass('task-check')){
            e.stopEvent();
            var record = getRecord(t);
            record.set('completed', !record.data.completed);
            grid.store.applyFilter();
        }
    }

    function onMouseOver(e, t){
        if(Ext.fly(t).hasClass('task-check')){
            Ext.fly(t.parentNode).addClass('task-check-over');
        }
    }

    function onMouseOut(e, t){
        if(Ext.fly(t).hasClass('task-check')){
            Ext.fly(t.parentNode).removeClass('task-check-over');
        }
    }

    Ext.apply(this, {
        width: 22,
        header: '
',
        fixed: true,
        menuDisabled: true,
        id: 'task-col',
        renderer: function(){
            return '
';
        },
        init : function(xg){
            grid = xg;
            grid.on('render', function(){
                var view = grid.getView();
                view.mainBody.on('mousedown', onMouseDown);
                view.mainBody.on('mouseover', onMouseOver);
                view.mainBody.on('mouseout', onMouseOut);
            });
        }
    });
};

ReminderColumn = function(){
    var grid, menu, record;

    function getRecord(t){
        var index = grid.getView().findRowIndex(t);
        return grid.store.getAt(index);
    }

    function onMenuCheck(item){
        if(item.reminder === false){
            record.set('reminder', '');
        }else{
            var s = record.data.dueDate ? record.data.dueDate.clearTime(true) : new Date().clearTime();
            s = s.add('mi', Ext.state.Manager.get('defaultReminder'));
            s = s.add('mi', item.reminder*-1);
            record.set('reminder', s);
        }
    }

    function getMenu(){
        if(!menu){
            menu = new Ext.menu.Menu({
                plain: true,
                items: [{
                    text: 'No Reminder',
                    reminder: false,
                    handler: onMenuCheck
                },'-',{
                    text: 'On the Due Date',
                    reminder: 0,
                    handler: onMenuCheck
                },'-',{
                    text: '1 day before',
                    reminder: 24*60,
                    handler: onMenuCheck
                },{
                    text: '2 days before',
                    reminder: 48*60,
                    handler: onMenuCheck
                },{
                    text: '3 days before',
                    reminder: 72*60,
                    handler: onMenuCheck
                },{
                    text: '1 week before',
                    reminder: 7*24*60,
                    handler: onMenuCheck
                },{
                    text: '2 weeks before',
                    reminder: 14*24*60,
                    handler: onMenuCheck
                },'-',{
                    text: 'Set Default Time...',
                    handler: function(){
                        Ext.air.NativeWindowManager.getPrefWindow();
                    }
                }]
            });
        }
        return menu;
    }

    function onMouseDown(e, t){
        if(Ext.fly(t).hasClass('reminder')){
            e.stopEvent();
            record = getRecord(t);
            if (!record.data.completed) {
                var rmenu = getMenu();
                rmenu.show(t, 'tr-br?');
            }
        }
    }

    function onMouseOver(e, t){
        if(Ext.fly(t).hasClass('reminder')){
            Ext.fly(t.parentNode).addClass('reminder-over');
        }
    }

    function onMouseOut(e, t){
        if(Ext.fly(t).hasClass('reminder')){
            Ext.fly(t.parentNode).removeClass('reminder-over');
        }
    }

    Ext.apply(this, {
        width: 26,
        header: '
',
        fixed: true,
        id: 'reminder-col',
        menuDisabled: true,
        dataIndex:'reminder',
        renderer: function(v){
            return '
';
        },
        init : function(xg){
            grid = xg;
            grid.on('render', function(){
                var view = grid.getView();
                view.mainBody.on('contextmenu', onMouseDown);
                view.mainBody.on('mousedown', onMouseDown);
                view.mainBody.on('mouseover', onMouseOver);
                view.mainBody.on('mouseout', onMouseOut);
            });
        }
    });
};


The source code

// private
// This is a support class used internally by the Grid components
Ext.grid.SplitDragZone = 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;
};
Ext.extend(Ext.grid.SplitDragZone, Ext.dd.DDProxy, {
    fly: Ext.Element.fly,

    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

/*
 * ================  TabPanel with nested layouts  =======================
 */
// fake grid data used below in the tabsNestedLayouts config
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'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

var tabsNestedLayouts = {
    xtype: 'tabpanel',
    id: 'tabs-nested-layouts-panel',
    title: 'TabPanel with Nested Layouts',
    activeTab: 0,
    items:[{
        title: 'Foo',
        layout: 'border',
        items: [{
            region: 'north',
            title: 'North',
            height: 75,
            maxSize: 150,
            margins: '5 5 0 5',
            bodyStyle: 'padding:10px;',
            split: true,
            html: 'Some content'
        },{
            xtype: 'tabpanel',
            plain: true,
            region: 'center',
            margins: '0 5 5 5',
            activeTab: 0,
            items: [{
                title: 'Inner Tab 1',
                bodyStyle: 'padding:10px;',
                html: 'See Inner Tab 2 for another nested BorderLayout.'
            },{
                title: 'Inner Tab 2',
                cls: 'inner-tab-custom', // custom styles in layout-browser.css
                layout: 'border',
                // Make sure IE can still calculate dimensions after a resize when the tab is not active.
                // With display mode, if the tab is rendered but hidden, IE will mess up the layout on show:
                hideMode: Ext.isIE ? 'offsets' : 'display',
                items: [{
                    title: 'West',
                    region: 'west',
                    collapsible: true,
                    width: 150,
                    minSize: 100,
                    maxSize: 350,
                    margins: '5 0 5 5',
                    cmargins: '5 5 5 5',
                    html: 'Hello',
                    bodyStyle:'padding:10px;',
                    split: true
                },{
                    xtype: 'tabpanel',
                    region: 'center',
                    margins: '5 5 5 0',
                    tabPosition: 'bottom',
                    activeTab: 0,
                    items: [{
                        // Panels that are used as tabs do not have title bars since the tab
                        // itself is the title container.  If you want to have a full title
                        // bar within a tab, you can easily nest another panel within the tab
                        // with layout:'fit' to acheive that:
                        title: 'Bottom Tab',
                        layout: 'fit',
                        items: {
                            title: 'Interior Content',
                            bodyStyle:'padding:10px;',
                            border: false,
                            html: 'See the next tab for a nested grid. The grid is not rendered until its tab is first accessed.'
                        }
                    },{
                        // A common mistake when adding grids to a layout is creating a panel first,
                        // then adding the grid to it.  GridPanel (xtype:'grid') is a Panel subclass,
                        // so you can add it directly as an item into a container.  Typically you will
                        // want to specify layout:'fit' on GridPanels so that they'll size along with
                        // their container and take up the available space.
                        title: 'Nested Grid',
                        xtype: 'grid',
                        layout: 'fit',
                        store: new Ext.data.ArrayStore({
                            fields: [
                               {name: 'company'},
                               {name: 'price', type: 'float'},
                               {name: 'change', type: 'float'},
                               {name: 'pctChange', type: 'float'},
                               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                            ]
                        }),
                        columns: [
                            {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
                            {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                            {header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
                            {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
                            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                        ],
                        stripeRows: true,
                        autoExpandColumn: 'company',

                        // Add a listener to load the data only after the grid is rendered:
                        listeners: {
                            render: function(){
                                this.store.loadData(myData);
                            }
                        }
                    }]
                }]
            }]
        }]
    },{
        title: 'Bar',
        bodyStyle: 'padding:10px;',
        html: 'Nothing to see here.'
    }]
};

/*
 * ================  Absolute Layout Form  =======================
 */
var absform = new Ext.form.FormPanel({
    baseCls: 'x-plain',
    layout:'absolute',
    url:'save-form.php',
    border: true,
    defaultType: 'textfield',

    items: [{
        x: 0,
        y: 5,
        xtype: 'label',
        text: 'From:'
    },{
        x: 55,
        y: 0,
        name: 'from',
        anchor:'100%'  // anchor width by %
    },{
        x: 0,
        y: 32,
        xtype: 'label',
        text: 'To:'
    },{
        // The button is not a Field subclass, so it must be
        // wrapped in a panel for proper positioning to work
        xtype: 'panel',
        x: 55,
        y: 27,
        items: {
            xtype: 'button',
            text: 'Contacts...'
        }
    },{
        x: 135,
        y: 27,
        name: 'to',
        anchor: '100%'  // anchor width by %
    },{
        x: 0,
        y: 59,
        xtype: 'label',
        text: 'Subject:'
    },{
        x: 55,
        y: 54,
        name: 'subject',
        anchor: '100%'  // anchor width by %
    },{
        x:0,
        y: 81,
        xtype: 'textarea',
        name: 'msg',
        anchor: '100% 100%'  // anchor width and height
    }]
});

var absoluteForm = {
    title: 'Absolute Layout Form',
    id: 'abs-form-panel',
    layout: 'fit',
    bodyStyle: 'padding:15px;',
    items: {
        title: 'New Email',
        cls: 'email-form',
        layout: 'fit',
        frame: true,
        bodyStyle: 'padding:10px 5px 5px;',
        items: absform,

        tbar: [{
            text: 'Send',
            iconCls: 'icon-send'
        },'-',{
            text: 'Save',
            iconCls: 'icon-save'
        },{
            text: 'Check Spelling',
            iconCls: 'icon-spell'
        },'-',{
            text: 'Print',
            iconCls: 'icon-print'
        },'->',{
            text: 'Attach a File',
            iconCls: 'icon-attach'
        }]
    }
};


The source code

/**
 * @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.
     *

     *
    • 1-dimensional array : (e.g., ['Foo','Bar'])

     * A 1-dimensional array will automatically be expanded (each array item will be the combo
     * {@link #valueField value} and {@link #displayField text})
      •
     *
    • 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 value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
     *

     *
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 'text' if
     * {@link #transform transforming a select} a select).
     *
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 'value' if
     * {@link #transform transforming a select}).
     *
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} listAlign A valid anchor position value. See {@link Ext.Element#alignTo} for details
     * on supported anchor positions (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} 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,

/**
     * 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); // remove it
            }else{
                Ext.removeNode(s); // remove it
            }
        }
        //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){
        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);

            // prevent input submission
            this.el.dom.removeAttribute('name');
        }
        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.isDefined(this.hiddenValue) ? this.hiddenValue :
                Ext.isDefined(this.value) ? this.value : '';
        }
    },

    // private
    initList : function(){
        if(!this.list){
            var cls = 'x-combo-list';

            this.list = new Ext.Layer({
                parentEl: this.getListParent(),
                shadow: this.shadow,
                cls: [cls, this.listClass].join(' '),
                constrain:false
            });

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

            this.mon(this.view, 'click', this.onViewClick, 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){
            this.store.un('beforeload', this.onBeforeLoad, this);
            this.store.un('load', this.onLoad, this);
            this.store.un('exception', this.collapse, this);
            if(this.store !== store && this.store.autoDestroy){
                this.store.destroy();
            }
            if(!store){
                this.store = null;
                if(this.view){
                    this.view.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);
            }
        }
    },

    // 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();
                this.delayedCheck = true;
                this.unsetDelayCheck.defer(10, this);
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                this.onViewClick(false);
                return true;
            },

            scope : this,

            doRelay : function(foo, bar, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                }
                return true;
            },

            forceKeyDown : true
        });
        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.editable !== false && !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.form.ComboBox.superclass.onDestroy.call(this);
    },

    // private
    unsetDelayCheck : function(){
        delete this.delayedCheck;
    },

    // private
    fireKey : function(e){
        var fn = function(ev){
            if (ev.isNavKeyPress() && !this.isExpanded() && !this.delayedCheck) {
                this.fireEvent("specialkey", this, ev);
            }
        };
        //For some reason I can't track down, the events fire in a different order in webkit.
        //Need a slight delay here
        if(this.inEditor && Ext.isWebKit && e.getKey() == e.TAB){
            fn.defer(10, this, [new Ext.EventObjectImpl(e)]);
        }else{
            fn.call(this, e);
        }
    },

    // private
    onResize : function(w, h){
        Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
        if(this.list && !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.expand();
            this.restrictHeight();
            if(this.lastQuery == this.allQuery){
                if(this.editable){
                    this.el.dom.select();
                }
                if(!this.selectByValue(this.value, true)){
                    this.select(0, true);
                }
            }else{
                this.selectNext();
                if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
                    this.taTask.delay(this.typeAheadDelay);
                }
            }
        }else{
            this.onEmptyResults();
        }
        //this.el.focus();
    },

    // 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
    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 = 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];
        var r = this.store.getAt(index);
        if(r){
            this.onSelect(r, index);
        }
        if(doFocus !== false){
            this.el.focus();
        }
    },

    // private
    restrictHeight : function(){
        this.innerList.dom.style.height = '';
        var inner = this.innerList.dom;
        var pad = this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight;
        var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
        var ha = this.getPosition()[1]-Ext.getBody().getScroll().top;
        var hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height;
        var 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(this.wrap, this.listAlign);
        this.list.endUpdate();
    },

    // private
    onEmptyResults : function(){
        this.collapse();
    },

/**
     * 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 && (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(){
        var val = this.getRawValue();
        if(this.forceSelection){
            if(val.length > 0 && val != this.emptyText){
               this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
            var rec = this.findRecord(this.displayField, val);
            if(rec){
                val = rec.get(this.valueField || this.displayField);
            }
            this.setValue(val);
        }
    },

/**
     * 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(!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;
        }
        this.list.alignTo(this.wrap, this.listAlign);
        this.list.show();
        if(Ext.isGecko2){
            this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
        }
        Ext.getDoc().on({
            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.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

Ext.onReady(function(){
    Ext.QuickTips.init();

    // simple array store
    var store = new Ext.data.ArrayStore({
        fields: ['abbr', 'state', 'nick'],
        data : Ext.exampledata.states // from states.js
    });
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'state',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        applyTo: 'local-states'
    });

    //Simple arrays can be used directly as the store config.  1-dimensional arrays
    //will automatically be expanded (each array item will be the combo value and text)
    //and for multi-dimensional arrays, the value in index 0 of each item will be assumed
    //to be the value, while the value at index 1 is assumed to be the text.  For example,
    //[['AL', 'Alabama'],['AK', 'Alaska'], etc.]. Any other values beyond index 1 within
    //each item will be ignored using this approach.
    var comboFromArray = new Ext.form.ComboBox({
        store: Ext.exampledata.states,
        typeAhead: true,
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        applyTo: 'array-states'
    });

    var comboWithTooltip = new Ext.form.ComboBox({
        tpl: '
{state}
',
        store: store,
        displayField:'state',
        typeAhead: true,
        forceSelection: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        applyTo: 'local-states-with-qtip'
    });

    var converted = new Ext.form.ComboBox({
        typeAhead: true,
        triggerAction: 'all',
        transform:'state',
        width:135,
        forceSelection:true
    });

//  Create code view Panels. Ignore.
    new Ext.Panel({
        contentEl: 'state-combo-code',
        width: Ext.getBody().child('p').getWidth(),
        title: 'View code to create this combo',
        hideCollapseTool: true,
        titleCollapse: true,
        collapsible: true,
        collapsed: true,
        renderTo: 'state-combo-code-panel'
    });
    new Ext.Panel({
        contentEl: 'state-combo-qtip-code',
        autoScroll: true,
        width: Ext.getBody().child('p').getWidth(),
        title: 'View code to create this combo',
        hideCollapseTool: true,
        titleCollapse: true,
        collapsible: true,
        collapsed: true,
        renderTo: 'state-combo-qtip-code-panel'
    });
    new Ext.Panel({
        contentEl: 'array-combo-code',
        autoScroll: true,
        width: Ext.getBody().child('p').getWidth(),
        title: 'View code to create this combo',
        hideCollapseTool: true,
        titleCollapse: true,
        collapsible: true,
        collapsed: true,
        renderTo: 'array-combo-code-panel'
    });
    new Ext.Panel({
        contentEl: 'transformed-combo-code',
        autoScroll: true,
        width: Ext.getBody().child('p').getWidth(),
        title: 'View code to create this combo',
        hideCollapseTool: true,
        titleCollapse: true,
        collapsible: true,
        collapsed: true,
        renderTo: 'transformed-combo-code-panel'
    });

});


The source code

/**
 * @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.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 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 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(config);
    }

    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
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'
    }]
});

     */

    // 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}
     * 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.

     */

/**
     * @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
     */

/**
     * The component's owner {@link Ext.Container} (defaults to undefined, and is set automatically when
     * the 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,

    // 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 : Ext.emptyFn,

/**
     *
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);
            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.initRef();
            this.fireEvent('afterrender', this);
        }
        return this;
    },

    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}.

         */
        if(this.ref){
            var levels = this.ref.split('/');
            var last = levels.length, i = 0;
            var t = this;
            while(i < last){
                if(t.ownerCt){
                    t = t.ownerCt;
                }
                i++;
            }
            t[levels[--i]] = this;
        }
    },

    // private
    initState : function(config){
        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(state);
                        this.fireEvent('staterestore', this, state);
                    }
                }
            }
        }
    },

    // private
    getStateId : function(){
        return this.stateId || ((this.id.indexOf('ext-comp-') == 0 || this.id.indexOf('ext-gen') == 0) ? 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, config){
        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);
            }
        }
    },

    // 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.fireEvent('beforedestroy', this) !== false){
            this.beforeDestroy();
            if(this.rendered){
                this.el.removeAllListeners();
                this.el.remove();
                if(this.actionMode == 'container' || this.removeMode == 'container'){
                    this.container.remove();
                }
            }
            this.onDestroy();
            Ext.ComponentMgr.unregister(this);
            this.fireEvent('destroy', this);
            this.purgeListeners();
        }
    },

    // 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;
    },

/**
     * 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.focus.defer(Ext.isNumber(delay) ? delay : 10, this, [selectText, false]);
            return;
        }
        if(this.rendered){
            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.getVisibiltyEl().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.getVisibiltyEl().addClass('x-hide-' + this.hideMode);
    },

    // private
    getVisibiltyEl : 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.getVisibiltyEl().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;
            });
    },

    getDomPositionEl : function(){
        return this.getPositionEl ? this.getPositionEl() : this.getEl();
    },

    // 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 = [];
    },

    // internal function for auto removal of assigned event handlers on destruction
    mon : function(item, ename, fn, scope, opt){
        if(!this.mons){
            this.mons = [];
            this.on('beforedestroy', this.clearMons, this, {single: true});
        }

        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);
    },

    // protected, opposite of mon
    mun : function(item, ename, fn, scope){
        var found, mon;
        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

/**
 * @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 specified component is added to ComponentMgr
         * @param {String} id The component {@link Ext.Component#id id}
         * @param {Function} fn The callback function
         * @param {Object} scope The scope of the callback
         */
        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,

/**
         * 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;
        },

/**
         *
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){
            return new ptypes[config.ptype || defaultType](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;
Ext.create = Ext.ComponentMgr.create;


The source code

/**
 * @class Ext.CompositeElement
 * @extends Ext.CompositeElementLite
 * Standard composite class. Creates a Ext.Element for every element in the collection.
 *

 * NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element
 * actions will be performed on all the elements in this collection.
 *

 * All methods return this and can be chained.

 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, {
    invoke : function(fn, args){
        Ext.each(this.elements, function(e) {
            Ext.Element.prototype[fn].apply(e, args);
        });
        return this;
    },

/**
    * Adds elements to this composite.
    * @param {String/Array} els A string CSS selector, an array of elements or an element
    * @return {CompositeElement} this
    */
    add : 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 Element object at the specified index
     * @param {Number} index
     * @return {Ext.Element}
     */
    item : function(index){
        return this.elements[index] || null;
    },

    indexOf : function(el){
        return this.elements.indexOf(Ext.get(el));
    },

    filter : function(selector){
        var me = this,
            out = [];

        Ext.each(me.elements, function(el) {
            if(el.is(selector)){
                out.push(Ext.get(el));
            }
        });
        me.elements = out;
        return me;
    },

/**
    * Calls the passed function passing (el, this, index) for each element in this composite.
    * @param {Function} fn The function to call
    * @param {Object} scope (optional) The this object (defaults to the element)
    * @return {CompositeElement} this
    */
    each : function(fn, scope){
        Ext.each(this.elements, function(e,i) {
            return fn.call(scope || e, e, this, i);
        }, this);
        return 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

/**
 * @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;
    },

/**
    * Clears this composite and adds the elements returned by the passed selector.
    * @param {String/Array} els A string CSS selector, an array of elements or an element
    * @return {CompositeElement} this
    */
    fill : function(els){
        this.elements = [];
        this.add(els);
        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;
    },

/**
    * Filters this composite to only elements that match the passed selector.
    * @param {String} selector A string CSS selector
    * @return {CompositeElement} this
    */
    filter : function(selector){
        var els = [];
        this.each(function(el){
            if(el.is(selector)){
                els[els.length] = el.dom;
            }
        });
        this.fill(els);
        return this;
    },

/**
    * 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

/**
 * @class Ext.CompositeElementLite
 * Flyweight composite class. Reuses the same Ext.Element for element operations.

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

 * NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element
 * actions will be performed on all the elements in this collection.
 */
Ext.CompositeElementLite = function(els, root){
    this.elements = [];
    this.add(els, root);
    this.el = new Ext.Element.Flyweight();
};

Ext.CompositeElementLite.prototype = {
    isComposite: true,

/**
     * Returns the number of elements in this composite
     * @return Number
     */
    getCount : function(){
        return this.elements.length;
    },
    add : function(els){
        if(els){
            if (Ext.isArray(els)) {
                this.elements = this.elements.concat(els);
            } else {
                var yels = this.elements;
                Ext.each(els, function(e) {
                    yels.push(e);
                });
            }
        }
        return this;
    },
    invoke : function(fn, args){
        var els = this.elements,
            el = this.el;
        Ext.each(els, function(e) {
            el.dom = e;
            Ext.Element.prototype[fn].apply(el, args);
        });
        return this;
    },

/**
     * 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;
        if(!me.elements[index]){
            return null;
        }
        me.el.dom = me.elements[index];
        return me.el;
    },

    // fixes scope with flyweight
    addListener : function(eventName, handler, scope, opt){
        Ext.each(this.elements, function(e) {
            Ext.EventManager.on(e, eventName, handler, scope || e, opt);
        });
        return this;
    },

/**
    * Calls the passed function passing (el, this, index) for each element in this composite. The element
    * passed is the flyweight (shared) Ext.Element instance, so if you require a
    * a reference to the dom node, use el.dom.
    * @param {Function} fn The function to call
    * @param {Object} scope (optional) The this object (defaults to the element)
    * @return {CompositeElement} this
    */
    each : function(fn, scope){
        var me = this,
            el = me.el;

        Ext.each(me.elements, function(e,i) {
            el.dom = e;
            return fn.call(scope || el, el, me, i);
        });
        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(Ext.getDom(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 {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) Not supported in core
 * @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 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
 * @method select
 */
Ext.select = Ext.Element.select;


The source code

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

    // private
    function handleResponse(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
    function handleFailure(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
    function doFormUpload(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.apply(frame, {
            id: id,
            name: id,
            className: 'x-hidden',
            src: Ext.SSL_SECURE_URL // for IE
        });
        doc.body.appendChild(frame);

        // 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.apply(form, {
            target: id,
            method: POST,
            enctype: encoding,
            encoding: encoding,
            action: url || buf.action
        });

        // add dynamic params
        ps = Ext.urlDecode(ps, false);
        for(var k in ps){
            if(ps.hasOwnProperty(k)){
                hd = doc.createElement('input');
                hd.type = 'hidden';
                hd.value = ps[hd.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.apply(form, buf);
        Ext.each(hiddens, function(h) {
            Ext.removeNode(h);
        });
    }

    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: handleResponse,
                          failure: 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 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);
            }
        }
    });
})();

/**
 * @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

// Asbtract base class for Connection classes
Ext.sql.Connection = function(config){
    Ext.apply(this, config);
    Ext.sql.Connection.superclass.constructor.call(this);

    this.addEvents({
        open : true,
        close: true
    });
};

Ext.extend(Ext.sql.Connection, Ext.util.Observable, {
    maxResults: 10000,
    openState : false,

    // abstract methods
    open : function(file){
    },

    close : function(){
    },

    exec : function(sql){
    },

    execBy : function(sql, args){
    },

    query : function(sql){
    },

    queryBy : function(sql, args){
    },

    // protected/inherited method
    isOpen : function(){
        return this.openState;
    },

    getTable : function(name, keyName){
        return new Ext.sql.Table(this, name, keyName);
    },

    createTable : function(o){
        var tableName = o.name;
        var keyName = o.key;
        var fs = o.fields;
        if(!Ext.isArray(fs)){ // Ext fields collection
            fs = fs.items;
        }
        var buf = [];
        for(var i = 0, len = fs.length; i < len; i++){
            var f = fs[i], s = f.name;
            switch(f.type){
                case "int":
                case "bool":
                case "boolean":
                    s += ' INTEGER';
                    break;
                case "float":
                    s += ' REAL';
                    break;
                default:
                    s += ' TEXT';
            }
            if(f.allowNull === false || f.name == keyName){
                s += ' NOT NULL';
            }
            if(f.name == keyName){
                s += ' PRIMARY KEY';
            }
            if(f.unique === true){
                s += ' UNIQUE';
            }

            buf[buf.length] = s;
        }
        var sql = ['CREATE TABLE IF NOT EXISTS ', tableName, ' (', buf.join(','), ')'].join('');
        this.exec(sql);
    }
});

Ext.sql.Connection.getInstance = function(db, config){
    if(Ext.isAir){ // air
        return new Ext.sql.AirConnection(config);
    } else { // gears
        return new Ext.sql.GearsConnection(config);
    }
};


The source code

if(Ext.app.ContactForm) {
    Ext.apply(Ext.app.ContactForm.prototype, {
        formTitle: 'Contact Informatie (Dutch)',
        firstName: 'Voornaam',
        lastName: 'Achternaam',
        surnamePrefix: 'Tussenvoegsel',
        company: 'Bedrijf',
        state: 'Provincie',
        stateEmptyText: 'Kies een provincie...',
        email: 'E-mail',
        birth: 'Geb. Datum',
        save: 'Opslaan',
        cancel: 'Annuleren'
    });
}


The source code

Ext.ns('Ext.app');

Ext.app.ContactForm = Ext.extend(Ext.FormPanel, {
    formTitle: 'Contact Information (English)',
    firstName: 'First Name',
    lastName: 'Surname',
    surnamePrefix: 'Surname Prefix',
    company: 'Company',
    state: 'State',
    stateEmptyText: 'Choose a state...',
    email: 'E-mail',
    birth: 'Date of Birth',
    save: 'Save',
    cancel: 'Cancel',

    initComponent : function(config) {
        Ext.apply(this, {
            labelWidth: 100, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: this.formTitle,
            bodyStyle:'padding:5px 5px 0',
            width: 370,
            defaults: {width: 220},
            defaultType: 'textfield',

            items: [{
                    fieldLabel: this.firstName,
                    name: 'firstname',
                    allowBlank:false
                },{
                    fieldLabel: this.lastName,
                    name: 'lastName'
                },{
                    fieldLabel: this.surnamePrefix,
                    width: 50,
                    name: 'surnamePrefix'
                },{
                    fieldLabel: this.company,
                    name: 'company'
                },  new Ext.form.ComboBox({
                    fieldLabel: this.province,
                    hiddenName: 'state',
                    store: new Ext.data.ArrayStore({
                        fields: ['provincie'],
                        data : Ext.exampledata.dutch_provinces // from dutch-provinces.js
                    }),
                    displayField: 'provincie',
                    typeAhead: true,
                    mode: 'local',
                    triggerAction: 'all',
                    emptyText: this.stateEmtyText,
                    selectOnFocus:true,
                    width:190
                }), {
                    fieldLabel: this.email,
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.DateField({
                    fieldLabel: this.birth,
                    name: 'birth'
                })
            ],

            buttons: [{
                text: this.save
            },{
                text: this.cancel
            }]
        });

        Ext.app.ContactForm.superclass.initComponent.apply(this, arguments);
    }
});

Ext.onReady(function(){
    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    bd.createChild({tag: 'h2', html: 'Localized Contact Form'});

    // simple form
    var simple = new Ext.app.ContactForm();
    simple.render(document.body);
});


The source code

/**
 * @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 (100 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.
     */
    bufferResize: 100,

/**
     * @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} defaults
     *
A config object that will be applied to all components added to this container either via the {@link #items}
     * config or via the {@link #add} or {@link #insert} methods.  The defaults config can contain any
     * number of name/value property pairs to be added to each item, and should be valid for the types of items
     * being added to the container.  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'}.

     *
Note: defaults will not be applied to config objects if the option is already specified.
     * For example:

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',

    // 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'
        );

        this.enableBubble('add', '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;
            if(Ext.isArray(items) && items.length > 0){
                this.add.apply(this, items);
            }else{
                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);
    },

    // private
    render : function(){
        Ext.Container.superclass.render.apply(this, arguments);
        if(this.layout){
            if(Ext.isObject(this.layout) && !this.layout.layout){
                this.layoutConfig = this.layout;
                this.layout = this.layoutConfig.type;
            }
            if(typeof this.layout == 'string'){
                this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
            }
            this.setLayout(this.layout);

            if(this.activeItem !== undefined){
                var item = this.activeItem;
                delete this.activeItem;
                this.layout.setActiveItem(item);
            }
        }
        if(!this.ownerCt){
            // force a layout if no ownerCt is set
            this.doLayout(false, true);
        }
        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 a single component or an Array of components to add.  See
     * {@link #items} for additional information.

     * @param {Object} (Optional) component_2
     * @param {Object} (Optional) component_n
     * @return {Ext.Component} component The Component (or config object) that was added.
     */
    add : function(comp){
        this.initItems();
        var args = arguments.length > 1;
        if(args || Ext.isArray(comp)){
            Ext.each(args ? arguments : comp, function(c){
                this.add(c);
            }, this);
            return;
        }
        var c = this.lookupComponent(this.applyDefaults(comp));
        var pos = this.items.length;
        if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
            this.items.add(c);
            c.ownerCt = this;
            this.fireEvent('add', this, c, pos);
        }
        return c;
    },

/**
     * 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){
            for(var i = len-1; i >= 1; --i) {
                this.insert(index, a[i]);
            }
            return;
        }
        var c = this.lookupComponent(this.applyDefaults(comp));

        if(c.ownerCt == this && this.items.indexOf(c) < index){
            --index;
        }

        if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
            this.items.insert(index, c);
            c.ownerCt = this;
            this.fireEvent('add', this, c, index);
        }
        return c;
    },

    // private
    applyDefaults : function(c){
        if(this.defaults){
            if(typeof c == 'string'){
                c = Ext.ComponentMgr.get(c);
                Ext.apply(c, this.defaults);
            }else if(!c.events){
                Ext.applyIf(c, this.defaults);
            }else{
                Ext.apply(c, this.defaults);
            }
        }
        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.items.remove(c);
            delete c.ownerCt;
            if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){
                c.destroy();
            }
            if(this.layout && this.layout.activeItem == c){
                delete this.layout.activeItem;
            }
            this.fireEvent('remove', this, c);
        }
        return 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)){
            return comp;
        }
        return this.items.get(comp);
    },

    // private
    lookupComponent : function(comp){
        if(typeof comp == 'string'){
            return Ext.ComponentMgr.get(comp);
        }else if(!comp.events){
            return this.createComponent(comp);
        }
        return comp;
    },

    // private
    createComponent : function(config){
        return Ext.create(config, this.defaultType);
    },

/**
     * 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 = this.forceLayout;

        if(!this.isVisible() || this.collapsed){
            this.deferLayout = this.deferLayout || !shallow;
            if(!(force || 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.forceLayout = forceLayout;
                    c.doLayout();
                }
            }
        }
        if(rendered){
            this.onLayout(shallow, force);
        }
        delete this.forceLayout;
    },

    //private
    onLayout : Ext.emptyFn,

    onShow : function(){
        Ext.Container.superclass.onShow.call(this);
        if(this.deferLayout !== undefined){
            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.ContainerLayout(this.layoutConfig);
            this.setLayout(layout);
        }
        return this.layout;
    },

    // private
    beforeDestroy : function(){
        if(this.items){
            Ext.destroy.apply(Ext, this.items.items);
        }
        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

/**
 * @class Ext.layout.ContainerLayout
 *
The ContainerLayout class 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}. ContainerLayout provides the basic foundation for all other layout
 * classes in Ext. It simply renders all child Components into the Container, performing no sizing or
 * positioning services. To utilize a layout that provides sizing and positioning of child Components,
 * specify an appropriate {@link Ext.Container#layout layout}.

 *
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 = function(config){
    Ext.apply(this, config);
};

Ext.layout.ContainerLayout.prototype = {

/**
     * @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,

    // private
    layout : function(){
        var target = this.container.getLayoutTarget();
        this.onLayout(this.container, target);
        this.container.fireEvent('afterlayout', this.container, this);
    },

    // private
    onLayout : function(ct, target){
        this.renderAll(ct, target);
    },

    // private
    isValidParent : function(c, target){
        return target && c.getDomPositionEl().dom.parentNode == (target.dom || target);
    },

    // private
    renderAll : function(ct, target){
        var items = ct.items.items;
        for(var i = 0, len = items.length; i < len; i++) {
            var c = items[i];
            if(c && (!c.rendered || !this.isValidParent(c, target))){
                this.renderItem(c, i, target);
            }
        }
    },

    // private
    renderItem : function(c, position, target){
        if(c && !c.rendered){
            c.render(target, position);
            this.configureItem(c, position);
        }else if(c && !this.isValidParent(c, target)){
            if(typeof position == 'number'){
                position = target.dom.childNodes[position];
            }
            target.dom.insertBefore(c.getDomPositionEl().dom, position || null);
            c.container = target;
            this.configureItem(c, position);
        }
    },

    // private
    configureItem: function(c, position){
        if(this.extraCls){
            var t = c.getPositionEl ? c.getPositionEl() : c;
            t.addClass(this.extraCls);
        }
        if (this.renderHidden && c != this.activeItem) {
            c.hide();
        }
        if(c.doLayout){
            c.doLayout(false, this.forceLayout);
        }
    },

    // private
    onResize: function(){
        if(this.container.collapsed){
            return;
        }
        var b = this.container.bufferResize;
        if(b){
            if(!this.resizeTask){
                this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
                this.resizeBuffer = typeof b == 'number' ? b : 100;
            }
            this.resizeTask.delay(this.resizeBuffer);
        }else{
            this.runLayout();
        }
    },

    // private
    runLayout: function(){
        this.layout();
        this.container.onLayout();
    },

    // private
    setContainer : function(ct){
        if(this.monitorResize && ct != this.container){
            if(this.container){
                this.container.un('resize', this.onResize, this);
                this.container.un('bodyresize', this.onResize, this);
            }
            if(ct){
                ct.on({
                    scope: this,
                    resize: this.onResize,
                    bodyresize: this.onResize
                });
            }
        }
        this.container = ct;
    },

    // private
    parseMargins : function(v){
        if(typeof v == 'number'){
            v = v.toString();
        }
        var ms = v.split(' ');
        var len = ms.length;
        if(len == 1){
            ms[1] = ms[0];
            ms[2] = ms[0];
            ms[3] = ms[0];
        }
        if(len == 2){
            ms[2] = ms[0];
            ms[3] = ms[1];
        }
        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 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 : Ext.emptyFn
};
Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;


The source code

/**
 * @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

/**
 * @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 {Object} name
     * @param {Object} value
     * @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 {Object} 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.
     * @param {Object} 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

/**
 * @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] = 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];
           }
           for(var i = 0; i < selector.length; i++){
            if(rs[selector[i]]){
                return rs[selector[i]];
            }
        }
        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

/*
 * CenterLayout demo panel
 */
var centerLayout = {
    id: 'center-panel',
    layout: 'ux.center',
    items: {
        title: 'Centered Panel: 75% of container width and fit height',
        layout: 'ux.center',
        autoScroll: true,
        width: '75%',
        bodyStyle: 'padding:20px 0;',
        items: [{
            title: 'Inner Centered Panel',
            html: 'Fixed 300px wide and auto height. The container panel will also autoscroll if narrower than 300px.',
            width: 300,
            frame: true,
            autoHeight: true,
            bodyStyle: 'padding:10px 20px;'
        }]
    }
};

/*
 * RowLayout demo panel
 */
var rowLayout = {
    id: 'row-panel',
    bodyStyle: 'padding:5px',
    layout: 'ux.row',
    title: 'Row Layout',
    items: [{
        title: 'Height = 25%, Width = 50%',
        rowHeight: 0.25,
        width: '50%'
    },{
        title: 'Height = 100px, Width = 300px',
        height: 100,
        width: 300
    },{
        title: 'Height = 75%, Width = fit',
        rowHeight: 0.75
    }]
};


The source code

Ext.onReady(function(){
    var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-remote.php'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'post_id'
        }, [
            {name: 'postId', mapping: 'post_id'},
            {name: 'title', mapping: 'topic_title'},
            {name: 'topicId', mapping: 'topic_id'},
            {name: 'author', mapping: 'author'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
            {name: 'excerpt', mapping: 'post_text'}
        ]),

        baseParams: {limit:20, forumId: 4}
    });

    // Custom rendering Template for the View
    var resultTpl = new Ext.XTemplate(
        '',
        '
',
            '
{lastPost:date("M j, Y")}
by {author}',
            '{title}
',
            '
{excerpt}
',
        '
'
    );

    var panel = new Ext.Panel({
        applyTo: 'search-panel',
        title:'Forum Search',
        height:300,
        autoScroll:true,

        items: new Ext.DataView({
            tpl: resultTpl,
            store: ds,
            itemSelector: 'div.search-item'
        }),

        tbar: [
            'Search: ', ' ',
            new Ext.ux.form.SearchField({
                store: ds,
                width:320
            })
        ],

        bbar: new Ext.PagingToolbar({
            store: ds,
            pageSize: 20,
            displayInfo: true,
            displayMsg: 'Topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        })
    });

    ds.load({params:{start:0, limit:20, forumId: 4}});
});


The source code

/**
 * @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(typeof item != 'object'){
            item = this.menu.items.get(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, true);
            }
            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;
        for(var i = 0, len = this.itemCount; i < len; i++){
            var item = this.items[i];
            item.group = item.group || this.id;
            item.itemIndex = i;
            item.checkHandler = this.checkHandler;
            item.scope = this;
            item.checked = item.checked || false;
            this.menu.items.push(item);
            if(item.checked){
                checked = item;
            }
        }
        this.setActiveItem(checked, true);
        Ext.CycleButton.superclass.initComponent.call(this);

        this.on('click', this.toggleSelected, this);
    },

    // 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(){
        this.menu.render();

        var nextIdx, checkItem;
        for (var i = 1; i < this.itemCount; i++) {
            nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
            // check the potential item
            checkItem = this.menu.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

Ext.onReady(function(){
    var xd = Ext.data;

    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(
        '',
            '
',
            '

',
            '{shortName}
',
        '',
        '
'
    );

    var panel = new Ext.Panel({
        id:'images-view',
        frame:true,
        width:535,
        autoHeight:true,
        collapsible:true,
        layout:'fit',
        title:'Simple DataView (0 items selected)',

        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',

            plugins: [
                new Ext.DataView.DragSelector(),
                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],

            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            },

            listeners: {
                selectionchange: {
                    fn: function(dv,nodes){
                        var l = nodes.length;
                        var s = l != 1 ? 's' : '';
                        panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
                    }
                }
            }
        })
    });
    panel.render(document.body);

});


The source code

// Unique task ids, if the time isn't unique enough, the addition
// of random chars should be
Ext.uniqueId = function(){
    var t = String(new Date().getTime()).substr(4);
    var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for(var i = 0; i < 4; i++){
        t += s.charAt(Math.floor(Math.random()*26));
    }
    return t;
}

// Define the Task data type
tx.data.Task = Ext.data.Record.create([
    {name: 'taskId', type:'string'},
    {name: 'listId', type:'string'},
    {name: 'title', type:'string'},
    {name: 'description', type:'string'},
    {name: 'dueDate', type:'date', dateFormat: Ext.sql.Proxy.DATE_FORMAT, defaultValue: ''},
    {name: 'completed', type:'boolean'},
    {name: 'completedDate', type:'date', dateFormat: Ext.sql.Proxy.DATE_FORMAT, defaultValue: ''},
    {name: 'reminder', type:'date', dateFormat: Ext.sql.Proxy.DATE_FORMAT, defaultValue: ''}
]);

// Define the List data type
tx.data.List = Ext.data.Record.create([
    {name: 'listId', type:'string'},
    {name: 'parentId', type:'string'},
    {name: 'listName', type:'string'},
    {name: 'isFolder', type:'boolean'}
]);

tx.data.conn = Ext.sql.Connection.getInstance();

tx.data.tasks = new tx.data.TaskStore();
tx.data.lists = new tx.data.ListStore();

tx.data.getDefaultReminder = function(task){
    var s = task.data.dueDate ? task.data.dueDate.clearTime(true) : new Date().clearTime();
    s = s.add('mi', Ext.state.Manager.get('defaultReminder'));
    return s;
};

tx.data.getActiveListId = function(){
    var id = tx.data.tasks.activeList;
    if(!id){
        var first = tx.data.lists.getAt(0);
        if(first){
            id = first.id;
        }else{
            id = tx.data.lists.newList().id;
        }
    }
    return id;
};


The source code

Ext.ns('Ext.samples');

Ext.samples.samplesCatalog = [{
    title: 'Combination Samples',
    samples: [{
        text: 'Feed Viewer',
        url:  'feed-viewer/view.html',
        icon: 'feeds.gif',
        desc: 'RSS feed reader sample application that features a swappable reader panel layout.'
    },{
        text: 'Simple Tasks',
        url:  'http://extjs.com/blog/2008/02/24/tasks2/',
        icon: 'air.gif',
        desc: 'Complete personal task management application sample that runs on Adobe AIR.'
    },{
        text: 'Simple Tasks',
        url:  'tasks/tasks.html',
        icon: 'tasks.gif',
        desc: 'Personal task management application sample that uses Google Gears for data storage.'
    },{
        text: 'Image Viewer',
        url:  'organizer/organizer.html',
        icon: 'organizer.gif',
        desc: 'DataView and TreePanel sample that demonstrates dragging data items from a DataView into a TreePanel.'
    }/*,{
        text: 'Image Organizer',
        url:  'image-organizer/index.html',
        icon: 'image-organizer.gif',
        desc: 'Image management application sample utilizing MySQL lite and Ext.Direct.',
        status: 'new'
    }*/,{
        text: 'Ext JS API Documentation',
        url:  '../docs/index.html',
        icon: 'docs.gif',
        desc: 'API Documentation application.',
        status: 'modified'
    },{
        text: 'Ext JS Forum Browser',
        url:  'forum/forum.html',
        icon: 'forum.gif',
        desc: 'Ext JS online forums browser application.',
        status: 'modified'
    },{
        text: 'Web Desktop',
        url:  'desktop/desktop.html',
        icon: 'desktop.gif',
        desc: 'Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.'
    }]
},{
    title: 'Accessibility',
    samples: [{
        text: 'Key Feed Viewer',
        url:  'key-feed-viewer/view.html',
        icon: 'keyboard.gif',
        desc: 'Keyboard navigation within a complex layout',
        status: 'experimental'
    },{
        text: 'ARIA Tree',
        url:  'tree/aria-tree.html',
        icon: 'acc-tree.gif',
        desc: 'Demonstrating ARIA with a TreePanel',
        status: 'experimental'
    }]
},{
    title: 'Grids',
    samples: [{
        text: 'Basic Array Grid',
        url:  'grid/array-grid.html',
        icon: 'grid-array.gif',
        desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'
    },{
        text: 'Property Grid',
        url:  'grid/property-grid.html',
        icon: 'grid-property.gif',
        desc: 'An example of a traditional property grid as typically seen in development IDEs.'
    },{
        text: 'Editable Grid',
        url:  'grid/edit-grid.html',
        icon: 'grid-edit.gif',
        desc: 'An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.'
    },{
        text: 'Row Editor Grid',
        url:  'grid/row-editor.html',
        icon: 'grid-row-editor.gif',
        desc: 'An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. ',
        status: 'new'
    },{
        text: 'XML Grid',
        url:  'grid/xml-grid.html',
        icon: 'grid-xml.gif',
        desc: 'A simple read-only grid loaded from XML data.'
    },{
        text: 'Paging',
        url:  'grid/paging.html',
        icon: 'grid-paging.gif',
        desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'
    },{
        text: 'Progress Bar Pager',
        url:  'grid/progress-bar-pager.html',
        icon: 'progress-bar-pager.gif',
        desc: 'An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.',
        status: 'new'
    },{
        text: 'Sliding Pager',
        url: 'grid/sliding-pager.html',
        icon: 'slider-pager.gif',
        desc: 'A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.',
        status: 'new'
    },{
        text: 'Grouping',
        url: 'grid/grouping.html',
        icon: 'grid-grouping.gif',
        desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
    },{
        text: 'Grouping with Dynamic Summary',
        url: 'grid/totals.html',
        icon: 'grid-summary.gif',
        desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.',
        status: 'new'
    },{
        text: 'Grouping with Remote Summary',
        url: 'grid/totals-hybrid.html',
        icon: 'grid-summary.gif',
        desc: 'Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations.'
    },{
        text: 'Grid Plugins',
        url: 'grid/grid-plugins.html',
        icon: 'grid-plugins.gif',
        desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'
    }/*,{
        text: 'Grid Filtering',
        url: 'grid-filtering/grid-filter.html',
        icon: 'grid-filter.gif',
        desc: 'Grid plugins providing custom data filtering menus that support various data types.'
    }*/,{
        text: 'Grid From Markup',
        url: 'grid/from-markup.html',
        icon: 'grid-from-markup.gif',
        desc: 'Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.'
    },{
        text: 'Grid Data Binding (basic)',
        url: 'grid/binding.html',
        icon: 'grid-data-binding.gif',
        desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'
    },{
        text: 'Grid Data Binding (advanced)',
        url: 'grid/binding-with-classes.html',
        icon: 'grid-data-binding.gif',
        desc: 'Refactoring the basic data binding example to use a class-based application design model.'
    },{
        text: 'Buffered GridView',
        url: 'grid/buffer.html',
        icon: 'grid-buffer.gif',
        desc: 'GridView optimized for performance by rendering only visible rows.',
        status: 'new'
    }, {
        text: 'Editable Grid with Writable Store',
        url: 'writer/writer.html',
        icon: 'writer-thumb.gif',
        desc: 'This Store uses JsonWriter to automatically generate CRUD requests to the server through a standard HttpProxy.',
        status: 'new'
    }, {
        text: 'RESTful Store with GridPanel and RowEditor',
        url: 'restful/restful.html',
        icon: 'restful-thumb.gif',
        desc: 'A RESTful Store with JsonWriter which automatically generates CRUD requests to the server.',
        status: 'new'
    }]
},{
    title: 'Tabs',
    samples: [{
        text: 'Basic Tabs',
        url: 'tabs/tabs.html',
        icon: 'tabs.gif',
        desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'
    },{
        text: 'TabPanel Scroller Menu',
        url: 'tabs/tab-scroller-menu.html',
        icon: 'tab-panel-scroller-menu.gif',
        desc: 'An example of an overflow menu that appears to the right of the TabPanel tab strip',
        status: 'new'
    },{
        text: 'Advanced Tabs',
        url: 'tabs/tabs-adv.html',
        icon: 'tabs-adv.gif',
        desc: 'Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.'
    },{
        text: 'Group Tabs',
        url: 'grouptabs/grouptabs.html',
        icon: 'group-tabs.gif',
        desc: 'A custom example on how to setup tab grouping using vertical tabs.',
        status: 'new'
    }]
},{
    title: 'Charts',
    samples: [{
        text: 'Charts',
        url: 'chart/charts.html',
        icon: 'charts.gif',
        desc: 'A sampling of several chart styles',
        status: 'new'
    },{
        text: 'Pie Chart',
        url: 'chart/pie-chart.html',
        icon: 'chart-pie.gif',
        desc: 'An example of a pie chart',
        status: 'new'
    },{
        text: 'Stacked Bar Chart',
        url: 'chart/stacked-bar-chart.html',
        icon: 'chart-stacked.gif',
        desc: 'An example of a stacked bar chart',
        status: 'new'
    },{
        text: 'Reloaded Chart',
        url: 'chart/reload-chart.html',
        icon: 'chart-reload.gif',
        desc: 'An example demonstrating chart data reloading',
        status: 'new'
    }]
},{
    title: 'Windows',
    samples: [{
        text: 'Hello World',
        url: 'window/hello.html',
        icon: 'window.gif',
        desc: 'Simple "Hello World" window that contains a basic TabPanel.'
    },{
        text: 'MessageBox',
        url: 'message-box/msg-box.html',
        icon: 'msg-box.gif',
        desc: 'Different styles include confirm, alert, prompt, progress and wait and also support custom icons.'
    },{
        text: 'Layout Window',
        url: 'window/layout.html',
        icon: 'window-layout.gif',
        desc: 'A window containing a basic BorderLayout with nested TabPanel.'
    }]
},{
    title: 'Trees',
    samples: [{
        text: 'Drag and Drop Reordering',
        url: 'tree/reorder.html',
        icon: 'tree-reorder.gif',
        desc: 'A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.'
    },{
        text: 'Multiple trees',
        url: 'tree/two-trees.html',
        icon: 'tree-two.gif',
        desc: 'Drag and drop between two different sorted TreePanels.'
    },{
        text: 'Column Tree',
        url: 'tree/column-tree.html',
        icon: 'tree-columns.gif',
        desc: 'A custom TreePanel implementation that demonstrates extending an existing component.'
    },{
        text: 'Check Tree',
        url: 'tree/check-tree.html',
        icon: 'tree-check.gif',
        desc: 'An example showing simple checkbox selection in a tree.',
        status: 'new'
    },{
        text: 'XML Tree Loader',
        url: 'tree/xml-tree-loader.html',
        icon: 'tree-xml-loader.gif',
        desc: 'A custom TreeLoader implementation that demonstrates loading a tree from an XML document.'
    }]
},{
    title: 'Layout Managers',
    samples: [{
        text: 'Layout Browser',
        url:  'layout-browser/layout-browser.html',
        icon: 'layout-browser.gif',
        desc: 'Comprehensive showcase of the standard layout managers as well as several custom and combination layouts and combination examples.',
        status: 'updated'
    },{
        text: 'Border Layout',
        url:  'layout/complex.html',
        icon: 'border-layout.gif',
        desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'
    },{
        text: 'Accordion Layout',
        url:  'layout/accordion.html',
        icon: 'layout-accordion.gif',
        desc: 'A basic accordion layout within a border layout.'
    },{
        text: 'Absolute Layout (Form)',
        url:  'form/absform.html',
        icon: 'layout-absolute.gif',
        desc: 'A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.'
    },{
        text: 'Anchor Layout (Form)',
        url:  'form/anchoring.html',
        icon: 'layout-form.gif',
        desc: 'A simple example of form fields utilizing an anchor layout in a window for flexible form resizing.'
    },{
        text: 'Anchor Layout (Panel)',
        url:  'layout/anchor.html',
        icon: 'layout-anchor.gif',
        desc: 'An example of Panels anchored in the browser window.'
    },{
        text: 'Column Layout',
        url:  'layout/column.html',
        icon: 'layout-column.gif',
        desc: 'An example of Panels managed by a column layout.'
    },{
        text: 'Table Layout',
        url:  'layout/table.html',
        icon: 'layout-table.gif',
        desc: 'An example of Panels managed by a table layout.'
    },{
        text: 'HBox Layout',
        url:  'layout/hbox.html',
        icon: 'layout-column.gif',
        desc: 'Interactive layout illustrating the capabilities of the HBox Layout.',
        status: 'new'
    },{
        text: 'VBox Layout',
        url:  'layout/vbox.html',
        icon: 'blank.gif',
        desc: 'Interactive layout illustrating the capabilities of the VBox Layout.',
        status: 'new'
    },{
        text: 'Portal Demo',
        url:  'portal/portal.html',
        icon: 'portal.gif',
        desc: 'A page layout using several custom extensions to provide a web portal interface.'
    }]
},{
    title: 'ComboBox',
    samples: [{
        text: 'Basic ComboBox',
        url: 'form/combos.html',
        icon: 'combo.gif',
        desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'
    },{
        text: 'ComboBox Templates',
        url: 'form/forum-search.html',
        icon: 'combo-custom.gif',
        desc: 'Customized combo with template-based list rendering, remote loading and paging.'
    }]
},{
    title: 'Forms',
    samples: [{
        text: 'Dynamic Forms',
        url: 'form/dynamic.html',
        icon: 'form-dynamic.gif',
        desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'
    },{
        text: 'Ajax with XML Forms',
        url: 'form/xml-form.html',
        icon: 'form-xml.gif',
        desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'
    },{
        text: 'Custom Search Fields',
        url: 'form/custom.html',
        icon: 'form-custom.gif',
        desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'
    },{
        text: 'Binding a Grid to a Form',
        url:  'form/form-grid.html',
        icon: 'form-grid-binding.gif',
        desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.'
    },{
        text: 'Advanced Validation',
        url:  'form/adv-vtypes.html',
        icon: 'form-adv-vtypes.gif',
        desc: 'Relational form field validation using custom vtypes.'
    },{
        text: 'Checkbox/Radio Groups',
        url:  'form/check-radio.html',
        icon: 'form-check-radio.gif',
        desc: 'Many examples showing different checkbox and radio group configurations.'
    },{
        text: 'File Upload Field',
        url:  'form/file-upload.html',
        icon: 'form-file-upload.gif',
        desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.'
    },{
        text: 'Spinner Field',
        url:  'spinner/spinner.html',
        icon: 'form-spinner.gif',
        desc: 'An example of a custom spinner widget.',
        status: 'new'
    },{
        text: 'MultiSelect and ItemSelector',
        url:  'multiselect/multiselect-demo.html',
        icon: 'form-multiselect.gif',
        desc: 'Example controls for selecting a list of items in forms.'
    }]
},{
    title: 'Toolbars and Menus',
    samples: [{
        text: 'Basic Toolbar',
        url:  'menu/menus.html',
        icon: 'toolbar.gif',
        desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.',
        status: 'updated'
    },{
        text: 'Toolbar Overflow',
        url:  'toolbar/overflow.html',
        icon: 'toolbar-overflow.gif',
        desc: 'Dynamic overflow of toolbar buttons into an Ext.menu.',
        status: 'new'
    },{
        text: 'Toolbar Button Groups',
        url:  'toolbar/toolbars.html',
        icon: 'toolbar-button-groups.gif',
        desc: 'Group buttons together in the toolbar.',
        status: 'new'
    },{
        text: 'Ext Actions',
        url:  'menu/actions.html',
        icon: 'toolbar-actions.gif',
        desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'
    },{
        text: 'Status Bar',
        url:  'statusbar/statusbar-demo.html',
        icon: 'statusbar-demo.gif',
        desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.',
        status: 'modified'
    },{
        text: 'Status Bar (Advanced)',
        url:  'statusbar/statusbar-advanced.html',
        icon: 'statusbar-adv.gif',
        desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.',
        status: 'modified'
    }]
},{
    title: 'Templates and DataView',
    samples: [{
        text: 'Templates',
        url: 'core/templates.html',
        icon: 'templates.gif',
        desc: 'A simple example of rendering views from templates bound to data objects.'
    },{
        text: 'DataView',
        url: 'view/data-view.html',
        icon: 'data-view.gif',
        desc: 'A basic DataView with custom plugins for editable labels and drag selection of items.'
    },{
        text: 'DataView (advanced)',
        url: 'view/chooser.html',
        icon: 'chooser.gif',
        desc: 'A more customized DataView supporting sorting and filtering with multiple templates.'
    },{
        text: 'ListView',
        url: 'view/list-view.html',
        icon: 'list-view.gif',
        desc: 'A high performance tabular DataView to be used as a lightweight grid.',
        status: 'new'
    }]
},{
    title   : 'Drag and Drop',
    samples :  [{
        text : 'Grid to Grid Drag and Drop',
        url  : 'dd/dnd_grid_to_grid.html',
        icon : 'dd-gridtogrid.gif',
        desc : 'A simple drag and drop from grid to grid implementation.'
    },{
        text : 'Grid to FormPanel Drag and Drop',
        url  : 'dd/dnd_grid_to_formpanel.html',
        icon : 'dd-gridtoformpanel.gif',
        desc : 'A basic drag and drop from grid to formpanel.'
    },{
        text : 'Field to Grid Drag and Drop',
        url  : 'dd/field-to-grid-dd.html',
        icon : 'dd-fieldtogrid.gif',
        desc : 'Drag from a form field and drop on a grid.',
        status: 'new'
    },{
        text : 'Custom Drag and Drop',
        url  : 'dd/dragdropzones.html',
        icon : 'dd-zones.gif',
        desc : 'Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.'
    }]
},{
    title: 'Direct',
    samples: [{
        text: 'Direct',
        url:  'direct/direct.php',
        icon: 'direct.gif',
        desc: 'An example demonstrating Remoting and Polling the server',
        status: 'new'
    },{
        text: 'Direct Form',
        url:  'direct/direct-form.php',
        icon: 'direct.gif',
        desc: 'Ext.Direct Remoting with a Form',
        status: 'new'
    },{
        text: 'Direct TreeLoader',
        url:  'direct/direct-tree.php',
        icon: 'direct.gif',
        desc: 'Ext.Direct Remoting with a Tree',
        status: 'new'
    }]
},{
    title: 'Miscellaneous',
    samples: [{
        text: 'History',
        url: 'history/history.html',
        icon: 'history.gif',
        desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'
    },{
        text: 'Google Maps',
        url: 'window/gmap.html',
        icon: 'gmap-panel.gif',
        desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'
    },{
        text: 'Slider',
        url: 'slider/slider.html',
        icon: 'slider.gif',
        desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and more.'
    },{
        text: 'QuickTips',
        url: 'simple-widgets/qtips.html',
        icon: 'qtips.gif',
        desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.',
        status: 'updated'
    },{
        text: 'Progress Bar',
        url: 'simple-widgets/progress-bar.html',
        icon: 'progress.gif',
        desc: 'A basic progress bar component shown in various configurations and with custom styles.'
    },{
        text: 'Panels',
        url: 'panel/panels.html',
        icon: 'panel.gif',
        desc: 'A basic collapsible panel example.',
        status: 'updated'
    },{
        text: 'Bubble Panel',
        url: 'panel/bubble-panel.html',
        icon: 'panel-bubble.gif',
        desc: 'An example illustrating customization of a standard panel.',
        status: 'new'
    },{
        text: 'Resizable',
        url: 'resizable/basic.html',
        icon: 'resizable.gif',
        desc: 'Examples of making any element resizable with various configuration options.'
    },{
        text: 'Spotlight',
        url: 'core/spotlight.html',
        icon: 'spotlight.gif',
        desc: 'A utility for masking everything except a single element on the page to visually highlight it.',
        status: 'new'
    },{
        text: 'Buttons',
        url: 'button/buttons.html',
        icon: 'buttons.gif',
        desc: '',
        status: 'new'
    },{
        text: 'Debugging Console',
        url: 'debug/debug-console.html',
        icon: 'debug-console.gif',
        desc: '',
        status: 'new'
    },{
        text: 'Localization (static)',
        url: 'locale/dutch-form.html',
        icon: 'locale-dutch.gif',
        desc: 'Demonstrates fully localizing a form by including a custom locale script.'
    },{
        text: 'Localization (dynamic)',
        url: 'locale/multi-lang.html',
        icon: 'locale-switch.gif',
        desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'
    }]
}];


The source code

/**
 * @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 = function(config){
    if(typeof config == "string"){
        config = {name: config};
    }
    Ext.apply(this, config);

    if(!this.type){
        this.type = "auto";
    }

    var st = Ext.data.SortTypes;
    // named sortTypes are supported, here we look them up
    if(typeof this.sortType == "string"){
        this.sortType = st[this.sortType];
    }

    // set default sortType for strings and dates
    if(!this.sortType){
        switch(this.type){
            case "string":
                this.sortType = st.asUCString;
                break;
            case "date":
                this.sortType = st.asDate;
                break;
            default:
                this.sortType = st.none;
        }
    }

    // define once
    var stripRe = /[\$,%]/g;

    // prebuilt conversion function for this field, instead of
    // switching every time we're reading a value
    if(!this.convert){
        var cv, dateFormat = this.dateFormat;
        switch(this.type){
            case "":
            case "auto":
            case undefined:
                cv = function(v){ return v; };
                break;
            case "string":
                cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
                break;
            case "int":
                cv = function(v){
                    return v !== undefined && v !== null && v !== '' ?
                           parseInt(String(v).replace(stripRe, ""), 10) : '';
                    };
                break;
            case "float":
                cv = function(v){
                    return v !== undefined && v !== null && v !== '' ?
                           parseFloat(String(v).replace(stripRe, ""), 10) : '';
                    };
                break;
            case "bool":
            case "boolean":
                cv = function(v){ return v === true || v === "true" || v == 1; };
                break;
            case "date":
                cv = function(v){
                    if(!v){
                        return '';
                    }
                    if(Ext.isDate(v)){
                        return v;
                    }
                    if(dateFormat){
                        if(dateFormat == "timestamp"){
                            return new Date(v*1000);
                        }
                        if(dateFormat == "time"){
                            return new Date(parseInt(v, 10));
                        }
                        return Date.parseDate(v, dateFormat);
                    }
                    var parsed = Date.parse(v);
                    return parsed ? new Date(parsed) : null;
                };
             break;

        }
        this.convert = cv;
    }
};

Ext.data.Field.prototype = {

/**
     * @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 {String} type
     * (Optional) The data type for conversion to displayable value if {@link Ext.data.Field#convert convert}
     * has not been specified. Possible values are
     *

     *
  • auto (Default, implies no conversion)
    •
     *
  • string
    •
     *
  • int
    •
     *
  • float
    •
     *
  • boolean
    •
     *
  • date

     */

/**
     * @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) 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.
     */
    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

/**
 * @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'
    }
}),
 *

 */
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
}

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

            // manually set the private connection URL.
            // Warning:  Accessing the private URL property should be avoided.
            // Use the public method {@link Ext.data.HttpProxy#setUrl setUrl} instead, shown above.
            // It should be noted that changing the URL like this will affect
            // the URL for just this request.  Subsequent requests will use the
            // API or URL defined in your initial proxy configuration.
            store.proxy.conn.url = 'changed1.php';

            // proxy URL will be superseded by API (only if proxy created to use ajax):
            // It should be noted that proxy API changes are permanent and will
            // be used for all subsequent requests.
            store.proxy.api.load = 'changed2.php';

            // However, altering the proxy API should be done using the public
            // method {@link Ext.data.DataProxy#setApi setApi} instead.
            store.proxy.setApi('load', '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'
            });
        }
    }
});
     *

     *

     */
    // 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();
        }
    }

    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.
         * 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
         * @param {DataProxy} this The proxy for the request
         * @param {String} action [Ext.data.Api.actions.create|update|destroy]
         * @param {Record/Array[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
         * @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 records 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);
};

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
    ...
)}
     *

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

     */
    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 Scope with which to call the callback (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
     * (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);
    },

    /**
     * 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/Array[Ext.data.Record]} The record or Array of Records being acted upon.
     * @return {String} url
     * @private
     */
    buildUrl : function(action, record) {
        record = record || null;
        var url = (this.api[action]) ? this.api[action].url : this.url;
        if (!url) {
            throw new Ext.data.Api.Error('invalid-url', action);
        }

        var format = null;
        var m = url.match(/(.*)(\.\w+)$/);  // <-- look for urls with "provides" suffix, e.g.: /users.json, /users.xml, etc
        if (m) {
            format = m[2];
            url = m[1];
        }
        // prettyUrls is deprectated in favor of restful-config
        if ((this.prettyUrls === true || this.restful === true) && record instanceof Ext.data.Record && !record.phantom) {
            url += '/' + record.id;
        }
        if (format) {   // <-- append the request format if exists (ie: /users/update/69[.json])
            url += format;
        }
        return url;
    },

/**
     * Destroys the proxy by purging any event listeners and cancelling any active requests.
     */
    destroy: function(){
        this.purgeListeners();
    }
});

/**
 * @class Ext.data.DataProxy.Error
 * @extends Ext.Error
 * DataProxy Error extension.
 * constructor
 * @param {String} name
 * @param {Record/Array[Record]/Array}
 */
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

/**
 * @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;

    // make sure extraction functions are defined.
    this.buildExtractors();
};

Ext.data.DataReader.prototype = {

/**
     * Abstract method, overridden in {@link Ext.data.JsonReader}
     */
    buildExtractors : 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);
            }
            var values = this.extractValues(data, rs.fields.items, rs.fields.items.length);
            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 = data[this.meta.idProperty];
            rs.data = values;
            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 = this.extractValues(Ext.apply(rs.data, data), rs.fields.items, rs.fields.items.length);
            }
            rs.commit();
        }
    },

/**
     * 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(data[this.meta.idProperty])) ? true : false;
    }
};

/**
 * @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

/**
 * @class Ext.DataView.LabelEditor
 * @extends Ext.Editor
 *
 */
Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
    alignment: "tl-tl",
    hideEl : false,
    cls: "x-small-editor",
    shim: false,
    completeOnEnter: true,
    cancelOnEsc: true,
    labelSelector: 'span.x-editable',

    constructor: function(cfg, field){
        Ext.DataView.LabelEditor.superclass.constructor.call(this,
            field || new Ext.form.TextField({
                allowBlank: false,
                growMin:90,
                growMax:240,
                grow:true,
                selectOnFocus:true
            }), cfg
        );
    },

    init : function(view){
        this.view = view;
        view.on('render', this.initEditor, this);
        this.on('complete', this.onSave, this);
    },

    initEditor : function(){
        this.view.on({
            scope: this,
            containerclick: this.doBlur,
            click: this.doBlur
        });
        this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
    },

    doBlur: function(){
        if(this.editing){
            this.field.blur();
        }
    },

    onMouseDown : function(e, target){
        if(!e.ctrlKey && !e.shiftKey){
            var item = this.view.findItemFromChild(target);
            e.stopEvent();
            var record = this.view.store.getAt(this.view.indexOf(item));
            this.startEdit(target, record.data[this.dataIndex]);
            this.activeRecord = record;
        }else{
            e.preventDefault();
        }
    },

    onSave : function(ed, value){
        this.activeRecord.set(this.dataIndex, value);
    }
});

Ext.DataView.DragSelector = function(cfg){
    cfg = cfg || {};
    var view, proxy, tracker;
    var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
    var dragSafe = cfg.dragSafe === true;

    this.init = function(dataView){
        view = dataView;
        view.on('render', onRender);
    };

    function fillRegions(){
        rs = [];
        view.all.each(function(el){
            rs[rs.length] = el.getRegion();
        });
        bodyRegion = view.el.getRegion();
    }

    function cancelClick(){
        return false;
    }

    function onBeforeStart(e){
        return !dragSafe || e.target == view.el.dom;
    }

    function onStart(e){
        view.on('containerclick', cancelClick, view, {single:true});
        if(!proxy){
            proxy = view.el.createChild({cls:'x-view-selector'});
        }else{
            proxy.setDisplayed('block');
        }
        fillRegions();
        view.clearSelections();
    }

    function onDrag(e){
        var startXY = tracker.startXY;
        var xy = tracker.getXY();

        var x = Math.min(startXY[0], xy[0]);
        var y = Math.min(startXY[1], xy[1]);
        var w = Math.abs(startXY[0] - xy[0]);
        var h = Math.abs(startXY[1] - xy[1]);

        dragRegion.left = x;
        dragRegion.top = y;
        dragRegion.right = x+w;
        dragRegion.bottom = y+h;

        dragRegion.constrainTo(bodyRegion);
        proxy.setRegion(dragRegion);

        for(var i = 0, len = rs.length; i < len; i++){
            var r = rs[i], sel = dragRegion.intersect(r);
            if(sel && !r.selected){
                r.selected = true;
                view.select(i, true);
            }else if(!sel && r.selected){
                r.selected = false;
                view.deselect(i);
            }
        }
    }

    function onEnd(e){
        if (!Ext.isIE) {
            view.un('containerclick', cancelClick, view);
        }
        if(proxy){
            proxy.setDisplayed(false);
        }
    }

    function onRender(view){
        tracker = new Ext.dd.DragTracker({
            onBeforeStart: onBeforeStart,
            onStart: onStart,
            onDrag: onDrag,
            onEnd: onEnd
        });
        tracker.initEl(view.el);
    }
};


The source code

/**
 * @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,

    //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 overCls 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 overCls 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);
        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){
            this.store.un("beforeload", this.onBeforeLoad, this);
            this.store.un("datachanged", this.refresh, 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 && this.store.autoDestroy){
                this.store.destroy();
            }
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on({
                scope: this,
                beforeload: this.onBeforeLoad,
                datachanged: this.refresh,
                add: this.onAdd,
                remove: this.onRemove,
                update: this.onUpdate,
                clear: this.refresh
            });
        }
        this.store = store;
        if(store){
            this.refresh();
        }
    },

/**
     * 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} node The node or node index 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} node The node 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} nodeInfo An HTMLElement template node, index of a template node,
     * id of a template 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} nodeInfo An HTMLElement template node, index of a template node or the id of a template 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];
        }
        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} nodeInfo An HTMLElement template node, index of a template node or the id of a template 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(){
        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

/**
 * @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();
 *

 *
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'
});
 *

 *
For finer grained control, the proxy may also be configured with an api:

 *

// Use the api specification
var proxy = new Ext.data.HttpProxy({
    api: {
        read    : 'app.php/users/read',
        create  : 'app.php/users/create',
        update  : 'app.php/users/update',
        destroy : 'app.php/users/destroy'
    }
});
 *

 *
Creating a Writer enabled store:

 *

var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader,
    writer: writer
});
 *

 * @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){

/**
     * This DataWriter's configured metadata as passed to the constructor.
     * @type Mixed
     * @property meta
     */
    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.

/**
     * Writes data in preparation for server-write action.  Simply proxies to DataWriter#update, DataWriter#create
     * DataWriter#destroy.
     * @param {String} action [CREATE|UPDATE|DESTROY]
     * @param {Object} params The params-hash to write-to
     * @param {Record/Record[]} rs The recordset write.
     */
    write : function(action, params, rs) {
        this.render(action, rs, params, this[action](rs));
    },

/**
     * 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,

    /**
     * update
     * @param {Object} p Params-hash to apply result to.
     * @param {Record/Record[]} rs Record(s) to write
     * @private
     */
    update : function(rs) {
        var params = {};
        if (Ext.isArray(rs)) {
            var data = [],
                ids = [];
            Ext.each(rs, function(val){
                ids.push(val.id);
                data.push(this.updateRecord(val));
            }, this);
            params[this.meta.idProperty] = ids;
            params[this.meta.root] = data;
        }
        else if (rs instanceof Ext.data.Record) {
            //params[this.meta.idProperty] = rs.id; // <-- removed, un-neccessary.
            params[this.meta.root] = this.updateRecord(rs);
        }
        return params;
    },

/**
     * @cfg {Function} saveRecord Abstract method that should be implemented in all subclasses
     * (e.g.: {@link Ext.data.JsonWriter#saveRecord JsonWriter.saveRecord}
     */
    updateRecord : Ext.emptyFn,

    /**
     * create
     * @param {Object} p Params-hash to apply result to.
     * @param {Record/Record[]} rs Record(s) to write
     * @private
     */
    create : function(rs) {
        var params = {};
        if (Ext.isArray(rs)) {
            var data = [];
            Ext.each(rs, function(val){
                data.push(this.createRecord(val));
            }, this);
            params[this.meta.root] = data;
        }
        else if (rs instanceof Ext.data.Record) {
            params[this.meta.root] = this.createRecord(rs);
        }
        return params;
    },

/**
     * @cfg {Function} createRecord Abstract method that should be implemented in all subclasses
     * (e.g.: {@link Ext.data.JsonWriter#createRecord JsonWriter.createRecord})
     */
    createRecord : Ext.emptyFn,

    /**
     * destroy
     * @param {Object} p Params-hash to apply result to.
     * @param {Record/Record[]} rs Record(s) to write
     * @private
     */
    destroy : function(rs) {
        var params = {};
        if (Ext.isArray(rs)) {
            var data = [],
                ids = [];
            Ext.each(rs, function(val){
                data.push(this.destroyRecord(val));
            }, this);
            params[this.meta.root] = data;
        } else if (rs instanceof Ext.data.Record) {
            params[this.meta.root] = this.destroyRecord(rs);
        }
        return params;
    },

/**
     * @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
     * @param {Record}
     * @private
     */
    toHash : function(rec) {
        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;
            }
        });
        data[this.meta.idProperty] = rec.id;
        return data;
    }
};


The source code

/**
 * @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 repesentation of the passed Date object:

     *
  • 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 = y >= 0? y : Ext.num(def.y, dt.getFullYear());",
                    "m = m >= 0? m : Ext.num(def.m - 1, dt.getMonth());",
                    "d = d >= 0? d : Ext.num(def.d, dt.getDate());",

                    // time calculations (note: these calculations create a dependency on Ext.num())
                    "h  = h || Ext.num(def.h, dt.getHours());",
                    "i  = i || Ext.num(def.i, dt.getMinutes());",
                    "s  = s || Ext.num(def.s, dt.getSeconds());",
                    "ms = 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('') + "$", "i");
            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 == 12) { h = 0; }\n"
                + "} else { if (h < 12) { h += 12; }}",
            s:"(am|pm)"
        },
        A: {
            g:1,
            c:"if (results[{0}] == 'AM') {\n"
                + "if (h == 12) { h = 0; }\n"
                + "} else { if (h < 12) { h += 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 i = 0,
            num = 0,
            d = this.clone(),
            m = this.getMonth();

        for (i = 0, 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

/**
 * @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"},

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

    // 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);
        }
    },

    // private
    validateValue : function(value){
        value = this.formatDate(value);
        if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
            return false;
        }
        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
             return true;
        }
        var svalue = value;
        value = this.parseDate(value);
        if(!value){
            this.markInvalid(String.format(this.invalidText, svalue, this.format));
            return false;
        }
        var time = value.getTime();
        if(this.minValue && time < this.minValue.getTime()){
            this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
            return false;
        }
        if(this.maxValue && time > this.maxValue.getTime()){
            this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
            return false;
        }
        if(this.disabledDays){
            var day = value.getDay();
            for(var i = 0; i < this.disabledDays.length; i++) {
                if(day === this.disabledDays[i]){
                    this.markInvalid(this.disabledDaysText);
                    return false;
                }
            }
        }
        var fvalue = this.formatDate(value);
        if(this.disabledDatesRE && this.disabledDatesRE.test(fvalue)){
            this.markInvalid(String.format(this.disabledDatesText, fvalue));
            return false;
        }
        return true;
    },

    // 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 = Date.parseDate(value, this.format);
        if(!v && this.altFormats){
            if(!this.altFormatsArray){
                this.altFormatsArray = this.altFormats.split("|");
            }
            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
                v = Date.parseDate(value, this.altFormatsArray[i]);
            }
        }
        return v;
    },

    // private
    onDestroy : function(){
        Ext.destroy(this.menu);
        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
            });
        }
        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

/**
 * @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 {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.apply({
                internalRender: this.strict || !Ext.isIE,
                ctCls: 'x-menu-date-item'
            }, 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('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

/**
 * @class Ext.DatePicker
 * @extends Ext.Component
 * Simple date picker class.
 * @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
    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 DatePicker instance.
     */

/**
     * @cfg {String} todayTip
     * The tooltip to display for the button that selects the current date (defaults to '{current date} (Spacebar)')
     */
    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
    initComponent : function(){
        Ext.DatePicker.superclass.initComponent.call(this);

        this.value = this.value ?
                 this.value.clearTime() : new Date().clearTime();

        this.addEvents(

/**
             * @event select
             * Fires when a date is selected
             * @param {DatePicker} this
             * @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){
        var old = this.value;
        this.value = value.clearTime(true);
        if(this.el){
            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(){
        if(this.el){
            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.setValue(new Date(t.dateValue));
            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){
        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){
                           Ext.fly(c.dom.firstChild).focus(50);
                       }
                       return false;
                   }
                });
                return;
            }
        }
        var days = date.getDaysInMonth();
        var firstOfMonth = date.getFirstDateOfMonth();
        var startingPos = firstOfMonth.getDay()-this.startDay;

        if(startingPos <= this.startDay){
            startingPos += 7;
        }

        var pm = date.add('mo', -1);
        var prevStart = pm.getDaysInMonth()-startingPos;

        var cells = this.cells.elements;
        var textEls = this.textNodes;
        days += startingPos;

        // convert everything to numbers so it's fast
        var day = 86400000;
        var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
        var today = new Date().clearTime().getTime();
        var sel = date.clearTime().getTime();
        var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
        var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
        var ddMatch = this.disabledDatesRE;
        var ddText = this.disabledDatesText;
        var ddays = this.disabledDays ? this.disabledDays.join('') : false;
        var ddaysText = this.disabledDaysText;
        var format = this.format;

        if(this.showToday){
            var td = new Date().clearTime();
            var 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.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;
            var 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){
            this.keyNav.disable();
            this.keyNav = null;
            Ext.destroy(
                this.leftClickRpt,
                this.rightClickRpt,
                this.monthPicker,
                this.eventEl,
                this.mbtn,
                this.todayBtn
            );
        }
    }

/**
     * @cfg {String} autoEl @hide
     */
});

Ext.reg('datepicker', Ext.DatePicker);


The source code

Ext.namespace('Ext.ux.form');

/**
  * Ext.ux.form.DateTime Extension Class for Ext 2.x Library
  *
  * @author    Ing. Jozef Sakalos
  * @copyright (c) 2008, Ing. Jozef Sakalos
  * @version $Id: Ext.ux.form.DateTime.js 645 2008-01-27 21:53:01Z jozo $
  *
  * @class Ext.ux.form.DateTime
  * @extends Ext.form.Field
  *
  * @history
  * 2008-1-31 Jack Slocum
  * Updated for reformatting and code edits
  */
Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, {
    defaultAutoCreate: {
        tag: 'input',
        type: 'hidden'
    },
    dateWidth: 135,
    timeWidth: 100,
    dtSeparator: ' ',
    hiddenFormat: 'Y-m-d H:i:s',
    otherToNow: true,
    timePosition: 'right',

    initComponent: function(){
        // call parent initComponent
        Ext.ux.form.DateTime.superclass.initComponent.call(this);

        // create DateField
        var dateConfig = Ext.apply({}, {
            id: this.id + '-date',
            format: this.dateFormat,
            width: this.dateWidth,
            listeners: {
                blur: {
                    scope: this,
                    fn: this.onBlur
                },
                focus: {
                    scope: this,
                    fn: this.onFocus
                }
            }
        }, this.dateConfig);
        this.df = new Ext.form.DateField(dateConfig);
        delete (this.dateFormat);

        // create TimeField
        var timeConfig = Ext.apply({}, {
            id: this.id + '-time',
            format: this.timeFormat,
            width: this.timeWidth,
            listeners: {
                blur: {
                    scope: this,
                    fn: this.onBlur
                },
                focus: {
                    scope: this,
                    fn: this.onFocus
                }
            }
        }, this.timeConfig);
        this.tf = new Ext.form.TimeField(timeConfig);
        delete (this.timeFormat);

        // relay events
        this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);
        this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);

    },
    onRender: function(ct, position){
        if (this.isRendered) {
            return;
        }

        // render underlying field
        Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position);

        // render DateField and TimeField
        // create bounding table
        if ('below' === this.timePosition) {
            var t = Ext.DomHelper.append(ct, {
                tag: 'table',
                style: 'border-collapse:collapse',
                children: [{
                    tag: 'tr',
                    children: [{
                        tag: 'td',
                        style: 'padding-bottom:1px',
                        cls: 'ux-datetime-date'
                    }]
                }, {
                    tag: 'tr',
                    children: [{
                        tag: 'td',
                        cls: 'ux-datetime-time'
                    }]
                }]
            }, true);
        }
        else {
            var t = Ext.DomHelper.append(ct, {
                tag: 'table',
                style: 'border-collapse:collapse',
                children: [{
                    tag: 'tr',
                    children: [{
                        tag: 'td',
                        style: 'padding-right:4px',
                        cls: 'ux-datetime-date'
                    }, {
                        tag: 'td',
                        cls: 'ux-datetime-time'
                    }]
                }]
            }, true);
        }

        this.tableEl = t;
        this.wrap = t.wrap({
            cls: 'x-form-field-wrap'
        });
        this.wrap.on("mousedown", this.onMouseDown, this, {
            delay: 10
        });

        // render DateField & TimeField
        this.df.render(t.child('td.ux-datetime-date'));
        this.tf.render(t.child('td.ux-datetime-time'));

        if (Ext.isIE && Ext.isStrict) {
            t.select('input').applyStyles({
                top: 0
            });
        }

        this.on('specialkey', this.onSpecialKey, this);

        this.df.el.swallowEvent(['keydown', 'keypress']);
        this.tf.el.swallowEvent(['keydown', 'keypress']);

        // create errorIcon for side invalid
        if ('side' === this.msgTarget) {
            var elp = this.el.findParent('.x-form-element', 10, true);
            this.errorIcon = elp.createChild({
                cls: 'x-form-invalid-icon'
            });

            this.df.errorIcon = this.errorIcon;
            this.tf.errorIcon = this.errorIcon;
        }

        this.isRendered = true;

    },
    getPositionEl: function(){
        return this.wrap;
    },
    getResizeEl: function(){
        return this.wrap;
    },

    adjustSize: Ext.BoxComponent.prototype.adjustSize,

    alignErrorIcon: function(){
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    },

    onSpecialKey: function(t, e){
        if (e.getKey() == e.TAB) {
            if (t === this.df && !e.shiftKey) {
                e.stopEvent();
                this.tf.focus();
            }
            if (t === this.tf && e.shiftKey) {
                e.stopEvent();
                this.df.focus();
            }
        }
    },

    setSize: function(w, h){
        if (!w) {
            return;
        }
        if ('below' == this.timePosition) {
            this.df.setSize(w, h);
            this.tf.setSize(w, h)
            if (Ext.isIE) {
                this.df.el.up('td').setWidth(w);
                this.tf.el.up('td').setWidth(w);
            }
        }
        else {
            this.df.setSize(w - this.timeWidth - 4, h);
            this.tf.setSize(this.timeWidth, h);

            if (Ext.isIE) {
                this.df.el.up('td').setWidth(w - this.timeWidth - 4);
                this.tf.el.up('td').setWidth(this.timeWidth);
            }
        }

    },

    setValue: function(val){
        if (!val) {
            this.setDate('');
            this.setTime('');
            this.updateValue();
            return;
        }
        // clear cross frame AIR nonsense
        val = new Date(val.getTime());
        var da, time;
        if (Ext.isDate(val)) {
            this.setDate(val);
            this.setTime(val);
            this.dateValue = new Date(val);
        }
        else {
            da = val.split(this.dtSeparator);
            this.setDate(da[0]);
            if (da[1]) {
                this.setTime(da[1]);
            }
        }
        this.updateValue();
    },

    getValue: function(){
        // create new instance of date
        return this.dateValue ? new Date(this.dateValue) : '';
    },

    onMouseDown: function(e){
        // just to prevent blur event when clicked in the middle of fields
        this.wrapClick = 'td' === e.target.nodeName.toLowerCase();
    },

    onFocus: function(){
        if (!this.hasFocus) {
            this.hasFocus = true;
            this.startValue = this.getValue();
            this.fireEvent("focus", this);
        }
    },

    onBlur: function(f){
        // called by both DateField and TimeField blur events

        // revert focus to previous field if clicked in between
        if (this.wrapClick) {
            f.focus();
            this.wrapClick = false;
        }

        // update underlying value
        if (f === this.df) {
            this.updateDate();
        }
        else {
            this.updateTime();
        }
        this.updateHidden();

        // fire events later
        (function(){
            if (!this.df.hasFocus && !this.tf.hasFocus) {
                var v = this.getValue();
                if (String(v) !== String(this.startValue)) {
                    this.fireEvent("change", this, v, this.startValue);
                }
                this.hasFocus = false;
                this.fireEvent('blur', this);
            }
        }).defer(100, this);

    },
    updateDate: function(){

        var d = this.df.getValue();
        if (d) {
            if (!Ext.isDate(this.dateValue)) {
                this.initDateValue();
                if (!this.tf.getValue()) {
                    this.setTime(this.dateValue);
                }
            }
            this.dateValue.setFullYear(d.getFullYear());
            this.dateValue.setMonth(d.getMonth());
            this.dateValue.setDate(d.getDate());
        }
        else {
            this.dateValue = '';
            this.setTime('');
        }
    },
    updateTime: function(){
        var t = this.tf.getValue();
        if (t && !Ext.isDate(t)) {
            t = Date.parseDate(t, this.tf.format);
        }
        if (t && !this.df.getValue()) {
            this.initDateValue();
            this.setDate(this.dateValue);
        }
        if (Ext.isDate(this.dateValue)) {
            if (t) {
                this.dateValue.setHours(t.getHours());
                this.dateValue.setMinutes(t.getMinutes());
                this.dateValue.setSeconds(t.getSeconds());
            }
            else {
                this.dateValue.setHours(0);
                this.dateValue.setMinutes(0);
                this.dateValue.setSeconds(0);
            }
        }
    },
    initDateValue: function(){
        this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
    },
    updateHidden: function(){
        if (this.isRendered) {
            var value = Ext.isDate(this.dateValue) ? this.dateValue.format(this.hiddenFormat) : '';
            this.el.dom.value = value;
        }
    },
    updateValue: function(){

        this.updateDate();
        this.updateTime();
        this.updateHidden();

        return;

    },
    setDate: function(date){
        this.df.setValue(date);
    },
    setTime: function(date){
        this.tf.setValue(date);
    },
    isValid: function(){
        return this.df.isValid() && this.tf.isValid();
    },
    validate: function(){
        return this.df.validate() && this.tf.validate();
    },
    focus: function(){
        this.df.focus();
    },

    onDisable : function(){
        if(this.rendered){
            this.df.disable();
            this.tf.disable();
        }
    },

    onEnable : function(){
        if(this.rendered){
            this.df.enable();
            this.tf.enable();
        }
    }
});

// register xtype
Ext.reg('xdatetime', Ext.ux.form.DateTime);


The source code

/*
 * 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
     * @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 availabe 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(typeof pad == "number"){
            pad = {left: pad, right:pad, top:pad, bottom:pad};
        }
        pad = pad || this.defaultPadding;
        var b = Ext.get(this.getEl()).getBox();
        var ce = Ext.get(constrainTo);
        var s = ce.getScroll();
        var 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]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
        }

        var topSpace = b.y - c.y;
        var 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: 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: 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=1000
         * @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} the drag obj
         * @param {DragDrop} 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 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, {
    toString: function() {
        return ("DDTarget " + this.id);
    }
});


The source code

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

        this.body.insertHtml('beforeend', markup);
        this.body.scrollTo('top', 100000);
    },

    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

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

        this.body.insertHtml('beforeend', markup);
        this.body.scrollTo('top', 100000);
    },

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

/**
 * @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 timeout
 * @param {Object} scope (optional) The default scope of that timeout
 * @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
     * @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

Ext.Desktop = function(app){
    this.taskbar = new Ext.ux.TaskBar(app);
    var taskbar = this.taskbar;

    var desktopEl = Ext.get('x-desktop');
    var taskbarEl = Ext.get('ux-taskbar');
    var shortcuts = Ext.get('x-shortcuts');

    var windows = new Ext.WindowGroup();
    var activeWindow;

    function minimizeWin(win){
        win.minimized = true;
        win.hide();
    }

    function markActive(win){
        if(activeWindow && activeWindow != win){
            markInactive(activeWindow);
        }
        taskbar.setActiveButton(win.taskButton);
        activeWindow = win;
        Ext.fly(win.taskButton.el).addClass('active-win');
        win.minimized = false;
    }

    function markInactive(win){
        if(win == activeWindow){
            activeWindow = null;
            Ext.fly(win.taskButton.el).removeClass('active-win');
        }
    }

    function removeWin(win){
        taskbar.removeTaskButton(win.taskButton);
        layout();
    }

    function layout(){
        desktopEl.setHeight(Ext.lib.Dom.getViewHeight()-taskbarEl.getHeight());
    }
    Ext.EventManager.onWindowResize(layout);

    this.layout = layout;

    this.createWindow = function(config, cls){
        var win = new (cls||Ext.Window)(
            Ext.applyIf(config||{}, {
                manager: windows,
                minimizable: true,
                maximizable: true
            })
        );
        win.render(desktopEl);
        win.taskButton = taskbar.addTaskButton(win);

        win.cmenu = new Ext.menu.Menu({
            items: [

            ]
        });

        win.animateTarget = win.taskButton.el;

        win.on({
            'activate': {
                fn: markActive
            },
            'beforeshow': {
                fn: markActive
            },
            'deactivate': {
                fn: markInactive
            },
            'minimize': {
                fn: minimizeWin
            },
            'close': {
                fn: removeWin
            }
        });

        layout();
        return win;
    };

    this.getManager = function(){
        return windows;
    };

    this.getWindow = function(id){
        return windows.get(id);
    }

    this.getWinWidth = function(){
        var width = Ext.lib.Dom.getViewWidth();
        return width < 200 ? 200 : width;
    }

    this.getWinHeight = function(){
        var height = (Ext.lib.Dom.getViewHeight()-taskbarEl.getHeight());
        return height < 100 ? 100 : height;
    }

    this.getWinX = function(width){
        return (Ext.lib.Dom.getViewWidth() - width) / 2
    }

    this.getWinY = function(height){
        return (Ext.lib.Dom.getViewHeight()-taskbarEl.getHeight() - height) / 2;
    }

    layout();

    if(shortcuts){
        shortcuts.on('click', function(e, t){
            if(t = e.getTarget('dt', shortcuts)){
                e.stopEvent();
                var module = app.getModule(t.id.replace('-shortcut', ''));
                if(module){
                    module.createWindow();
                }
            }
        });
    }
};


The source code

// This example illustrates how to load a FormPanel or BasicForm through Ext.Direct.

Ext.onReady(function(){
    // Notice that Direct requests will batch together if they occur
    // within the enableBuffer delay period (in milliseconds).
    // Slow the buffering down from the default of 10ms to 100ms
    Ext.app.REMOTING_API.enableBuffer = 100;
    Ext.Direct.addProvider(Ext.app.REMOTING_API);

    // provide feedback for any errors
    Ext.QuickTips.init();

    var basicInfo = new Ext.form.FormPanel({
        // configs for FormPanel
        title: 'Basic Information',
        border: false,
        padding: 10,
        buttons:[{
            text: 'Submit',
            handler: function(){
                basicInfo.getForm().submit({
                    params: {
                        foo: 'bar',
                        uid: 34
                    }
                });
            }
        }],

        // configs apply to child items
        defaults: {anchor: '-20'}, // provide some room on right for validation errors
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Name',
            name: 'name'
        },{
            fieldLabel: 'Email',
            msgTarget: 'side',
            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']
    });

    var phoneInfo = new Ext.form.FormPanel({
        title: 'Phone Numbers',
        border: false,
        api: {
            load: Profile.getPhoneInfo
        },
        padding: 10,
        paramOrder: ['uid'],
        defaultType: 'textfield',
        defaults: {anchor: '100%'},
        items: [{
            fieldLabel: 'Office',
            name: 'office'
        },{
            fieldLabel: 'Cell',
            name: 'cell'
        },{
            fieldLabel: 'Home',
            name: 'home'
        }]
    });

     var locationInfo = new Ext.form.FormPanel({
        title: 'Location Information',
        border: false,
        padding: 10,
        api: {
            load: Profile.getLocationInfo
        },
        paramOrder: ['uid'],
        defaultType: 'textfield',
        defaults: {anchor: '100%'},
        items: [{
            fieldLabel: 'Street',
            name: 'street'
        },{
            fieldLabel: 'City',
            name: 'city'
        },{
            fieldLabel: 'State',
            name: 'state'
        },{
            fieldLabel: 'Zip',
            name: 'zip'
        }]
    });

     var accordion = new Ext.Panel({
        layout: 'accordion',
        renderTo: Ext.getBody(),
        title: 'My Profile',
        width: 300,
        height: 240,
        items: [basicInfo, phoneInfo, locationInfo]
    });

    // load the forms (notice the load requests will get batched together)
    basicInfo.getForm().load({
        // pass 2 arguments to server side getBasicInfo method (len=2)
        params: {
            foo: 'bar',
            uid: 34
        }
    });

    phoneInfo.getForm().load({
        params: {
            uid: 5
        }
    });

    // defer this request just to simulate the request not getting batched
    // since it exceeds to configured buffer
    (function(){
        locationInfo.getForm().load({
            params: {
                uid: 5
            }
        });
    }).defer(200);

    // rpc call
    TestAction.doEcho('sample');

});


The source code

Ext.onReady(function(){
    Ext.Direct.addProvider(Ext.app.REMOTING_API);

    var tree = new Ext.tree.TreePanel({
        width: 400,
        height: 400,
        autoScroll: true,
        renderTo: document.body,
        root: {
            id: 'root',
            text: 'Root'
        },
        loader: new Ext.tree.TreeLoader({
            directFn: TestAction.getTree
        }),
        fbar: [{
            text: 'Reload root',
            handler: function(){
                tree.getRootNode().reload();
            }
        }]
    });
});


The source code

/**
 * @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.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

Imgorg.DirectCombo = Ext.extend(Ext.form.ComboBox, {
    displayField: 'text',
    valueField: 'id',
    triggerAction: 'all',
    queryAction: 'name',
    forceSelection: true,
    mode: 'remote',

    initComponent: function() {
        this.store = new Ext.data.DirectStore(Ext.apply({
            api: this.api,
            root: '',
            fields: this.fields || ['text', 'id']
        }, this.storeConfig));

        Imgorg.DirectCombo.superclass.initComponent.call(this);
    }
});

Imgorg.TagCombo = Ext.extend(Imgorg.DirectCombo,{
    forceSelection: false,
    storeConfig: {
        id: 'tag-store'
    },
    initComponent: function() {
        Ext.apply(this.storeConfig, {
            directFn: Imgorg.ss.Tags.load
        });
        Imgorg.TagCombo.superclass.initComponent.call(this);
    }
});
Ext.reg('img-tagcombo', Imgorg.TagCombo);

Imgorg.TagMultiCombo = Ext.extend(Ext.ux.MultiCombo,{
    listClass: 'label-combo',
    displayField: 'text',
    valueField: 'id',

    initComponent: function() {
        this.store = new Ext.data.DirectStore(Ext.apply({
            directFn: Imgorg.ss.Tags.load,
            root: '',
            autoLoad: true,
            fields: this.fields || ['text', 'id']
        }, this.storeConfig));
        this.plugins =new Ext.ux.MultiCombo.Checkable({});
        Imgorg.DirectCombo.superclass.initComponent.call(this);
    }
});
Ext.reg('img-tagmulticombo', Imgorg.TagMultiCombo);

Imgorg.AlbumCombo = Ext.extend(Imgorg.DirectCombo, {
    storeConfig: {
        id: 'album-store'
    },
    initComponent: function() {
        Ext.apply(this.storeConfig, {
            directFn: Imgorg.ss.Albums.getAllInfo
        });
        Imgorg.AlbumCombo.superclass.initComponent.call(this);
    }
});
Ext.reg('img-albumcombo', Imgorg.AlbumCombo);


The source code

/**
 * @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,

    // protected
    doRequest : function(action, rs, params, reader, callback, scope, options) {
        var args = [];
        var directFn = this.api[action] || this.directFn;

        switch (action) {
            case Ext.data.Api.actions.create:
                args.push(params[reader.meta.root]);		// <-- create(Hash)
                break;
            case Ext.data.Api.actions.read:
                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[reader.meta.idProperty]);  // <-- save(Integer/Integer[], Hash/Hash[])
                args.push(params[reader.meta.root]);
                break;
            case Ext.data.Api.actions.destroy:
                args.push(params[reader.meta.root]);        // <-- 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) {
        return function(result, res) {
            if (!res.status) {
                // @deprecated fire loadexception
                if (action === Ext.data.Api.actions.read) {
                    this.fireEvent("loadexception", this, trans, res, null);
                }
                this.fireEvent('exception', this, '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) {
                this.onRead(action, trans, result, res);
            } else {
                this.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} res The server response
     * @private
     */
    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 [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} trans The request transaction object
     * @param {Object} res The server response
     * @private
     */
    onWrite : function(action, trans, result, res, rs) {
        this.fireEvent("write", this, action, result, res, rs, trans.request.arg);
        trans.request.callback.call(trans.request.scope, result, res, true);
    }
});


The source code

/**
 * @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 = function(c){
    // each transaction upon a singe record will generatie a distinct Direct transaction since Direct queues them into one Ajax request.
    c.batchTransactions = false;

    Ext.data.DirectStore.superclass.constructor.call(this, Ext.apply(c, {
        proxy: (typeof(c.proxy) == 'undefined') ? new Ext.data.DirectProxy(Ext.copyTo({}, c, 'paramOrder,paramsAsHash,directFn,api')) : c.proxy,
        reader: (typeof(c.reader) == 'undefined' && typeof(c.fields) == 'object') ? new Ext.data.JsonReader(Ext.copyTo({}, c, 'totalProperty,root,idProperty'), c.fields) : c.reader
    }));
};
Ext.extend(Ext.data.DirectStore, Ext.data.Store, {});
Ext.reg('directstore', Ext.data.DirectStore);


The source code

/**
 * @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

Ext.onReady(function(){

    var myData = {
        records : [
            { name : "Record 0", column1 : "0", column2 : "0" },
            { name : "Record 1", column1 : "1", column2 : "1" },
            { name : "Record 2", column1 : "2", column2 : "2" },
            { name : "Record 3", column1 : "3", column2 : "3" },
            { name : "Record 4", column1 : "4", column2 : "4" },
            { name : "Record 5", column1 : "5", column2 : "5" },
            { name : "Record 6", column1 : "6", column2 : "6" },
            { name : "Record 7", column1 : "7", column2 : "7" },
            { name : "Record 8", column1 : "8", column2 : "8" },
            { name : "Record 9", column1 : "9", column2 : "9" }
        ]
    };

    // Generic fields array to use in both store defs.
    var fields = [
       {name: 'name', mapping : 'name'},
       {name: 'column1', mapping : 'column1'},
       {name: 'column2', mapping : 'column2'}
    ];

    // create the data store
    var gridStore = new Ext.data.JsonStore({
        fields : fields,
        data   : myData,
        root   : 'records'
    });

    // Column Model shortcut array
    var cols = [
        { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
        {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
        {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
    ];

    // declare the source Grid
    var grid = new Ext.grid.GridPanel({
        ddGroup          : 'gridDDGroup',
        store            : gridStore,
        columns          : cols,
        enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'name',
        width            : 325,
        region           : 'west',
        title            : 'Data Grid',
        selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
    });

    // Declare the text fields.  This could have been done inline, is easier to read
    // for folks learning :)
    var textField1 = new Ext.form.TextField({
        fieldLabel : 'Record Name',
        name       : 'name'
    });

    var textField2 = new Ext.form.TextField({
        fieldLabel : 'Column 1',
        name       : 'column1'
    });

    var textField3 = new Ext.form.TextField({
        fieldLabel : 'Column 2',
        name       : 'column2'
    });

    // Setup the form panel
    var formPanel = new Ext.form.FormPanel({
        region     : 'center',
        title      : 'Generic Form Panel',
        bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
        labelWidth : 100,
        width      : 325,
        items      : [
            textField1,
            textField2,
            textField3
        ]
    });

    //Simple 'border layout' panel to house both grids
    var displayPanel = new Ext.Panel({
        width    : 650,
        height   : 300,
        layout   : 'border',
        renderTo : 'panel',
        items    : [
            grid,
            formPanel
        ],
        bbar    : [
            '->', // Fill
            {
                text    : 'Reset Example',
                handler : function() {
                    //refresh source grid
                    gridStore.loadData(myData);
                    formPanel.getForm().reset();
                }
            }
        ]
    });

    // used to add records to the destination stores
    var blankRecord =  Ext.data.Record.create(fields);

/****
    * Setup Drop Targets
    ***/

    // This will make sure we only drop to the view container
    var formPanelDropTargetEl =  formPanel.body.dom;

    var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
        ddGroup     : 'gridDDGroup',
        notifyEnter : function(ddSource, e, data) {

            //Add some flare to invite drop.
            formPanel.body.stopFx();
            formPanel.body.highlight();
        },
        notifyDrop  : function(ddSource, e, data){

            // Reference the record (single selection) for readability
            var selectedRecord = ddSource.dragData.selections[0];

            // Load the record into the form
            formPanel.getForm().loadRecord(selectedRecord);

            // Delete record from the grid.  not really required.
            ddSource.grid.store.remove(selectedRecord);

            return(true);
        }
    });

});


The source code

Ext.onReady(function(){

    var myData = {
        records : [
            { name : "Rec 0", column1 : "0", column2 : "0" },
            { name : "Rec 1", column1 : "1", column2 : "1" },
            { name : "Rec 2", column1 : "2", column2 : "2" },
            { name : "Rec 3", column1 : "3", column2 : "3" },
            { name : "Rec 4", column1 : "4", column2 : "4" },
            { name : "Rec 5", column1 : "5", column2 : "5" },
            { name : "Rec 6", column1 : "6", column2 : "6" },
            { name : "Rec 7", column1 : "7", column2 : "7" },
            { name : "Rec 8", column1 : "8", column2 : "8" },
            { name : "Rec 9", column1 : "9", column2 : "9" }
        ]
    };

    // Generic fields array to use in both store defs.
    var fields = [
       {name: 'name', mapping : 'name'},
       {name: 'column1', mapping : 'column1'},
       {name: 'column2', mapping : 'column2'}
    ];

    // create the data store
    var firstGridStore = new Ext.data.JsonStore({
        fields : fields,
        data   : myData,
        root   : 'records'
    });

    // Column Model shortcut array
    var cols = [
        { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
        {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
        {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
    ];

    // declare the source Grid
    var firstGrid = new Ext.grid.GridPanel({
    ddGroup          : 'secondGridDDGroup',
        store            : firstGridStore,
        columns          : cols,
    enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'name',
        width            : 325,
    region           : 'west',
        title            : 'First Grid'
    });

    var secondGridStore = new Ext.data.JsonStore({
        fields : fields,
        root   : 'records'
    });

    // create the destination Grid
    var secondGrid = new Ext.grid.GridPanel({
    ddGroup          : 'firstGridDDGroup',
        store            : secondGridStore,
        columns          : cols,
    enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'name',
        width            : 325,
    region           : 'center',
        title            : 'Second Grid'
    });

    //Simple 'border layout' panel to house both grids
    var displayPanel = new Ext.Panel({
        width    : 650,
        height   : 300,
        layout   : 'border',
        renderTo : 'panel',
        items    : [
            firstGrid,
            secondGrid
        ],
        bbar    : [
            '->', // Fill
            {
                text    : 'Reset both grids',
                handler : function() {
                    //refresh source grid
                    firstGridStore.loadData(myData);

                    //purge destination grid
                    secondGridStore.removeAll();
                }
            }
        ]
    });

    // used to add records to the destination stores
    var blankRecord =  Ext.data.Record.create(fields);

/****
    * Setup Drop Targets
    ***/
    // This will make sure we only drop to the view container
    var firstGridDropTargetEl =  firstGrid.getView().el.dom.childNodes[0].childNodes[1];
    var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
        ddGroup    : 'firstGridDDGroup',
        copy       : true,
        notifyDrop : function(ddSource, e, data){

            // Generic function to add records.
            function addRow(record, index, allItems) {

                // Search for duplicates
                var foundItem = firstGridStore.findExact('name', record.data.name);
                // if not found
                if (foundItem  == -1) {
                    firstGridStore.add(record);

                    // Call a sort dynamically
                    firstGridStore.sort('name', 'ASC');

                    //Remove Record from the source
                    ddSource.grid.store.remove(record);
                }
            }

            // Loop through the selections
            Ext.each(ddSource.dragData.selections ,addRow);
            return(true);
        }
    });

    // This will make sure we only drop to the view container
    var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]

    var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
        ddGroup    : 'secondGridDDGroup',
        copy       : false,
        notifyDrop : function(ddSource, e, data){

            // Generic function to add records.
            function addRow(record, index, allItems) {

                // Search for duplicates
                var foundItem = secondGridStore.findExact('name', record.data.name);
                // if not found
                if (foundItem  == -1) {
                    secondGridStore.add(record);
                    // Call a sort dynamically
                    secondGridStore.sort('name', 'ASC');

                    //Remove Record from the source
                    ddSource.grid.store.remove(record);
                }
            }
            // Loop through the selections
            Ext.each(ddSource.dragData.selections ,addRow);
            return(true);
        }
    });
});


The source code

/**
 * @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;
                        }
                    }
                }
            });
            pub.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,

/**
         * 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);
                }
            }
        },

/**
         * 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

/**
 * @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(typeof o == 'string'){
            b = o;
        } else if (Ext.isArray(o)) {
            Ext.each(o, function(v) {
                b += createHtml(v);
            });
        } 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;
        while(++i < depth){
            el = el.firstChild;
        }
        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);
        },

/**
         * 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 fragmenet
         * @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

/*
 * 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
    •

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,
        isOpera = Ext.isOpera,
        key = 30803;

    // this eval is stop the compressor from
    // renaming the variable to something shorter
    eval("var batch = 30803;");

    function child(p, index){
        var i = 0,
            n = p.firstChild;
        while(n){
            if(n.nodeType == 1){
               if(++i == index){
                   return n;
               }
            }
            n = n.nextSibling;
        }
        return null;
    };

    function next(n){
        while((n = n.nextSibling) && n.nodeType != 1);
        return n;
    };

    function prev(n){
        while((n = n.previousSibling) && n.nodeType != 1);
        return n;
    };

    function children(d){
        var n = d.firstChild, ni = -1,
            nx;
         while(n){
             nx = n.nextSibling;
             if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
                 d.removeChild(n);
             }else{
                 n.nodeIndex = ++ni;
             }
             n = nx;
         }
         return this;
     };

    function byClassName(c, a, v){
        if(!v){
            return c;
        }
        var r = [], ri = -1, cn;
        for(var i = 0, ci; ci = c[i]; i++){
            if((' '+ci.className+' ').indexOf(v) != -1){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function attrValue(n, attr){
        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];

    };

    function getNodes(ns, mode, tagName){
        var result = [], ri = -1, cs;
        if(!ns){
            return result;
        }
        tagName = tagName || "*";
        if(typeof ns.getElementsByTagName != "undefined"){
            ns = [ns];
        }
        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;
                }
            }
        }else if(mode == "/" || mode == ">"){
            var utag = tagName.toUpperCase();
            for(var i = 0, ni, cn; ni = ns[i]; i++){
                cn = isOpera ? ni.childNodes : (ni.children || ni.childNodes);
                for(var j = 0, cj; cj = cn[j]; j++){
                    if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
                        result[++ri] = cj;
                    }
                }
            }
        }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;
                }
            }
        }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 r = [], ri = -1;
        tagName = tagName.toLowerCase();
        for(var i = 0, ci; ci = cs[i]; i++){
            if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function byId(cs, attr, id){
        if(cs.tagName || cs == document){
            cs = [cs];
        }
        if(!id){
            return cs;
        }
        var r = [], ri = -1;
        for(var i = 0,ci; ci = cs[i]; i++){
            if(ci && ci.id == id){
                r[++ri] = ci;
                return r;
            }
        }
        return r;
    };

    function byAttribute(cs, attr, value, op, custom){
        var r = [],
            ri = -1,
            st = custom=="{",
            f = Ext.DomQuery.operators[op];
        for(var i = 0, ci; ci = cs[i]; i++){
            if(ci.nodeType != 1){
                continue;
            }
            var a;
            if(st){
                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"){
                a = ci.getAttribute("href", 2);
            }else{
                a = ci.getAttribute(attr);
            }
            if((f && f(a, value)) || (!f && a)){
                r[++ri] = ci;
            }
        }
        return r;
    };

    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 && c1[0].selectSingleNode){
            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, null, 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";

            var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"],
                q = path, mode, lq,
                tk = Ext.DomQuery.matchers,
                tklen = tk.length,
                mm,
                // accept leading mode switch
                lmode = q.match(modeRe);

            if(lmode && lmode[1]){
                fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
                q = q.replace(lmode[1], "");
            }
            // strip leading slashes
            while(path.substr(0, 1)=="/"){
                path = path.substr(1);
            }

            while(q && lq != q){
                lq = q;
                var tm = q.match(tagTokenRe);
                if(type == "select"){
                    if(tm){
                        if(tm[1] == "#"){
                            fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
                        }else{
                            fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
                        }
                        q = q.replace(tm[0], "");
                    }else if(q.substr(0, 1) != '@'){
                        fn[fn.length] = 'n = getNodes(n, mode, "*");';
                    }
                }else{
                    if(tm){
                        if(tm[1] == "#"){
                            fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
                        }else{
                            fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
                        }
                        q = q.replace(tm[0], "");
                    }
                }
                while(!(mm = q.match(modeRe))){
                    var matched = false;
                    for(var j = 0; j < tklen; j++){
                        var t = tk[j];
                        var m = q.match(t.re);
                        if(m){
                            fn[fn.length] = t.select.replace(tplRe, function(x, i){
                                                    return m[i];
                                                });
                            q = q.replace(m[0], "");
                            matched = true;
                            break;
                        }
                    }
                    // prevent infinite loop on bad selector
                    if(!matched){
                        throw 'Error parsing selector, parsing failed at "' + q + '"';
                    }
                }
                if(mm[1]){
                    fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
                    q = q.replace(mm[1], "");
                }
            }
            fn[fn.length] = "return nodup(n);\n}";
            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} 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.
         */
        select : function(path, root, type){
            if(!root || root == document){
                root = document;
            }
            if(typeof root == "string"){
                root = document.getElementById(root);
            }
            var paths = path.split(","),
                results = [];
            for(var i = 0, len = paths.length; i < len; i++){
                var p = paths[i].replace(trimRe, "");
                if(!cache[p]){
                    cache[p] = Ext.DomQuery.compile(p);
                    if(!cache[p]){
                        throw p + " is not a valid selector";
                    }
                }
                var result = cache[p](root);
                if(result && result != document){
                    results = results.concat(result);
                }
            }
            if(paths.length > 1){
                return nodup(results);
            }
            return results;
        },

/**
         * 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;
            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.
         */
        matchers : [{
                re: /^\.([\w-]+)/,
                select: 'n = byClassName(n, null, " {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, null, "{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;
            }
        },

/**
         * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
         * and the argument (if any) supplied in the selector.
         */
        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

Ext.onReady(function() {

    var patients = [{
        insuranceCode: '11111',
        name: 'Fred Bloggs',
        address: 'Main Street',
        telephone: '555 1234 123'
    }, {
        insuranceCode: '22222',
        name: 'Fred West',
        address: 'Cromwell Street',
        telephone: '666 666 666'
    }, {
        insuranceCode: '33333',
        name: 'Fred Mercury',
        address: 'Over The Rainbow',
        telephone: '555 321 0987'
    }, {
        insuranceCode: '44444',
        name: 'Fred Forsyth',
        address: 'Blimp Street',
        telephone: '555 111 2222'
    }, {
        insuranceCode: '55555',
        name: 'Fred Douglass',
        address: 'Talbot County, Maryland',
        telephone: 'N/A'
    }];

    var PatientRecord = Ext.data.Record.create([{
        name: 'name'
    }, {
        name: 'address'
    }, {
        name: 'telephone'
    }]);

    var patientStore = new Ext.data.Store({
        data: patients,
        reader: new Ext.data.JsonReader({
            id: 'insuranceCode'
        }, PatientRecord)
    });

    var hospitals = [{
        code: 'AAAAA',
        name: 'Saint Thomas',
        address: 'Westminster Bridge Road, SE1 7EH',
        telephone: '020 7188 7188'
    }, {
        code: 'BBBBB',
        name: 'Queen\'s Medical Centre',
        address: 'Derby Road, NG7 2UH',
        telephone: '0115 924 9924'
    }, {
        code: 'CCCCC',
        name: 'Saint Bartholomew',
        address: 'West Smithfield, EC1A 7BE',
        telephone: '020 7377 7000'
    }, {
        code: 'DDDDD',
        name: 'Royal London',
        address: 'Whitechapel, E1 1BB',
        telephone: '020 7377 7000'
    }];

    var HospitalRecord = Ext.data.Record.create([{
        name: 'name'
    }, {
        name: 'address'
    }, {
        name: 'telephone'
    }]);

    var hospitalStore = new Ext.data.Store({
        data: hospitals,
        reader: new Ext.data.JsonReader({
            id: 'code'
        }, HospitalRecord)
    });

    var patientView = new Ext.DataView({
        cls: 'patient-view',
        tpl: '' +
                '
' +
                    '' +
                    '' +
                    '' +
                '
Name | {name}
Address | {address}
Telephone | {telephone}
' +
             '',
        itemSelector: 'div.patient-source',
        store: patientStore,
        listeners: {
            render: initializePatientDragZone
        }
    });

    var helpWindow = new Ext.Window({
        title: 'Source code',
        width: 920,
        height: 500,
        closeAction: 'hide',
        bodyCfg: {tag: 'textarea', readonly: true},
        bodyStyle: {
            backgroundColor: 'white',
            margin: '0px',
            border: '0px none'
        },
        listeners: {
            render: function(w) {
                Ext.Ajax.request({
                    url: 'dragdropzones.js',
                    success: function(r) {
                        w.body.dom.value = r.responseText;
                    }
                });
            }
        }
    });

    var hospitalGrid = new Ext.grid.GridPanel({
        title: 'Hospitals',
        region: 'center',
        margins: '0 5 5 0',
        bbar: [{
            text: 'View Source',
            handler: function() {
                helpWindow.show();
            }
        }],
        columns: [{
            dataIndex: 'name',
            header: 'Name',
            width: 200
        }, {
            dataIndex: 'address',
            header: 'Address',
            width: 300
        }, {
            dataIndex: 'telephone',
            header: 'Telephone',
            width: 100
        }],
        viewConfig: {
            tpl: new Ext.XTemplate('
'),
            enableRowBody: true,
            getRowClass: function(rec, idx, p, store) {
                p.body = this.tpl.apply(rec.data);
            }
        },
        store: hospitalStore,
        listeners: {
            render: initializeHospitalDropZone
        }
    });

    new Ext.Viewport({
        layout: 'border',
        items: [{
            cls: 'app-header',
            region: 'north',
            height: 100,
            html: '
Patient Hospital Assignment
',
            margins: '5 5 5 5'
        }, {
            title: 'Patients',
            region: 'west',
            width: 300,
            margins: '0 5 5 5',
            items: patientView
        }, hospitalGrid ]
    });
});

/*
 * Here is where we "activate" the DataView.
 * We have decided that each node with the class "patient-source" encapsulates a single draggable
 * object.
 *
 * So we inject code into the DragZone which, when passed a mousedown event, interrogates
 * the event to see if it was within an element with the class "patient-source". If so, we
 * return non-null drag data.
 *
 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
 * The data must contain a property called "ddel" which is a DOM element which provides an image
 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
 * We can insert any other data into the data object, and this will be used by a cooperating DropZone
 * to perform the drop operation.
 */
function initializePatientDragZone(v) {
    v.dragZone = new Ext.dd.DragZone(v.getEl(), {

//      On receipt of a mousedown event, see if it is within a draggable element.
//      Return a drag data object if so. The data object can contain arbitrary application
//      data, but it should also contain a DOM element in the ddel property to provide
//      a proxy to drag.
        getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10);
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    patientData: v.getRecord(sourceEl).data
                }
            }
        },

//      Provide coordinates for the proxy to slide back to on failed drag.
//      This is the original XY coordinates of the draggable element.
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
}

/*
 * Here is where we "activate" the GridPanel.
 * We have decided that the element with class "hospital-target" is the element which can receieve
 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
 * the mouse if over an element which can receieve drop gestures.
 *
 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
 * call several "onNodeXXXX" methods at various points. These include:
 *
 * onNodeEnter
 * onNodeOut
 * onNodeOver
 * onNodeDrop
 *
 * We provide implementations of each of these to provide behaviour for these events.
 */
function initializeHospitalDropZone(g) {
    g.dropZone = new Ext.dd.DropZone(g.getView().scroller, {

//      If the mouse is over a target node, return that node. This is
//      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
        getTargetFromEvent: function(e) {
            return e.getTarget('.hospital-target');
        },

//      On entry into a target node, highlight that node.
        onNodeEnter : function(target, dd, e, data){
            Ext.fly(target).addClass('hospital-target-hover');
        },

//      On exit from a target node, unhighlight that node.
        onNodeOut : function(target, dd, e, data){
            Ext.fly(target).removeClass('hospital-target-hover');
        },

//      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 node 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.
        onNodeDrop : function(target, dd, e, data){
            var rowIndex = g.getView().findRowIndex(target);
            var h = g.getStore().getAt(rowIndex);
            Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
                ' on hospital ' + h.data.name);
            return true;
        }
    });
}


The source code

/**
 * @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);
    }
});


The source code

/**
 * @class Ext.dd.DragTracker
 * @extends Ext.util.Observable
 */
Ext.dd.DragTracker = 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.extend(Ext.dd.DragTracker, Ext.util.Observable,  {

/**
     * @cfg {Boolean} active
     * Defaults to false.
     */
    active: false,

/**
     * @cfg {Number} tolerance
     * 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,

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

    onBeforeStart : function(e){

    },

    onStart : function(xy){

    },

    onDrag : function(e){

    },

    onEnd : function(e){

    },

    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

/**
 * @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() {
    myDataView.dragZone = new Ext.dd.DragZone(myDataView.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(myDataView.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: myDataView.store,
                    draggedRecord: v.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

/**
 * @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

/**
 * @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

// some data used in the examples
Ext.namespace('Ext.exampledata');

Ext.exampledata.dutch_provinces = [
    ['Drenthe'],
    ['Flevoland'],
    ['Friesland'],
    ['Gelderland'],
    ['Groningen'],
    ['Limburg'],
    ['Noord-Brabant'],
    ['Noord-Holland'],
    ['Overijsel'],
    ['Utrecht'],
    ['Zeeland'],
    ['Zuid-Holland']
    ];


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);

    /*
     * ================  Form 2  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});

    var fsf = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form with FieldSets',
        bodyStyle:'padding:5px 5px 0',
        width: 350,

        items: [{
            xtype:'fieldset',
            checkboxToggle:true,
            title: 'User Information',
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            collapsed: true,
            items :[{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }
            ]
        },{
            xtype:'fieldset',
            title: 'Phone Number',
            collapsible: true,
            autoHeight:true,
            defaults: {width: 210},
            defaultType: 'textfield',
            items :[{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }
            ]
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    fsf.render(document.body);

    /*
     * ================  Form 3  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});

    var top = new Ext.FormPanel({
        labelAlign: 'top',
        frame:true,
        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle:'padding:5px 5px 0',
        width: 600,
        items: [{
            layout:'column',
            items:[{
                columnWidth:.5,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'htmleditor',
            id:'bio',
            fieldLabel:'Biography',
            height:200,
            anchor:'98%'
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    top.render(document.body);

    /*
     * ================  Form 4  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});

    var tabs = new Ext.FormPanel({
        labelWidth: 75,
        border:false,
        width: 350,

        items: {
            xtype:'tabpanel',
            activeTab: 0,
            defaults:{autoHeight:true, bodyStyle:'padding:10px'},
            items:[{
                title:'Personal Details',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            }]
        },

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    tabs.render(document.body);

    /*
     * ================  Form 5  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});

    var tab2 = new Ext.FormPanel({
        labelAlign: 'top',
        title: 'Inner Tabs',
        bodyStyle:'padding:5px',
        width: 600,
        items: [{
            layout:'column',
            border:false,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            height:235,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Personal Details',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            },{
                cls:'x-plain',
                title:'Biography',
                layout:'fit',
                items: {
                    xtype:'htmleditor',
                    id:'bio2',
                    fieldLabel:'Biography'
                }
            }]
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    tab2.render(document.body);
});


The source code

Ext.onReady(function(){
    Ext.QuickTips.init();

    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    }
    // shorthand alias
    var fm = Ext.form;

    // custom column plugin example
    var checkColumn = new Ext.grid.CheckColumn({
       header: 'Indoor?',
       dataIndex: 'indoor',
       width: 55
    });

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel([{
           id: 'common',
           header: 'Common Name',
           dataIndex: 'common',
           width: 220,
           // use shorthand alias defined above
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
           header: 'Light',
           dataIndex: 'light',
           width: 130,
           editor: new fm.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               transform:'light',
               lazyRender: true,
               listClass: 'x-combo-list-small'
            })
        },{
           header: 'Price',
           dataIndex: 'price',
           width: 70,
           align: 'right',
           renderer: 'usMoney',
           editor: new fm.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 100000
           })
        },{
           header: 'Available',
           dataIndex: 'availDate',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'm/d/y',
                minValue: '01/01/06',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            })
        },
        checkColumn
    ]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // create the Data Store
    var store = new Ext.data.Store({
        // load remote data using HTTP
        url: 'plants.xml',

        // specify a XmlReader (coincides with the XML format of the returned data)
        reader: new Ext.data.XmlReader(
            {
                // records will have a 'plant' tag
                record: 'plant'
            },
            // use an Array of field definition objects to implicitly create a Record constructor
            [
                // the 'name' below matches the tag name to read, except 'availDate'
                // which is mapped to the tag 'availability'
                {name: 'common', type: 'string'},
                {name: 'botanical', type: 'string'},
                {name: 'light'},
                {name: 'price', type: 'float'},
                // dates can be automatically converted by specifying dateFormat
                {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
                {name: 'indoor', type: 'bool'}
            ]
        ),

        sortInfo: {field:'common', direction:'ASC'}
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width: 600,
        height: 300,
        autoExpandColumn: 'common',
        title: 'Edit Plants?',
        frame: true,
        plugins: checkColumn,
        clicksToEdit: 1,
        tbar: [{
            text: 'Add Plant',
            handler : function(){
                // access the Record constructor through the grid's store
                var Plant = grid.getStore().recordType;
                var p = new Plant({
                    common: 'New Plant 1',
                    light: 'Mostly Shade',
                    price: 0,
                    availDate: (new Date()).clearTime(),
                    indoor: false
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        }]
    });

    // trigger the data store load
    store.load();
});


The source code

/**
 * @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 false.
     */

/**
     * @cfg {Boolean/String} autoSize
     * True for the editor to automatically adopt the size of the element being edited, "width" to adopt the width only,
     * or "height" to adopt the height only (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 {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 false)
     */
    completeOnEnter : false,

/**
     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed (defaults to false)
     */
    cancelOnEsc : false,

/**
     * @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.field.render(this.el);
        if(Ext.isGecko){
            this.field.el.dom.setAttribute('autocomplete', 'off');
        }
        this.mon(this.field, "specialkey", this.onSpecialKey, this);
        if(this.swallowKeys){
            this.field.el.swallowEvent(['keydown','keypress']);
        }
        this.field.show();
        this.mon(this.field, "blur", this.onBlur, this);
        if(this.field.grow){
            this.mon(this.field, "autosize", this.el.sync,  this.el, {delay:1});
        }
    },

    // private
    onSpecialKey : function(field, e){
        var key = e.getKey();
        if(this.completeOnEnter && key == e.ENTER){
            e.stopEvent();
            this.completeEdit();
        }else if(this.cancelOnEsc && key == e.ESC){
            this.cancelEdit();
        }else{
            this.fireEvent('specialkey', field, e);
        }
        if(this.field.triggerBlur && (key == e.ENTER || key == e.ESC || key == e.TAB)){
            this.field.triggerBlur();
        }
    },

/**
     * 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){
            return;
        }
        this.startValue = v;
        this.field.setValue(v);
        this.doAutoSize();
        this.el.alignTo(this.boundEl, this.alignment);
        this.editing = true;
        this.show();
    },

    // private
    doAutoSize : function(){
        if(this.autoSize){
            var sz = this.boundEl.getSize();
            switch(this.autoSize){
                case "width":
                    this.setSize(sz.width,  "");
                break;
                case "height":
                    this.setSize("",  sz.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.
     */
    realign : function(){
        this.el.alignTo(this.boundEl, this.alignment);
    },

/**
     * 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;
        }
        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();
        if(Ext.isIE && !this.fixIEFocus){ // IE has problems with focusing the first time
            this.fixIEFocus = true;
            this.deferredFocus.defer(50, this);
        }else{
            this.field.focus();
        }
        this.fireEvent("startedit", this.boundEl, this.startValue);
    },

    deferredFocus : function(){
        if(this.editing){
            this.field.focus();
        }
    },

/**
     * 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(){
        if(this.allowBlur !== true && this.editing){
            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.destroy(this.field);
        this.field = null;
    }
});
Ext.reg('editor', Ext.Editor);


The source code

/**
 * @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.on("bodyscroll", this.stopEditing, this, [true]);
        this.on("columnresize", this.stopEditing, this, [true]);

        if(this.clicksToEdit == 1){
            this.on("cellclick", this.onCellDblClick, this);
        }else {
            if(this.clicksToEdit == 'auto' && this.view.mainBody){
                this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
            }
            this.on("celldblclick", this.onCellDblClick, this);
        }
    },

    // 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);
        var 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.activeEditor = null;
        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
        var r = ed.record;
        var 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);
            var field = this.colModel.getDataIndex(col);
            var 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.render(this.view.getEditorParent(ed));
                }
                (function(){ // complex but required for focus issues in safari, ie and opera
                    ed.row = row;
                    ed.col = col;
                    ed.record = r;
                    ed.on("complete", this.onEditComplete, this, {single: true});
                    ed.on("specialkey", this.selModel.onEditorKey, this.selModel);

/**
                     * The currently active editor or null
                      * @type Ext.Editor
                     */
                    this.activeEditor = ed;
                    var v = this.preEditValue(r, field);
                    ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);
                }).defer(50, this);
            }
        }
    },

    // private
    preEditValue : function(r, field){
        var value = r.data[field];
        return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;
    },

    // private
    postEditValue : function(value, originalValue, r, field){
        return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
    },

/**
     * Stops any active editing
     * @param {Boolean} cancel (optional) True to cancel any changes
     */
    stopEditing : function(cancel){
        if(this.activeEditor){
            this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
        }
        this.activeEditor = null;
    }
});
Ext.reg('editorgrid', Ext.grid.EditorGridPanel);


The source code

/**
 * @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){
        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;
    },

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

// private
Ext.Element.uncache = function(el){
    for(var i = 0, a = arguments, len = a.length; i < len; i++) {
        if(a[i]){
            delete Ext.Element.cache[a[i].id || a[i]];
        }
    }
};


The source code

/**
 * @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;

        function action(){
            Ext.fly(dom).alignTo(el, alignment, offsets, animate);
            Ext.callback(callback, Ext.fly(dom));
        }

        Ext.EventManager.onWindowResize(action, me);

        if(!Ext.isEmpty(monitorScroll)){
            Ext.EventManager.on(window, 'scroll', action, me,
                {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
        }
        action.call(me); // align immediately
        return me;
    },

/**
     * 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 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 == "?" ? "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 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

/**
 * @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

/**
 * @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(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';
            if(Ext.isIE && Ext.isSecure){
                el.src = Ext.SSL_SECURE_URL;
            }
            shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
            shim.autoBoxAdjust = false;
            return shim;
        }
    };
}());


The source code

/**
 * @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",
        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 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,
                dom = me.dom,
                isDisplay = getVisMode(this.dom) == ELDISPLAY;

            if (!animate || !me.anim) {
                if(isDisplay){
                    me.setDisplayed(visible);
                }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){
            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){
            this.setVisible(true, this.preanim(arguments, 0));
            return this;
        }
    }
}());


The source code

/**
 * @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.Element.cache[id]){ // element object already exists
        return Ext.Element.cache[id];
    }

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

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;

        for(attr in o){
            val = o[attr];
            if (attr != "style" && !Ext.isFunction(val)) {
                if (attr == "cls" ) {
                    el.className = val;
                } else if (o.hasOwnProperty(attr)) {
                    if (useSet || !!el.setAttribute) el.setAttribute(attr, val);
                    else el[attr] = val;
                }
            }
        }
        if(o.style){
            Ext.DomHelper.applyStyles(el, o.style);
        }
        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 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 type 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 : 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.
     * 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 type of event to remove
     * @param {Function} fn the method the event invokes
     * @param {Object} scope (optional) The scope (The this reference) of the handler function. Defaults
     * to this Element.
     * @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;
    },

    /**
     * @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 from the DOM and deletes it from the cache
     */
    remove : function(){
        var me = this,
            dom = me.dom;

        me.removeAllListeners();
        delete El.cache[dom.id];
        delete El.dataCache[dom.id]
        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) {
        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 type of event to handle
 * @param {Function} fn The handler function the event invokes
 * @param {Object} scope (optional) The scope (this element) of the handler function
 * @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 type of event to remove
 * @param {Function} fn the method the event invokes
 * @param {Object} scope (optional) The scope (The this reference) of the handler function. Defaults
 * to this Element.
 * @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
 */
El.cache = {};
El.dataCache = {};

/**
 * 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 (ex = El.cache[el]) {
            ex.dom = elm;
        } else {
            ex = El.cache[el] = new El(elm);
        }
        return ex;
    } else if (el.tagName) { // dom element
        if(!(id = el.id)){
            id = Ext.id(el);
        }
        if(ex = El.cache[id]){
            ex.dom = el;
        }else{
            ex = El.cache[id] = new El(el);
        }
        return ex;
    } else if (el instanceof El) {
        if(el != docEl){
            el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
                                                          // catch case where it hasn't been appended
            El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
        }
        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;
};

// private method for getting and setting element data
El.data = function(el, key, value){
    var c = El.dataCache[el.id];
    if(!c){
        c = El.dataCache[el.id] = {};
    }
    if(arguments.length == 2){
        return c[key];
    }else{
        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.collectorThread);
    } else {
        var eid,
            el,
            d;

        for(eid in El.cache){
            el = El.cache[eid];
            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))){
                delete El.cache[eid];
                if(d && Ext.enableListenerCollection){
                    Ext.EventManager.removeAll(d);
                }
            }
        }
    }
}
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;
}

Ext.EventManager.on(window, 'unload', function(){
    delete El.cache;
    delete El.dataCache;
    delete El._flyweights;
});
})();


The source code

/**
 * @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
         */
        insertSibling: function(el, where, returnDom){
            var me = this,
                rt;

            if(Ext.isArray(el)){
                Ext.each(el, function(e) {
                    rt = me.insertSibling(e, where, returnDom);
                });
                return rt;
            }

            where = (where || 'before').toLowerCase();
            el = el || {};

            if(el.nodeType || el.dom){
                rt = me.dom.parentNode.insertBefore(GETDOM(el), where == 'before' ? me.dom : me.dom.nextSibling);
                if (!returnDom) {
                    rt = GET(rt);
                }
            }else{
                if (where == 'after' && !me.dom.nextSibling) {
                    rt = DH.append(me.dom.parentNode, el, !returnDom);
                } else {
                    rt = DH[where == 'after' ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
                }
            }
            return rt;
        }
    };
}());


The source code

/**
 * @class Ext.Element
 */
Ext.Element.addMethods(
function() {
    var GETDOM = Ext.getDom,
        GET = Ext.get,
        DH = Ext.DomHelper,
        isEl = function(el){
            return  (el.nodeType || el.dom || typeof el == 'string');
        };

    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(isEl(el)){ // 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,
                Element = Ext.Element;
            if(isEl(el)){
                el = GETDOM(el);
                me.dom.parentNode.insertBefore(el, me.dom);
            }else{
                el = DH.insertBefore(me.dom, el);
            }

            delete Element.cache[me.id];
            Ext.removeNode(me.dom);
            me.id = Ext.id(me.dom = el);
            return Element.cache[me.id] = 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

/**
 * @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 of the function
     * @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

/**
 * @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

/**
 * @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 a box {x, y, width, height} that can be used to set another elements
     * 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, y, width, height}
     */
    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

/**
 * @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";

function animTest(args, animate, i) {
    return this.preanim && !!animate ? this.preanim(args, i) : false
}

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()], animTest.call(this, 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], animTest.call(this, 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], animTest.call(this, 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], animTest.call(this, 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 : animTest
});
})();


The source code

/**
 * @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 tester = /top/i,
            prop = "scroll" + (tester.test(side) ? "Top" : "Left"),
            me = this,
            dom = me.dom;
        if (!animate || !me.anim) {
            dom[prop] = value;
        } else {
            me.anim({scroll: {to: tester.test(prop) ? [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

/**
 * @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

/**
 * @class Ext.Element
 */

// special markup used throughout Ext when box wrapping elements
Ext.Element.boxMarkup = '
';

Ext.Element.addMethods(function(){
    var INTERNAL = "_internal";
    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;
        },

        getStyleSize : function(){
            var me = this,
                w,
                h,
                d = this.dom,
                s = d.style;
            if(s.width && s.width != 'auto'){
                w = parseInt(s.width, 10);
                if(me.isBorderBox()){
                   w -= me.getFrameWidth('lr');
                }
            }
            if(s.height && s.height != 'auto'){
                h = parseInt(s.height, 10);
                if(me.isBorderBox()){
                   h -= me.getFrameWidth('tb');
                }
            }
            return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
        },

        // 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} this
        */
        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 = parseInt(me.getStyle('height'), 10) || 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 = parseInt(this.getStyle('width'), 10) || 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 width and height of the viewport.
        *

        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.

         * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
         */
        getViewSize : function(){
            var doc = document,
                d = this.dom,
                extdom = Ext.lib.Dom,
                isDoc = (d == doc || d == doc.body);
            return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth),
                     height : (isDoc ? extdom.getViewHeight() : d.clientHeight) };
        },

/**
         * 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]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;
                }
                return o;
            } else {
                return me.addStyles.call(me, side, me.margins);
            }
        }
    };
}());


The source code

/**
 * @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();
    }

    // private (needs to be called => addStyles.call(this, sides, styles))
    function addStyles(sides, styles){
        var val = 0;

        Ext.each(sides.match(/\w/g), function(s) {
            if (s = parseInt(this.getStyle(styles[s]), 10)) {
                val += MATH.abs(s);
            }
        },
        this);
        return val;
    }

    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 = (typeof width == "number");
            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 = (typeof height == "number");
            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;
            Ext.each(className, function(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){
            Ext.each(this.dom.parentNode.childNodes, function(v) {
                if(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;
            if (me.dom.className) {
                Ext.each(className, function(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;
                    if(el == document) return null;
                    prop = chkCache(prop);
                    return (v = el.style[prop]) ? v :
                           (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
                } :
                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 = 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,
                h = MATH.max(dom.offsetHeight, 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,
                w = MATH.max(dom.offsetWidth, 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 addStyles.call(this, 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 addStyles.call(this, 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;
        },

        addStyles : addStyles,
        margins : margins
    }
}()
);


The source code

/**
 * @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
         * @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);
        },

/**
         * 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, unique){
            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

/**
 * 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

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

/**
 * @class Ext.EventManager
 */
Ext.apply(Ext.EventManager, function(){
    var resizeEvent,
        resizeTask,
        textEvent,
        textSize,
        D = Ext.lib.Dom,
        E = Ext.lib.Event,
        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.isSafari ?
                    Ext.num(navigator.userAgent.toLowerCase().match(/version\/(\d+\.\d)/)[1] || 2) >= 3.1 :
                    !((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);
            }
        },

/**
         * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
         * @param {Function} fn        The method the event invokes
         * @param {Object}   scope    An object that becomes the scope of the handler
         * @param {boolean}  options
         */
        onWindowResize : function(fn, scope, options){
            if(!resizeEvent){
                resizeEvent = new Ext.util.Event();
                resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
                E.on(window, "resize", this.fireWindowResize, this);
            }
            resizeEvent.addListener(fn, scope, options);
        },

        // exposed only to allow manual firing
        fireWindowResize : function(){
            if(resizeEvent){
                if((Ext.isIE||Ext.isAir) && resizeTask){
                    resizeTask.delay(50);
                }else{
                    resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
                }
            }
        },

/**
         * Fires 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 method the event invokes
         * @param {Object}   scope    An object that becomes the scope of the handler
         * @param {boolean}  options
         */
        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 <= 45);   // Print Screen, Insert
    },

    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

/**
 * @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,
        E = Ext.lib.Event,
        D = Ext.lib.Dom,
        DOC = document,
        WINDOW = window,
        IEDEFERED = "ie-deferred-loader",
        DOMCONTENTLOADED = "DOMContentLoaded",
        elHash = {},
        propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;

    /// There is some jquery work around stuff here that isn't needed in Ext Core.
    function addListener(el, ename, fn, wrap, scope){
        var id = Ext.id(el),
            es = elHash[id] = elHash[id] || {};

        (es[ename] = es[ename] || []).push([fn, wrap, scope]);
        E.on(el, ename, wrap);

        // this is a workaround for jQuery and should somehow be removed from Ext Core in the future
        // without breaking ExtJS.
        if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
            var args = ["DOMMouseScroll", wrap, false];
            el.addEventListener.apply(el, args);
            E.on(window, 'unload', function(){
                el.removeEventListener.apply(el, args);
            });
        }
        if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
            Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
        }
    };

    function fireDocReady(){
        if(!docReadyState){
            Ext.isReady = docReadyState = true;
            if(docReadyProcId){
                clearInterval(docReadyProcId);
            }
            if(Ext.isGecko || Ext.isOpera) {
                DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);
            }
            if(Ext.isIE){
                var defer = DOC.getElementById(IEDEFERED);
                if(defer){
                    defer.onreadystatechange = null;
                    defer.parentNode.removeChild(defer);
                }
            }
            if(docReadyEvent){
                docReadyEvent.fire();
                docReadyEvent.clearListeners();
            }
        }
    };

    function initDocReady(){
        var COMPLETE = "complete";

        docReadyEvent = new Ext.util.Event();
        if (Ext.isGecko || Ext.isOpera) {
            DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
        } else if (Ext.isIE){
            DOC.write("");
            DOC.getElementById(IEDEFERED).onreadystatechange = function(){
                if(this.readyState == COMPLETE){
                    fireDocReady();
                }
            };
        } else if (Ext.isWebKit){
            docReadyProcId = setInterval(function(){
                if(DOC.readyState == COMPLETE) {
                    fireDocReady();
                 }
            }, 10);
        }
        // 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){
        var task = new Ext.util.DelayedTask(h);
        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){
        return function(e){
            // create new event object impl so new events don't wipe out properties
            e = new Ext.EventObjectImpl(e);
            setTimeout(function(){
                h(e);
            }, o.delay || 10);
        };
    };

    function listen(element, ename, opt, fn, scope){
        var o = !Ext.isObject(opt) ? {} : opt,
            el = Ext.getDom(element);

        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);
        }
        if(o.single){
            h = createSingle(h, el, ename, fn, scope);
        }
        if(o.buffer){
            h = createBuffered(h, o);
        }

        addListener(el, ename, fn, 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 type of 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 event
         * @param {String} eventName The type of event
         * @param {Function} fn The handler function to remove
         */
        removeListener : function(element, eventName, fn, scope){
            var el = Ext.getDom(element),
                id = Ext.id(el),
                wrap;

            Ext.each((elHash[id] || {})[eventName], function (v,i,a) {
                if (Ext.isArray(v) && v[0] == fn && (!scope || v[2] == scope)) {
                    E.un(el, eventName, wrap = v[1]);
                    a.splice(i,1);
                    return false;
                }
            });

            // jQuery workaround that should be removed from Ext Core
            if(eventName == "mousewheel" && el.addEventListener && wrap){
                el.removeEventListener("DOMMouseScroll", wrap, false);
            }

            if(eventName == "mousedown" && el == DOC && wrap){ // fix stopped mousedowns on the document
                Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
            }
        },

/**
         * 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 the event
         */
        removeAll : function(el){
            var id = Ext.id(el = Ext.getDom(el)),
                es = elHash[id],
                ename;

            for(ename in es){
                if(es.hasOwnProperty(ename)){
                    Ext.each(es[ename], function(v) {
                        E.un(el, ename, v.wrap);
                    });
                }
            }
            elHash[id] = null;
        },

/**
         * Fires 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) An object that becomes the scope of the handler
         * @param {boolean} options (optional) An object containing standard {@link #addListener} options
         */
        onDocumentReady : function(fn, scope, options){
            if(docReadyState){ // if it already fired
                docReadyEvent.addListener(fn, scope, options);
                docReadyEvent.fire();
                docReadyEvent.clearListeners();
            } else {
                if(!docReadyEvent) initDocReady();
                options = options || {};
                options.delay = options.delay || 1;
                docReadyEvent.addListener(fn, scope, options);
            }
        },

        elHash : elHash
    };

/**
     * 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 type of event to listen for
     * @param {Function} handler The handler function the event invokes
     * @param {Object} scope (optional) The scope in which to execute the handler
     * function (the handler function's "this" context)
     * @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 event
     * @param {String} eventName The type of event
     * @param {Function} fn The handler function to remove
     * @return {Boolean} True if a listener was actually removed, else false
     * @member Ext.EventManager
     * @method un
     */
    pub.un = pub.removeListener;

    pub.stoppedMouseDownEvent = new Ext.util.Event();
    return pub;
}();

/**
  * Fires 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 An object that becomes the scope of the handler
  * @param {boolean} options (optional) An object containing standard {@link #addListener} options
  * @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

/**
 * @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

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.example = function(){
    var msgCt;

    function createBox(t, s){
        return ['
',
                '
',
                '
', t, '
', s, '
',
                '
',
                '
'].join('');
    }
    return {
        msg : function(title, format){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
            msgCt.alignTo(document, 't-t');
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
            m.slideIn('t').pause(1).ghost("t", {remove:true});
        },

        init : function(){
            /*
            var t = Ext.get('exttheme');
            if(!t){ // run locally?
                return;
            }
            var theme = Cookies.get('exttheme') || 'aero';
            if(theme){
                t.dom.value = theme;
                Ext.getBody().addClass('x-'+theme);
            }
            t.on('change', function(){
                Cookies.set('exttheme', t.getValue());
                setTimeout(function(){
                    window.location.reload();
                }, 250);
            });*/

            var lb = Ext.get('lib-bar');
            if(lb){
                lb.show();
            }
        }
    };
}();

Ext.example.shortBogusMarkup = '
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.';
Ext.example.bogusMarkup = '
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.

Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.
';

Ext.onReady(Ext.example.init, Ext.example);

// old school cookie functions
var Cookies = {};
Cookies.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" : "");
};

Cookies.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 Cookies.getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if(i == 0)
            break;
    }
    return null;
};

Cookies.clear = function(name) {
  if(Cookies.get(name)){
    document.cookie = name + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
};

Cookies.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

tx.Exporter = function(){
    var lists = tx.data.conn.query('select * from list');

    var doc = new runtime.flash.xml.XMLDocument();

    var root = doc.createElement('simple-tasks');
    doc.appendChild(root);

    root.attributes['version'] = '2.0';

    for(var i = 0, len = lists.length; i < len; i++){
        var list = lists[i];

        var listNode = doc.createElement('list');
        root.appendChild(listNode);

        for(var k in list){
            if(list.hasOwnProperty(k)){
                listNode.attributes[k] = String(list[k]);
            }
        }

        var tasks = tx.data.conn.queryBy('select * from task where listId = ?', [list.listId]);
        for(var j = 0, jlen = tasks.length; j < jlen; j++){
            var task = tasks[j];

            var taskNode = doc.createElement('task');
            listNode.appendChild(taskNode);

            for(var t in task){
                if(task.hasOwnProperty(t)){
                    taskNode.attributes[t] = String(task[t]);
                }
            }
        }
    }

    var file = new air.File(air.File.documentsDirectory.nativePath + air.File.separator + 'tasks.xml');

    file.addEventListener('select', function(e){
        var target = e.target;
        var stream = new air.FileStream();
        stream.open(target, air.FileMode.WRITE);
        stream.writeUTFBytes('');
        stream.writeUTFBytes(doc.toString());
        stream.close();
    });

    // I wonder why no filter for Save As?
    // var filter = new air.FileFilter("Tasks XML File", "*.xml");
    file.browseForSave('Save As');
};


The source code

/*
 * This file corrects air eval issues and other issues found in the AIR application sandbox
 */
Ext.namespace('Ext.air', 'Ext.sql');

Ext.Template.prototype.compile = function() {
    var fm = Ext.util.Format;
    var useF = this.disableFormats !== true;
    //
    var prevOffset = 0;
    var arr = [];
    var tpl = this;
    var fn = function(m, name, format, args, offset, s){
        if (prevOffset != offset) {
            var action = {type: 1, value: s.substr(prevOffset, offset - prevOffset)};
            arr.push(action);
        }
        prevOffset = offset + m.length;
        if(format && useF){
                if (args) {
                    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 = [''].concat(args);
                } else {
                        args = [''];
                }
            if(format.substr(0, 5) != "this."){
                var action = {type: 3, value:name, format: fm[format], args: args, scope: fm};
                arr.push(action);
            }else{
                var action = {type: 3, value:name, format:tpl[format.substr(5)], args:args, scope: tpl};
                arr.push(action);
            }
        }else{
            var action  = {type: 2, value: name};
            arr.push(action);
        }
        return m;
    };

    var s = this.html.replace(this.re, fn);
    if (prevOffset != (s.length - 1)) {
        var action = {type: 1, value: s.substr(prevOffset, s.length - prevOffset)};
        arr.push(action);
    }

    this.compiled = function(values) {
        function applyValues(el) {
            switch (el.type) {
                    case 1:
                            return el.value;
                    case 2:
                            return (values[el.value] ? values[el.value] : '');
                    default:
                            el.args[0] = values[el.value];
                            return el.format.apply(el.scope, el.args);
            }
        }
        return arr.map(applyValues).join('');
    }
    return this;
};

Ext.Template.prototype.call = function(fnName, value, allValues){
    return this[fnName](value, allValues);
}

Ext.DomQuery = function(){
    var cache = {}, simpleCache = {}, valueCache = {};
    var nonSpace = /\S/;
    var trimRe = /^\s+|\s+$/g;
    var tplRe = /\{(\d+)\}/g;
    var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
    var tagTokenRe = /^(#)?([\w-\*]+)/;
    var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;

    function child(p, index){
        var i = 0;
        var n = p.firstChild;
        while(n){
            if(n.nodeType == 1){
               if(++i == index){
                   return n;
               }
            }
            n = n.nextSibling;
        }
        return null;
    };

    function next(n){
        while((n = n.nextSibling) && n.nodeType != 1);
        return n;
    };

    function prev(n){
        while((n = n.previousSibling) && n.nodeType != 1);
        return n;
    };

    function children(d){
        var n = d.firstChild, ni = -1;
         while(n){
             var nx = n.nextSibling;
             if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
                 d.removeChild(n);
             }else{
                 n.nodeIndex = ++ni;
             }
             n = nx;
         }
         return this;
     };

    function byClassName(c, a, v){
        if(!v){
            return c;
        }
        var r = [], ri = -1, cn;
        for(var i = 0, ci; ci = c[i]; i++){
            if((' '+ci.className+' ').indexOf(v) != -1){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function attrValue(n, attr){
        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];

    };

    function getNodes(ns, mode, tagName){
        var result = [], ri = -1, cs;
        if(!ns){
            return result;
        }
        tagName = tagName || "*";
        if(typeof ns.getElementsByTagName != "undefined"){
            ns = [ns];
        }
        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;
                }
            }
        }else if(mode == "/" || mode == ">"){
            var utag = tagName.toUpperCase();
            for(var i = 0, ni, cn; ni = ns[i]; i++){
                cn = ni.children || ni.childNodes;
                for(var j = 0, cj; cj = cn[j]; j++){
                    if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
                        result[++ri] = cj;
                    }
                }
            }
        }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;
                }
            }
        }else if(mode == "~"){
            for(var i = 0, n; n = ns[i]; i++){
                while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
                if(n){
                    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 r = [], ri = -1;
        tagName = tagName.toLowerCase();
        for(var i = 0, ci; ci = cs[i]; i++){
            if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function byId(cs, attr, id){
        if(cs.tagName || cs == document){
            cs = [cs];
        }
        if(!id){
            return cs;
        }
        var r = [], ri = -1;
        for(var i = 0,ci; ci = cs[i]; i++){
            if(ci && ci.id == id){
                r[++ri] = ci;
                return r;
            }
        }
        return r;
    };

    function byAttribute(cs, attr, value, op, custom){
        var r = [], ri = -1, st = custom=="{";
        var f = Ext.DomQuery.operators[op];
        for(var i = 0, ci; ci = cs[i]; i++){
            var a;
            if(st){
                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"){
                a = ci.getAttribute("href", 2);
            }else{
                a = ci.getAttribute(attr);
            }
            if((f && f(a, value)) || (!f && a)){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function byPseudo(cs, name, value){
        return Ext.DomQuery.pseudos[name](cs, value);
    };

    // this eval is stop the compressor from
    // renaming the variable to something shorter
    eval("var batch = 30803;");

    var key = 30803;

    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;
        }
        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 quickDiff(c1, c2){
        var len1 = c1.length;
        if(!len1){
            return c2;
        }
        var d = ++key;
        for(var i = 0; i < len1; i++){
            c1[i]._qdiff = d;
        }
        var r = [];
        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, null, id);
    }

       function search(path, root, type) {
            type = type || "select";
            //
            var n = root || document;
            //
            var q = path, mode, lq;
            var tk = Ext.DomQuery.matchers;
            var tklen = tk.length;
            var mm;

            var lmode = q.match(modeRe);
            if(lmode && lmode[1]){
                mode=lmode[1].replace(trimRe, "");
                q = q.replace(lmode[1], "");
            }
            while(path.substr(0, 1)=="/"){
                path = path.substr(1);
            }
            while(q && lq != q){
                lq = q;
                var tm = q.match(tagTokenRe);
                if(type == "select"){
                    if(tm){
                        if(tm[1] == "#"){
                            n = quickId(n, mode, root, tm[2]);
                        }else{
                            n = getNodes(n, mode, tm[2]);
                        }
                        q = q.replace(tm[0], "");
                    }else if(q.substr(0, 1) != '@'){
                        n = getNodes(n, mode, "*");
                    }
                }else{
                    if(tm){
                        if(tm[1] == "#"){
                            n = byId(n, null, tm[2]);
                        }else{
                            n = byTag(n, tm[2]);
                        }
                        q = q.replace(tm[0], "");
                    }
                }
                while(!(mm = q.match(modeRe))){
                    var matched = false;
                    for(var j = 0; j < tklen; j++){
                        var t = tk[j];
                        var m = q.match(t.re);
                        if(m){
                            switch(j) {
                                case 0:
                                    n = byClassName(n, null, " " + m[1] +" ");
                                    break;
                                case 1:
                                    n = byPseudo(n, m[1], m[2]);
                                    break;
                                case 2:
                                    n = byAttribute(n, m[2], m[4], m[3], m[1]);
                                    break;
                                case 3:
                                    n = byId(n, null, m[1]);
                                    break;
                                case 4:
                                    return {firstChild:{nodeValue:attrValue(n, m[1])}};

                            }
                            q = q.replace(m[0], "");
                            matched = true;
                            break;
                        }
                    }

                    if(!matched){
                        throw 'Error parsing selector, parsing failed at "' + q + '"';
                    }
                }
                if(mm[1]){
                    mode=mm[1].replace(trimRe, "");
                    q = q.replace(mm[1], "");
                }
            }
            return nodup(n);
        }

     return {
        getStyle : function(el, name){
             return Ext.fly(el).getStyle(name);
        },

        compile: function(path, type) {
            return function(root) {
                    return search(path, root, type);
            }
        },

/**
         * Selects a group of elements.
         * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
         * @param {Node} root (optional) The start of the query (defaults to document).
         * @return {Array}
         */
        select : function(path, root, type){
            if(!root || root == document){
                root = document;
            }
            if(typeof root == "string"){
                root = document.getElementById(root);
            }
            var paths = path.split(",");
            var results = [];
            for(var i = 0, len = paths.length; i < len; i++){
                var p = paths[i].replace(trimRe, "");
                if(!cache[p]){
                    cache[p] = Ext.DomQuery.compile(p);
                    if(!cache[p]){
                        throw p + " is not a valid selector";
                    }
                }
                var result = cache[p](root);
                if(result && result != document){
                    results = results.concat(result);
                }
            }
            if(paths.length > 1){
                return nodup(results);
            }
            return results;
        },

/**
         * 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}
         */
        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
         */
        selectValue : function(path, root, defaultValue){
            path = path.replace(trimRe, "");
            if(!valueCache[path]){
                valueCache[path] = Ext.DomQuery.compile(path, "select");
            }
            var n = valueCache[path](root);
            n = n[0] ? n[0] : n;
            var 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.
         * @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);
            var 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}
         */
        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.
         */
        matchers : [{
                re: /^\.([\w-]+)/,
                select: 'n = byClassName(n, null, " {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, null, "{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;
            }
        },

/**
         * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
         * and the argument (if any) supplied in the selector.
         */
        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;
                var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
                var 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('|');
                var 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;
                var 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;
                var 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;
                var 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;
            }
        }
    };
}();

Ext.query = Ext.DomQuery.select;

Date.precompileFormats = function(s){
    var formats = s.split('|');
    for(var i = 0, len = formats.length;i < len;i++){
        Date.createNewFormat(formats[i]);
        Date.createParser(formats[i]);
    }
}

Date.precompileFormats("D n/j/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|YmdHis|F d, Y|l, F d, Y|H:i:s|g:i A|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|m/d/y|m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|Y-m-d H:i:s|d/m/y|d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|Y-m-d|l|D m/d|D m/d/Y|m/d/Y");

// precompile instead of lazy init
Ext.ColorPalette.prototype.tpl = new Ext.XTemplate(
    ' '
);

Ext.grid.GroupingView.prototype.startTpl = new Ext.XTemplate(
    '
',
        '
{text}
',
        '
'
);


The source code

 Ext.data.AirDB = Ext.extend(Ext.data.SqlDB, {
    open : function(db, cb, scope){
        this.conn = new air.SQLConnection();

        var file = air.File.applicationResourceDirectory.resolve(db);

        this.conn.addEventListener(air.SQLEvent.OPEN, this.onOpen.createDelegate(this, [cb, scope]));
        this.conn.addEventListener(air.SQLEvent.CLOSE, this.onClose.createDelegate(this));
        this.conn.open(file, true);
    },

    close : function(){
        this.conn.close();
    },

    onOpen : function(cb, scope){
        this.openState = true;
        Ext.callback(cb, scope, [this]);
        this.fireEvent('open', this);
    },

    onClose : function(){
        this.fireEvent('close', this);
    },

    onError : function(e, stmt, type, cb, scope){
        Ext.callback(cb, scope, [false, e, stmt]);
    },

    onResult : function(e, stmt, type, cb, scope){
        if(type == 'exec'){
            Ext.callback(cb, scope, [true, e, stmt]);
        }else{
            var r = [];
            var result = stmt.getResult();
            if(result && result.data){
                var len = result.data.length;
                for(var i = 0; i < len; i++) {
                    r[r.length] = result.data[i];
                }
            }
            Ext.callback(cb, scope, [r, e, stmt]);
        }
    },

    createStatement : function(type, cb, scope){

        var stmt = new air.SQLStatement();

        stmt.addEventListener(air.SQLErrorEvent.ERROR, this.onError.createDelegate(this, [stmt, type, cb, scope], true));
        stmt.addEventListener(air.SQLEvent.RESULT, this.onResult.createDelegate(this, [stmt, type, cb, scope], true));

        stmt.sqlConnection = this.conn;

        return stmt;
    },

    exec : function(sql, cb, scope){
        var stmt = this.createStatement('exec', cb, scope);
        stmt.text = sql;
        stmt.execute();
    },

    execBy : function(sql, args, cb, scope){
        var stmt = this.createStatement('exec', cb, scope);
        stmt.text = sql;
        this.addParams(stmt, args);
        stmt.execute();
    },

    query : function(sql, cb, scope){
        var stmt = this.createStatement('query', cb, scope);
        stmt.text = sql;
        stmt.execute(this.maxResults);
    },

    queryBy : function(sql, args, cb, scope){
        var stmt = this.createStatement('query', cb, scope);
        stmt.text = sql;
        this.addParams(stmt, args);
        stmt.execute(this.maxResults);
    },

    addParams : function(stmt, args){
        if(!args){ return; }
        for(var key in args){
            if(args.hasOwnProperty(key)){
                if(!isNaN(key)){
                    stmt.parameters[parseInt(key)+1] = args[key];
                }else{
                    stmt.parameters[':' + key] = args[key];
                }
            }
        }
        return stmt;
    }
});


The source code

/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.namespace('Ext.air', 'Ext.sql');

Ext.Template.prototype.compile = function() {
    var fm = Ext.util.Format;
    var useF = this.disableFormats !== true;

    var prevOffset = 0;
    var arr = [];
    var tpl = this;
    var fn = function(m, name, format, args, offset, s){
        if (prevOffset != offset) {
            var action = {type: 1, value: s.substr(prevOffset, offset - prevOffset)};
            arr.push(action);
        }
        prevOffset = offset + m.length;
        if(format && useF){
                if (args) {
                    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 = [''].concat(args);
                } else {
                        args = [''];
                }
            if(format.substr(0, 5) != "this."){
                var action = {type: 3, value:name, format: fm[format], args: args, scope: fm};
                arr.push(action);
            }else{
                var action = {type: 3, value:name, format:tpl[format.substr(5)], args:args, scope: tpl};
                arr.push(action);
            }
        }else{
            var action  = {type: 2, value: name};
            arr.push(action);
        }
        return m;
    };

    var s = this.html.replace(this.re, fn);
    if (prevOffset != (s.length - 1)) {
        var action = {type: 1, value: s.substr(prevOffset, s.length - prevOffset)};
        arr.push(action);
    }

    this.compiled = function(values) {
        function applyValues(el) {
            switch (el.type) {
                    case 1:
                            return el.value;
                    case 2:
                            return (values[el.value] ? values[el.value] : '');
                    default:
                            el.args[0] = values[el.value];
                            return el.format.apply(el.scope, el.args);
            }
        }
        return arr.map(applyValues).join('');
    }
    return this;
};

Ext.Template.prototype.call = function(fnName, value, allValues){
    return this[fnName](value, allValues);
}

Ext.DomQuery = function(){
    var cache = {}, simpleCache = {}, valueCache = {};
    var nonSpace = /\S/;
    var trimRe = /^\s+|\s+$/g;
    var tplRe = /\{(\d+)\}/g;
    var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
    var tagTokenRe = /^(#)?([\w-\*]+)/;
    var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;

    function child(p, index){
        var i = 0;
        var n = p.firstChild;
        while(n){
            if(n.nodeType == 1){
               if(++i == index){
                   return n;
               }
            }
            n = n.nextSibling;
        }
        return null;
    };

    function next(n){
        while((n = n.nextSibling) && n.nodeType != 1);
        return n;
    };

    function prev(n){
        while((n = n.previousSibling) && n.nodeType != 1);
        return n;
    };

    function children(d){
        var n = d.firstChild, ni = -1;
         while(n){
             var nx = n.nextSibling;
             if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
                 d.removeChild(n);
             }else{
                 n.nodeIndex = ++ni;
             }
             n = nx;
         }
         return this;
     };

    function byClassName(c, a, v){
        if(!v){
            return c;
        }
        var r = [], ri = -1, cn;
        for(var i = 0, ci; ci = c[i]; i++){
            if((' '+ci.className+' ').indexOf(v) != -1){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function attrValue(n, attr){
        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];

    };

    function getNodes(ns, mode, tagName){
        var result = [], ri = -1, cs;
        if(!ns){
            return result;
        }
        tagName = tagName || "*";
        if(typeof ns.getElementsByTagName != "undefined"){
            ns = [ns];
        }
        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;
                }
            }
        }else if(mode == "/" || mode == ">"){
            var utag = tagName.toUpperCase();
            for(var i = 0, ni, cn; ni = ns[i]; i++){
                cn = ni.children || ni.childNodes;
                for(var j = 0, cj; cj = cn[j]; j++){
                    if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
                        result[++ri] = cj;
                    }
                }
            }
        }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;
                }
            }
        }else if(mode == "~"){
            for(var i = 0, n; n = ns[i]; i++){
                while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
                if(n){
                    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 r = [], ri = -1;
        tagName = tagName.toLowerCase();
        for(var i = 0, ci; ci = cs[i]; i++){
            if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function byId(cs, attr, id){
        if(cs.tagName || cs == document){
            cs = [cs];
        }
        if(!id){
            return cs;
        }
        var r = [], ri = -1;
        for(var i = 0,ci; ci = cs[i]; i++){
            if(ci && ci.id == id){
                r[++ri] = ci;
                return r;
            }
        }
        return r;
    };

    function byAttribute(cs, attr, value, op, custom){
        var r = [], ri = -1, st = custom=="{";
        var f = Ext.DomQuery.operators[op];
        for(var i = 0, ci; ci = cs[i]; i++){
            var a;
            if(st){
                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"){
                a = ci.getAttribute("href", 2);
            }else{
                a = ci.getAttribute(attr);
            }
            if((f && f(a, value)) || (!f && a)){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function byPseudo(cs, name, value){
        return Ext.DomQuery.pseudos[name](cs, value);
    };

    eval("var batch = 30803;");

    var key = 30803;

    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;
        }
        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 quickDiff(c1, c2){
        var len1 = c1.length;
        if(!len1){
            return c2;
        }
        var d = ++key;
        for(var i = 0; i < len1; i++){
            c1[i]._qdiff = d;
        }
        var r = [];
        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, null, id);
    }

       function search(path, root, type) {
            type = type || "select";

            var n = root || document;

            var q = path, mode, lq;
            var tk = Ext.DomQuery.matchers;
            var tklen = tk.length;
            var mm;

            var lmode = q.match(modeRe);
            if(lmode && lmode[1]){
                mode=lmode[1].replace(trimRe, "");
                q = q.replace(lmode[1], "");
            }
            while(path.substr(0, 1)=="/"){
                path = path.substr(1);
            }
            while(q && lq != q){
                lq = q;
                var tm = q.match(tagTokenRe);
                if(type == "select"){
                    if(tm){
                        if(tm[1] == "#"){
                            n = quickId(n, mode, root, tm[2]);
                        }else{
                            n = getNodes(n, mode, tm[2]);
                        }
                        q = q.replace(tm[0], "");
                    }else if(q.substr(0, 1) != '@'){
                        n = getNodes(n, mode, "*");
                    }
                }else{
                    if(tm){
                        if(tm[1] == "#"){
                            n = byId(n, null, tm[2]);
                        }else{
                            n = byTag(n, tm[2]);
                        }
                        q = q.replace(tm[0], "");
                    }
                }
                while(!(mm = q.match(modeRe))){
                    var matched = false;
                    for(var j = 0; j < tklen; j++){
                        var t = tk[j];
                        var m = q.match(t.re);
                        if(m){
                            switch(j) {
                                case 0:
                                    n = byClassName(n, null, " " + m[1] +" ");
                                    break;
                                case 1:
                                    n = byPseudo(n, m[1], m[2]);
                                    break;
                                case 2:
                                    n = byAttribute(n, m[2], m[4], m[3], m[1]);
                                    break;
                                case 3:
                                    n = byId(n, null, m[1]);
                                    break;
                                case 4:
                                    return {firstChild:{nodeValue:attrValue(n, m[1])}};

                            }
                            q = q.replace(m[0], "");
                            matched = true;
                            break;
                        }
                    }

                    if(!matched){
                        throw 'Error parsing selector, parsing failed at "' + q + '"';
                    }
                }
                if(mm[1]){
                    mode=mm[1].replace(trimRe, "");
                    q = q.replace(mm[1], "");
                }
            }
            return nodup(n);
        }

     return {
        getStyle : function(el, name){
             return Ext.fly(el).getStyle(name);
        },

        compile: function(path, type) {
            return function(root) {
                    return search(path, root, type);
            }
        },

        select : function(path, root, type){
            if(!root || root == document){
                root = document;
            }
            if(typeof root == "string"){
                root = document.getElementById(root);
            }
            var paths = path.split(",");
            var results = [];
            for(var i = 0, len = paths.length; i < len; i++){
                var p = paths[i].replace(trimRe, "");
                if(!cache[p]){
                    cache[p] = Ext.DomQuery.compile(p);
                    if(!cache[p]){
                        throw p + " is not a valid selector";
                    }
                }
                var result = cache[p](root);
                if(result && result != document){
                    results = results.concat(result);
                }
            }
            if(paths.length > 1){
                return nodup(results);
            }
            return results;
        },

        selectNode : function(path, root){
            return Ext.DomQuery.select(path, root)[0];
        },

        selectValue : function(path, root, defaultValue){
            path = path.replace(trimRe, "");
            if(!valueCache[path]){
                valueCache[path] = Ext.DomQuery.compile(path, "select");
            }
            var n = valueCache[path](root);
            n = n[0] ? n[0] : n;
            var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
            return ((v === null||v === undefined||v==='') ? defaultValue : v);
        },

        selectNumber : function(path, root, defaultValue){
            var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);
            return parseFloat(v);
        },

        is : function(el, ss){
            if(typeof el == "string"){
                el = document.getElementById(el);
            }
            var isArray = Ext.isArray(el);
            var result = Ext.DomQuery.filter(isArray ? el : [el], ss);
            return isArray ? (result.length == el.length) : (result.length > 0);
        },

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

        matchers : [{
                re: /^\.([\w-]+)/,
                select: 'n = byClassName(n, null, " {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, null, "{1}");'
            },{
                re: /^@([\w-]+)/,
                select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
            }
        ],

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

        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;
                var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
                var 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('|');
                var 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;
                var 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;
                var 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;
                var 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;
            }
        }
    };
}();

Ext.query = Ext.DomQuery.select;

Date.precompileFormats = function(s){
    var formats = s.split('|');
    for(var i = 0, len = formats.length;i < len;i++){
        Date.createNewFormat(formats[i]);
        Date.createParser(formats[i]);
    }
}

Date.precompileFormats("D n/j/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|YmdHis|F d, Y|l, F d, Y|H:i:s|g:i A|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|m/d/y|m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|Y-m-d H:i:s|d/m/y|d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|Y-m-d|l|D m/d|D m/d/Y|m/d/Y");

Ext.ColorPalette.prototype.tpl = new Ext.XTemplate(
    ' '
);

Ext.air.FileProvider = function(config){
    Ext.air.FileProvider.superclass.constructor.call(this);

    this.defaultState = {
        mainWindow : {
            width:780,
            height:580,
            x:10,
            y:10
        }
    };

    Ext.apply(this, config);
    this.state = this.readState();

    var provider = this;
    air.NativeApplication.nativeApplication.addEventListener('exiting', function(){
        provider.saveState();
    });
};

Ext.extend(Ext.air.FileProvider, Ext.state.Provider, {
    file: 'extstate.data',

    readState : function(){
        var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
        if(!stateFile.exists){
            return this.defaultState || {};
        }

        var stream = new air.FileStream();
        stream.open(stateFile, air.FileMode.READ);

        var stateData = stream.readObject();
        stream.close();

        return stateData || this.defaultState || {};
    },

    saveState : function(name, value){
        var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
        var stream = new air.FileStream();
        stream.open(stateFile, air.FileMode.WRITE);
        stream.writeObject(this.state);
        stream.close();
    }
});
Ext.air.NativeObservable = Ext.extend(Ext.util.Observable, {
    addListener : function(name){
        this.proxiedEvents = this.proxiedEvents || {};
        if(!this.proxiedEvents[name]){
            var instance = this;
            var f = function(){
                var args = Array.prototype.slice.call(arguments, 0);
                args.unshift(name);
                instance.fireEvent.apply(instance, args);
            };
            this.proxiedEvents[name] = f;
            this.getNative().addEventListener(name, f);
        }
        Ext.air.NativeObservable.superclass.addListener.apply(this, arguments);
    }
});

Ext.air.NativeObservable.prototype.on = Ext.air.NativeObservable.prototype.addListener;

Ext.air.NativeWindow = function(config){
    Ext.apply(this, config);

    this.id = this.id || Ext.uniqueId();

    this.addEvents(
        'close',
        'closing',
        'move',
        'moving',
        'resize',
        'resizing',
        'displayStateChange',
        'displayStateChanging'
    );

    Ext.air.NativeWindow.superclass.constructor.call(this);

    if(!this.instance){
        var options = new air.NativeWindowInitOptions();
        options.systemChrome = this.chrome;
        options.type = this.type;
        options.resizable = this.resizable;
        options.minimizable = this.minimizable;
        options.maximizable = this.maximizable;
        options.transparent = this.transparent;

        this.loader = window.runtime.flash.html.HTMLLoader.createRootWindow(false, options, false);
        this.loader.load(new air.URLRequest(this.file));

        this.instance = this.loader.window.nativeWindow;
    }else{
        this.loader = this.instance.stage.getChildAt(0);
    }

    var provider = Ext.state.Manager;
    var b = air.Screen.mainScreen.visibleBounds;

    var state = provider.get(this.id) || {};
    provider.set(this.id, state);

    var win = this.instance;

    var width = Math.max(state.width || this.width, 100);
    var height = Math.max(state.height || this.height, 100);

    var centerX = b.x + ((b.width/2)-(width/2));
    var centerY = b.y + ((b.height/2)-(height/2));

    var x = !Ext.isEmpty(state.x, false) ? state.x : (!Ext.isEmpty(this.x, false) ? this.x : centerX);
    var y = !Ext.isEmpty(state.y, false) ? state.y : (!Ext.isEmpty(this.y, false) ? this.y : centerY);

    win.width = width;
    win.height = height;
    win.x = x;
    win.y = y;

    win.addEventListener('move', function(){
        if(win.displayState != air.NativeWindowDisplayState.MINIMIZED && win.width > 100 && win.height > 100) {
            state.x = win.x;
            state.y = win.y;
        }
    });
    win.addEventListener('resize', function(){
        if (win.displayState != air.NativeWindowDisplayState.MINIMIZED && win.width > 100 && win.height > 100) {
            state.width = win.width;
            state.height = win.height;
        }
    });

    Ext.air.NativeWindowManager.register(this);
    this.on('close', this.unregister, this);

    if(this.minimizeToTray){
        this.initMinimizeToTray(this.trayIcon, this.trayMenu);
    }

};

Ext.extend(Ext.air.NativeWindow, Ext.air.NativeObservable, {
    chrome: 'standard',
    type: 'normal',
    width:600,
    height:400,
    resizable: true,
    minimizable: true,
    maximizable: true,
    transparent: false,

    getNative : function(){
        return this.instance;
    },

    getCenterXY : function(){
        var b = air.Screen.mainScreen.visibleBounds;
        return {
            x: b.x + ((b.width/2)-(this.width/2)),
            y: b.y + ((b.height/2)-(this.height/2))
        };
    },

    show :function(){
        if(this.trayed){
            Ext.air.SystemTray.hideIcon();
            this.trayed = false;
        }
        this.instance.visible = true;
    },

    activate : function(){
        this.show();
        this.instance.activate();
    },

    hide :function(){
        this.instance.visible = false;
    },

    close : function(){
        this.instance.close();
    },

    isMinimized :function(){
        return this.instance.displayState == air.NativeWindowDisplayState.MINIMIZED;
    },

    isMaximized :function(){
        return this.instance.displayState == air.NativeWindowDisplayState.MAXIMIZED;
    },

    moveTo : function(x, y){
        this.x = this.instance.x = x;
        this.y = this.instance.y = y;
    },

    resize : function(width, height){
        this.width = this.instance.width = width;
        this.height = this.instance.height = height;
    },

    unregister : function(){
        Ext.air.NativeWindowManager.unregister(this);
    },

    initMinimizeToTray : function(icon, menu){
        var tray = Ext.air.SystemTray;
        tray.setIcon(icon, this.trayTip);
        this.on('displayStateChanging', function(e){
            if(e.afterDisplayState == 'minimized'){
                e.preventDefault();
                this.hide();
                tray.showIcon();
                this.trayed = true;
            }
        }, this);

        tray.on('click', function(){
            this.activate();
        }, this);

        if(menu){
            tray.setMenu(menu);
        }
    }
});

Ext.air.NativeWindow.getRootWindow = function(){
    return air.NativeApplication.nativeApplication.openedWindows[0];
};

Ext.air.NativeWindow.getRootHtmlWindow = function(){
    return Ext.air.NativeWindow.getRootWindow().stage.getChildAt(0).window;
};

Ext.air.NativeWindowGroup = function(){
    var list = {};

    return {
        register : function(win){
            list[win.id] = win;
        },

        unregister : function(win){
            delete list[win.id];
        },

        get : function(id){
            return list[id];
        },

        closeAll : function(){
            for(var id in list){
                if(list.hasOwnProperty(id)){
                    list[id].close();
                }
            }
        },

        each : function(fn, scope){
            for(var id in list){
                if(list.hasOwnProperty(id)){
                    if(fn.call(scope || list[id], list[id]) === false){
                        return;
                    }
                }
            }
        }
    };
};

Ext.air.NativeWindowManager = new Ext.air.NativeWindowGroup();

Ext.sql.Connection = function(config){
    Ext.apply(this, config);
    Ext.sql.Connection.superclass.constructor.call(this);

    this.addEvents({
        open : true,
        close: true
    });
};

Ext.extend(Ext.sql.Connection, Ext.util.Observable, {
    maxResults: 10000,
    openState : false,

    open : function(file){
    },

    close : function(){
    },

    exec : function(sql){
    },

    execBy : function(sql, args){
    },

    query : function(sql){
    },

    queryBy : function(sql, args){
    },

    isOpen : function(){
        return this.openState;
    },

    getTable : function(name, keyName){
        return new Ext.sql.Table(this, name, keyName);
    },

    createTable : function(o){
        var tableName = o.name;
        var keyName = o.key;
        var fs = o.fields;
        if(!Ext.isArray(fs)){
            fs = fs.items;
        }
        var buf = [];
        for(var i = 0, len = fs.length; i < len; i++){
            var f = fs[i], s = f.name;
            switch(f.type){
                case "int":
                case "bool":
                case "boolean":
                    s += ' INTEGER';
                    break;
                case "float":
                    s += ' REAL';
                    break;
                default:
                    s += ' TEXT';
            }
            if(f.allowNull === false || f.name == keyName){
                s += ' NOT NULL';
            }
            if(f.name == keyName){
                s += ' PRIMARY KEY';
            }
            if(f.unique === true){
                s += ' UNIQUE';
            }

            buf[buf.length] = s;
        }
        var sql = ['CREATE TABLE IF NOT EXISTS ', tableName, ' (', buf.join(','), ')'].join('');
        this.exec(sql);
    }
});

Ext.sql.Connection.getInstance = function(db, config){
    if(Ext.isAir){
        return new Ext.sql.AirConnection(config);
    } else {
        return new Ext.sql.GearsConnection(config);
    }
};
Ext.sql.Table = function(conn, name, keyName){
    this.conn = conn;
    this.name = name;
    this.keyName = keyName;
};

Ext.sql.Table.prototype = {
    update : function(o){
        var clause = this.keyName + " = ?";
        return this.updateBy(o, clause, [o[this.keyName]]);
    },

    updateBy : function(o, clause, args){
        var sql = "UPDATE " + this.name + " set ";
        var fs = [], a = [];
        for(var key in o){
            if(o.hasOwnProperty(key)){
                fs[fs.length] = key + ' = ?';
                a[a.length] = o[key];
            }
        }
        for(var key in args){
            if(args.hasOwnProperty(key)){
                a[a.length] = args[key];
            }
        }
        sql = [sql, fs.join(','), ' WHERE ', clause].join('');
        return this.conn.execBy(sql, a);
    },

    insert : function(o){
        var sql = "INSERT into " + this.name + " ";
        var fs = [], vs = [], a = [];
        for(var key in o){
            if(o.hasOwnProperty(key)){
                fs[fs.length] = key;
                vs[vs.length] = '?';
                a[a.length] = o[key];
            }
        }
        sql = [sql, '(', fs.join(','), ') VALUES (', vs.join(','), ')'].join('');
        return this.conn.execBy(sql, a);
    },

    lookup : function(id){
        return this.selectBy('where ' + this.keyName + " = ?", [id])[0] || null;
    },

    exists : function(id){
        return !!this.lookup(id);
    },

    save : function(o){
        if(this.exists(o[this.keyName])){
            this.update(o);
        }else{
            this.insert(o);
        }
    },

    select : function(clause){
        return this.selectBy(clause, null);
    },

    selectBy : function(clause, args){
        var sql = "select * from " + this.name;
        if(clause){
            sql += ' ' + clause;
        }
        args = args || {};
        return this.conn.queryBy(sql, args);
    },

    remove : function(clause){
        this.deleteBy(clause, null);
    },

    removeBy : function(clause, args){
        var sql = "delete from " + this.name;
        if(clause){
            sql += ' where ' + clause;
        }
        args = args || {};
        this.conn.execBy(sql, args);
    }
};
Ext.sql.Proxy = function(conn, table, keyName, store, readonly){
    Ext.sql.Proxy.superclass.constructor.call(this);
    this.conn = conn;
    this.table = this.conn.getTable(table, keyName);
    this.store = store;

    if (readonly !== true) {
        this.store.on('add', this.onAdd, this);
        this.store.on('update', this.onUpdate, this);
        this.store.on('remove', this.onRemove, this);
    }
};

Ext.sql.Proxy.DATE_FORMAT = 'Y-m-d H:i:s';

Ext.extend(Ext.sql.Proxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg){
        if(!this.conn.isOpen()){
            this.conn.on('open', function(){
                this.load(params, reader, callback, scope, arg);
            }, this, {single:true});
            return;
        };
        if(this.fireEvent("beforeload", this, params, reader, callback, scope, arg) !== false){
            var clause = params.where || '';
            var args = params.args || [];
            var group = params.groupBy;
            var sort = params.sort;
            var dir = params.dir;

            if(group || sort){
                clause += ' ORDER BY ';
                if(group && group != sort){
                    clause += group + ' ASC, ';
                }
                clause += sort + ' ' + (dir || 'ASC');
            }

            var rs = this.table.selectBy(clause, args);
            this.onLoad({callback:callback, scope:scope, arg:arg, reader: reader}, rs);
        }else{
            callback.call(scope||this, null, arg, false);
        }
    },

    onLoad : function(trans, rs, e, stmt){
        if(rs === false){
            this.fireEvent("loadexception", this, null, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        var result = trans.reader.readRecords(rs);
        this.fireEvent("load", this, rs, trans.arg);
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    },

    processData : function(o){
        var fs = this.store.fields;
        var r = {};
        for(var key in o){
            var f = fs.key(key), v = o[key];
            if(f){
                if(f.type == 'date'){
                    r[key] = v ? v.format(Ext.sql.Proxy.DATE_FORMAT,10) : '';
                }else if(f.type == 'boolean'){
                    r[key] = v ? 1 : 0;
                }else{
                    r[key] = v;
                }
            }
        }
        return r;
    },

    onUpdate : function(ds, record){
        var changes = record.getChanges();
        var kn = this.table.keyName;
        this.table.updateBy(this.processData(changes), kn + ' = ?', [record.data[kn]]);
        record.commit(true);
    },

    onAdd : function(ds, records, index){
        for(var i = 0, len = records.length; i < len; i++){
            this.table.insert(this.processData(records[i].data));
        }
    },

    onRemove : function(ds, record, index){
        var kn = this.table.keyName;
        this.table.removeBy(kn + ' = ?', [record.data[kn]]);
    }
});
 Ext.sql.AirConnection = Ext.extend(Ext.sql.Connection, {

    open : function(db){
        this.conn = new air.SQLConnection();
        var file = air.File.applicationDirectory.resolvePath(db);
        this.conn.open(file);
        this.openState = true;
        this.fireEvent('open', this);
    },

    close : function(){
        this.conn.close();
        this.fireEvent('close', this);
    },

    createStatement : function(type){
        var stmt = new air.SQLStatement();
        stmt.sqlConnection = this.conn;
        return stmt;
    },

    exec : function(sql){
        var stmt = this.createStatement('exec');
        stmt.text = sql;
        stmt.execute();
    },

    execBy : function(sql, args){
        var stmt = this.createStatement('exec');
        stmt.text = sql;
        this.addParams(stmt, args);
        stmt.execute();
    },

    query : function(sql){
        var stmt = this.createStatement('query');
        stmt.text = sql;
        stmt.execute(this.maxResults);
        return this.readResults(stmt.getResult());
    },

    queryBy : function(sql, args){
        var stmt = this.createStatement('query');
        stmt.text = sql;
        this.addParams(stmt, args);
        stmt.execute(this.maxResults);
        return this.readResults(stmt.getResult());
    },

    addParams : function(stmt, args){
        if(!args){ return; }
        for(var key in args){
            if(args.hasOwnProperty(key)){
                if(!isNaN(key)){
                    var v = args[key];
                    if(Ext.isDate(v)){
                        v = v.format(Ext.sql.Proxy.DATE_FORMAT);
                    }
                    stmt.parameters[parseInt(key)] = v;
                }else{
                    stmt.parameters[':' + key] = args[key];
                }
            }
        }
        return stmt;
    },

    readResults : function(rs){
        var r = [];
        if(rs && rs.data){
            var len = rs.data.length;
            for(var i = 0; i < len; i++) {
                r[r.length] = rs.data[i];
            }
        }
        return r;
    }
});
Ext.air.SystemTray = function(){
    var app = air.NativeApplication.nativeApplication;
    var icon, isWindows = false, bitmaps;

    if(air.NativeApplication.supportsSystemTrayIcon) {
        icon = app.icon;
        isWindows = true;
    }

    if(air.NativeApplication.supportsDockIcon) {
        icon = app.icon;
    }

    return {

        setIcon : function(icon, tooltip, initWithIcon){
            if(!icon){
                return;
            }
            var loader = new air.Loader();
            loader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, function(e){
                bitmaps = new runtime.Array(e.target.content.bitmapData);
                if (initWithIcon) {
                    icon.bitmaps = bitmaps;
                }
            });
            loader.load(new air.URLRequest(icon));
            if(tooltip && air.NativeApplication.supportsSystemTrayIcon) {
                app.icon.tooltip = tooltip;
            }
        },

        bounce : function(priority){
            icon.bounce(priority);
        },

        on : function(eventName, fn, scope){
            icon.addEventListener(eventName, function(){
                fn.apply(scope || this, arguments);
            });
        },

        hideIcon : function(){
            if(!icon){
                return;
            }
            icon.bitmaps = [];
        },

        showIcon : function(){
            if(!icon){
                return;
            }
            icon.bitmaps = bitmaps;
        },

        setMenu: function(actions, _parentMenu){
            if(!icon){
                return;
            }
            var menu = new air.NativeMenu();

            for (var i = 0, len = actions.length; i < len; i++) {
                var a = actions[i];
                if(a == '-'){
                    menu.addItem(new air.NativeMenuItem("", true));
                }else{
                    var item = menu.addItem(Ext.air.MenuItem(a));
                    if(a.menu || (a.initialConfig && a.initialConfig.menu)){
                        item.submenu = Ext.air.SystemTray.setMenu(a.menu || a.initialConfig.menu, menu);
                    }
                }

                if(!_parentMenu){
                    icon.menu = menu;
                }
            }

            return menu;
        }
    };
}();

Ext.air.DragType = {
    TEXT : 'text/plain',
    HTML : 'text/html',
    URL : 'text/uri-list',
    BITMAP : 'image/x-vnd.adobe.air.bitmap',
    FILES : 'application/x-vnd.adobe.air.file-list'
};

Ext.apply(Ext.EventObjectImpl.prototype, {
    hasFormat : function(format){
        if (this.browserEvent.dataTransfer) {
            for (var i = 0, len = this.browserEvent.dataTransfer.types.length; i < len; i++) {
                if(this.browserEvent.dataTransfer.types[i] == format) {
                    return true;
                }
            }
        }
        return false;
    },

    getData : function(type){
        return this.browserEvent.dataTransfer.getData(type);
    }
});

Ext.air.Sound = {
    play : function(file, startAt){
        var soundFile = air.File.applicationDirectory.resolvePath(file);
        var sound = new air.Sound();
        sound.load(new air.URLRequest(soundFile.url));
        sound.play(startAt);
    }
};

Ext.air.SystemMenu = function(){
    var menu;

    if(air.NativeWindow.supportsMenu && nativeWindow.systemChrome != air.NativeWindowSystemChrome.NONE) {
        menu = new air.NativeMenu();
        nativeWindow.menu = menu;
    }

    if(air.NativeApplication.supportsMenu) {
        menu = air.NativeApplication.nativeApplication.menu;
    }

    function find(menu, text){
        for(var i = 0, len = menu.items.length; i < len; i++){
            if(menu.items[i]['label'] == text){
                return menu.items[i];
            }
        }
        return null;
    }

    return {
        add: function(text, actions, mindex){

            var item = find(menu, text);
            if(!item){
                item = menu.addItem(new air.NativeMenuItem(text));
                item.mnemonicIndex = mindex || 0;

                item.submenu = new air.NativeMenu();
            }
            for (var i = 0, len = actions.length; i < len; i++) {
                item.submenu.addItem(actions[i] == '-' ? new air.NativeMenuItem("", true) : Ext.air.MenuItem(actions[i]));
            }
            return item.submenu;
        },

        get : function(){
            return menu;
        }
    };
}();

Ext.air.MenuItem = function(action){
    if(!action.isAction){
        action = new Ext.Action(action);
    }
    var cfg = action.initialConfig;
    var nativeItem = new air.NativeMenuItem(cfg.itemText || cfg.text);

    nativeItem.enabled = !cfg.disabled;

    if(!Ext.isEmpty(cfg.checked)){
        nativeItem.checked = cfg.checked;
    }

    var handler = cfg.handler;
    var scope = cfg.scope;

    nativeItem.addEventListener(air.Event.SELECT, function(){
        handler.call(scope || window, cfg);
    });

    action.addComponent({
        setDisabled : function(v){
            nativeItem.enabled = !v;
        },

        setText : function(v){
            nativeItem.label = v;
        },

        setVisible : function(v){

            nativeItem.enabled = !v;
        },

        setHandler : function(newHandler, newScope){
            handler = newHandler;
            scope = newScope;
        },

        on : function(){}
    });

    return nativeItem;
}


The source code

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.DomHelper = function(){
    var tempTableEl = null;
    var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
    var tableRe = /^table|tbody|tr|td$/i;

    var createHtml = function(o){
        if(typeof o == 'string'){
            return o;
        }
        var b = "";
        if (Ext.isArray(o)) {
            for (var i = 0, l = o.length; i < l; i++) {
                b += createHtml(o[i]);
            }
            return b;
        }
        if(!o.tag){
            o.tag = "div";
        }
        b += "<" + o.tag;
        for(var attr in o){
            if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;
            if(attr == "style"){
                var s = o["style"];
                if(typeof s == "function"){
                    s = s.call();
                }
                if(typeof s == "string"){
                    b += ' style="' + s + '"';
                }else if(typeof s == "object"){
                    b += ' style="';
                    for(var key in s){
                        if(typeof s[key] != "function"){
                            b += key + ":" + s[key] + ";";
                        }
                    }
                    b += '"';
                }
            }else{
                if(attr == "cls"){
                    b += ' class="' + o["cls"] + '"';
                }else if(attr == "htmlFor"){
                    b += ' for="' + o["htmlFor"] + '"';
                }else{
                    b += " " + attr + '="' + o[attr] + '"';
                }
            }
        }
        if(emptyTags.test(o.tag)){
            b += "/>";
        }else{
            b += ">";
            var cn = o.children || o.cn;
            if(cn){
                b += createHtml(cn);
            } else if(o.html){
                b += o.html;
            }
            b += "";
        }
        return b;
    };

    var createDom = function(o, parentNode){
        var el;
        if (Ext.isArray(o)) {
            el = document.createDocumentFragment();
            for(var i = 0, l = o.length; i < l; i++) {
                createDom(o[i], el);
            }
        } else if (typeof o == "string)") {
            el = document.createTextNode(o);
        } else {
            el = document.createElement(o.tag||'div');
            var useSet = !!el.setAttribute;
            for(var attr in o){
                if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || attr == "style" || typeof o[attr] == "function") continue;
                if(attr=="cls"){
                    el.className = o["cls"];
                }else{
                    if(useSet) el.setAttribute(attr, o[attr]);
                    else el[attr] = o[attr];
                }
            }
            Ext.DomHelper.applyStyles(el, o.style);
            var cn = o.children || o.cn;
            if(cn){
                createDom(cn, el);
            } else if(o.html){
                el.innerHTML = o.html;
            }
        }
        if(parentNode){
           parentNode.appendChild(el);
        }
        return el;
    };

    var ieTable = function(depth, s, h, e){
        tempTableEl.innerHTML = [s, h, e].join('');
        var i = -1, el = tempTableEl;
        while(++i < depth){
            el = el.firstChild;
        }
        return el;
    };

    var ts = '',
        te = '
',
        tbs = ts+'',
        tbe = ''+te,
        trs = tbs + '',
        tre = ''+tbe;

    var insertIntoTable = function(tag, where, el, html){
        if(!tempTableEl){
            tempTableEl = document.createElement('div');
        }
        var node;
        var before = null;
        if(tag == 'td'){
            if(where == 'afterbegin' || where == 'beforeend'){
                return;
            }
            if(where == 'beforebegin'){
                before = el;
                el = el.parentNode;
            } else{
                before = el.nextSibling;
                el = el.parentNode;
            }
            node = ieTable(4, trs, html, tre);
        }
        else if(tag == 'tr'){
            if(where == 'beforebegin'){
                before = el;
                el = el.parentNode;
                node = ieTable(3, tbs, html, tbe);
            } else if(where == 'afterend'){
                before = el.nextSibling;
                el = el.parentNode;
                node = ieTable(3, tbs, html, tbe);
            } else{
                if(where == 'afterbegin'){
                    before = el.firstChild;
                }
                node = ieTable(4, trs, html, tre);
            }
        } else if(tag == 'tbody'){
            if(where == 'beforebegin'){
                before = el;
                el = el.parentNode;
                node = ieTable(2, ts, html, te);
            } else if(where == 'afterend'){
                before = el.nextSibling;
                el = el.parentNode;
                node = ieTable(2, ts, html, te);
            } else{
                if(where == 'afterbegin'){
                    before = el.firstChild;
                }
                node = ieTable(3, tbs, html, tbe);
            }
        } else{
            if(where == 'beforebegin' || where == 'afterend'){
                return;
            }
            if(where == 'afterbegin'){
                before = el.firstChild;
            }
            node = ieTable(2, ts, html, te);
        }
        el.insertBefore(node, before);
        return node;
    };

    return {

    useDom : false,

    markup : function(o){
        return createHtml(o);
    },

    applyStyles : function(el, styles){
        if(styles){
           el = Ext.fly(el);
           if(typeof styles == "string"){
               var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
               var matches;
               while ((matches = re.exec(styles)) != null){
                   el.setStyle(matches[1], matches[2]);
               }
           }else if (typeof styles == "object"){
               for (var style in styles){
                  el.setStyle(style, styles[style]);
               }
           }else if (typeof styles == "function"){
                Ext.DomHelper.applyStyles(el, styles.call());
           }
        }
    },

    insertHtml : function(where, el, html){
        where = where.toLowerCase();
        if(el.insertAdjacentHTML){
            if(tableRe.test(el.tagName)){
                var rs;
                if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
                    return rs;
                }
            }
            switch(where){
                case "beforebegin":
                    el.insertAdjacentHTML('BeforeBegin', html);
                    return el.previousSibling;
                case "afterbegin":
                    el.insertAdjacentHTML('AfterBegin', html);
                    return el.firstChild;
                case "beforeend":
                    el.insertAdjacentHTML('BeforeEnd', html);
                    return el.lastChild;
                case "afterend":
                    el.insertAdjacentHTML('AfterEnd', html);
                    return el.nextSibling;
            }
            throw 'Illegal insertion point -> "' + where + '"';
        }
        var range = el.ownerDocument.createRange();
        var frag;
        switch(where){
             case "beforebegin":
                range.setStartBefore(el);
                frag = range.createContextualFragment(html);
                el.parentNode.insertBefore(frag, el);
                return el.previousSibling;
             case "afterbegin":
                if(el.firstChild){
                    range.setStartBefore(el.firstChild);
                    frag = range.createContextualFragment(html);
                    el.insertBefore(frag, el.firstChild);
                    return el.firstChild;
                }else{
                    el.innerHTML = html;
                    return el.firstChild;
                }
            case "beforeend":
                if(el.lastChild){
                    range.setStartAfter(el.lastChild);
                    frag = range.createContextualFragment(html);
                    el.appendChild(frag);
                    return el.lastChild;
                }else{
                    el.innerHTML = html;
                    return el.lastChild;
                }
            case "afterend":
                range.setStartAfter(el);
                frag = range.createContextualFragment(html);
                el.parentNode.insertBefore(frag, el.nextSibling);
                return el.nextSibling;
            }
            throw 'Illegal insertion point -> "' + where + '"';
    },

    insertBefore : function(el, o, returnElement){
        return this.doInsert(el, o, returnElement, "beforeBegin");
    },

    insertAfter : function(el, o, returnElement){
        return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
    },

    insertFirst : function(el, o, returnElement){
        return this.doInsert(el, o, returnElement, "afterBegin", "firstChild");
    },

    doInsert : function(el, o, returnElement, pos, sibling){
        el = Ext.getDom(el);
        var newNode;
        if(this.useDom){
            newNode = createDom(o, null);
            (sibling === "firstChild" ? el : el.parentNode).insertBefore(newNode, sibling ? el[sibling] : el);
        }else{
            var html = createHtml(o);
            newNode = this.insertHtml(pos, el, html);
        }
        return returnElement ? Ext.get(newNode, true) : newNode;
    },

    append : function(el, o, returnElement){
        el = Ext.getDom(el);
        var newNode;
        if(this.useDom){
            newNode = createDom(o, null);
            el.appendChild(newNode);
        }else{
            var html = createHtml(o);
            newNode = this.insertHtml("beforeEnd", el, html);
        }
        return returnElement ? Ext.get(newNode, true) : newNode;
    },

    overwrite : function(el, o, returnElement){
        el = Ext.getDom(el);
        el.innerHTML = createHtml(o);
        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
    },

    createTemplate : function(o){
        var html = createHtml(o);
        return new Ext.Template(html);
    }
    };
}();

Ext.Template = function(html){
    var a = arguments;
    if(Ext.isArray(html)){
        html = html.join("");
    }else if(a.length > 1){
        var buf = [];
        for(var i = 0, len = a.length; i < len; i++){
            if(typeof a[i] == 'object'){
                Ext.apply(this, a[i]);
            }else{
                buf[buf.length] = a[i];
            }
        }
        html = buf.join('');
    }

    this.html = html;
    if(this.compiled){
        this.compile();
    }
};
Ext.Template.prototype = {

    applyTemplate : function(values){
        if(this.compiled){
            return this.compiled(values);
        }
        var useF = this.disableFormats !== true;
        var fm = Ext.util.Format, tpl = this;
        var fn = function(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){

                        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 this.html.replace(this.re, fn);
    },

    set : function(html, compile){
        this.html = html;
        this.compiled = null;
        if(compile){
            this.compile();
        }
        return this;
    },

    disableFormats : false,

    re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,

    compile : function(){
        var fm = Ext.util.Format;
        var useF = this.disableFormats !== true;
        var sep = Ext.isGecko ? "+" : ",";
        var fn = function(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+"'";
        };
        var body;

        if(Ext.isGecko){
            body = "this.compiled = function(values){ return '" +
                   this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
                    "';};";
        }else{
            body = ["this.compiled = function(values){ return ['"];
            body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
            body.push("'].join('');};");
            body = body.join('');
        }
        eval(body);
        return this;
    },

    call : function(fnName, value, allValues){
        return this[fnName](value, allValues);
    },

    insertFirst: function(el, values, returnElement){
        return this.doInsert('afterBegin', el, values, returnElement);
    },

    insertBefore: function(el, values, returnElement){
        return this.doInsert('beforeBegin', el, values, returnElement);
    },

    insertAfter : function(el, values, returnElement){
        return this.doInsert('afterEnd', el, values, returnElement);
    },

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

    overwrite : function(el, values, returnElement){
        el = Ext.getDom(el);
        el.innerHTML = this.applyTemplate(values);
        return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
    }
};

Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;

Ext.DomHelper.Template = Ext.Template;

Ext.Template.from = function(el, config){
    el = Ext.getDom(el);
    return new Ext.Template(el.value || el.innerHTML, config || '');
};

Ext.DomQuery = function(){
    var cache = {}, simpleCache = {}, valueCache = {};
    var nonSpace = /\S/;
    var trimRe = /^\s+|\s+$/g;
    var tplRe = /\{(\d+)\}/g;
    var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
    var tagTokenRe = /^(#)?([\w-\*]+)/;
    var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;

    function child(p, index){
        var i = 0;
        var n = p.firstChild;
        while(n){
            if(n.nodeType == 1){
               if(++i == index){
                   return n;
               }
            }
            n = n.nextSibling;
        }
        return null;
    };

    function next(n){
        while((n = n.nextSibling) && n.nodeType != 1);
        return n;
    };

    function prev(n){
        while((n = n.previousSibling) && n.nodeType != 1);
        return n;
    };

    function children(d){
        var n = d.firstChild, ni = -1;
         while(n){
             var nx = n.nextSibling;
             if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
                 d.removeChild(n);
             }else{
                 n.nodeIndex = ++ni;
             }
             n = nx;
         }
         return this;
     };

    function byClassName(c, a, v){
        if(!v){
            return c;
        }
        var r = [], ri = -1, cn;
        for(var i = 0, ci; ci = c[i]; i++){
            if((' '+ci.className+' ').indexOf(v) != -1){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function attrValue(n, attr){
        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];

    };

    function getNodes(ns, mode, tagName){
        var result = [], ri = -1, cs;
        if(!ns){
            return result;
        }
        tagName = tagName || "*";
        if(typeof ns.getElementsByTagName != "undefined"){
            ns = [ns];
        }
        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;
                }
            }
        }else if(mode == "/" || mode == ">"){
            var utag = tagName.toUpperCase();
            for(var i = 0, ni, cn; ni = ns[i]; i++){
                cn = ni.children || ni.childNodes;
                for(var j = 0, cj; cj = cn[j]; j++){
                    if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
                        result[++ri] = cj;
                    }
                }
            }
        }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;
                }
            }
        }else if(mode == "~"){
            for(var i = 0, n; n = ns[i]; i++){
                while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
                if(n){
                    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 r = [], ri = -1;
        tagName = tagName.toLowerCase();
        for(var i = 0, ci; ci = cs[i]; i++){
            if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function byId(cs, attr, id){
        if(cs.tagName || cs == document){
            cs = [cs];
        }
        if(!id){
            return cs;
        }
        var r = [], ri = -1;
        for(var i = 0,ci; ci = cs[i]; i++){
            if(ci && ci.id == id){
                r[++ri] = ci;
                return r;
            }
        }
        return r;
    };

    function byAttribute(cs, attr, value, op, custom){
        var r = [], ri = -1, st = custom=="{";
        var f = Ext.DomQuery.operators[op];
        for(var i = 0, ci; ci = cs[i]; i++){
            var a;
            if(st){
                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"){
                a = ci.getAttribute("href", 2);
            }else{
                a = ci.getAttribute(attr);
            }
            if((f && f(a, value)) || (!f && a)){
                r[++ri] = ci;
            }
        }
        return r;
    };

    function byPseudo(cs, name, value){
        return Ext.DomQuery.pseudos[name](cs, value);
    };

    var isIE = window.ActiveXObject ? true : false;

    eval("var batch = 30803;");

    var key = 30803;

    function nodupIEXml(cs){
        var d = ++key;
        cs[0].setAttribute("_nodup", d);
        var 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;
        for(var i = 0, len = c1.length; i < len; i++){
            c1[i].setAttribute("_qdiff", d);
        }
        var r = [];
        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;
        if(!len1){
            return c2;
        }
        if(isIE && c1[0].selectSingleNode){
            return quickDiffIEXml(c1, c2);
        }
        var d = ++key;
        for(var i = 0; i < len1; i++){
            c1[i]._qdiff = d;
        }
        var r = [];
        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, null, id);
    }

    return {
        getStyle : function(el, name){
            return Ext.fly(el).getStyle(name);
        },

        compile : function(path, type){
            type = type || "select";

            var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
            var q = path, mode, lq;
            var tk = Ext.DomQuery.matchers;
            var tklen = tk.length;
            var mm;

            var lmode = q.match(modeRe);
            if(lmode && lmode[1]){
                fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
                q = q.replace(lmode[1], "");
            }

            while(path.substr(0, 1)=="/"){
                path = path.substr(1);
            }

            while(q && lq != q){
                lq = q;
                var tm = q.match(tagTokenRe);
                if(type == "select"){
                    if(tm){
                        if(tm[1] == "#"){
                            fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
                        }else{
                            fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
                        }
                        q = q.replace(tm[0], "");
                    }else if(q.substr(0, 1) != '@'){
                        fn[fn.length] = 'n = getNodes(n, mode, "*");';
                    }
                }else{
                    if(tm){
                        if(tm[1] == "#"){
                            fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
                        }else{
                            fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
                        }
                        q = q.replace(tm[0], "");
                    }
                }
                while(!(mm = q.match(modeRe))){
                    var matched = false;
                    for(var j = 0; j < tklen; j++){
                        var t = tk[j];
                        var m = q.match(t.re);
                        if(m){
                            fn[fn.length] = t.select.replace(tplRe, function(x, i){
                                                    return m[i];
                                                });
                            q = q.replace(m[0], "");
                            matched = true;
                            break;
                        }
                    }

                    if(!matched){
                        throw 'Error parsing selector, parsing failed at "' + q + '"';
                    }
                }
                if(mm[1]){
                    fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
                    q = q.replace(mm[1], "");
                }
            }
            fn[fn.length] = "return nodup(n);\n}";
            eval(fn.join(""));
            return f;
        },

        select : function(path, root, type){
            if(!root || root == document){
                root = document;
            }
            if(typeof root == "string"){
                root = document.getElementById(root);
            }
            var paths = path.split(",");
            var results = [];
            for(var i = 0, len = paths.length; i < len; i++){
                var p = paths[i].replace(trimRe, "");
                if(!cache[p]){
                    cache[p] = Ext.DomQuery.compile(p);
                    if(!cache[p]){
                        throw p + " is not a valid selector";
                    }
                }
                var result = cache[p](root);
                if(result && result != document){
                    results = results.concat(result);
                }
            }
            if(paths.length > 1){
                return nodup(results);
            }
            return results;
        },

        selectNode : function(path, root){
            return Ext.DomQuery.select(path, root)[0];
        },

        selectValue : function(path, root, defaultValue){
            path = path.replace(trimRe, "");
            if(!valueCache[path]){
                valueCache[path] = Ext.DomQuery.compile(path, "select");
            }
            var n = valueCache[path](root);
            n = n[0] ? n[0] : n;
            var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
            return ((v === null||v === undefined||v==='') ? defaultValue : v);
        },

        selectNumber : function(path, root, defaultValue){
            var v = Ext.DomQuery.selectValue(path, root, defaultValue || 0);
            return parseFloat(v);
        },

        is : function(el, ss){
            if(typeof el == "string"){
                el = document.getElementById(el);
            }
            var isArray = Ext.isArray(el);
            var result = Ext.DomQuery.filter(isArray ? el : [el], ss);
            return isArray ? (result.length == el.length) : (result.length > 0);
        },

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

        matchers : [{
                re: /^\.([\w-]+)/,
                select: 'n = byClassName(n, null, " {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, null, "{1}");'
            },{
                re: /^@([\w-]+)/,
                select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
            }
        ],

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

        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;
                var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
                var 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('|');
                var 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;
                var 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;
                var 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;
                var 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;
            }
        }
    };
}();

Ext.query = Ext.DomQuery.select;

Ext.util.Observable = function(){

    if(this.listeners){
        this.on(this.listeners);
        delete this.listeners;
    }
};
Ext.util.Observable.prototype = {

    fireEvent : function(){
        if(this.eventsSuspended !== true){
            var ce = this.events[arguments[0].toLowerCase()];
            if(typeof ce == "object"){
                return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
            }
        }
        return true;
    },

        filterOptRe : /^(?:scope|delay|buffer|single)$/,

    addListener : function(eventName, fn, scope, o){
        if(typeof eventName == "object"){
            o = eventName;
            for(var e in o){
                if(this.filterOptRe.test(e)){
                    continue;
                }
                if(typeof o[e] == "function"){
                                        this.addListener(e, o[e], o.scope,  o);
                }else{
                                        this.addListener(e, o[e].fn, o[e].scope, o[e]);
                }
            }
            return;
        }
        o = (!o || typeof o == "boolean") ? {} : o;
        eventName = eventName.toLowerCase();
        var ce = this.events[eventName] || true;
        if(typeof ce == "boolean"){
            ce = new Ext.util.Event(this, eventName);
            this.events[eventName] = ce;
        }
        ce.addListener(fn, scope, o);
    },

    removeListener : function(eventName, fn, scope){
        var ce = this.events[eventName.toLowerCase()];
        if(typeof ce == "object"){
            ce.removeListener(fn, scope);
        }
    },

    purgeListeners : function(){
        for(var evt in this.events){
            if(typeof this.events[evt] == "object"){
                 this.events[evt].clearListeners();
            }
        }
    },

    relayEvents : function(o, events){
        var createHandler = function(ename){
            return function(){
                return this.fireEvent.apply(this, Ext.combine(ename, Array.prototype.slice.call(arguments, 0)));
            };
        };
        for(var i = 0, len = events.length; i < len; i++){
            var ename = events[i];
            if(!this.events[ename]){ this.events[ename] = true; };
            o.on(ename, createHandler(ename), this);
        }
    },

    addEvents : function(o){
        if(!this.events){
            this.events = {};
        }
        if(typeof o == 'string'){
            for(var i = 0, a = arguments, v; v = a[i]; i++){
                if(!this.events[a[i]]){
                    o[a[i]] = true;
                }
            }
        }else{
            Ext.applyIf(this.events, o);
        }
    },

    hasListener : function(eventName){
        var e = this.events[eventName];
        return typeof e == "object" && e.listeners.length > 0;
    },

    suspendEvents : function(){
        this.eventsSuspended = true;
    },

    resumeEvents : function(){
        this.eventsSuspended = false;
    },

                getMethodEvent : function(method){
        if(!this.methodEvents){
            this.methodEvents = {};
        }
        var e = this.methodEvents[method];
        if(!e){
            e = {};
            this.methodEvents[method] = e;

            e.originalFn = this[method];
            e.methodName = method;
            e.before = [];
            e.after = [];

            var returnValue, v, cancel;
            var obj = this;

            var makeCall = function(fn, scope, args){
                if((v = fn.apply(scope || obj, args)) !== undefined){
                    if(typeof v === 'object'){
                        if(v.returnValue !== undefined){
                            returnValue = v.returnValue;
                        }else{
                            returnValue = v;
                        }
                        if(v.cancel === true){
                            cancel = true;
                        }
                    }else if(v === false){
                        cancel = true;
                    }else {
                        returnValue = v;
                    }
                }
            }

            this[method] = function(){
                returnValue = v = undefined; cancel = false;
                var args = Array.prototype.slice.call(arguments, 0);
                for(var i = 0, len = e.before.length; i < len; i++){
                    makeCall(e.before[i].fn, e.before[i].scope, args);
                    if(cancel){
                        return returnValue;
                    }
                }

                if((v = e.originalFn.apply(obj, args)) !== undefined){
                    returnValue = v;
                }

                for(var i = 0, len = e.after.length; i < len; i++){
                    makeCall(e.after[i].fn, e.after[i].scope, args);
                    if(cancel){
                        return returnValue;
                    }
                }
                return returnValue;
            };
        }
        return e;
    },

        beforeMethod : function(method, fn, scope){
        var e = this.getMethodEvent(method);
        e.before.push({fn: fn, scope: scope});
    },

        afterMethod : function(method, fn, scope){
        var e = this.getMethodEvent(method);
        e.after.push({fn: fn, scope: scope});
    },

    removeMethodListener : function(method, fn, scope){
        var e = this.getMethodEvent(method);
        for(var i = 0, len = e.before.length; i < len; i++){
            if(e.before[i].fn == fn && e.before[i].scope == scope){
                e.before.splice(i, 1);
                return;
            }
        }
        for(var i = 0, len = e.after.length; i < len; i++){
            if(e.after[i].fn == fn && e.after[i].scope == scope){
                e.after.splice(i, 1);
                return;
            }
        }
    }
};

Ext.util.Observable.prototype.on = Ext.util.Observable.prototype.addListener;

Ext.util.Observable.prototype.un = Ext.util.Observable.prototype.removeListener;

Ext.util.Observable.capture = function(o, fn, scope){
    o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
};

Ext.util.Observable.releaseCapture = function(o){
    o.fireEvent = Ext.util.Observable.prototype.fireEvent;
};

(function(){

    var createBuffered = function(h, o, scope){
        var task = new Ext.util.DelayedTask();
        return function(){
            task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
        };
    };

    var createSingle = function(h, e, fn, scope){
        return function(){
            e.removeListener(fn, scope);
            return h.apply(scope, arguments);
        };
    };

    var createDelayed = function(h, o, scope){
        return function(){
            var args = Array.prototype.slice.call(arguments, 0);
            setTimeout(function(){
                h.apply(scope, args);
            }, o.delay || 10);
        };
    };

    Ext.util.Event = function(obj, name){
        this.name = name;
        this.obj = obj;
        this.listeners = [];
    };

    Ext.util.Event.prototype = {
        addListener : function(fn, scope, options){
            scope = scope || this.obj;
            if(!this.isListening(fn, scope)){
                var l = this.createListener(fn, scope, options);
                if(!this.firing){
                    this.listeners.push(l);
                }else{                     this.listeners = this.listeners.slice(0);
                    this.listeners.push(l);
                }
            }
        },

        createListener : function(fn, scope, o){
            o = o || {};
            scope = scope || this.obj;
            var l = {fn: fn, scope: scope, options: o};
            var h = fn;
            if(o.delay){
                h = createDelayed(h, o, scope);
            }
            if(o.single){
                h = createSingle(h, this, fn, scope);
            }
            if(o.buffer){
                h = createBuffered(h, o, scope);
            }
            l.fireFn = h;
            return l;
        },

        findListener : function(fn, scope){
            scope = scope || this.obj;
            var ls = this.listeners;
            for(var i = 0, len = ls.length; i < len; i++){
                var l = ls[i];
                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;
            if((index = this.findListener(fn, scope)) != -1){
                if(!this.firing){
                    this.listeners.splice(index, 1);
                }else{
                    this.listeners = this.listeners.slice(0);
                    this.listeners.splice(index, 1);
                }
                return true;
            }
            return false;
        },

        clearListeners : function(){
            this.listeners = [];
        },

        fire : function(){
            var ls = this.listeners, scope, len = ls.length;
            if(len > 0){
                this.firing = true;
                var args = Array.prototype.slice.call(arguments, 0);
                for(var i = 0; i < len; i++){
                    var l = ls[i];
                    if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
                        this.firing = false;
                        return false;
                    }
                }
                this.firing = false;
            }
            return true;
        }
    };
})();

Ext.EventManager = function(){
    var docReadyEvent, docReadyProcId, docReadyState = false;
    var resizeEvent, resizeTask, textEvent, textSize;
    var E = Ext.lib.Event;
    var D = Ext.lib.Dom;

    var fireDocReady = function(){
        if(!docReadyState){
            docReadyState = true;
            Ext.isReady = true;
            if(docReadyProcId){
                clearInterval(docReadyProcId);
            }
            if(Ext.isGecko || Ext.isOpera) {
                document.removeEventListener("DOMContentLoaded", fireDocReady, false);
            }
            if(Ext.isIE){
                var defer = document.getElementById("ie-deferred-loader");
                if(defer){
                    defer.onreadystatechange = null;
                    defer.parentNode.removeChild(defer);
                }
            }
            if(docReadyEvent){
                docReadyEvent.fire();
                docReadyEvent.clearListeners();
            }
        }
    };

    var initDocReady = function(){
        docReadyEvent = new Ext.util.Event();
        if(Ext.isGecko || Ext.isOpera) {
            document.addEventListener("DOMContentLoaded", fireDocReady, false);
        }else if(Ext.isIE){
            document.write("");
            var defer = document.getElementById("ie-deferred-loader");
            defer.onreadystatechange = function(){
                if(this.readyState == "complete"){
                    fireDocReady();
                }
            };
        }else if(Ext.isSafari){
            docReadyProcId = setInterval(function(){
                var rs = document.readyState;
                if(rs == "complete") {
                    fireDocReady();
                 }
            }, 10);
        }

        E.on(window, "load", fireDocReady);
    };

    var createBuffered = function(h, o){
        var task = new Ext.util.DelayedTask(h);
        return function(e){

            e = new Ext.EventObjectImpl(e);
            task.delay(o.buffer, h, null, [e]);
        };
    };

    var createSingle = function(h, el, ename, fn){
        return function(e){
            Ext.EventManager.removeListener(el, ename, fn);
            h(e);
        };
    };

    var createDelayed = function(h, o){
        return function(e){

            e = new Ext.EventObjectImpl(e);
            setTimeout(function(){
                h(e);
            }, o.delay || 10);
        };
    };

    var listen = function(element, ename, opt, fn, scope){
        var o = (!opt || typeof opt == "boolean") ? {} : opt;
        fn = fn || o.fn; scope = scope || o.scope;
        var el = Ext.getDom(element);
        if(!el){
            throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
        }
        var h = function(e){
            e = Ext.EventObject.setEvent(e);
            var t;
            if(o.delegate){
                t = e.getTarget(o.delegate, el);
                if(!t){
                    return;
                }
            }else{
                t = e.target;
            }
            if(o.stopEvent === true){
                e.stopEvent();
            }
            if(o.preventDefault === true){
               e.preventDefault();
            }
            if(o.stopPropagation === true){
                e.stopPropagation();
            }

            if(o.normalized === false){
                e = e.browserEvent;
            }

            fn.call(scope || el, e, t, o);
        };
        if(o.delay){
            h = createDelayed(h, o);
        }
        if(o.single){
            h = createSingle(h, el, ename, fn);
        }
        if(o.buffer){
            h = createBuffered(h, o);
        }
        fn._handlers = fn._handlers || [];
        fn._handlers.push([Ext.id(el), ename, h]);

        E.on(el, ename, h);
        if(ename == "mousewheel" && el.addEventListener){
            el.addEventListener("DOMMouseScroll", h, false);
            E.on(window, 'unload', function(){
                el.removeEventListener("DOMMouseScroll", h, false);
            });
        }
        if(ename == "mousedown" && el == document){
            Ext.EventManager.stoppedMouseDownEvent.addListener(h);
        }
        return h;
    };

    var stopListening = function(el, ename, fn){
        var id = Ext.id(el), hds = fn._handlers, hd = fn;
        if(hds){
            for(var i = 0, len = hds.length; i < len; i++){
                var h = hds[i];
                if(h[0] == id && h[1] == ename){
                    hd = h[2];
                    hds.splice(i, 1);
                    break;
                }
            }
        }
        E.un(el, ename, hd);
        el = Ext.getDom(el);
        if(ename == "mousewheel" && el.addEventListener){
            el.removeEventListener("DOMMouseScroll", hd, false);
        }
        if(ename == "mousedown" && el == document){
            Ext.EventManager.stoppedMouseDownEvent.removeListener(hd);
        }
    };

    var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
    var pub = {

        addListener : function(element, eventName, fn, scope, options){
            if(typeof eventName == "object"){
                var o = eventName;
                for(var e in o){
                    if(propRe.test(e)){
                        continue;
                    }
                    if(typeof o[e] == "function"){

                        listen(element, e, o, o[e], o.scope);
                    }else{

                        listen(element, e, o[e]);
                    }
                }
                return;
            }
            return listen(element, eventName, options, fn, scope);
        },

        removeListener : function(element, eventName, fn){
            return stopListening(element, eventName, fn);
        },

        onDocumentReady : function(fn, scope, options){
            if(docReadyState){
                docReadyEvent.addListener(fn, scope, options);
                docReadyEvent.fire();
                docReadyEvent.clearListeners();
                return;
            }
            if(!docReadyEvent){
                initDocReady();
            }
            docReadyEvent.addListener(fn, scope, options);
        },

        onWindowResize : function(fn, scope, options){
            if(!resizeEvent){
                resizeEvent = new Ext.util.Event();
                resizeTask = new Ext.util.DelayedTask(function(){
                    resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
                });
                E.on(window, "resize", this.fireWindowResize, this);
            }
            resizeEvent.addListener(fn, scope, options);
        },

        fireWindowResize : function(){
            if(resizeEvent){
                if((Ext.isIE||Ext.isAir) && resizeTask){
                    resizeTask.delay(50);
                }else{
                    resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
                }
            }
        },

        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);
        },

        removeResizeListener : function(fn, scope){
            if(resizeEvent){
                resizeEvent.removeListener(fn, scope);
            }
        },

        fireResize : function(){
            if(resizeEvent){
                resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
            }
        },

        ieDeferSrc : false,

        textResizeInterval : 50
    };

    pub.on = pub.addListener;

    pub.un = pub.removeListener;

    pub.stoppedMouseDownEvent = new Ext.util.Event();
    return pub;
}();

Ext.onReady = Ext.EventManager.onDocumentReady;

Ext.onReady(function(){
    var bd = Ext.getBody();
    if(!bd){ return; }

    var cls = [
            Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : 'ext-ie7')
            : Ext.isGecko ? "ext-gecko"
            : Ext.isOpera ? "ext-opera"
            : Ext.isSafari ? "ext-safari" : ""];

    if(Ext.isMac){
        cls.push("ext-mac");
    }
    if(Ext.isLinux){
        cls.push("ext-linux");
    }
    if(Ext.isBorderBox){
        cls.push('ext-border-box');
    }
    if(Ext.isStrict){
        var p = bd.dom.parentNode;
        if(p){
            p.className += ' ext-strict';
        }
    }
    bd.addClass(cls.join(' '));
});

Ext.EventObject = function(){

    var E = Ext.lib.Event;

    var safariKeys = {
        63234 : 37,
        63235 : 39,
        63232 : 38,
        63233 : 40,
        63276 : 33,
        63277 : 34,
        63272 : 46,
        63273 : 36,
        63275 : 35
    };

    var btnMap = Ext.isIE ? {1:0,4:1,2:2} :
                (Ext.isSafari ? {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 = {

        browserEvent : null,

        button : -1,

        shiftKey : false,

        ctrlKey : false,

        altKey : false,

        BACKSPACE : 8,

        TAB : 9,

        RETURN : 13,

        ENTER : 13,

        SHIFT : 16,

        CONTROL : 17,

        ESC : 27,

        SPACE : 32,

        PAGEUP : 33,

        PAGEDOWN : 34,

        END : 35,

        HOME : 36,

        LEFT : 37,

        UP : 38,

        RIGHT : 39,

        DOWN : 40,

        DELETE : 46,

        F5 : 116,

        setEvent : function(e){
            if(e == this || (e && e.browserEvent)){
                return e;
            }
            this.browserEvent = e;
            if(e){

                this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
                if(e.type == 'click' && this.button == -1){
                    this.button = 0;
                }
                this.type = e.type;
                this.shiftKey = e.shiftKey;

                this.ctrlKey = e.ctrlKey || e.metaKey;
                this.altKey = e.altKey;

                this.keyCode = e.keyCode;
                this.charCode = e.charCode;

                this.target = E.getTarget(e);

                this.xy = E.getXY(e);
            }else{
                this.button = -1;
                this.shiftKey = false;
                this.ctrlKey = false;
                this.altKey = false;
                this.keyCode = 0;
                this.charCode =0;
                this.target = null;
                this.xy = [0, 0];
            }
            return this;
        },

        stopEvent : function(){
            if(this.browserEvent){
                if(this.browserEvent.type == 'mousedown'){
                    Ext.EventManager.stoppedMouseDownEvent.fire(this);
                }
                E.stopEvent(this.browserEvent);
            }
        },

        preventDefault : function(){
            if(this.browserEvent){
                E.preventDefault(this.browserEvent);
            }
        },

        isNavKeyPress : function(){
            var k = this.keyCode;
            k = Ext.isSafari ? (safariKeys[k] || k) : k;
            return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
        },

        isSpecialKey : function(){
            var k = this.keyCode;
            return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13  || k == 40 || k == 27 ||
            (k == 16) || (k == 17) ||
            (k >= 18 && k <= 20) ||
            (k >= 33 && k <= 35) ||
            (k >= 36 && k <= 39) ||
            (k >= 44 && k <= 45);
        },

        stopPropagation : function(){
            if(this.browserEvent){
                if(this.browserEvent.type == 'mousedown'){
                    Ext.EventManager.stoppedMouseDownEvent.fire(this);
                }
                E.stopPropagation(this.browserEvent);
            }
        },

        getCharCode : function(){
            return this.charCode || this.keyCode;
        },

        getKey : function(){
            var k = this.keyCode || this.charCode;
            return Ext.isSafari ? (safariKeys[k] || k) : k;
        },

        getPageX : function(){
            return this.xy[0];
        },

        getPageY : function(){
            return this.xy[1];
        },

        getTime : function(){
            if(this.browserEvent){
                return E.getTime(this.browserEvent);
            }
            return null;
        },

        getXY : function(){
            return this.xy;
        },

        getTarget : function(selector, maxDepth, returnEl){
            var t = Ext.get(this.target);
            return selector ? t.findParent(selector, maxDepth, returnEl) : (returnEl ? t : this.target);
        },

        getRelatedTarget : function(){
            if(this.browserEvent){
                return E.getRelatedTarget(this.browserEvent);
            }
            return null;
        },

        getWheelDelta : function(){
            var e = this.browserEvent;
            var delta = 0;
            if(e.wheelDelta){
                delta = e.wheelDelta/120;
            }else if(e.detail){
                delta = -e.detail/3;
            }
            return delta;
        },

        hasModifier : function(){
            return ((this.ctrlKey || this.altKey) || this.shiftKey) ? true : false;
        },

        within : function(el, related){
            var t = this[related ? "getRelatedTarget" : "getTarget"]();
            return t && Ext.fly(el).contains(t);
        },

        getPoint : function(){
            return new Ext.lib.Point(this.xy[0], this.xy[1]);
        }
    };

    return new Ext.EventObjectImpl();
}();

(function(){
var D = Ext.lib.Dom;
var E = Ext.lib.Event;
var A = Ext.lib.Anim;

var propCache = {};
var camelRe = /(-[a-z])/gi;
var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
var view = document.defaultView;

Ext.Element = function(element, forceNew){
    var dom = typeof element == "string" ?
            document.getElementById(element) : element;
    if(!dom){         return null;
    }
    var id = dom.id;
    if(forceNew !== true && id && Ext.Element.cache[id]){         return Ext.Element.cache[id];
    }

    this.dom = dom;

    this.id = id || Ext.id(dom);
};

var El = Ext.Element;

El.prototype = {

    originalDisplay : "",

    visibilityMode : 1,

    defaultUnit : "px",

    setVisibilityMode : function(visMode){
        this.visibilityMode = visMode;
        return this;
    },

    enableDisplayMode : function(display){
        this.setVisibilityMode(El.DISPLAY);
        if(typeof display != "undefined") this.originalDisplay = display;
        return this;
    },

    findParent : function(simpleSelector, maxDepth, returnEl){
        var p = this.dom, b = document.body, depth = 0, dq = Ext.DomQuery, stopEl;
        maxDepth = maxDepth || 50;
        if(typeof maxDepth != "number"){
            stopEl = Ext.getDom(maxDepth);
            maxDepth = 10;
        }
        while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
            if(dq.is(p, simpleSelector)){
                return returnEl ? Ext.get(p) : p;
            }
            depth++;
            p = p.parentNode;
        }
        return null;
    },

    findParentNode : function(simpleSelector, maxDepth, returnEl){
        var p = Ext.fly(this.dom.parentNode, '_internal');
        return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
    },

    up : function(simpleSelector, maxDepth){
        return this.findParentNode(simpleSelector, maxDepth, true);
    },

    is : function(simpleSelector){
        return Ext.DomQuery.is(this.dom, simpleSelector);
    },

    animate : function(args, duration, onComplete, easing, animType){
        this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
        return this;
    },

    anim : 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',
            function(){
                Ext.callback(cb, this);
                Ext.callback(opt.callback, opt.scope || this, [this, opt]);
            },
            this
        );
        opt.anim = anim;
        return anim;
    },

        preanim : function(a, i){
        return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
    },

    clean : function(forceReclean){
        if(this.isCleaned && forceReclean !== true){
            return this;
        }
        var ns = /\S/;
        var d = this.dom, n = d.firstChild, ni = -1;
         while(n){
             var nx = n.nextSibling;
             if(n.nodeType == 3 && !ns.test(n.nodeValue)){
                 d.removeChild(n);
             }else{
                 n.nodeIndex = ++ni;
             }
             n = nx;
         }
         this.isCleaned = true;
         return this;
     },

    scrollIntoView : function(container, hscroll){
        var c = Ext.getDom(container) || Ext.getBody().dom;
        var el = this.dom;

        var o = this.getOffsetsTo(c),
            l = o[0] + c.scrollLeft,
            t = o[1] + c.scrollTop,
            b = t+el.offsetHeight,
            r = l+el.offsetWidth;

        var ch = c.clientHeight;
        var ct = parseInt(c.scrollTop, 10);
        var cl = parseInt(c.scrollLeft, 10);
        var cb = ct + ch;
        var 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;
        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;
    },

        scrollChildIntoView : function(child, hscroll){
        Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
    },

    autoHeight : function(animate, duration, onComplete, easing){
        var oldHeight = this.getHeight();
        this.clip();
        this.setHeight(1);         setTimeout(function(){
            var height = parseInt(this.dom.scrollHeight, 10);             if(!animate){
                this.setHeight(height);
                this.unclip();
                if(typeof onComplete == "function"){
                    onComplete();
                }
            }else{
                this.setHeight(oldHeight);                 this.setHeight(height, animate, duration, function(){
                    this.unclip();
                    if(typeof onComplete == "function") onComplete();
                }.createDelegate(this), easing);
            }
        }.createDelegate(this), 0);
        return this;
    },

    contains : function(el){
        if(!el){return false;}
        return D.isAncestor(this.dom, el.dom ? el.dom : el);
    },

    isVisible : function(deep) {
        var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
        if(deep !== true || !vis){
            return vis;
        }
        var p = this.dom.parentNode;
        while(p && p.tagName.toLowerCase() != "body"){
            if(!Ext.fly(p, '_isVisible').isVisible()){
                return false;
            }
            p = p.parentNode;
        }
        return true;
    },

    select : function(selector, unique){
        return El.select(selector, unique, this.dom);
    },

    query : function(selector, unique){
        return Ext.DomQuery.select(selector, this.dom);
    },

    child : function(selector, returnDom){
        var n = Ext.DomQuery.selectNode(selector, this.dom);
        return returnDom ? n : Ext.get(n);
    },

    down : function(selector, returnDom){
        var n = Ext.DomQuery.selectNode(" > " + selector, this.dom);
        return returnDom ? n : Ext.get(n);
    },

    initDD : function(group, config, overrides){
        var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
        return Ext.apply(dd, overrides);
    },

    initDDProxy : function(group, config, overrides){
        var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
        return Ext.apply(dd, overrides);
    },

    initDDTarget : function(group, config, overrides){
        var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
        return Ext.apply(dd, overrides);
    },

     setVisible : function(visible, animate){
        if(!animate || !A){
            if(this.visibilityMode == El.DISPLAY){
                this.setDisplayed(visible);
            }else{
                this.fixDisplay();
                this.dom.style.visibility = visible ? "visible" : "hidden";
            }
        }else{
                        var dom = this.dom;
            var visMode = this.visibilityMode;
            if(visible){
                this.setOpacity(.01);
                this.setVisible(true);
            }
            this.anim({opacity: { to: (visible?1:0) }},
                  this.preanim(arguments, 1),
                  null, .35, 'easeIn', function(){
                     if(!visible){
                         if(visMode == El.DISPLAY){
                             dom.style.display = "none";
                         }else{
                             dom.style.visibility = "hidden";
                         }
                         Ext.get(dom).setOpacity(1);
                     }
                 });
        }
        return this;
    },

    isDisplayed : function() {
        return this.getStyle("display") != "none";
    },

    toggle : function(animate){
        this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
        return this;
    },

    setDisplayed : function(value) {
        if(typeof value == "boolean"){
           value = value ? this.originalDisplay : "none";
        }
        this.setStyle("display", value);
        return this;
    },

    focus : function() {
        try{
            this.dom.focus();
        }catch(e){}
        return this;
    },

    blur : function() {
        try{
            this.dom.blur();
        }catch(e){}
        return this;
    },

    addClass : function(className){
        if(Ext.isArray(className)){
            for(var i = 0, len = className.length; i < len; i++) {
                this.addClass(className[i]);
            }
        }else{
            if(className && !this.hasClass(className)){
                this.dom.className = this.dom.className + " " + className;
            }
        }
        return this;
    },

    radioClass : function(className){
        var siblings = this.dom.parentNode.childNodes;
        for(var i = 0; i < siblings.length; i++) {
            var s = siblings[i];
            if(s.nodeType == 1){
                Ext.get(s).removeClass(className);
            }
        }
        this.addClass(className);
        return this;
    },

    removeClass : function(className){
        if(!className || !this.dom.className){
            return this;
        }
        if(Ext.isArray(className)){
            for(var i = 0, len = className.length; i < len; i++) {
                this.removeClass(className[i]);
            }
        }else{
            if(this.hasClass(className)){
                var re = this.classReCache[className];
                if (!re) {
                   re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
                   this.classReCache[className] = re;
                }
                this.dom.className =
                    this.dom.className.replace(re, " ");
            }
        }
        return this;
    },

        classReCache: {},

    toggleClass : function(className){
        if(this.hasClass(className)){
            this.removeClass(className);
        }else{
            this.addClass(className);
        }
        return this;
    },

    hasClass : function(className){
        return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
    },

    replaceClass : function(oldClassName, newClassName){
        this.removeClass(oldClassName);
        this.addClass(newClassName);
        return this;
    },

    getStyles : function(){
        var a = arguments, len = a.length, r = {};
        for(var i = 0; i < len; i++){
            r[a[i]] = this.getStyle(a[i]);
        }
        return r;
    },

    getStyle : function(){
        return view && view.getComputedStyle ?
            function(prop){
                var el = this.dom, v, cs, camel;
                if(prop == 'float'){
                    prop = "cssFloat";
                }
                if(v = el.style[prop]){
                    return v;
                }
                if(cs = view.getComputedStyle(el, "")){
                    if(!(camel = propCache[prop])){
                        camel = propCache[prop] = prop.replace(camelRe, camelFn);
                    }
                    return cs[camel];
                }
                return null;
            } :
            function(prop){
                var el = this.dom, v, cs, camel;
                if(prop == 'opacity'){
                    if(typeof el.style.filter == 'string'){
                        var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
                        if(m){
                            var fv = parseFloat(m[1]);
                            if(!isNaN(fv)){
                                return fv ? fv / 100 : 0;
                            }
                        }
                    }
                    return 1;
                }else if(prop == 'float'){
                    prop = "styleFloat";
                }
                if(!(camel = propCache[prop])){
                    camel = propCache[prop] = prop.replace(camelRe, camelFn);
                }
                if(v = el.style[camel]){
                    return v;
                }
                if(cs = el.currentStyle){
                    return cs[camel];
                }
                return null;
            };
    }(),

    setStyle : function(prop, value){
        if(typeof prop == "string"){
            var camel;
            if(!(camel = propCache[prop])){
                camel = propCache[prop] = prop.replace(camelRe, camelFn);
            }
            if(camel == 'opacity') {
                this.setOpacity(value);
            }else{
                this.dom.style[camel] = value;
            }
        }else{
            for(var style in prop){
                if(typeof prop[style] != "function"){
                   this.setStyle(style, prop[style]);
                }
            }
        }
        return this;
    },

    applyStyles : function(style){
        Ext.DomHelper.applyStyles(this.dom, style);
        return this;
    },

    getX : function(){
        return D.getX(this.dom);
    },

    getY : function(){
        return D.getY(this.dom);
    },

    getXY : function(){
        return D.getXY(this.dom);
    },

    getOffsetsTo : function(el){
        var o = this.getXY();
        var e = Ext.fly(el, '_internal').getXY();
        return [o[0]-e[0],o[1]-e[1]];
    },

    setX : function(x, animate){
        if(!animate || !A){
            D.setX(this.dom, x);
        }else{
            this.setXY([x, this.getY()], this.preanim(arguments, 1));
        }
        return this;
    },

    setY : function(y, animate){
        if(!animate || !A){
            D.setY(this.dom, y);
        }else{
            this.setXY([this.getX(), y], this.preanim(arguments, 1));
        }
        return this;
    },

    setLeft : function(left){
        this.setStyle("left", this.addUnits(left));
        return this;
    },

    setTop : function(top){
        this.setStyle("top", this.addUnits(top));
        return this;
    },

    setRight : function(right){
        this.setStyle("right", this.addUnits(right));
        return this;
    },

    setBottom : function(bottom){
        this.setStyle("bottom", this.addUnits(bottom));
        return this;
    },

    setXY : function(pos, animate){
        if(!animate || !A){
            D.setXY(this.dom, pos);
        }else{
            this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
        }
        return this;
    },

    setLocation : function(x, y, animate){
        this.setXY([x, y], this.preanim(arguments, 2));
        return this;
    },

    moveTo : function(x, y, animate){
        this.setXY([x, y], this.preanim(arguments, 2));
        return this;
    },

    getRegion : function(){
        return D.getRegion(this.dom);
    },

    getHeight : function(contentHeight){
        var h = this.dom.offsetHeight || 0;
        h = contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
        return h < 0 ? 0 : h;
    },

    getWidth : function(contentWidth){
        var w = this.dom.offsetWidth || 0;
        w = contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
        return w < 0 ? 0 : w;
    },

    getComputedHeight : function(){
        var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
        if(!h){
            h = parseInt(this.getStyle('height'), 10) || 0;
            if(!this.isBorderBox()){
                h += this.getFrameWidth('tb');
            }
        }
        return h;
    },

    getComputedWidth : function(){
        var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
        if(!w){
            w = parseInt(this.getStyle('width'), 10) || 0;
            if(!this.isBorderBox()){
                w += this.getFrameWidth('lr');
            }
        }
        return w;
    },

    getSize : function(contentSize){
        return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
    },

    getStyleSize : function(){
        var w, h, d = this.dom, s = d.style;
        if(s.width && s.width != 'auto'){
            w = parseInt(s.width, 10);
            if(Ext.isBorderBox){
               w -= this.getFrameWidth('lr');
            }
        }
        if(s.height && s.height != 'auto'){
            h = parseInt(s.height, 10);
            if(Ext.isBorderBox){
               h -= this.getFrameWidth('tb');
            }
        }
        return {width: w || this.getWidth(true), height: h || this.getHeight(true)};

    },

    getViewSize : function(){
        var d = this.dom, doc = document, aw = 0, ah = 0;
        if(d == doc || d == doc.body){
            return {width : D.getViewWidth(), height: D.getViewHeight()};
        }else{
            return {
                width : d.clientWidth,
                height: d.clientHeight
            };
        }
    },

    getValue : function(asNumber){
        return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
    },

        adjustWidth : function(width){
        if(typeof width == "number"){
            if(this.autoBoxAdjust && !this.isBorderBox()){
               width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
            }
            if(width < 0){
                width = 0;
            }
        }
        return width;
    },

        adjustHeight : function(height){
        if(typeof height == "number"){
           if(this.autoBoxAdjust && !this.isBorderBox()){
               height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
           }
           if(height < 0){
               height = 0;
           }
        }
        return height;
    },

    setWidth : function(width, animate){
        width = this.adjustWidth(width);
        if(!animate || !A){
            this.dom.style.width = this.addUnits(width);
        }else{
            this.anim({width: {to: width}}, this.preanim(arguments, 1));
        }
        return this;
    },

     setHeight : function(height, animate){
        height = this.adjustHeight(height);
        if(!animate || !A){
            this.dom.style.height = this.addUnits(height);
        }else{
            this.anim({height: {to: height}}, this.preanim(arguments, 1));
        }
        return this;
    },

     setSize : function(width, height, animate){
        if(typeof width == "object"){             height = width.height; width = width.width;
        }
        width = this.adjustWidth(width); height = this.adjustHeight(height);
        if(!animate || !A){
            this.dom.style.width = this.addUnits(width);
            this.dom.style.height = this.addUnits(height);
        }else{
            this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
        }
        return this;
    },

    setBounds : function(x, y, width, height, animate){
        if(!animate || !A){
            this.setSize(width, height);
            this.setLocation(x, y);
        }else{
            width = this.adjustWidth(width); height = this.adjustHeight(height);
            this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
                          this.preanim(arguments, 4), 'motion');
        }
        return this;
    },

    setRegion : function(region, animate){
        this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
        return this;
    },

    addListener : function(eventName, fn, scope, options){
        Ext.EventManager.on(this.dom,  eventName, fn, scope || this, options);
    },

    removeListener : function(eventName, fn){
        Ext.EventManager.removeListener(this.dom,  eventName, fn);
        return this;
    },

    removeAllListeners : function(){
        E.purgeElement(this.dom);
        return this;
    },

    relayEvent : function(eventName, observable){
        this.on(eventName, function(e){
            observable.fireEvent(eventName, e);
        });
    },

     setOpacity : function(opacity, animate){
        if(!animate || !A){
            var s = this.dom.style;
            if(Ext.isIE){
                s.zoom = 1;
                s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
                           (opacity == 1 ? "" : " alpha(opacity=" + opacity * 100 + ")");
            }else{
                s.opacity = opacity;
            }
        }else{
            this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
        }
        return this;
    },

    getLeft : function(local){
        if(!local){
            return this.getX();
        }else{
            return parseInt(this.getStyle("left"), 10) || 0;
        }
    },

    getRight : function(local){
        if(!local){
            return this.getX() + this.getWidth();
        }else{
            return (this.getLeft(true) + this.getWidth()) || 0;
        }
    },

    getTop : function(local) {
        if(!local){
            return this.getY();
        }else{
            return parseInt(this.getStyle("top"), 10) || 0;
        }
    },

    getBottom : function(local){
        if(!local){
            return this.getY() + this.getHeight();
        }else{
            return (this.getTop(true) + this.getHeight()) || 0;
        }
    },

    position : function(pos, zIndex, x, y){
        if(!pos){
           if(this.getStyle('position') == 'static'){
               this.setStyle('position', 'relative');
           }
        }else{
            this.setStyle("position", pos);
        }
        if(zIndex){
            this.setStyle("z-index", zIndex);
        }
        if(x !== undefined && y !== undefined){
            this.setXY([x, y]);
        }else if(x !== undefined){
            this.setX(x);
        }else if(y !== undefined){
            this.setY(y);
        }
    },

    clearPositioning : function(value){
        value = value ||'';
        this.setStyle({
            "left": value,
            "right": value,
            "top": value,
            "bottom": value,
            "z-index": "",
            "position" : "static"
        });
        return this;
    },

    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("z-index")
        };
    },

    getBorderWidth : function(side){
        return this.addStyles(side, El.borders);
    },

    getPadding : function(side){
        return this.addStyles(side, El.paddings);
    },

    setPositioning : function(pc){
        this.applyStyles(pc);
        if(pc.right == "auto"){
            this.dom.style.right = "";
        }
        if(pc.bottom == "auto"){
            this.dom.style.bottom = "";
        }
        return this;
    },

        fixDisplay : function(){
        if(this.getStyle("display") == "none"){
            this.setStyle("visibility", "hidden");
            this.setStyle("display", this.originalDisplay);             if(this.getStyle("display") == "none"){                 this.setStyle("display", "block");
            }
        }
    },

        setOverflow : function(v){
        if(v=='auto' && Ext.isMac && Ext.isGecko){     		this.dom.style.overflow = 'hidden';
            (function(){this.dom.style.overflow = 'auto';}).defer(1, this);
        }else{
            this.dom.style.overflow = v;
        }
    },

     setLeftTop : function(left, top){
        this.dom.style.left = this.addUnits(left);
        this.dom.style.top = this.addUnits(top);
        return this;
    },

     move : function(direction, distance, animate){
        var xy = this.getXY();
        direction = direction.toLowerCase();
        switch(direction){
            case "l":
            case "left":
                this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
                break;
           case "r":
           case "right":
                this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
                break;
           case "t":
           case "top":
           case "up":
                this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
                break;
           case "b":
           case "bottom":
           case "down":
                this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
                break;
        }
        return this;
    },

    clip : function(){
        if(!this.isClipped){
           this.isClipped = true;
           this.originalClip = {
               "o": this.getStyle("overflow"),
               "x": this.getStyle("overflow-x"),
               "y": this.getStyle("overflow-y")
           };
           this.setStyle("overflow", "hidden");
           this.setStyle("overflow-x", "hidden");
           this.setStyle("overflow-y", "hidden");
        }
        return this;
    },

    unclip : function(){
        if(this.isClipped){
            this.isClipped = false;
            var o = this.originalClip;
            if(o.o){this.setStyle("overflow", o.o);}
            if(o.x){this.setStyle("overflow-x", o.x);}
            if(o.y){this.setStyle("overflow-y", o.y);}
        }
        return this;
    },

    getAnchorXY : function(anchor, local, s){

        var w, h, vp = false;
        if(!s){
            var d = this.dom;
            if(d == document.body || d == document){
                vp = true;
                w = D.getViewWidth(); h = D.getViewHeight();
            }else{
                w = this.getWidth(); h = this.getHeight();
            }
        }else{
            w = s.width;  h = s.height;
        }
        var x = 0, y = 0, r = Math.round;
        switch((anchor || "tl").toLowerCase()){
            case "c":
                x = r(w*.5);
                y = r(h*.5);
            break;
            case "t":
                x = r(w*.5);
                y = 0;
            break;
            case "l":
                x = 0;
                y = r(h*.5);
            break;
            case "r":
                x = w;
                y = r(h*.5);
            break;
            case "b":
                x = r(w*.5);
                y = h;
            break;
            case "tl":
                x = 0;
                y = 0;
            break;
            case "bl":
                x = 0;
                y = h;
            break;
            case "br":
                x = w;
                y = h;
            break;
            case "tr":
                x = w;
                y = 0;
            break;
        }
        if(local === true){
            return [x, y];
        }
        if(vp){
            var sc = this.getScroll();
            return [x + sc.left, y + sc.top];
        }
                var o = this.getXY();
        return [x+o[0], y+o[1]];
    },

    getAlignToXY : function(el, p, o){
        el = Ext.get(el);
        if(!el || !el.dom){
            throw "Element.alignToXY with an element that doesn't exist";
        }
        var d = this.dom;
        var c = false;         var p1 = "", p2 = "";
        o = o || [0,0];

        if(!p){
            p = "tl-bl";
        }else if(p == "?"){
            p = "tl-bl?";
        }else if(p.indexOf("-") == -1){
            p = "tl-" + p;
        }
        p = p.toLowerCase();
        var 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];

                        var a1 = this.getAnchorXY(p1, true);
        var a2 = el.getAnchorXY(p2, false);

        var x = a2[0] - a1[0] + o[0];
        var y = a2[1] - a1[1] + o[1];

        if(c){
                        var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
                        var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;

                                                var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
           var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
           var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
           var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));

           var doc = document;
           var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
           var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;

           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];
    },

        getConstrainToXY : function(){
        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;

                        var moved = false;

                        if((x + w) > vr){
                x = vr - w;
                moved = true;
            }
            if((y + h) > vb){
                y = vb - h;
                moved = true;
            }
                        if(x < vx){
                x = vx;
                moved = true;
            }
            if(y < vy){
                y = vy;
                moved = true;
            }
            return moved ? [x, y] : false;
        };
    }(),

        adjustForConstraints : function(xy, parent, offsets){
        return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;
    },

    alignTo : function(element, position, offsets, animate){
        var xy = this.getAlignToXY(element, position, offsets);
        this.setXY(xy, this.preanim(arguments, 3));
        return this;
    },

    anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
        var action = function(){
            this.alignTo(el, alignment, offsets, animate);
            Ext.callback(callback, this);
        };
        Ext.EventManager.onWindowResize(action, this);
        var tm = typeof monitorScroll;
        if(tm != 'undefined'){
            Ext.EventManager.on(window, 'scroll', action, this,
                {buffer: tm == 'number' ? monitorScroll : 50});
        }
        action.call(this);         return this;
    },

    clearOpacity : function(){
        if (window.ActiveXObject) {
            if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
                this.dom.style.filter = "";
            }
        } else {
            this.dom.style.opacity = "";
            this.dom.style["-moz-opacity"] = "";
            this.dom.style["-khtml-opacity"] = "";
        }
        return this;
    },

    hide : function(animate){
        this.setVisible(false, this.preanim(arguments, 0));
        return this;
    },

    show : function(animate){
        this.setVisible(true, this.preanim(arguments, 0));
        return this;
    },

    addUnits : function(size){
        return Ext.Element.addUnits(size, this.defaultUnit);
    },

    update : function(html, loadScripts, callback){
        if(typeof html == "undefined"){
            html = "";
        }
        if(loadScripts !== true){
            this.dom.innerHTML = html;
            if(typeof callback == "function"){
                callback();
            }
            return this;
        }
        var id = Ext.id();
        var dom = this.dom;

        html += '';

        E.onAvailable(id, function(){
            var hd = document.getElementsByTagName("head")[0];
            var re = /(?:]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
            var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
            var typeRe = /\stype=([\'\"])(.*?)\1/i;

            var match;
            while(match = re.exec(html)){
                var attrs = match[1];
                var srcMatch = attrs ? attrs.match(srcRe) : false;
                if(srcMatch && srcMatch[2]){
                   var s = document.createElement("script");
                   s.src = srcMatch[2];
                   var 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]);
                    }
                }
            }
            var el = document.getElementById(id);
            if(el){Ext.removeNode(el);}
            if(typeof callback == "function"){
                callback();
            }
        });
        dom.innerHTML = html.replace(/(?:)((\n|\r|.)*?)(?:<\/script>)/ig, "");
        return this;
    },

    load : function(){
        var um = this.getUpdater();
        um.update.apply(um, arguments);
        return this;
    },

    getUpdater : function(){
        if(!this.updateManager){
            this.updateManager = new Ext.Updater(this);
        }
        return this.updateManager;
    },

    unselectable : function(){
        this.dom.unselectable = "on";
        this.swallowEvent("selectstart", true);
        this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
        this.addClass("x-unselectable");
        return this;
    },

    getCenterXY : function(){
        return this.getAlignToXY(document, 'c-c');
    },

    center : function(centerIn){
        this.alignTo(centerIn || document, 'c-c');
        return this;
    },

    isBorderBox : function(){
        return noBoxAdjust[this.dom.tagName.toLowerCase()] || Ext.isBorderBox;
    },

    getBox : function(contentBox, local){
        var xy;
        if(!local){
            xy = this.getXY();
        }else{
            var left = parseInt(this.getStyle("left"), 10) || 0;
            var top = parseInt(this.getStyle("top"), 10) || 0;
            xy = [left, top];
        }
        var el = this.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{
            var l = this.getBorderWidth("l")+this.getPadding("l");
            var r = this.getBorderWidth("r")+this.getPadding("r");
            var t = this.getBorderWidth("t")+this.getPadding("t");
            var b = this.getBorderWidth("b")+this.getPadding("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;
    },

    getFrameWidth : function(sides, onlyContentBox){
        return onlyContentBox && Ext.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
    },

    setBox : function(box, adjust, animate){
        var w = box.width, h = box.height;
        if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
           w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
           h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
        }
        this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
        return this;
    },

     repaint : function(){
        var dom = this.dom;
        this.addClass("x-repaint");
        setTimeout(function(){
            Ext.get(dom).removeClass("x-repaint");
        }, 1);
        return this;
    },

    getMargins : function(side){
        if(!side){
            return {
                top: parseInt(this.getStyle("margin-top"), 10) || 0,
                left: parseInt(this.getStyle("margin-left"), 10) || 0,
                bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
                right: parseInt(this.getStyle("margin-right"), 10) || 0
            };
        }else{
            return this.addStyles(side, El.margins);
         }
    },

        addStyles : function(sides, styles){
        var val = 0, v, w;
        for(var i = 0, len = sides.length; i < len; i++){
            v = this.getStyle(styles[sides.charAt(i)]);
            if(v){
                 w = parseInt(v, 10);
                 if(w){ val += (w >= 0 ? w : -1 * w); }
            }
        }
        return val;
    },

    createProxy : function(config, renderTo, matchBox){
        config = typeof config == "object" ?
            config : {tag : "div", cls: config};

        var proxy;
        if(renderTo){
            proxy = Ext.DomHelper.append(renderTo, config, true);
        }else {
            proxy = Ext.DomHelper.insertBefore(this.dom, config, true);
        }
        if(matchBox){
           proxy.setBox(this.getBox());
        }
        return proxy;
    },

    mask : function(msg, msgCls){
        if(this.getStyle("position") == "static"){
            this.setStyle("position", "relative");
        }
        if(this._maskMsg){
            this._maskMsg.remove();
        }
        if(this._mask){
            this._mask.remove();
        }

        this._mask = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask"}, true);

        this.addClass("x-masked");
        this._mask.setDisplayed(true);
        if(typeof msg == 'string'){
            this._maskMsg = Ext.DomHelper.append(this.dom, {cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
            var mm = this._maskMsg;
            mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
            mm.dom.firstChild.innerHTML = msg;
            mm.setDisplayed(true);
            mm.center(this);
        }
        if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){             this._mask.setSize(this.dom.clientWidth, this.getHeight());
        }
        return this._mask;
    },

    unmask : function(){
        if(this._mask){
            if(this._maskMsg){
                this._maskMsg.remove();
                delete this._maskMsg;
            }
            this._mask.remove();
            delete this._mask;
        }
        this.removeClass("x-masked");
    },

    isMasked : function(){
        return this._mask && this._mask.isVisible();
    },

    createShim : function(){
        var el = document.createElement('iframe');
        el.frameBorder = 'no';
        el.className = 'ext-shim';
        if(Ext.isIE && Ext.isSecure){
            el.src = Ext.SSL_SECURE_URL;
        }
        var shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
        shim.autoBoxAdjust = false;
        return shim;
    },

    remove : function(){
        Ext.removeNode(this.dom);
        delete El.cache[this.dom.id];
    },

    hover : function(overFn, outFn, scope){
        var preOverFn = function(e){
            if(!e.within(this, true)){
                overFn.apply(scope || this, arguments);
            }
        };
        var preOutFn = function(e){
            if(!e.within(this, true)){
                outFn.apply(scope || this, arguments);
            }
        };
        this.on("mouseover", preOverFn, this.dom);
        this.on("mouseout", preOutFn, this.dom);
        return this;
    },

    addClassOnOver : function(className, preventFlicker){
        this.hover(
            function(){
                Ext.fly(this, '_internal').addClass(className);
            },
            function(){
                Ext.fly(this, '_internal').removeClass(className);
            }
        );
        return 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;
    },

    addClassOnClick : function(className){
        var dom = this.dom;
        this.on("mousedown", function(){
            Ext.fly(dom, '_internal').addClass(className);
            var d = Ext.getDoc();
            var fn = function(){
                Ext.fly(dom, '_internal').removeClass(className);
                d.removeListener("mouseup", fn);
            };
            d.on("mouseup", fn);
        });
        return this;
    },

    swallowEvent : function(eventName, preventDefault){
        var fn = function(e){
            e.stopPropagation();
            if(preventDefault){
                e.preventDefault();
            }
        };
        if(Ext.isArray(eventName)){
            for(var i = 0, len = eventName.length; i < len; i++){
                 this.on(eventName[i], fn);
            }
            return this;
        }
        this.on(eventName, fn);
        return this;
    },

    parent : function(selector, returnDom){
        return this.matchNode('parentNode', 'parentNode', selector, returnDom);
    },

    next : function(selector, returnDom){
        return this.matchNode('nextSibling', 'nextSibling', selector, returnDom);
    },

    prev : function(selector, returnDom){
        return this.matchNode('previousSibling', 'previousSibling', selector, returnDom);
    },

    first : function(selector, returnDom){
        return this.matchNode('nextSibling', 'firstChild', selector, returnDom);
    },

    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 || Ext.DomQuery.is(n, selector))){
                return !returnDom ? Ext.get(n) : n;
            }
            n = n[dir];
        }
        return null;
    },

    appendChild: function(el){
        el = Ext.get(el);
        el.appendTo(this);
        return this;
    },

    createChild: function(config, insertBefore, returnDom){
        config = config || {tag:'div'};
        if(insertBefore){
            return Ext.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
        }
        return Ext.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);
    },

    appendTo: function(el){
        el = Ext.getDom(el);
        el.appendChild(this.dom);
        return this;
    },

    insertBefore: function(el){
        el = Ext.getDom(el);
        el.parentNode.insertBefore(this.dom, el);
        return this;
    },

    insertAfter: function(el){
        el = Ext.getDom(el);
        el.parentNode.insertBefore(this.dom, el.nextSibling);
        return this;
    },

    insertFirst: function(el, returnDom){
        el = el || {};
        if(typeof el == 'object' && !el.nodeType && !el.dom){             return this.createChild(el, this.dom.firstChild, returnDom);
        }else{
            el = Ext.getDom(el);
            this.dom.insertBefore(el, this.dom.firstChild);
            return !returnDom ? Ext.get(el) : el;
        }
    },

    insertSibling: function(el, where, returnDom){
        var rt;
        if(Ext.isArray(el)){
            for(var i = 0, len = el.length; i < len; i++){
                rt = this.insertSibling(el[i], where, returnDom);
            }
            return rt;
        }
        where = where ? where.toLowerCase() : 'before';
        el = el || {};
        var refNode = where == 'before' ? this.dom : this.dom.nextSibling;

        if(typeof el == 'object' && !el.nodeType && !el.dom){             if(where == 'after' && !this.dom.nextSibling){
                rt = Ext.DomHelper.append(this.dom.parentNode, el, !returnDom);
            }else{
                rt = Ext.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
            }

        }else{
            rt = this.dom.parentNode.insertBefore(Ext.getDom(el), refNode);
            if(!returnDom){
                rt = Ext.get(rt);
            }
        }
        return rt;
    },

    wrap: function(config, returnDom){
        if(!config){
            config = {tag: "div"};
        }
        var newEl = Ext.DomHelper.insertBefore(this.dom, config, !returnDom);
        newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
        return newEl;
    },

    replace: function(el){
        el = Ext.get(el);
        this.insertBefore(el);
        el.remove();
        return this;
    },

    replaceWith: function(el){
        if(typeof el == 'object' && !el.nodeType && !el.dom){             el = this.insertSibling(el, 'before');
        }else{
            el = Ext.getDom(el);
            this.dom.parentNode.insertBefore(el, this.dom);
        }
        El.uncache(this.id);
        this.dom.parentNode.removeChild(this.dom);
        this.dom = el;
        this.id = Ext.id(el);
        El.cache[this.id] = this;
        return this;
    },

    insertHtml : function(where, html, returnEl){
        var el = Ext.DomHelper.insertHtml(where, this.dom, html);
        return returnEl ? Ext.get(el) : el;
    },

    set : function(o, useSet){
        var el = this.dom;
        useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
        for(var attr in o){
            if(attr == "style" || typeof o[attr] == "function") continue;
            if(attr=="cls"){
                el.className = o["cls"];
            }else if(o.hasOwnProperty(attr)){
                if(useSet) el.setAttribute(attr, o[attr]);
                else el[attr] = o[attr];
            }
        }
        if(o.style){
            Ext.DomHelper.applyStyles(el, o.style);
        }
        return this;
    },

    addKeyListener : function(key, fn, scope){
        var config;
        if(typeof key != "object" || 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);
    },

    addKeyMap : function(config){
        return new Ext.KeyMap(this, config);
    },

     isScrollable : function(){
        var dom = this.dom;
        return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
    },

    scrollTo : function(side, value, animate){
        var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
        if(!animate || !A){
            this.dom[prop] = value;
        }else{
            var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
            this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
        }
        return this;
    },

     scroll : function(direction, distance, animate){
         if(!this.isScrollable()){
             return;
         }
         var el = this.dom;
         var l = el.scrollLeft, t = el.scrollTop;
         var w = el.scrollWidth, h = el.scrollHeight;
         var cw = el.clientWidth, ch = el.clientHeight;
         direction = direction.toLowerCase();
         var scrolled = false;
         var a = this.preanim(arguments, 2);
         switch(direction){
             case "l":
             case "left":
                 if(w - l > cw){
                     var v = Math.min(l + distance, w-cw);
                     this.scrollTo("left", v, a);
                     scrolled = true;
                 }
                 break;
            case "r":
            case "right":
                 if(l > 0){
                     var v = Math.max(l - distance, 0);
                     this.scrollTo("left", v, a);
                     scrolled = true;
                 }
                 break;
            case "t":
            case "top":
            case "up":
                 if(t > 0){
                     var v = Math.max(t - distance, 0);
                     this.scrollTo("top", v, a);
                     scrolled = true;
                 }
                 break;
            case "b":
            case "bottom":
            case "down":
                 if(h - t > ch){
                     var v = Math.min(t + distance, h-ch);
                     this.scrollTo("top", v, a);
                     scrolled = true;
                 }
                 break;
         }
         return scrolled;
    },

    translatePoints : function(x, y){
        if(typeof x == 'object' || Ext.isArray(x)){
            y = x[1]; x = x[0];
        }
        var p = this.getStyle('position');
        var o = this.getXY();

        var l = parseInt(this.getStyle('left'), 10);
        var t = parseInt(this.getStyle('top'), 10);

        if(isNaN(l)){
            l = (p == "relative") ? 0 : this.dom.offsetLeft;
        }
        if(isNaN(t)){
            t = (p == "relative") ? 0 : this.dom.offsetTop;
        }

        return {left: (x - o[0] + l), top: (y - o[1] + t)};
    },

    getScroll : function(){
        var d = this.dom, doc = document;
        if(d == doc || d == doc.body){
            var l, t;
            if(Ext.isIE && Ext.isStrict){
                l = doc.documentElement.scrollLeft || (doc.body.scrollLeft || 0);
                t = doc.documentElement.scrollTop || (doc.body.scrollTop || 0);
            }else{
                l = window.pageXOffset || (doc.body.scrollLeft || 0);
                t = window.pageYOffset || (doc.body.scrollTop || 0);
            }
            return {left: l, top: t};
        }else{
            return {left: d.scrollLeft, top: d.scrollTop};
        }
    },

    getColor : function(attr, defaultValue, prefix){
        var v = this.getStyle(attr);
        if(!v || v == "transparent" || v == "inherit") {
            return defaultValue;
        }
        var color = typeof prefix == "undefined" ? "#" : prefix;
        if(v.substr(0, 4) == "rgb("){
            var rvs = v.slice(4, v.length -1).split(",");
            for(var i = 0; i < 3; i++){
                var h = parseInt(rvs[i]);
                var s = h.toString(16);
                if(h < 16){
                    s = "0" + s;
                }
                color += s;
            }
        } else {
            if(v.substr(0, 1) == "#"){
                if(v.length == 4) {
                    for(var i = 1; i < 4; i++){
                        var c = v.charAt(i);
                        color +=  c + c;
                    }
                }else if(v.length == 7){
                    color += v.substr(1);
                }
            }
        }
        return(color.length > 5 ? color.toLowerCase() : defaultValue);
    },

    boxWrap : function(cls){
        cls = cls || 'x-box';
        var el = Ext.get(this.insertHtml('beforeBegin', String.format('
'+El.boxMarkup+'
', cls)));
        el.child('.'+cls+'-mc').dom.appendChild(this.dom);
        return el;
    },

    getAttributeNS : Ext.isIE ? function(ns, name){
        var d = this.dom;
        var type = typeof d[ns+":"+name];
        if(type != 'undefined' && type != 'unknown'){
            return d[ns+":"+name];
        }
        return d[name];
    } : function(ns, name){
        var d = this.dom;
        return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
    },

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

var ep = El.prototype;

ep.on = ep.addListener;
    ep.mon = ep.addListener;

ep.getUpdateManager = ep.getUpdater;

ep.un = ep.removeListener;

ep.autoBoxAdjust = true;

El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;

El.addUnits = function(v, defaultUnit){
    if(v === "" || v == "auto"){
        return v;
    }
    if(v === undefined){
        return '';
    }
    if(typeof v == "number" || !El.unitPattern.test(v)){
        return v + (defaultUnit || 'px');
    }
    return v;
};

El.boxMarkup = '
';

El.VISIBILITY = 1;

El.DISPLAY = 2;

El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};

El.cache = {};

var docEl;

El.get = function(el){
    var ex, elm, id;
    if(!el){ return null; }
    if(typeof el == "string"){         if(!(elm = document.getElementById(el))){
            return null;
        }
        if(ex = El.cache[el]){
            ex.dom = elm;
        }else{
            ex = El.cache[el] = new El(elm);
        }
        return ex;
    }else if(el.tagName){         if(!(id = el.id)){
            id = Ext.id(el);
        }
        if(ex = El.cache[id]){
            ex.dom = el;
        }else{
            ex = El.cache[id] = new El(el);
        }
        return ex;
    }else if(el instanceof El){
        if(el != docEl){
            el.dom = document.getElementById(el.id) || el.dom;                                                                       El.cache[el.id] = el;         }
        return el;
    }else if(el.isComposite){
        return el;
    }else if(Ext.isArray(el)){
        return El.select(el);
    }else if(el == document){
                if(!docEl){
            var f = function(){};
            f.prototype = El.prototype;
            docEl = new f();
            docEl.dom = document;
        }
        return docEl;
    }
    return null;
};

El.uncache = function(el){
    for(var i = 0, a = arguments, len = a.length; i < len; i++) {
        if(a[i]){
            delete El.cache[a[i].id || a[i]];
        }
    }
};

El.garbageCollect = function(){
    if(!Ext.enableGarbageCollector){
        clearInterval(El.collectorThread);
        return;
    }
    for(var eid in El.cache){
        var el = El.cache[eid], d = el.dom;
                                                                                if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
            delete El.cache[eid];
            if(d && Ext.enableListenerCollection){
                E.purgeElement(d);
            }
        }
    }
}
El.collectorThreadId = setInterval(El.garbageCollect, 30000);

var flyFn = function(){};
flyFn.prototype = El.prototype;
var _cls = new flyFn();

El.Flyweight = function(dom){
    this.dom = dom;
};

El.Flyweight.prototype = _cls;
El.Flyweight.prototype.isFlyweight = true;

El._flyweights = {};

El.fly = function(el, named){
    named = named || '_global';
    el = Ext.getDom(el);
    if(!el){
        return null;
    }
    if(!El._flyweights[named]){
        El._flyweights[named] = new El.Flyweight();
    }
    El._flyweights[named].dom = el;
    return El._flyweights[named];
};

Ext.get = El.get;

Ext.fly = El.fly;

var noBoxAdjust = Ext.isStrict ? {
    select:1
} : {
    input:1, select:1, textarea:1
};
if(Ext.isIE || Ext.isGecko){
    noBoxAdjust['button'] = 1;
}

Ext.EventManager.on(window, 'unload', function(){
    delete El.cache;
    delete El._flyweights;
});
})();

Ext.enableFx = true;

Ext.Fx = {

    slideIn : function(anchor, o){
        var el = this.getFxEl();
        o = o || {};

        el.queueFx(o, function(){

            anchor = anchor || "t";

                        this.fixDisplay();

                        var r = this.getFxRestore();
            var b = this.getBox();
                        this.setSize(b);

                        var wrap = this.fxWrap(r.pos, o, "hidden");

            var st = this.dom.style;
            st.visibility = "visible";
            st.position = "absolute";

                        var after = function(){
                el.fxUnwrap(wrap, r.pos, o);
                st.width = r.width;
                st.height = r.height;
                el.afterFx(o);
            };
                        var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};

            switch(anchor.toLowerCase()){
                case "t":
                    wrap.setSize(b.width, 0);
                    st.left = st.bottom = "0";
                    a = {height: bh};
                break;
                case "l":
                    wrap.setSize(0, b.height);
                    st.right = st.top = "0";
                    a = {width: bw};
                break;
                case "r":
                    wrap.setSize(0, b.height);
                    wrap.setX(b.right);
                    st.left = st.top = "0";
                    a = {width: bw, points: pt};
                break;
                case "b":
                    wrap.setSize(b.width, 0);
                    wrap.setY(b.bottom);
                    st.left = st.top = "0";
                    a = {height: bh, points: pt};
                break;
                case "tl":
                    wrap.setSize(0, 0);
                    st.right = st.bottom = "0";
                    a = {width: bw, height: bh};
                break;
                case "bl":
                    wrap.setSize(0, 0);
                    wrap.setY(b.y+b.height);
                    st.right = st.top = "0";
                    a = {width: bw, height: bh, points: pt};
                break;
                case "br":
                    wrap.setSize(0, 0);
                    wrap.setXY([b.right, b.bottom]);
                    st.left = st.top = "0";
                    a = {width: bw, height: bh, points: pt};
                break;
                case "tr":
                    wrap.setSize(0, 0);
                    wrap.setX(b.x+b.width);
                    st.left = st.bottom = "0";
                    a = {width: bw, height: bh, points: pt};
                break;
            }
            this.dom.style.visibility = "visible";
            wrap.show();

            arguments.callee.anim = wrap.fxanim(a,
                o,
                'motion',
                .5,
                'easeOut', after);
        });
        return this;
    },

    slideOut : function(anchor, o){
        var el = this.getFxEl();
        o = o || {};

        el.queueFx(o, function(){

            anchor = anchor || "t";

                        var r = this.getFxRestore();

            var b = this.getBox();
                        this.setSize(b);

                        var wrap = this.fxWrap(r.pos, o, "visible");

            var st = this.dom.style;
            st.visibility = "visible";
            st.position = "absolute";

            wrap.setSize(b);

            var after = function(){
                if(o.useDisplay){
                    el.setDisplayed(false);
                }else{
                    el.hide();
                }

                el.fxUnwrap(wrap, r.pos, o);

                st.width = r.width;
                st.height = r.height;

                el.afterFx(o);
            };

            var a, zero = {to: 0};
            switch(anchor.toLowerCase()){
                case "t":
                    st.left = st.bottom = "0";
                    a = {height: zero};
                break;
                case "l":
                    st.right = st.top = "0";
                    a = {width: zero};
                break;
                case "r":
                    st.left = st.top = "0";
                    a = {width: zero, points: {to:[b.right, b.y]}};
                break;
                case "b":
                    st.left = st.top = "0";
                    a = {height: zero, points: {to:[b.x, b.bottom]}};
                break;
                case "tl":
                    st.right = st.bottom = "0";
                    a = {width: zero, height: zero};
                break;
                case "bl":
                    st.right = st.top = "0";
                    a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
                break;
                case "br":
                    st.left = st.top = "0";
                    a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
                break;
                case "tr":
                    st.left = st.bottom = "0";
                    a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
                break;
            }

            arguments.callee.anim = wrap.fxanim(a,
                o,
                'motion',
                .5,
                "easeOut", after);
        });
        return this;
    },

    puff : function(o){
        var el = this.getFxEl();
        o = o || {};

        el.queueFx(o, function(){
            this.clearOpacity();
            this.show();

                        var r = this.getFxRestore();
            var st = this.dom.style;

            var after = function(){
                if(o.useDisplay){
                    el.setDisplayed(false);
                }else{
                    el.hide();
                }

                el.clearOpacity();

                el.setPositioning(r.pos);
                st.width = r.width;
                st.height = r.height;
                st.fontSize = '';
                el.afterFx(o);
            };

            var width = this.getWidth();
            var height = this.getHeight();

            arguments.callee.anim = this.fxanim({
                    width : {to: this.adjustWidth(width * 2)},
                    height : {to: this.adjustHeight(height * 2)},
                    points : {by: [-(width * .5), -(height * .5)]},
                    opacity : {to: 0},
                    fontSize: {to:200, unit: "%"}
                },
                o,
                'motion',
                .5,
                "easeOut", after);
        });
        return this;
    },

    switchOff : function(o){
        var el = this.getFxEl();
        o = o || {};

        el.queueFx(o, function(){
            this.clearOpacity();
            this.clip();

                        var r = this.getFxRestore();
            var st = this.dom.style;

            var after = function(){
                if(o.useDisplay){
                    el.setDisplayed(false);
                }else{
                    el.hide();
                }

                el.clearOpacity();
                el.setPositioning(r.pos);
                st.width = r.width;
                st.height = r.height;

                el.afterFx(o);
            };

            this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
                this.clearOpacity();
                (function(){
                    this.fxanim({
                        height:{to:1},
                        points:{by:[0, this.getHeight() * .5]}
                    }, o, 'motion', 0.3, 'easeIn', after);
                }).defer(100, this);
            });
        });
        return this;
    },

    highlight : function(color, o){
        var el = this.getFxEl();
        o = o || {};

        el.queueFx(o, function(){
            color = color || "ffff9c";
            var attr = o.attr || "backgroundColor";

            this.clearOpacity();
            this.show();

            var origColor = this.getColor(attr);
            var restoreColor = this.dom.style[attr];
            var endColor = (o.endColor || origColor) || "ffffff";

            var after = function(){
                el.dom.style[attr] = restoreColor;
                el.afterFx(o);
            };

            var a = {};
            a[attr] = {from: color, to: endColor};
            arguments.callee.anim = this.fxanim(a,
                o,
                'color',
                1,
                'easeIn', after);
        });
        return this;
    },

    frame : function(color, count, o){
        var el = this.getFxEl();
        o = o || {};

        el.queueFx(o, function(){
            color = color || "#C3DAF9";
            if(color.length == 6){
                color = "#" + color;
            }
            count = count || 1;
            var duration = o.duration || 1;
            this.show();

            var b = this.getBox();
            var animFn = function(){
                var proxy = Ext.getBody().createChild({
                     style:{
                        visbility:"hidden",
                        position:"absolute",
                        "z-index":"35000",                         border:"0px solid " + color
                     }
                  });
                var scale = Ext.isBorderBox ? 2 : 1;
                proxy.animate({
                    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, function(){
                    proxy.remove();
                    if(--count > 0){
                         animFn();
                    }else{
                        el.afterFx(o);
                    }
                });
            };
            animFn.call(this);
        });
        return this;
    },

    pause : function(seconds){
        var el = this.getFxEl();
        var o = {};

        el.queueFx(o, function(){
            setTimeout(function(){
                el.afterFx(o);
            }, seconds * 1000);
        });
        return this;
    },

    fadeIn : function(o){
        var el = this.getFxEl();
        o = o || {};
        el.queueFx(o, function(){
            this.setOpacity(0);
            this.fixDisplay();
            this.dom.style.visibility = 'visible';
            var to = o.endOpacity || 1;
            arguments.callee.anim = this.fxanim({opacity:{to:to}},
                o, null, .5, "easeOut", function(){
                if(to == 1){
                    this.clearOpacity();
                }
                el.afterFx(o);
            });
        });
        return this;
    },

    fadeOut : function(o){
        var el = this.getFxEl();
        o = o || {};
        el.queueFx(o, function(){
            arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}},
                o, null, .5, "easeOut", function(){
                if(this.visibilityMode == Ext.Element.DISPLAY || o.useDisplay){
                     this.dom.style.display = "none";
                }else{
                     this.dom.style.visibility = "hidden";
                }
                this.clearOpacity();
                el.afterFx(o);
            });
        });
        return this;
    },

    scale : function(w, h, o){
        this.shift(Ext.apply({}, o, {
            width: w,
            height: h
        }));
        return this;
    },

    shift : function(o){
        var el = this.getFxEl();
        o = o || {};
        el.queueFx(o, function(){
            var a = {}, w = o.width, h = o.height, x = o.x, y = o.y,  op = o.opacity;
            if(w !== undefined){
                a.width = {to: this.adjustWidth(w)};
            }
            if(h !== undefined){
                a.height = {to: this.adjustHeight(h)};
            }
            if(x !== undefined || y !== undefined){
                a.points = {to: [
                    x !== undefined ? x : this.getX(),
                    y !== undefined ? y : this.getY()
                ]};
            }
            if(op !== undefined){
                a.opacity = {to: op};
            }
            if(o.xy !== undefined){
                a.points = {to: o.xy};
            }
            arguments.callee.anim = this.fxanim(a,
                o, 'motion', .35, "easeOut", function(){
                el.afterFx(o);
            });
        });
        return this;
    },

    ghost : function(anchor, o){
        var el = this.getFxEl();
        o = o || {};

        el.queueFx(o, function(){
            anchor = anchor || "b";

                        var r = this.getFxRestore();
            var w = this.getWidth(),
                h = this.getHeight();

            var st = this.dom.style;

            var after = function(){
                if(o.useDisplay){
                    el.setDisplayed(false);
                }else{
                    el.hide();
                }

                el.clearOpacity();
                el.setPositioning(r.pos);
                st.width = r.width;
                st.height = r.height;

                el.afterFx(o);
            };

            var a = {opacity: {to: 0}, points: {}}, pt = a.points;
            switch(anchor.toLowerCase()){
                case "t":
                    pt.by = [0, -h];
                break;
                case "l":
                    pt.by = [-w, 0];
                break;
                case "r":
                    pt.by = [w, 0];
                break;
                case "b":
                    pt.by = [0, h];
                break;
                case "tl":
                    pt.by = [-w, -h];
                break;
                case "bl":
                    pt.by = [-w, h];
                break;
                case "br":
                    pt.by = [w, h];
                break;
                case "tr":
                    pt.by = [w, -h];
                break;
            }

            arguments.callee.anim = this.fxanim(a,
                o,
                'motion',
                .5,
                "easeOut", after);
        });
        return this;
    },

    syncFx : function(){
        this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
            block : false,
            concurrent : true,
            stopFx : false
        });
        return this;
    },

    sequenceFx : function(){
        this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
            block : false,
            concurrent : false,
            stopFx : false
        });
        return this;
    },

    nextFx : function(){
        var ef = this.fxQueue[0];
        if(ef){
            ef.call(this);
        }
    },

    hasActiveFx : function(){
        return this.fxQueue && this.fxQueue[0];
    },

    stopFx : function(){
        if(this.hasActiveFx()){
            var cur = this.fxQueue[0];
            if(cur && cur.anim && cur.anim.isAnimated()){
                this.fxQueue = [cur];                 cur.anim.stop(true);
            }
        }
        return this;
    },

    beforeFx : function(o){
        if(this.hasActiveFx() && !o.concurrent){
           if(o.stopFx){
               this.stopFx();
               return true;
           }
           return false;
        }
        return true;
    },

    hasFxBlock : function(){
        var q = this.fxQueue;
        return q && q[0] && q[0].block;
    },

    queueFx : function(o, fn){
        if(!this.fxQueue){
            this.fxQueue = [];
        }
        if(!this.hasFxBlock()){
            Ext.applyIf(o, this.fxDefaults);
            if(!o.concurrent){
                var run = this.beforeFx(o);
                fn.block = o.block;
                this.fxQueue.push(fn);
                if(run){
                    this.nextFx();
                }
            }else{
                fn.call(this);
            }
        }
        return this;
    },

    fxWrap : function(pos, o, vis){
        var wrap;
        if(!o.wrap || !(wrap = Ext.get(o.wrap))){
            var wrapXY;
            if(o.fixPosition){
                wrapXY = this.getXY();
            }
            var div = document.createElement("div");
            div.style.visibility = vis;
            wrap = Ext.get(this.dom.parentNode.insertBefore(div, this.dom));
            wrap.setPositioning(pos);
            if(wrap.getStyle("position") == "static"){
                wrap.position("relative");
            }
            this.clearPositioning('auto');
            wrap.clip();
            wrap.dom.appendChild(this.dom);
            if(wrapXY){
                wrap.setXY(wrapXY);
            }
        }
        return wrap;
    },

    fxUnwrap : function(wrap, pos, o){
        this.clearPositioning();
        this.setPositioning(pos);
        if(!o.wrap){
            wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
            wrap.remove();
        }
    },

    getFxRestore : function(){
        var st = this.dom.style;
        return {pos: this.getPositioning(), width: st.width, height : st.height};
    },

    afterFx : function(o){
        if(o.afterStyle){
            this.applyStyles(o.afterStyle);
        }
        if(o.afterCls){
            this.addClass(o.afterCls);
        }
        if(o.remove === true){
            this.remove();
        }
        Ext.callback(o.callback, o.scope, [this]);
        if(!o.concurrent){
            this.fxQueue.shift();
            this.nextFx();
        }
    },

    getFxEl : function(){         return Ext.get(this.dom);
    },

    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',
            function(){
                Ext.callback(cb, this);
            },
            this
        );
        opt.anim = anim;
        return anim;
    }
};

Ext.Fx.resize = Ext.Fx.scale;

Ext.apply(Ext.Element.prototype, Ext.Fx);

Ext.CompositeElement = function(els){
    this.elements = [];
    this.addElements(els);
};
Ext.CompositeElement.prototype = {
    isComposite: true,
    addElements : function(els){
        if(!els) return this;
        if(typeof els == "string"){
            els = Ext.Element.selectorFunction(els);
        }
        var yels = this.elements;
        var index = yels.length-1;
        for(var i = 0, len = els.length; i < len; i++) {
            yels[++index] = Ext.get(els[i]);
        }
        return this;
    },

    fill : function(els){
        this.elements = [];
        this.add(els);
        return this;
    },

    filter : function(selector){
        var els = [];
        this.each(function(el){
            if(el.is(selector)){
                els[els.length] = el.dom;
            }
        });
        this.fill(els);
        return this;
    },

    invoke : function(fn, args){
        var els = this.elements;
        for(var i = 0, len = els.length; i < len; i++) {
            Ext.Element.prototype[fn].apply(els[i], args);
        }
        return this;
    },

    add : function(els){
        if(typeof els == "string"){
            this.addElements(Ext.Element.selectorFunction(els));
        }else if(els.length !== undefined){
            this.addElements(els);
        }else{
            this.addElements([els]);
        }
        return this;
    },

    each : function(fn, scope){
        var els = this.elements;
        for(var i = 0, len = els.length; i < len; i++){
            if(fn.call(scope || els[i], els[i], this, i) === false) {
                break;
            }
        }
        return this;
    },

    item : function(index){
        return this.elements[index] || null;
    },

    first : function(){
        return this.item(0);
    },

    last : function(){
        return this.item(this.elements.length-1);
    },

    getCount : function(){
        return this.elements.length;
    },

    contains : function(el){
        return this.indexOf(el) !== -1;
    },

    indexOf : function(el){
        return this.elements.indexOf(Ext.get(el));
    },

    removeElement : function(el, removeDom){
        if(Ext.isArray(el)){
            for(var i = 0, len = el.length; i < len; i++){
                this.removeElement(el[i]);
            }
            return this;
        }
        var index = typeof el == 'number' ? el : this.indexOf(el);
        if(index !== -1 && this.elements[index]){
            if(removeDom){
                var d = this.elements[index];
                if(d.dom){
                    d.remove();
                }else{
                    Ext.removeNode(d);
                }
            }
            this.elements.splice(index, 1);
        }
        return this;
    },

    replaceElement : function(el, replacement, domReplace){
        var index = typeof el == 'number' ? el : this.indexOf(el);
        if(index !== -1){
            if(domReplace){
                this.elements[index].replaceWith(replacement);
            }else{
                this.elements.splice(index, 1, Ext.get(replacement))
            }
        }
        return this;
    },

    clear : function(){
        this.elements = [];
    }
};
(function(){
Ext.CompositeElement.createCall = function(proto, fnName){
    if(!proto[fnName]){
        proto[fnName] = function(){
            return this.invoke(fnName, arguments);
        };
    }
};
for(var fnName in Ext.Element.prototype){
    if(typeof Ext.Element.prototype[fnName] == "function"){
        Ext.CompositeElement.createCall(Ext.CompositeElement.prototype, fnName);
    }
};
})();

Ext.CompositeElementLite = function(els){
    Ext.CompositeElementLite.superclass.constructor.call(this, els);
    this.el = new Ext.Element.Flyweight();
};
Ext.extend(Ext.CompositeElementLite, Ext.CompositeElement, {
    addElements : function(els){
        if(els){
            if(Ext.isArray(els)){
                this.elements = this.elements.concat(els);
            }else{
                var yels = this.elements;
                var index = yels.length-1;
                for(var i = 0, len = els.length; i < len; i++) {
                    yels[++index] = els[i];
                }
            }
        }
        return this;
    },
    invoke : function(fn, args){
        var els = this.elements;
        var el = this.el;
        for(var i = 0, len = els.length; i < len; i++) {
            el.dom = els[i];
            Ext.Element.prototype[fn].apply(el, args);
        }
        return this;
    },

    item : function(index){
        if(!this.elements[index]){
            return null;
        }
        this.el.dom = this.elements[index];
        return this.el;
    },

    addListener : function(eventName, handler, scope, opt){
        var els = this.elements;
        for(var i = 0, len = els.length; i < len; i++) {
            Ext.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
        }
        return this;
    },

    each : function(fn, scope){
        var els = this.elements;
        var el = this.el;
        for(var i = 0, len = els.length; i < len; i++){
            el.dom = els[i];
            if(fn.call(scope || el, el, this, i) === false){
                break;
            }
        }
        return this;
    },

    indexOf : function(el){
        return this.elements.indexOf(Ext.getDom(el));
    },

    replaceElement : function(el, replacement, domReplace){
        var index = typeof el == 'number' ? el : this.indexOf(el);
        if(index !== -1){
            replacement = Ext.getDom(replacement);
            if(domReplace){
                var d = this.elements[index];
                d.parentNode.insertBefore(replacement, d);
                Ext.removeNode(d);
            }
            this.elements.splice(index, 1, replacement);
        }
        return this;
    }
});
Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
if(Ext.DomQuery){
    Ext.Element.selectorFunction = Ext.DomQuery.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";
    }
    if(unique === true){
        return new Ext.CompositeElement(els);
    }else{
        return new Ext.CompositeElementLite(els);
    }
};

Ext.select = Ext.Element.select;

Ext.data.Connection = function(config){
    Ext.apply(this, config);
    this.addEvents(

        "beforerequest",

        "requestcomplete",

        "requestexception"
    );
    Ext.data.Connection.superclass.constructor.call(this);
};

Ext.extend(Ext.data.Connection, Ext.util.Observable, {

    timeout : 30000,

    autoAbort:false,

    disableCaching: true,

    request : function(o){
        if(this.fireEvent("beforerequest", this, o) !== false){
            var p = o.params;

            if(typeof p == "function"){
                p = p.call(o.scope||window, o);
            }
            if(typeof p == "object"){
                p = Ext.urlEncode(p);
            }
            if(this.extraParams){
                var extras = Ext.urlEncode(this.extraParams);
                p = p ? (p + '&' + extras) : extras;
            }

            var url = o.url || this.url;
            if(typeof url == 'function'){
                url = url.call(o.scope||window, o);
            }

            if(o.form){
                var form = Ext.getDom(o.form);
                url = url || form.action;

                var enctype = form.getAttribute("enctype");
                if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
                    return this.doFormUpload(o, p, url);
                }
                var f = Ext.lib.Ajax.serializeForm(form);
                p = p ? (p + '&' + f) : f;
            }

            var hs = o.headers;
            if(this.defaultHeaders){
                hs = Ext.apply(hs || {}, this.defaultHeaders);
                if(!o.headers){
                    o.headers = hs;
                }
            }

            var cb = {
                success: this.handleResponse,
                failure: this.handleFailure,
                scope: this,
                argument: {options: o},
                timeout : o.timeout || this.timeout
            };

            var method = o.method||this.method||(p ? "POST" : "GET");

            if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
                url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
            }

            if(typeof o.autoAbort == 'boolean'){
                if(o.autoAbort){
                    this.abort();
                }
            }else if(this.autoAbort !== false){
                this.abort();
            }
            if((method == 'GET' && p) || o.xmlData || o.jsonData){
                url += (url.indexOf('?') != -1 ? '&' : '?') + p;
                p = '';
            }
            this.transId = Ext.lib.Ajax.request(method, url, cb, p, o);
            return this.transId;
        }else{
            Ext.callback(o.callback, o.scope, [o, null, null]);
            return null;
        }
    },

    isLoading : function(transId){
        if(transId){
            return Ext.lib.Ajax.isCallInProgress(transId);
        }else{
            return this.transId ? true : false;
        }
    },

    abort : function(transId){
        if(transId || this.isLoading()){
            Ext.lib.Ajax.abort(transId || this.transId);
        }
    },

    handleResponse : function(response){
        this.transId = false;
        var options = response.argument.options;
        response.argument = options ? options.argument : null;
        this.fireEvent("requestcomplete", this, response, options);
        Ext.callback(options.success, options.scope, [response, options]);
        Ext.callback(options.callback, options.scope, [options, true, response]);
    },

    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);
        Ext.callback(options.failure, options.scope, [response, options]);
        Ext.callback(options.callback, options.scope, [options, false, response]);
    },

    doFormUpload : function(o, ps, url){
        var id = Ext.id();
        var frame = document.createElement('iframe');
        frame.id = id;
        frame.name = id;
        frame.className = 'x-hidden';
        if(Ext.isIE){
            frame.src = Ext.SSL_SECURE_URL;
        }
        document.body.appendChild(frame);

        if(Ext.isIE){
           document.frames[id].name = id;
        }

        var form = Ext.getDom(o.form);
        form.target = id;
        form.method = 'POST';
        form.enctype = form.encoding = 'multipart/form-data';
        if(url){
            form.action = url;
        }

        var hiddens, hd;
        if(ps){
            hiddens = [];
            ps = Ext.urlDecode(ps, false);
            for(var k in ps){
                if(ps.hasOwnProperty(k)){
                    hd = document.createElement('input');
                    hd.type = 'hidden';
                    hd.name = k;
                    hd.value = ps[k];
                    form.appendChild(hd);
                    hiddens.push(hd);
                }
            }
        }

        function cb(){
            var r = {
                responseText : '',
                responseXML : null
            };

            r.argument = o ? o.argument : null;

            try {
                var doc;
                if(Ext.isIE){
                    doc = frame.contentWindow.document;
                }else {
                    doc = (frame.contentDocument || window.frames[id].document);
                }
                if(doc && doc.body){
                    r.responseText = doc.body.innerHTML;
                }
                if(doc && doc.XMLDocument){
                    r.responseXML = doc.XMLDocument;
                }else {
                    r.responseXML = doc;
                }
            }
            catch(e) {

            }

            Ext.EventManager.removeListener(frame, 'load', cb, this);

            this.fireEvent("requestcomplete", this, r, o);

            Ext.callback(o.success, o.scope, [r, o]);
            Ext.callback(o.callback, o.scope, [o, true, r]);

            setTimeout(function(){Ext.removeNode(frame);}, 100);
        }

        Ext.EventManager.on(frame, 'load', cb, this);
        form.submit();

        if(hiddens){
            for(var i = 0, len = hiddens.length; i < len; i++){
                Ext.removeNode(hiddens[i]);
            }
        }
    }
});

Ext.Ajax = new Ext.data.Connection({

    autoAbort : false,

    serializeForm : function(form){
        return Ext.lib.Ajax.serializeForm(form);
    }
});

Ext.Updater = function(el, forceNew){
    el = Ext.get(el);
    if(!forceNew && el.updateManager){
        return el.updateManager;
    }

    this.el = el;

    this.defaultUrl = null;

    this.addEvents(

        "beforeupdate",

        "update",

        "failure"
    );
    var d = Ext.Updater.defaults;

    this.sslBlankUrl = d.sslBlankUrl;

    this.disableCaching = d.disableCaching;

    this.indicatorText = d.indicatorText;

    this.showLoadIndicator = d.showLoadIndicator;

    this.timeout = d.timeout;

    this.loadScripts = d.loadScripts;

    this.transaction = null;

    this.autoRefreshProcId = null;

    this.refreshDelegate = this.refresh.createDelegate(this);

    this.updateDelegate = this.update.createDelegate(this);

    this.formUpdateDelegate = this.formUpdate.createDelegate(this);

    if(!this.renderer){

    this.renderer = new Ext.Updater.BasicRenderer();
    }
    Ext.Updater.superclass.constructor.call(this);
};

Ext.extend(Ext.Updater, Ext.util.Observable, {

    getEl : function(){
        return this.el;
    },

    update : function(url, params, callback, discardUrl){
        if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
            var method = this.method, cfg, callerScope;
            if(typeof url == "object"){
                cfg = url;
                url = cfg.url;
                params = params || cfg.params;
                callback = callback || cfg.callback;
                discardUrl = discardUrl || cfg.discardUrl;
                callerScope = cfg.scope;
                if(typeof cfg.method != "undefined"){method = cfg.method;};
                if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
                if(typeof cfg.text != "undefined"){this.indicatorText = '
'+cfg.text+"
";};
                if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
                if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
            }
            this.showLoading();
            if(!discardUrl){
                this.defaultUrl = url;
            }
            if(typeof url == "function"){
                url = url.call(this);
            }

            method = method || (params ? "POST" : "GET");
            if(method == "GET"){
                url = this.prepareUrl(url);
            }

            var o = Ext.apply(cfg ||{}, {
                url : url,
                params: (typeof params == "function" && callerScope) ? params.createDelegate(callerScope) : params,
                success: this.processSuccess,
                failure: this.processFailure,
                scope: this,
                callback: undefined,
                timeout: (this.timeout*1000),
                argument: {
                    "options": cfg,
                    "url": url,
                    "form": null,
                    "callback": callback,
                    "scope": callerScope || window,
                    "params": params
                }
            });

            this.transaction = Ext.Ajax.request(o);
        }
    },

    formUpdate : function(form, url, reset, callback){
        if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
            if(typeof url == "function"){
                url = url.call(this);
            }
            form = Ext.getDom(form)
            this.transaction = Ext.Ajax.request({
                form: form,
                url:url,
                success: this.processSuccess,
                failure: this.processFailure,
                scope: this,
                timeout: (this.timeout*1000),
                argument: {
                    "url": url,
                    "form": form,
                    "callback": callback,
                    "reset": reset
                }
            });
            this.showLoading.defer(1, this);
        }
    },

    refresh : function(callback){
        if(this.defaultUrl == null){
            return;
        }
        this.update(this.defaultUrl, null, callback, true);
    },

    startAutoRefresh : function(interval, url, params, callback, refreshNow){
        if(refreshNow){
            this.update(url || this.defaultUrl, params, callback, true);
        }
        if(this.autoRefreshProcId){
            clearInterval(this.autoRefreshProcId);
        }
        this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
    },

     stopAutoRefresh : function(){
        if(this.autoRefreshProcId){
            clearInterval(this.autoRefreshProcId);
            delete this.autoRefreshProcId;
        }
    },

    isAutoRefreshing : function(){
       return this.autoRefreshProcId ? true : false;
    },

    showLoading : function(){
        if(this.showLoadIndicator){
            this.el.update(this.indicatorText);
        }
    },

    prepareUrl : function(url){
        if(this.disableCaching){
            var append = "_dc=" + (new Date().getTime());
            if(url.indexOf("?") !== -1){
                url += "&" + append;
            }else{
                url += "?" + append;
            }
        }
        return url;
    },

    processSuccess : function(response){
        this.transaction = null;
        if(response.argument.form && response.argument.reset){
            try{
                response.argument.form.reset();
            }catch(e){}
        }
        if(this.loadScripts){
            this.renderer.render(this.el, response, this,
                this.updateComplete.createDelegate(this, [response]));
        }else{
            this.renderer.render(this.el, response, this);
            this.updateComplete(response);
        }
    },

    updateComplete : function(response){
        this.fireEvent("update", this.el, response);
        if(typeof response.argument.callback == "function"){
            response.argument.callback.call(response.argument.scope, this.el, true, response, response.argument.options);
        }
    },

    processFailure : function(response){
        this.transaction = null;
        this.fireEvent("failure", this.el, response);
        if(typeof response.argument.callback == "function"){
            response.argument.callback.call(response.argument.scope, this.el, false, response, response.argument.options);
        }
    },

    setRenderer : function(renderer){
        this.renderer = renderer;
    },

    getRenderer : function(){
       return this.renderer;
    },

    setDefaultUrl : function(defaultUrl){
        this.defaultUrl = defaultUrl;
    },

    abort : function(){
        if(this.transaction){
            Ext.Ajax.abort(this.transaction);
        }
    },

    isUpdating : function(){
        if(this.transaction){
            return Ext.Ajax.isLoading(this.transaction);
        }
        return false;
    }
});

   Ext.Updater.defaults = {

         timeout : 30,

        loadScripts : false,

        sslBlankUrl : (Ext.SSL_SECURE_URL || "javascript:false"),

        disableCaching : false,

        showLoadIndicator : true,

        indicatorText : '
Loading...
'
   };

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

Ext.Updater.update = Ext.Updater.updateElement;

Ext.Updater.BasicRenderer = function(){};

Ext.Updater.BasicRenderer.prototype = {

     render : function(el, response, updateManager, callback){
        el.update(response.responseText, updateManager.loadScripts, callback);
    }
};

Ext.UpdateManager = Ext.Updater;

Date.parseFunctions = {count:0};
Date.parseRegexes = [];
Date.formatFunctions = {count:0};

Date.prototype.dateFormat = function(format) {
    if (Date.formatFunctions[format] == null) {
        Date.createNewFormat(format);
    }
    var func = Date.formatFunctions[format];
    return this[func]();
};

Date.prototype.format = Date.prototype.dateFormat;

Date.createNewFormat = function(format) {
    var funcName = "format" + Date.formatFunctions.count++;
    Date.formatFunctions[format] = funcName;
    var code = "Date.prototype." + funcName + " = function(){return ";
    var special = false;
    var ch = '';
    for (var i = 0; i < format.length; ++i) {
        ch = format.charAt(i);
        if (!special && ch == "\\") {
            special = true;
        }
        else if (special) {
            special = false;
            code += "'" + String.escape(ch) + "' + ";
        }
        else {
            code += Date.getFormatCode(ch);
        }
    }
    eval(code.substring(0, code.length - 3) + ";}");
};

Date.getFormatCode = function(character) {
    switch (character) {
    case "d":
        return "String.leftPad(this.getDate(), 2, '0') + ";
    case "D":
        return "Date.getShortDayName(this.getDay()) + ";     case "j":
        return "this.getDate() + ";
    case "l":
        return "Date.dayNames[this.getDay()] + ";
    case "N":
        return "(this.getDay() ? this.getDay() : 7) + ";
    case "S":
        return "this.getSuffix() + ";
    case "w":
        return "this.getDay() + ";
    case "z":
        return "this.getDayOfYear() + ";
    case "W":
        return "String.leftPad(this.getWeekOfYear(), 2, '0') + ";
    case "F":
        return "Date.monthNames[this.getMonth()] + ";
    case "m":
        return "String.leftPad(this.getMonth() + 1, 2, '0') + ";
    case "M":
        return "Date.getShortMonthName(this.getMonth()) + ";     case "n":
        return "(this.getMonth() + 1) + ";
    case "t":
        return "this.getDaysInMonth() + ";
    case "L":
        return "(this.isLeapYear() ? 1 : 0) + ";
    case "o":
        return "(this.getFullYear() + (this.getWeekOfYear() == 1 && this.getMonth() > 0 ? +1 : (this.getWeekOfYear() >= 52 && this.getMonth() < 11 ? -1 : 0))) + ";
    case "Y":
        return "this.getFullYear() + ";
    case "y":
        return "('' + this.getFullYear()).substring(2, 4) + ";
    case "a":
        return "(this.getHours() < 12 ? 'am' : 'pm') + ";
    case "A":
        return "(this.getHours() < 12 ? 'AM' : 'PM') + ";
    case "g":
        return "((this.getHours() % 12) ? this.getHours() % 12 : 12) + ";
    case "G":
        return "this.getHours() + ";
    case "h":
        return "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + ";
    case "H":
        return "String.leftPad(this.getHours(), 2, '0') + ";
    case "i":
        return "String.leftPad(this.getMinutes(), 2, '0') + ";
    case "s":
        return "String.leftPad(this.getSeconds(), 2, '0') + ";
    case "u":
        return "String.leftPad(this.getMilliseconds(), 3, '0') + ";
    case "O":
        return "this.getGMTOffset() + ";
    case "P":
        return "this.getGMTOffset(true) + ";
    case "T":
        return "this.getTimezone() + ";
    case "Z":
        return "(this.getTimezoneOffset() * -60) + ";
    case "c":
        for (var df = Date.getFormatCode, c = "Y-m-dTH:i:sP", code = "", i = 0, l = c.length; i < l; ++i) {
          var e = c.charAt(i);
          code += e == "T" ? "'T' + " : df(e);         }
        return code;
    case "U":
        return "Math.round(this.getTime() / 1000) + ";
    default:
        return "'" + String.escape(character) + "' + ";
    }
};

Date.parseDate = function(input, format) {
    if (Date.parseFunctions[format] == null) {
        Date.createParser(format);
    }
    var func = Date.parseFunctions[format];
    return Date[func](input);
};

Date.createParser = function(format) {
    var funcName = "parse" + Date.parseFunctions.count++;
    var regexNum = Date.parseRegexes.length;
    var currentGroup = 1;
    Date.parseFunctions[format] = funcName;

    var code = "Date." + funcName + " = function(input){\n"
        + "var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, ms = -1, o, z, u, v;\n"
        + "input = String(input);var d = new Date();\n"
        + "y = d.getFullYear();\n"
        + "m = d.getMonth();\n"
        + "d = d.getDate();\n"
        + "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
        + "if (results && results.length > 0) {";
    var regex = "";

    var special = false;
    var ch = '';
    for (var i = 0; i < format.length; ++i) {
        ch = format.charAt(i);
        if (!special && ch == "\\") {
            special = true;
        }
        else if (special) {
            special = false;
            regex += String.escape(ch);
        }
        else {
            var obj = Date.formatCodeToRegex(ch, currentGroup);
            currentGroup += obj.g;
            regex += obj.s;
            if (obj.g && obj.c) {
                code += obj.c;
            }
        }
    }

    code += "if (u)\n"
        + "{v = new Date(u * 1000);}"         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0 && ms >= 0)\n"
        + "{v = new Date(y, m, d, h, i, s, ms);}\n"
        + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
        + "{v = new Date(y, m, d, h, i, s);}\n"
        + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
        + "{v = new Date(y, m, d, h, i);}\n"
        + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
        + "{v = new Date(y, m, d, h);}\n"
        + "else if (y >= 0 && m >= 0 && d > 0)\n"
        + "{v = new Date(y, m, d);}\n"
        + "else if (y >= 0 && m >= 0)\n"
        + "{v = new Date(y, m);}\n"
        + "else if (y >= 0)\n"
        + "{v = new Date(y);}\n"
        + "}return (v && (z || o))?\n"         + "    (z ? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n"         + "        v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n"         + ";}";

    Date.parseRegexes[regexNum] = new RegExp("^" + regex + "$", "i");
    eval(code);
};

Date.formatCodeToRegex = function(character, currentGroup) {

    switch (character) {
    case "d":
        return {g:1,
            c:"d = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{2})"};     case "D":
        for (var a = [], i = 0; i < 7; a.push(Date.getShortDayName(i)), ++i);         return {g:0,
            c:null,
            s:"(?:" + a.join("|") +")"};
    case "j":
        return {g:1,
            c:"d = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{1,2})"};     case "l":
        return {g:0,
            c:null,
            s:"(?:" + Date.dayNames.join("|") + ")"};
    case "N":
        return {g:0,
            c:null,
            s:"[1-7]"};     case "S":
        return {g:0,
            c:null,
            s:"(?:st|nd|rd|th)"};
    case "w":
        return {g:0,
            c:null,
            s:"[0-6]"};     case "z":
        return {g:0,
            c:null,
            s:"(?:\\d{1,3}"};     case "W":
        return {g:0,
            c:null,
            s:"(?:\\d{2})"};     case "F":
        return {g:1,
            c:"m = parseInt(Date.getMonthNumber(results[" + currentGroup + "]), 10);\n",             s:"(" + Date.monthNames.join("|") + ")"};
    case "m":
        return {g:1,
            c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
            s:"(\\d{2})"};     case "M":
        for (var a = [], i = 0; i < 12; a.push(Date.getShortMonthName(i)), ++i);         return {g:1,
            c:"m = parseInt(Date.getMonthNumber(results[" + currentGroup + "]), 10);\n",             s:"(" + a.join("|") + ")"};
    case "n":
        return {g:1,
            c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
            s:"(\\d{1,2})"};     case "t":
        return {g:0,
            c:null,
            s:"(?:\\d{2})"};     case "L":
        return {g:0,
            c:null,
            s:"(?:1|0)"};
    case "o":
    case "Y":
        return {g:1,
            c:"y = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{4})"};     case "y":
        return {g:1,
            c:"var ty = parseInt(results[" + currentGroup + "], 10);\n"
                + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n",
            s:"(\\d{1,2})"};     case "a":
        return {g:1,
            c:"if (results[" + currentGroup + "] == 'am') {\n"
                + "if (h == 12) { h = 0; }\n"
                + "} else { if (h < 12) { h += 12; }}",
            s:"(am|pm)"};
    case "A":
        return {g:1,
            c:"if (results[" + currentGroup + "] == 'AM') {\n"
                + "if (h == 12) { h = 0; }\n"
                + "} else { if (h < 12) { h += 12; }}",
            s:"(AM|PM)"};
    case "g":
    case "G":
        return {g:1,
            c:"h = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{1,2})"};     case "h":
    case "H":
        return {g:1,
            c:"h = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{2})"};     case "i":
        return {g:1,
            c:"i = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{2})"};     case "s":
        return {g:1,
            c:"s = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{2})"};     case "u":
        return {g:1,
            c:"ms = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(\\d{3})"};     case "O":
        return {g:1,
            c:[
                "o = results[", currentGroup, "];\n",
                "var sn = o.substring(0,1);\n",                 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n",                 "var mn = o.substring(3,5) % 60;\n",                 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",                 "    (sn + String.leftPad(hr, 2, '0') + String.leftPad(mn, 2, '0')) : null;\n"
            ].join(""),
            s: "([+\-]\\d{4})"};     case "P":
        return {g:1,
            c:[
                "o = results[", currentGroup, "];\n",
                "var sn = o.substring(0,1);\n",                 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",                 "var mn = o.substring(4,6) % 60;\n",                 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",                 "    (sn + String.leftPad(hr, 2, '0') + String.leftPad(mn, 2, '0')) : null;\n"
            ].join(""),
            s: "([+\-]\\d{2}:\\d{2})"};     case "T":
        return {g:0,
            c:null,
            s:"[A-Z]{1,4}"};     case "Z":
        return {g:1,
            c:"z = results[" + currentGroup + "] * 1;\n"                   + "z = (-43200 <= z && z <= 50400)? z : null;\n",
            s:"([+\-]?\\d{1,5})"};     case "c":
        var df = Date.formatCodeToRegex, calc = [];
        var arr = [df("Y", 1), df("m", 2), df("d", 3), df("h", 4), df("i", 5), df("s", 6), df("P", 7)];
        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 + "-" + arr[1].s + "-" + arr[2].s + "T" + arr[3].s + ":" + arr[4].s + ":" + arr[5].s + arr[6].s};
    case "U":
        return {g:1,
            c:"u = parseInt(results[" + currentGroup + "], 10);\n",
            s:"(-?\\d+)"};     default:
        return {g:0,
            c:null,
            s:Ext.escapeRe(character)};
    }
};

Date.prototype.getTimezone = function() {
                                                    return this.toString().replace(/^.* (?:\((.*)\)|([A-Z]{1,4})(?:[\-+][0-9]{4})?(?: -?\d+)?)$/, "$1$2").replace(/[^A-Z]/g, "");
};

Date.prototype.getGMTOffset = function(colon) {
    return (this.getTimezoneOffset() > 0 ? "-" : "+")
        + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
        + (colon ? ":" : "")
        + String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
};

Date.prototype.getDayOfYear = function() {
    var num = 0;
    Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
    for (var i = 0; i < this.getMonth(); ++i) {
        num += Date.daysInMonth[i];
    }
    return num + this.getDate() - 1;
};

Date.prototype.getWeekOfYear = function() {
        var ms1d = 864e5;     var ms7d = 7 * ms1d;     var DC3 = Date.UTC(this.getFullYear(), this.getMonth(), this.getDate() + 3) / ms1d;     var AWN = Math.floor(DC3 / 7);     var Wyr = new Date(AWN * ms7d).getUTCFullYear();
    return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
};

Date.prototype.isLeapYear = function() {
    var year = this.getFullYear();
    return !!((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
};

Date.prototype.getFirstDayOfMonth = function() {
    var day = (this.getDay() - (this.getDate() - 1)) % 7;
    return (day < 0) ? (day + 7) : day;
};

Date.prototype.getLastDayOfMonth = function() {
    var day = (this.getDay() + (Date.daysInMonth[this.getMonth()] - this.getDate())) % 7;
    return (day < 0) ? (day + 7) : day;
};

Date.prototype.getFirstDateOfMonth = function() {
    return new Date(this.getFullYear(), this.getMonth(), 1);
};

Date.prototype.getLastDateOfMonth = function() {
    return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
};

Date.prototype.getDaysInMonth = function() {
    Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
    return Date.daysInMonth[this.getMonth()];
};

Date.prototype.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";
    }
};

Date.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];

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.dayNames =
   ["Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"];

Date.getShortDayName = function(day) {
    return Date.dayNames[day].substring(0, 3);
}

Date.y2kYear = 50;

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.prototype.clone = function() {
  return new Date(this.getTime());
};

Date.prototype.clearTime = function(clone){
    if(clone){
        return this.clone().clearTime();
    }
    this.setHours(0);
    this.setMinutes(0);
    this.setSeconds(0);
    this.setMilliseconds(0);
    return this;
};

if(Ext.isSafari){
    Date.brokenSetMonth = Date.prototype.setMonth;
  Date.prototype.setMonth = function(num){
    if(num <= -1){
      var n = Math.ceil(-num);
      var back_year = Math.ceil(n/12);
      var month = (n % 12) ? 12 - n % 12 : 0 ;
      this.setFullYear(this.getFullYear() - back_year);
      return Date.brokenSetMonth.call(this, month);
    } else {
      return Date.brokenSetMonth.apply(this, arguments);
    }
  };
}

Date.MILLI = "ms";

Date.SECOND = "s";

Date.MINUTE = "mi";

Date.HOUR = "h";

Date.DAY = "d";

Date.MONTH = "mo";

Date.YEAR = "y";

Date.prototype.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;
};

Date.prototype.between = function(start, end){
    var t = this.getTime();
    return start.getTime() <= t && t <= end.getTime();
}

Ext.util.DelayedTask = function(fn, scope, args){
    var id = null, d, t;

    var call = function(){
        var now = new Date().getTime();
        if(now - t >= d){
            clearInterval(id);
            id = null;
            fn.apply(scope, args || []);
        }
    };

    this.delay = function(delay, newFn, newScope, newArgs){
        if(id && delay != d){
            this.cancel();
        }
        d = delay;
        t = new Date().getTime();
        fn = newFn || fn;
        scope = newScope || scope;
        args = newArgs || args;
        if(!id){
            id = setInterval(call, d);
        }
    };

    this.cancel = function(){
        if(id){
            clearInterval(id);
            id = null;
        }
    };
};

Ext.util.TaskRunner = function(interval){
    interval = interval || 10;
    var tasks = [], removeQueue = [];
    var id = 0;
    var running = false;

        var stopThread = function(){
        running = false;
        clearInterval(id);
        id = 0;
    };

        var startThread = function(){
        if(!running){
            running = true;
            id = setInterval(runTasks, interval);
        }
    };

        var removeTask = function(t){
        removeQueue.push(t);
        if(t.onStop){
            t.onStop.apply(t.scope || t);
        }
    };

        var runTasks = function(){
        if(removeQueue.length > 0){
            for(var i = 0, len = removeQueue.length; i < len; i++){
                tasks.remove(removeQueue[i]);
            }
            removeQueue = [];
            if(tasks.length < 1){
                stopThread();
                return;
            }
        }
        var now = new Date().getTime();
        for(var i = 0, len = tasks.length; i < len; ++i){
            var t = tasks[i];
            var itime = now - t.taskRunTime;
            if(t.interval <= itime){
                var 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);
            }
        }
    };

    this.start = function(task){
        tasks.push(task);
        task.taskStartTime = new Date().getTime();
        task.taskRunTime = 0;
        task.taskRunCount = 0;
        startThread();
        return task;
    };

    this.stop = function(task){
        removeTask(task);
        return task;
    };

    this.stopAll = function(){
        stopThread();
        for(var i = 0, len = tasks.length; i < len; i++){
            if(tasks[i].onStop){
                tasks[i].onStop();
            }
        }
        tasks = [];
        removeQueue = [];
    };
};

Ext.TaskMgr = new Ext.util.TaskRunner();

Ext.util.MixedCollection = function(allowFunctions, keyFn){
    this.items = [];
    this.map = {};
    this.keys = [];
    this.length = 0;
    this.addEvents(

        "clear",

        "add",

        "replace",

        "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, {
    allowFunctions : false,

    add : function(key, o){
        if(arguments.length == 1){
            o = arguments[0];
            key = this.getKey(o);
        }
        if(typeof key == "undefined" || key === null){
            this.length++;
            this.items.push(o);
            this.keys.push(null);
        }else{
            var old = this.map[key];
            if(old){
                return this.replace(key, o);
            }
            this.length++;
            this.items.push(o);
            this.map[key] = o;
            this.keys.push(key);
        }
        this.fireEvent("add", this.length-1, o, key);
        return o;
    },

    getKey : function(o){
         return o.id;
    },

    replace : function(key, o){
        if(arguments.length == 1){
            o = arguments[0];
            key = this.getKey(o);
        }
        var old = this.item(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;
    },

    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]);
                }
            }
        }
    },

    each : function(fn, scope){
        var items = [].concat(this.items);
        for(var i = 0, len = items.length; i < len; i++){
            if(fn.call(scope || items[i], items[i], i, len) === false){
                break;
            }
        }
    },

    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);
        }
    },

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

    insert : function(index, key, o){
        if(arguments.length == 2){
            o = arguments[1];
            key = this.getKey(o);
        }
        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 : function(o){
        return this.removeAt(this.indexOf(o));
    },

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

    removeKey : function(key){
        return this.removeAt(this.indexOfKey(key));
    },

    getCount : function(){
        return this.length;
    },

    indexOf : function(o){
        return this.items.indexOf(o);
    },

    indexOfKey : function(key){
        return this.keys.indexOf(key);
    },

    item : function(key){
        var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
        return typeof item != 'function' || this.allowFunctions ? item : null;
    },

    itemAt : function(index){
        return this.items[index];
    },

    key : function(key){
        return this.map[key];
    },

    contains : function(o){
        return this.indexOf(o) != -1;
    },

    containsKey : function(key){
        return typeof this.map[key] != "undefined";
    },

    clear : function(){
        this.length = 0;
        this.items = [];
        this.keys = [];
        this.map = {};
        this.fireEvent("clear");
    },

    first : function(){
        return this.items[0];
    },

    last : function(){
        return this.items[this.length-1];
    },

    _sort : function(property, dir, fn){
        var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
        fn = fn || function(a, b){
            return a-b;
        };
        var c = [], k = this.keys, items = this.items;
        for(var i = 0, len = items.length; i < len; i++){
            c[c.length] = {key: k[i], value: items[i], index: i};
        }
        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;
        });
        for(var i = 0, len = c.length; i < len; i++){
            items[i] = c[i].value;
            k[i] = c[i].key;
        }
        this.fireEvent("sort", this);
    },

    sort : function(dir, fn){
        this._sort("value", dir, fn);
    },

    keySort : function(dir, fn){
        this._sort("key", dir, fn || function(a, b){
            return String(a).toUpperCase()-String(b).toUpperCase();
        });
    },

    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 r = [];
        if(start <= end){
            for(var i = start; i <= end; i++) {
                r[r.length] = items[i];
            }
        }else{
            for(var i = start; i >= end; i--) {
                r[r.length] = items[i];
            }
        }
        return r;
    },

    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]);
        });
    },

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

    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);
    },

    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;
            }
        }
        if(typeof start == 'number' && start > 0){
            for(var i = 0; i < start; i++){
                if(fn.call(scope||this, it[i], k[i])){
                    return i;
                }
            }
        }
        return -1;
    },

    createValueMatcher : function(value, anyMatch, caseSensitive){
        if(!value.exec){
            value = String(value);
            value = new RegExp((anyMatch === true ? '' : '^') + Ext.escapeRe(value), caseSensitive ? '' : 'i');
        }
        return value;
    },

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

Ext.util.MixedCollection.prototype.get = Ext.util.MixedCollection.prototype.item;

Ext.util.JSON = new (function(){
    var useHasOwn = {}.hasOwnProperty ? true : false;

    var pad = function(n) {
        return n < 10 ? "0" + n : n;
    };

    var m = {
        "\b": '\\b',
        "\t": '\\t',
        "\n": '\\n',
        "\f": '\\f',
        "\r": '\\r',
        '"' : '\\"',
        "\\": '\\\\'
    };

    var 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 + '"';
    };

    var 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("");
    };

    var encodeDate = function(o){
        return '"' + o.getFullYear() + "-" +
                pad(o.getMonth() + 1) + "-" +
                pad(o.getDate()) + "T" +
                pad(o.getHours()) + ":" +
                pad(o.getMinutes()) + ":" +
                pad(o.getSeconds()) + '"';
    };

    this.encode = function(o){
        if(typeof o == "undefined" || o === null){
            return "null";
        }else if(Ext.isArray(o)){
            return encodeArray(o);
        }else if(Ext.isDate(o)){
            return encodeDate(o);
        }else if(typeof o == "string"){
            return encodeString(o);
        }else if(typeof o == "number"){
            return isFinite(o) ? String(o) : "null";
        }else if(typeof o == "boolean"){
            return String(o);
        }else {
            var a = ["{"], b, i, v;
            for (i in o) {
                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(this.encode(i), ":",
                                v === null ? "null" : this.encode(v));
                        b = true;
                    }
                }
            }
            a.push("}");
            return a.join("");
        }
    };

    this.decode = function(json){
        return eval("(" + json + ')');
    };
})();

Ext.encode = Ext.util.JSON.encode;

Ext.decode = Ext.util.JSON.decode;

Ext.util.Format = function(){
    var trimRe = /^\s+|\s+$/g;
    return {

        ellipsis : function(value, len){
            if(value && value.length > len){
                return value.substr(0, len-3)+"...";
            }
            return value;
        },

        undef : function(value){
            return value !== undefined ? value : "";
        },

        defaultValue : function(value, defaultValue){
            return value !== undefined && value !== '' ? value : defaultValue;
        },

        htmlEncode : function(value){
            return !value ? value : String(value).replace(/&/g, "&").replace(/>/g, ">").replace(/").replace(/</g, "<").replace(/"/g, '"');
        },

        trim : function(value){
            return String(value).replace(trimRe, "");
        },

        substr : function(value, start, length){
            return String(value).substr(start, length);
        },

        lowercase : function(value){
            return String(value).toLowerCase();
        },

        uppercase : function(value){
            return String(value).toUpperCase();
        },

        capitalize : function(value){
            return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
        },

        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);
            }
        },

        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('.');
            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 '-$' + v.substr(1);
            }
            return "$" +  v;
        },

        date : function(v, format){
            if(!v){
                return "";
            }
            if(!Ext.isDate(v)){
                v = new Date(Date.parse(v));
            }
            return v.dateFormat(format || "m/d/Y");
        },

        dateRenderer : function(format){
            return function(v){
                return Ext.util.Format.date(v, format);
            };
        },

        stripTagsRE : /<\/?[^>]+>/gi,

        stripTags : function(v){
            return !v ? v : String(v).replace(this.stripTagsRE, "");
        },

        stripScriptsRe : /(?:)((\n|\r|.)*?)(?:<\/script>)/ig,

        stripScripts : function(v){
            return !v ? v : String(v).replace(this.stripScriptsRe, "");
        },

        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";
            }
        },

        math : function(){
            var fns = {};
            return function(v, a){
                if(!fns[a]){
                    fns[a] = new Function('v', 'return v ' + a + ';');
                }
                return fns[a](v);
            }
        }()
    };
}();

Ext.XTemplate = function(){
    Ext.XTemplate.superclass.constructor.apply(this, arguments);
    var s = this.html;

    s = ['', s, ''].join('');

    var re = /]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/;

    var nameRe = /^]*?for="(.*?)"/;
    var ifRe = /^]*?if="(.*?)"/;
    var execRe = /^]*?exec="(.*?)"/;
    var m, id = 0;
    var tpls = [];

    while(m = s.match(re)){
       var m2 = m[0].match(nameRe);
       var m3 = m[0].match(ifRe);
       var m4 = m[0].match(execRe);
       var exp = null, fn = null, exec = null;
       var name = m2 && m2[1] ? m2[1] : '';
       if(m3){
           exp = m3 && m3[1] ? m3[1] : null;
           if(exp){
               fn = new Function('values', 'parent', 'xindex', 'xcount', 'with(values){ return '+(Ext.util.Format.htmlDecode(exp))+'; }');
           }
       }
       if(m4){
           exp = m4 && m4[1] ? m4[1] : null;
           if(exp){
               exec = new Function('values', 'parent', 'xindex', 'xcount', 'with(values){ '+(Ext.util.Format.htmlDecode(exp))+'; }');
           }
       }
       if(name){
           switch(name){
               case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;
               case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
               default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
           }
       }
       tpls.push({
            id: id,
            target: name,
            exec: exec,
            test: fn,
            body: m[1]||''
        });
       s = s.replace(m[0], '{xtpl'+ id + '}');
       ++id;
    }
    for(var i = tpls.length-1; i >= 0; --i){
        this.compileTpl(tpls[i]);
    }
    this.master = tpls[tpls.length-1];
    this.tpls = tpls;
};
Ext.extend(Ext.XTemplate, Ext.Template, {

    re : /\{([\w-\.\#]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\\]\s?[\d\.\+\-\*\\\(\)]+)?\}/g,

    codeRe : /\{\[((?:\\\]|.|\n)*?)\]\}/g,

    applySubTemplate : function(id, values, parent, xindex, xcount){
        var t = this.tpls[id];
        if(t.test && !t.test.call(this, values, parent, xindex, xcount)){
            return '';
        }
        if(t.exec && t.exec.call(this, values, parent, xindex, xcount)){
            return '';
        }
        var vs = t.target ? t.target.call(this, values, parent) : values;
        parent = t.target ? values : parent;
        if(t.target && Ext.isArray(vs)){
            var buf = [];
            for(var i = 0, len = vs.length; i < len; i++){
                buf[buf.length] = t.compiled.call(this, vs[i], parent, i+1, len);
            }
            return buf.join('');
        }
        return t.compiled.call(this, vs, parent, xindex, xcount);
    },

    compileTpl : function(tpl){
        var fm = Ext.util.Format;
        var useF = this.disableFormats !== true;
        var sep = Ext.isGecko ? "+" : ",";
        var fn = function(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+"'";
        };
        var codeFn = function(m, code){
            return "'"+ sep +'('+code+')'+sep+"'";
        };

        var body;

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

    apply : function(values){
        return this.master.compiled.call(this, values, {}, 1, 1);
    },

    applyTemplate : function(values){
        return this.master.compiled.call(this, values, {}, 1, 1);
    },

    compile : function(){return this;}

});

Ext.XTemplate.from = function(el){
    el = Ext.getDom(el);
    return new Ext.XTemplate(el.value || el.innerHTML);
};

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 {

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

   removeStyleSheet : function(id){
       var existing = doc.getElementById(id);
       if(existing){
           existing.parentNode.removeChild(existing);
       }
   },

   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);
   },

   refreshCache : function(){
       return this.getRules(true);
   },

   cacheStyleSheet : function(ss){
       if(!rules){
           rules = {};
       }
       try{
           var ssRules = ss.cssRules || ss.rules;
           for(var j = ssRules.length-1; j >= 0; --j){
               rules[ssRules[j].selectorText] = ssRules[j];
           }
       }catch(e){}
   },

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

   getRule : function(selector, refreshCache){
           var rs = this.getRules(refreshCache);
           if(!Ext.isArray(selector)){
               return rs[selector];
           }
           for(var i = 0; i < selector.length; i++){
            if(rs[selector[i]]){
                return rs[selector[i]];
            }
        }
        return null;
       },

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

Ext.util.ClickRepeater = function(el, config)
{
    this.el = Ext.get(el);
    this.el.unselectable();

    Ext.apply(this, config);

    this.addEvents(

        "mousedown",

        "click",

        "mouseup"
    );

    this.el.on("mousedown", this.handleMouseDown, this);
    if(this.preventDefault || this.stopDefault){
        this.el.on("click", function(e){
            if(this.preventDefault){
                e.preventDefault();
            }
            if(this.stopDefault){
                e.stopEvent();
            }
        }, this);
    }

        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,

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

        if (this.accelerate) {
            this.delay = 400;
        }
        this.timer = this.click.defer(this.delay || this.interval, this);
    },

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

        handleMouseOut : function(){
        clearTimeout(this.timer);
        if(this.pressClass){
            this.el.removeClass(this.pressClass);
        }
        this.el.on("mouseover", this.handleMouseReturn, this);
    },

        handleMouseReturn : function(){
        this.el.un("mouseover", this.handleMouseReturn);
        if(this.pressClass){
            this.el.addClass(this.pressClass);
        }
        this.click();
    },

        handleMouseUp : function(){
        clearTimeout(this.timer);
        this.el.un("mouseover", this.handleMouseReturn);
        this.el.un("mouseout", this.handleMouseOut);
        Ext.getDoc().un("mouseup", this.handleMouseUp);
        this.el.removeClass(this.pressClass);
        this.fireEvent("mouseup", this);
    }
});

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 = {

    disabled : false,

    defaultEventAction: "stopEvent",

    forceKeyDown : false,

        prepareEvent : function(e){
        var k = e.getKey();
        var h = this.keyToHandler[k];
                                if(Ext.isSafari && h && k >= 37 && k <= 40){
            e.stopEvent();
        }
    },

        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]();
            }
        }
    },

        doRelay : function(e, h, hname){
        return h.call(this.scope || this, e);
    },

        enter : false,
    left : false,
    right : false,
    up : false,
    down : false,
    tab : false,
    esc : false,
    pageUp : false,
    pageDown : false,
    del : false,
    home : false,
    end : false,

        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"
    },

    enable: function(){
        if(this.disabled){
                                    if(this.forceKeyDown || Ext.isIE || Ext.isAir){
                this.el.on("keydown", this.relay,  this);
            }else{
                this.el.on("keydown", this.prepareEvent,  this);
                this.el.on("keypress", this.relay,  this);
            }
            this.disabled = false;
        }
    },

    disable: function(){
        if(!this.disabled){
            if(this.forceKeyDown || Ext.isIE || Ext.isAir){
                this.el.un("keydown", this.relay);
            }else{
                this.el.un("keydown", this.prepareEvent);
                this.el.un("keypress", this.relay);
            }
            this.disabled = true;
        }
    }
};

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 = {

    stopEvent : false,

    addBinding : function(config){
        if(Ext.isArray(config)){
            for(var i = 0, len = config.length; i < len; i++){
                this.addBinding(config[i]);
            }
            return;
        }
        var keyCode = config.key,
            shift = config.shift,
            ctrl = config.ctrl,
            alt = config.alt,
            fn = config.fn || config.handler,
            scope = config.scope;

        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((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
                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);
    },

    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
        })
    },

    handleKeyDown : function(e){
        if(this.enabled){
            var b = this.bindings;
            for(var i = 0, len = b.length; i < len; i++){
                b[i].call(this, e);
            }
        }
    },

    isEnabled : function(){
        return this.enabled;
    },

    enable: function(){
        if(!this.enabled){
            this.el.on(this.eventName, this.handleKeyDown, this);
            this.enabled = true;
        }
    },

    disable: function(){
        if(this.enabled){
            this.el.removeListener(this.eventName, this.handleKeyDown, this);
            this.enabled = false;
        }
    }
};

Ext.util.TextMetrics = function(){
    var shared;
    return {

        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);
        },

        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 = {

        getSize : function(text){
            ml.update(text);
            var s = ml.getSize();
            ml.update('');
            return s;
        },

        bind : function(el){
            ml.setStyle(
                Ext.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
            );
        },

        setFixedWidth : function(width){
            ml.setWidth(width);
        },

        getWidth : function(text){
            ml.dom.style.width = 'auto';
            return this.getSize(text).width;
        },

        getHeight : function(text){
            return this.getSize(text).height;
        }
    };

    instance.bind(bindTo);

    return instance;
};

Ext.Element.measureText = Ext.util.TextMetrics.measure;

(function() {

var Event=Ext.EventManager;
var Dom=Ext.lib.Dom;

Ext.dd.DragDrop = function(id, sGroup, config) {
    if(id) {
        this.init(id, sGroup, config);
    }
};

Ext.dd.DragDrop.prototype = {

    id: null,

    config: null,

    dragElId: null,

    handleElId: null,

    invalidHandleTypes: null,

    invalidHandleIds: null,

    invalidHandleClasses: null,

    startPageX: 0,

    startPageY: 0,

    groups: null,

    locked: false,

    lock: function() { this.locked = true; },

    unlock: function() { this.locked = false; },

    isTarget: true,

    padding: null,

    _domRef: null,

    __ygDragDrop: true,

    constrainX: false,

    constrainY: false,

    minX: 0,

    maxX: 0,

    minY: 0,

    maxY: 0,

    maintainOffset: false,

    xTicks: null,

    yTicks: null,

    primaryButtonOnly: true,

    available: false,

    hasOuterHandles: false,

    b4StartDrag: function(x, y) { },

    startDrag: function(x, y) {  },

    b4Drag: function(e) { },

    onDrag: function(e) {  },

    onDragEnter: function(e, id) {  },

    b4DragOver: function(e) { },

    onDragOver: function(e, id) {  },

    b4DragOut: function(e) { },

    onDragOut: function(e, id) {  },

    b4DragDrop: function(e) { },

    onDragDrop: function(e, id) {  },

    onInvalidDrop: function(e) {  },

    b4EndDrag: function(e) { },

    endDrag: function(e) {  },

    b4MouseDown: function(e) {  },

    onMouseDown: function(e) {  },

    onMouseUp: function(e) {  },

    onAvailable: function () {
    },

    defaultPadding : {left:0, right:0, top:0, bottom:0},

    constrainTo : function(constrainTo, pad, inContent){
        if(typeof pad == "number"){
            pad = {left: pad, right:pad, top:pad, bottom:pad};
        }
        pad = pad || this.defaultPadding;
        var b = Ext.get(this.getEl()).getBox();
        var ce = Ext.get(constrainTo);
        var s = ce.getScroll();
        var 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]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
        }

        var topSpace = b.y - c.y;
        var leftSpace = b.x - c.x;

        this.resetConstraints();
        this.setXConstraint(leftSpace - (pad.left||0),
                c.width - leftSpace - b.width - (pad.right||0),
                this.xTickSize
        );
        this.setYConstraint(topSpace - (pad.top||0),
                c.height - topSpace - b.height - (pad.bottom||0),
                this.yTickSize
        );
    },

    getEl: function() {
        if (!this._domRef) {
            this._domRef = Ext.getDom(this.id);
        }

        return this._domRef;
    },

    getDragEl: function() {
        return Ext.getDom(this.dragElId);
    },

    init: function(id, sGroup, config) {
        this.initTarget(id, sGroup, config);
        Event.on(this.id, "mousedown", this.handleMouseDown, this);

    },

    initTarget: function(id, sGroup, config) {

        this.config = config || {};

        this.DDM = Ext.dd.DDM;

        this.groups = {};

        if (typeof id !== "string") {
            id = Ext.id(id);
        }

        this.id = id;

        this.addToGroup((sGroup) ? sGroup : "default");

        this.handleElId = id;

        this.setDragElId(id);

        this.invalidHandleTypes = { A: "A" };
        this.invalidHandleIds = {};
        this.invalidHandleClasses = [];

        this.applyConfig();

        this.handleOnAvailable();
    },

    applyConfig: function() {

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

    },

    handleOnAvailable: function() {
        this.available = true;
        this.resetConstraints();
        this.onAvailable();
    },

    setPadding: function(iTop, iRight, iBot, iLeft) {

        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];
        }
    },

    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);
    },

    setStartPosition: function(pos) {
        var p = pos || Dom.getXY( this.getEl() );
        this.deltaSetXY = null;

        this.startPageX = p[0];
        this.startPageY = p[1];
    },

    addToGroup: function(sGroup) {
        this.groups[sGroup] = true;
        this.DDM.regDragDrop(this, sGroup);
    },

    removeFromGroup: function(sGroup) {
        if (this.groups[sGroup]) {
            delete this.groups[sGroup];
        }

        this.DDM.removeDDFromGroup(this, sGroup);
    },

    setDragElId: function(id) {
        this.dragElId = id;
    },

    setHandleElId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        this.handleElId = id;
        this.DDM.regHandle(this.id, id);
    },

    setOuterHandleElId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        Event.on(id, "mousedown",
                this.handleMouseDown, this);
        this.setHandleElId(id);

        this.hasOuterHandles = true;
    },

    unreg: function() {
        Event.un(this.id, "mousedown",
                this.handleMouseDown);
        this._domRef = null;
        this.DDM._remove(this);
    },

    destroy : function(){
        this.unreg();
    },

    isLocked: function() {
        return (this.DDM.isLocked() || this.locked);
    },

    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)) {

                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)) );
    },

    addInvalidHandleType: function(tagName) {
        var type = tagName.toUpperCase();
        this.invalidHandleTypes[type] = type;
    },

    addInvalidHandleId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        this.invalidHandleIds[id] = id;
    },

    addInvalidHandleClass: function(cssClass) {
        this.invalidHandleClasses.push(cssClass);
    },

    removeInvalidHandleType: function(tagName) {
        var type = tagName.toUpperCase();

        delete this.invalidHandleTypes[type];
    },

    removeInvalidHandleId: function(id) {
        if (typeof id !== "string") {
            id = Ext.id(id);
        }
        delete this.invalidHandleIds[id];
    },

    removeInvalidHandleClass: function(cssClass) {
        for (var i=0, len=this.invalidHandleClasses.length; 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) ;
    },

    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) ;
    },

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

    clearConstraints: function() {
        this.constrainX = false;
        this.constrainY = false;
        this.clearTicks();
    },

    clearTicks: function() {
        this.xTicks = null;
        this.yTicks = null;
        this.xTickSize = 0;
        this.yTickSize = 0;
    },

    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: function() {

        if (this.initPageX || this.initPageX === 0) {

            var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
            var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;

            this.setInitPosition(dx, dy);

        } 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         );
        }
    },

    getTick: function(val, tickArray) {

        if (!tickArray) {

            return val;
        } else if (tickArray[0] >= val) {

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

            return tickArray[tickArray.length - 1];
        }
    },

    toString: function() {
        return ("DragDrop " + this.id);
    }

};

})();

if (!Ext.dd.DragDropMgr) {

Ext.dd.DragDropMgr = function() {

    var Event = Ext.EventManager;

    return {

        ids: {},

        handleIds: {},

        dragCurrent: null,

        dragOvers: {},

        deltaX: 0,

        deltaY: 0,

        preventDefault: true,

        stopPropagation: true,

        initalized: false,

        locked: false,

        init: function() {
            this.initialized = true;
        },

        POINT: 0,

        INTERSECT: 1,

        mode: 0,

        _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);
                }
            }
        },

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

        },

        _onResize: function(e) {
            this._execOnAll("resetConstraints", []);
        },

        lock: function() { this.locked = true; },

        unlock: function() { this.locked = false; },

        isLocked: function() { return this.locked; },

        locationCache: {},

        useCache: true,

        clickPixelThresh: 3,

        clickTimeThresh: 350,

        dragThreshMet: false,

        clickTimeout: null,

        startX: 0,

        startY: 0,

        regDragDrop: function(oDD, sGroup) {
            if (!this.initialized) { this.init(); }

            if (!this.ids[sGroup]) {
                this.ids[sGroup] = {};
            }
            this.ids[sGroup][oDD.id] = oDD;
        },

        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];
            }
        },

        _remove: function(oDD) {
            for (var g in oDD.groups) {
                if (g && this.ids[g][oDD.id]) {
                    delete this.ids[g][oDD.id];
                }
            }
            delete this.handleIds[oDD.id];
        },

        regHandle: function(sDDId, sHandleId) {
            if (!this.handleIds[sDDId]) {
                this.handleIds[sDDId] = {};
            }
            this.handleIds[sDDId][sHandleId] = sHandleId;
        },

        isDragDrop: function(id) {
            return ( this.getDDById(id) ) ? true : false;
        },

        getRelated: function(p_oDD, bTargetsOnly) {
            var oDDs = [];
            for (var i in p_oDD.groups) {
                for (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;
        },

        isLegalTarget: function (oDD, oTargetDD) {
            var targets = this.getRelated(oDD, true);
            for (var i=0, len=targets.length;i 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;
        },

        fireEvents: function(e, isDrop) {
            var dc = this.dragCurrent;

            if (!dc || dc.isLocked()) {
                return;
            }

            var pt = e.getPoint();

            var oldOvers = [];

            var outEvts   = [];
            var overEvts  = [];
            var dropEvts  = [];
            var enterEvts = [];

            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) {
                        if (this.isOverTarget(pt, oDD, this.mode)) {

                            if (isDrop) {
                                dropEvts.push( oDD );

                            } else {

                                if (!oldOvers[oDD.id]) {
                                    enterEvts.push( oDD );

                                } 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 {

                var len = 0;
                for (i=0, len=outEvts.length; i 2000) {
                } else {
                    setTimeout(DDM._addListeners, 10);
                    if (document && document.body) {
                        DDM._timeoutCount += 1;
                    }
                }
            }
        },

        handleWasClicked: function(node, id) {
            if (this.isHandle(id, node.id)) {
                return true;
            } else {

                var p = node.parentNode;

                while (p) {
                    if (this.isHandle(id, p.id)) {
                        return true;
                    } else {
                        p = p.parentNode;
                    }
                }
            }

            return false;
        }

    };

}();

Ext.dd.DDM = Ext.dd.DragDropMgr;
Ext.dd.DDM._addListeners();

}

Ext.dd.DD = function(id, sGroup, config) {
    if (id) {
        this.init(id, sGroup, config);
    }
};

Ext.extend(Ext.dd.DD, Ext.dd.DragDrop, {

    scroll: true,

    autoOffset: function(iPageX, iPageY) {
        var x = iPageX - this.startPageX;
        var y = iPageY - this.startPageY;
        this.setDelta(x, y);
    },

    setDelta: function(iDeltaX, iDeltaY) {
        this.deltaX = iDeltaX;
        this.deltaY = iDeltaY;
    },

    setDragElPos: function(iPageX, iPageY) {

        var el = this.getDragEl();
        this.alignElWithMouse(el, iPageX, iPageY);
    },

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

    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];
        }
    },

    autoScroll: function(x, y, h, w) {

        if (this.scroll) {

            var clientH = Ext.lib.Dom.getViewHeight();

            var clientW = Ext.lib.Dom.getViewWidth();

            var st = this.DDM.getScrollTop();

            var sl = this.DDM.getScrollLeft();

            var bot = h + y;

            var right = w + x;

            var toBot = (clientH + st - y - this.deltaY);

            var toRight = (clientW + sl - x - this.deltaX);

            var thresh = 40;

            var scrAmt = (document.all) ? 80 : 30;

            if ( bot > clientH && toBot < thresh ) {
                window.scrollTo(sl, st + scrAmt);
            }

            if ( y < st && st > 0 && y - st < thresh ) {
                window.scrollTo(sl, st - scrAmt);
            }

            if ( right > clientW && toRight < thresh ) {
                window.scrollTo(sl + scrAmt, st);
            }

            if ( x < sl && sl > 0 && x - sl < thresh ) {
                window.scrollTo(sl - scrAmt, st);
            }
        }
    },

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

    applyConfig: function() {
        Ext.dd.DD.superclass.applyConfig.call(this);
        this.scroll = (this.config.scroll !== false);
    },

    b4MouseDown: function(e) {

        this.autoOffset(e.getPageX(),
                            e.getPageY());
    },

    b4Drag: function(e) {
        this.setDragElPos(e.getPageX(),
                            e.getPageY());
    },

    toString: function() {
        return ("DD " + this.id);
    }

});

Ext.dd.DDProxy = function(id, sGroup, config) {
    if (id) {
        this.init(id, sGroup, config);
        this.initFrame();
    }
};

Ext.dd.DDProxy.dragElId = "ygddfdiv";

Ext.extend(Ext.dd.DDProxy, Ext.dd.DD, {

    resizeFrame: true,

    centerFrame: false,

    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;

            body.insertBefore(div, body.firstChild);
        }
    },

    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);
    },

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

    _resizeProxy: function() {
        if (this.resizeFrame) {
            var el = this.getEl();
            Ext.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
        }
    },

    b4MouseDown: function(e) {
        var x = e.getPageX();
        var y = e.getPageY();
        this.autoOffset(x, y);
        this.setDragElPos(x, y);
    },

    b4StartDrag: function(x, y) {

        this.showFrame(x, y);
    },

    b4EndDrag: function(e) {
        Ext.fly(this.getDragEl()).hide();
    },

    endDrag: function(e) {

        var lel = this.getEl();
        var del = this.getDragEl();

        del.style.visibility = "";

        this.beforeMove();

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

});

Ext.dd.DDTarget = function(id, sGroup, config) {
    if (id) {
        this.initTarget(id, sGroup, config);
    }
};

Ext.extend(Ext.dd.DDTarget, Ext.dd.DragDrop, {
    toString: function() {
        return ("DDTarget " + this.id);
    }
});

Ext.dd.DragTracker = function(config){
    Ext.apply(this, config);
    this.addEvents(
        'mousedown',
        'mouseup',
        'mousemove',
        'dragstart',
        'dragend',
        'drag'
    );

    this.dragRegion = new Ext.lib.Region(0,0,0,0);

    if(this.el){
        this.initEl(this.el);
    }
}

Ext.extend(Ext.dd.DragTracker, Ext.util.Observable,  {
    active: false,
    tolerance: 5,
    autoStart: false,

    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;
            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){
        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();
        this.active = false;
        delete this.elRegion;
        this.fireEvent('mouseup', this, e);
        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;
    },

    onBeforeStart : function(e){

    },

    onStart : function(xy){

    },

    onDrag : function(e){

    },

    onEnd : function(e){

    },

    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];
        }
    }
});

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;
        proc.id = setInterval(doScroll, Ext.dd.ScrollManager.frequency);
    };

    var onFire = function(e, isDrop){
        if(isDrop || !ddm.dragCurrent){ return; }
        var dds = Ext.dd.ScrollManager;
        if(!dragEl || dragEl != ddm.dragCurrent){
            dragEl = ddm.dragCurrent;

            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 {

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

        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];
            }
        },

        vthresh : 25,

        hthresh : 25,

        increment : 100,

        frequency : 500,

        animate: true,

        animDuration: .4,

        refreshCache : function(){
            for(var id in els){
                if(typeof els[id] == 'object'){
                    els[id]._region = els[id].getRegion();
                }
            }
        }
    };
}();

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 {

        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 : 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)];
                    }
                }
            }
        },

        getHandle : function(id){
            if(typeof id != "string"){
                id = id.id;
            }
            return handles[id];
        },

        getHandleFromEvent : function(e){
            var t = Ext.lib.Event.getTarget(e);
            return t ? handles[t.id] : null;
        },

        getTarget : function(id){
            if(typeof id != "string"){
                id = id.id;
            }
            return elements[id];
        },

        getTargetFromEvent : function(e){
            var t = Ext.lib.Event.getTarget(e);
            return t ? elements[t.id] || handles[t.id] : null;
        }
    };
}();

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 = {

    dropAllowed : "x-dd-drop-ok",

    dropNotAllowed : "x-dd-drop-nodrop",

    setStatus : function(cssClass){
        cssClass = cssClass || this.dropNotAllowed;
        if(this.dropStatus != cssClass){
            this.el.replaceClass(this.dropStatus, cssClass);
            this.dropStatus = cssClass;
        }
    },

    reset : function(clearGhost){
        this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
        this.dropStatus = this.dropNotAllowed;
        if(clearGhost){
            this.ghost.update("");
        }
    },

    update : function(html){
        if(typeof html == "string"){
            this.ghost.update(html);
        }else{
            this.ghost.update("");
            html.style.margin = "0";
            this.ghost.dom.appendChild(html);
        }
    },

    getEl : function(){
        return this.el;
    },

    getGhost : function(){
        return this.ghost;
    },

    hide : function(clear){
        this.el.hide();
        if(clear){
            this.reset(true);
        }
    },

    stop : function(){
        if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
            this.anim.stop();
        }
    },

    show : function(){
        this.el.show();
    },

    sync : function(){
        this.el.sync();
    },

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

    afterRepair : function(){
        this.hide(true);
        if(typeof this.callback == "function"){
            this.callback.call(this.scope || this);
        }
        this.callback = null;
        this.scope = null;
    }
};

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, {

    dropAllowed : "x-dd-drop-ok",

    dropNotAllowed : "x-dd-drop-nodrop",

    getDragData : function(e){
        return this.dragData;
    },

    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){

                this.afterDragEnter(target, e, id);
            }
        }
    },

    beforeDragEnter : function(target, e, id){
        return true;
    },

    alignElWithMouse: function() {
        Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
        this.proxy.sync();
    },

    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){

                this.afterDragOver(target, e, id);
            }
        }
    },

    beforeDragOver : function(target, e, id){
        return true;
    },

    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){

                this.afterDragOut(target, e, id);
            }
        }
        this.cachedTarget = null;
    },

    beforeDragOut : function(target, e, id){
        return true;
    },

    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)){
                    this.onValidDrop(target, e, id);
                }else{
                    this.onInvalidDrop(target, e, id);
                }
            }else{
                this.onValidDrop(target, e, id);
            }

            if(this.afterDragDrop){

                this.afterDragDrop(target, e, id);
            }
        }
        delete this.cachedTarget;
    },

    beforeDragDrop : function(target, e, id){
        return true;
    },

    onValidDrop : function(target, e, id){
        this.hideProxy();
        if(this.afterValidDrop){

            this.afterValidDrop(target, e, id);
        }
    },

    getRepairXY : function(e, data){
        return this.el.getXY();
    },

    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){

            this.afterInvalidDrop(e, id);
        }
    },

    afterRepair : function(){
        if(Ext.enableFx){
            this.el.highlight(this.hlColor || "c3daf9");
        }
        this.dragging = false;
    },

    beforeInvalidDrop : function(target, e, id){
        return true;
    },

    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);
        }
    },

    onBeforeDrag : function(data, e){
        return true;
    },

    onStartDrag : Ext.emptyFn,

    startDrag : function(x, y){
        this.proxy.reset();
        this.dragging = true;
        this.proxy.update("");
        this.onInitDrag(x, y);
        this.proxy.show();
    },

    onInitDrag : function(x, y){
        var clone = this.el.dom.cloneNode(true);
        clone.id = Ext.id();
        this.proxy.update(clone);
        this.onStartDrag(x, y);
        return true;
    },

    getProxy : function(){
        return this.proxy;
    },

    hideProxy : function(){
        this.proxy.hide();
        this.proxy.reset(true);
        this.dragging = false;
    },

    triggerCacheRefresh : function(){
        Ext.dd.DDM.refreshCache(this.groups);
    },

    b4EndDrag: function(e) {
    },

    endDrag : function(e){
        this.onEndDrag(this.dragData, e);
    },

    onEndDrag : function(data, e){
    },

    autoOffset : function(x, y) {
        this.setDelta(-12, -20);
    }
});

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, {

    dropAllowed : "x-dd-drop-ok",

    dropNotAllowed : "x-dd-drop-nodrop",

    isTarget : true,

    isNotifyTarget : true,

    notifyEnter : function(dd, e, data){
        if(this.overClass){
            this.el.addClass(this.overClass);
        }
        return this.dropAllowed;
    },

    notifyOver : function(dd, e, data){
        return this.dropAllowed;
    },

    notifyOut : function(dd, e, data){
        if(this.overClass){
            this.el.removeClass(this.overClass);
        }
    },

    notifyDrop : function(dd, e, data){
        return false;
    }
});

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, {

    getDragData : function(e){
        return Ext.dd.Registry.getHandleFromEvent(e);
    },

    onInitDrag : function(x, y){
        this.proxy.update(this.dragData.ddel.cloneNode(true));
        this.onStartDrag(x, y);
        return true;
    },

    afterRepair : function(){
        if(Ext.enableFx){
            Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
        }
        this.dragging = false;
    },

    getRepairXY : function(e){
        return Ext.Element.fly(this.dragData.ddel).getXY();
    }
});

Ext.dd.DropZone = function(el, config){
    Ext.dd.DropZone.superclass.constructor.call(this, el, config);
};

Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {

    getTargetFromEvent : function(e){
        return Ext.dd.Registry.getTargetFromEvent(e);
    },

    onNodeEnter : function(n, dd, e, data){

    },

    onNodeOver : function(n, dd, e, data){
        return this.dropAllowed;
    },

    onNodeOut : function(n, dd, e, data){

    },

    onNodeDrop : function(n, dd, e, data){
        return false;
    },

    onContainerOver : function(dd, e, data){
        return this.dropNotAllowed;
    },

    onContainerDrop : function(dd, e, data){
        return false;
    },

    notifyEnter : function(dd, e, data){
        return this.dropNotAllowed;
    },

    notifyOver : function(dd, e, data){
        var n = this.getTargetFromEvent(e);
        if(!n){
            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);
    },

    notifyOut : function(dd, e, data){
        if(this.lastOverNode){
            this.onNodeOut(this.lastOverNode, dd, e, data);
            this.lastOverNode = null;
        }
    },

    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);
    },

    triggerCacheRefresh : function(){
        Ext.dd.DDM.refreshCache(this.groups);
    }
});

Ext.data.SortTypes = {

    none : function(s){
        return s;
    },

    stripTagsRE : /<\/?[^>]+>/gi,

    asText : function(s){
        return String(s).replace(this.stripTagsRE, "");
    },

    asUCText : function(s){
        return String(s).toUpperCase().replace(this.stripTagsRE, "");
    },

    asUCString : function(s) {
        return String(s).toUpperCase();
    },

    asDate : function(s) {
        if(!s){
            return 0;
        }
        if(Ext.isDate(s)){
            return s.getTime();
        }
        return Date.parse(String(s));
    },

    asFloat : function(s) {
        var val = parseFloat(String(s).replace(/,/g, ""));
        if(isNaN(val)) val = 0;
        return val;
    },

    asInt : function(s) {
        var val = parseInt(String(s).replace(/,/g, ""));
        if(isNaN(val)) val = 0;
        return val;
    }
};

Ext.data.Record = function(data, id){
    this.id = (id || id === 0) ? id : ++Ext.data.Record.AUTO_ID;
    this.data = data;
};

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.AUTO_ID = 1000;
Ext.data.Record.EDIT = 'edit';
Ext.data.Record.REJECT = 'reject';
Ext.data.Record.COMMIT = 'commit';

Ext.data.Record.prototype = {

    dirty : false,
    editing : false,
    error: null,

    modified: null,

    join : function(store){
        this.store = store;
    },

    set : function(name, value){
        if(String(this.data[name]) == String(value)){
            return;
        }
        this.dirty = true;
        if(!this.modified){
            this.modified = {};
        }
        if(typeof this.modified[name] == 'undefined'){
            this.modified[name] = this.data[name];
        }
        this.data[name] = value;
        if(!this.editing && this.store){
            this.store.afterEdit(this);
        }
    },

    get : function(name){
        return this.data[name];
    },

    beginEdit : function(){
        this.editing = true;
        this.modified = {};
    },

    cancelEdit : function(){
        this.editing = false;
        delete this.modified;
    },

    endEdit : function(){
        this.editing = false;
        if(this.dirty && this.store){
            this.store.afterEdit(this);
        }
    },

    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(this.store && silent !== true){
            this.store.afterReject(this);
        }
    },

    commit : function(silent){
        this.dirty = false;
        delete this.modified;
        this.editing = false;
        if(this.store && silent !== true){
            this.store.afterCommit(this);
        }
    },

    getChanges : function(){
        var m = this.modified, cs = {};
        for(var n in m){
            if(m.hasOwnProperty(n)){
                cs[n] = this.data[n];
            }
        }
        return cs;
    },

    hasError : function(){
        return this.error != null;
    },

    clearError : function(){
        this.error = null;
    },

    copy : function(newId) {
        return new this.constructor(Ext.apply({}, this.data), newId || this.id);
    },

    isModified : function(fieldName){
        return this.modified && this.modified.hasOwnProperty(fieldName);
    }
};

Ext.StoreMgr = Ext.apply(new Ext.util.MixedCollection(), {
    register : function(){
        for(var i = 0, s; s = arguments[i]; i++){
            this.add(s);
        }
    },

    unregister : function(){
        for(var i = 0, s; s = arguments[i]; i++){
            this.remove(this.lookup(s));
        }
    },

    lookup : function(id){
        return typeof id == "object" ? id : this.get(id);
    },

    getKey : function(o){
         return o.storeId || o.id;
    }
});

Ext.data.Store = function(config){
    this.data = new Ext.util.MixedCollection(false);
    this.data.getKey = function(o){
        return o.id;
    };

    this.baseParams = {};

    this.paramNames = {
        "start" : "start",
        "limit" : "limit",
        "sort" : "sort",
        "dir" : "dir"
    };

    if(config && config.data){
        this.inlineData = config.data;
        delete config.data;
    }

    Ext.apply(this, config);

    if(this.url && !this.proxy){
        this.proxy = new Ext.data.HttpProxy({url: this.url});
    }

    if(this.reader){
        if(!this.recordType){
            this.recordType = this.reader.recordType;
        }
        if(this.reader.onMetaChange){
            this.reader.onMetaChange = this.onMetaChange.createDelegate(this);
        }
    }

    if(this.recordType){
        this.fields = this.recordType.prototype.fields;
    }
    this.modified = [];

    this.addEvents(

        'datachanged',

        'metachange',

        'add',

        'remove',

        'update',

        'clear',

        'beforeload',

        'load',

        'loadexception'
    );

    if(this.proxy){
        this.relayEvents(this.proxy,  ["loadexception"]);
    }

    this.sortToggle = {};
    if(this.sortInfo){
        this.setDefaultSort(this.sortInfo.field, this.sortInfo.direction);
    }

    Ext.data.Store.superclass.constructor.call(this);

    if(this.storeId || this.id){
        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]);
    }
};
Ext.extend(Ext.data.Store, Ext.util.Observable, {

    remoteSort : false,

    pruneModifiedRecords : false,

   lastOptions : null,

    destroy : function(){
        if(this.id){
            Ext.StoreMgr.unregister(this);
        }
        this.data = null;
        this.purgeListeners();
    },

    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);
    },

    addSorted : function(record){
        var index = this.findInsertIndex(record);
        this.insert(index, record);
    },

    remove : function(record){
        var index = this.data.indexOf(record);
        this.data.removeAt(index);
        if(this.pruneModifiedRecords){
            this.modified.remove(record);
        }
        if(this.snapshot){
            this.snapshot.remove(record);
        }
        this.fireEvent("remove", this, record, index);
    },

    removeAll : function(){
        this.data.clear();
        if(this.snapshot){
            this.snapshot.clear();
        }
        if(this.pruneModifiedRecords){
            this.modified = [];
        }
        this.fireEvent("clear", this);
    },

    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);
        }
        this.fireEvent("add", this, records, index);
    },

    indexOf : function(record){
        return this.data.indexOf(record);
    },

    indexOfId : function(id){
        return this.data.indexOfKey(id);
    },

    getById : function(id){
        return this.data.key(id);
    },

    getAt : function(index){
        return this.data.itemAt(index);
    },

    getRange : function(start, end){
        return this.data.getRange(start, end);
    },

    storeOptions : function(o){
        o = Ext.apply({}, o);
        delete o.callback;
        delete o.scope;
        this.lastOptions = o;
    },

    load : function(options){
        options = options || {};
        if(this.fireEvent("beforeload", this, options) !== false){
            this.storeOptions(options);
            var p = Ext.apply(options.params || {}, this.baseParams);
            if(this.sortInfo && this.remoteSort){
                var pn = this.paramNames;
                p[pn["sort"]] = this.sortInfo.field;
                p[pn["dir"]] = this.sortInfo.direction;
            }
            this.proxy.load(p, this.reader, this.loadRecords, this, options);
            return true;
        } else {
          return false;
        }
    },

    reload : function(options){
        this.load(Ext.applyIf(options||{}, this.lastOptions));
    },

    loadRecords : function(o, options, success){
        if(!o || success === false){
            if(success !== false){
                this.fireEvent("load", this, [], options);
            }
            if(options.callback){
                options.callback.call(options.scope || this, [], options, false);
            }
            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.data.clear();
            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);
        }
    },

    loadData : function(o, append){
        var r = this.reader.readRecords(o);
        this.loadRecords(r, {add: append}, true);
    },

    getCount : function(){
        return this.data.length || 0;
    },

    getTotalCount : function(){
        return this.totalLength || 0;
    },

    getSortState : function(){
        return this.sortInfo;
    },

    applySort : function(){
        if(this.sortInfo && !this.remoteSort){
            var s = this.sortInfo, f = s.field;
            this.sortData(f, s.direction);
        }
    },

    sortData : function(f, direction){
        direction = direction || 'ASC';
        var st = this.fields.get(f).sortType;
        var fn = function(r1, r2){
            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
        };
        this.data.sort(direction, fn);
        if(this.snapshot && this.snapshot != this.data){
            this.snapshot.sort(direction, fn);
        }
    },

    setDefaultSort : function(field, dir){
        dir = dir ? dir.toUpperCase() : "ASC";
        this.sortInfo = {field: field, direction: dir};
        this.sortToggle[field] = dir;
    },

    sort : function(fieldName, dir){
        var f = this.fields.get(fieldName);
        if(!f){
            return false;
        }
        if(!dir){
            if(this.sortInfo && this.sortInfo.field == f.name){
                dir = (this.sortToggle[f.name] || "ASC").toggle("ASC", "DESC");
            }else{
                dir = f.sortDir;
            }
        }
        var st = (this.sortToggle) ? this.sortToggle[f.name] : null;
        var si = (this.sortInfo) ? this.sortInfo : null;

        this.sortToggle[f.name] = dir;
        this.sortInfo = {field: f.name, direction: dir};
        if(!this.remoteSort){
            this.applySort();
            this.fireEvent("datachanged", this);
        }else{
            if (!this.load(this.lastOptions)) {
                if (st) {
                    this.sortToggle[f.name] = st;
                }
                if (si) {
                    this.sortInfo = si;
                }
            }
        }
    },

    each : function(fn, scope){
        this.data.each(fn, scope);
    },

    getModifiedRecords : function(){
        return this.modified;
    },

    createFilterFn : function(property, value, anyMatch, caseSensitive){
        if(Ext.isEmpty(value, false)){
            return false;
        }
        value = this.data.createValueMatcher(value, anyMatch, caseSensitive);
        return function(r){
            return value.test(r.data[property]);
        };
    },

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

    filter : function(property, value, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive);
        return fn ? this.filterBy(fn) : this.clearFilter();
    },

    filterBy : function(fn, scope){
        this.snapshot = this.snapshot || this.data;
        this.data = this.queryBy(fn, scope||this);
        this.fireEvent("datachanged", this);
    },

    query : function(property, value, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive);
        return fn ? this.queryBy(fn) : this.data.clone();
    },

    queryBy : function(fn, scope){
        var data = this.snapshot || this.data;
        return data.filterBy(fn, scope||this);
    },

    find : function(property, value, start, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive);
        return fn ? this.data.findIndexBy(fn, null, start) : -1;
    },

    findBy : function(fn, scope, start){
        return this.data.findIndexBy(fn, scope, start);
    },

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

    clearFilter : function(suppressEvent){
        if(this.isFiltered()){
            this.data = this.snapshot;
            delete this.snapshot;
            if(suppressEvent !== true){
                this.fireEvent("datachanged", this);
            }
        }
    },

    isFiltered : function(){
        return this.snapshot && this.snapshot != this.data;
    },

    afterEdit : function(record){
        if(this.modified.indexOf(record) == -1){
            this.modified.push(record);
        }
        this.fireEvent("update", this, record, Ext.data.Record.EDIT);
    },

    afterReject : function(record){
        this.modified.remove(record);
        this.fireEvent("update", this, record, Ext.data.Record.REJECT);
    },

    afterCommit : function(record){
        this.modified.remove(record);
        this.fireEvent("update", this, record, 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();
        }
    },

    rejectChanges : function(){
        var m = this.modified.slice(0);
        this.modified = [];
        for(var i = 0, len = m.length; i < len; i++){
            m[i].reject();
        }
    },

    onMetaChange : function(meta, rtype, o){
        this.recordType = rtype;
        this.fields = rtype.prototype.fields;
        delete this.snapshot;
        this.sortInfo = meta.sortInfo;
        this.modified = [];
        this.fireEvent('metachange', this, this.reader.meta);
    },

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

Ext.data.SimpleStore = function(config){
    Ext.data.SimpleStore.superclass.constructor.call(this, Ext.apply(config, {
        reader: new Ext.data.ArrayReader({
                id: config.id
            },
            Ext.data.Record.create(config.fields)
        )
    }));
};
Ext.extend(Ext.data.SimpleStore, Ext.data.Store, {
    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.SimpleStore.superclass.loadData.call(this, data, append);
    }
});

Ext.data.JsonStore = function(c){
    Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(c, {
        proxy: !c.data ? new Ext.data.HttpProxy({url: c.url}) : undefined,
        reader: new Ext.data.JsonReader(c, c.fields)
    }));
};
Ext.extend(Ext.data.JsonStore, Ext.data.Store);

Ext.data.Field = function(config){
    if(typeof config == "string"){
        config = {name: config};
    }
    Ext.apply(this, config);

    if(!this.type){
        this.type = "auto";
    }

    var st = Ext.data.SortTypes;

    if(typeof this.sortType == "string"){
        this.sortType = st[this.sortType];
    }

    if(!this.sortType){
        switch(this.type){
            case "string":
                this.sortType = st.asUCString;
                break;
            case "date":
                this.sortType = st.asDate;
                break;
            default:
                this.sortType = st.none;
        }
    }

    var stripRe = /[\$,%]/g;

    if(!this.convert){
        var cv, dateFormat = this.dateFormat;
        switch(this.type){
            case "":
            case "auto":
            case undefined:
                cv = function(v){ return v; };
                break;
            case "string":
                cv = function(v){ return (v === undefined || v === null) ? '' : String(v); };
                break;
            case "int":
                cv = function(v){
                    return v !== undefined && v !== null && v !== '' ?
                           parseInt(String(v).replace(stripRe, ""), 10) : '';
                    };
                break;
            case "float":
                cv = function(v){
                    return v !== undefined && v !== null && v !== '' ?
                           parseFloat(String(v).replace(stripRe, ""), 10) : '';
                    };
                break;
            case "bool":
            case "boolean":
                cv = function(v){ return v === true || v === "true" || v == 1; };
                break;
            case "date":
                cv = function(v){
                    if(!v){
                        return '';
                    }
                    if(Ext.isDate(v)){
                        return v;
                    }
                    if(dateFormat){
                        if(dateFormat == "timestamp"){
                            return new Date(v*1000);
                        }
                        if(dateFormat == "time"){
                            return new Date(parseInt(v, 10));
                        }
                        return Date.parseDate(v, dateFormat);
                    }
                    var parsed = Date.parse(v);
                    return parsed ? new Date(parsed) : null;
                };
             break;

        }
        this.convert = cv;
    }
};

Ext.data.Field.prototype = {
    dateFormat: null,
    defaultValue: "",
    mapping: null,
    sortType : null,
    sortDir : "ASC"
};

Ext.data.DataReader = function(meta, recordType){

    this.meta = meta;
    this.recordType = Ext.isArray(recordType) ?
        Ext.data.Record.create(recordType) : recordType;
};

Ext.data.DataReader.prototype = {

};

Ext.data.DataProxy = function(){
    this.addEvents(

        'beforeload',

        'load',

        'loadexception'
    );
    Ext.data.DataProxy.superclass.constructor.call(this);
};

Ext.extend(Ext.data.DataProxy, Ext.util.Observable);

Ext.data.MemoryProxy = function(data){
    Ext.data.MemoryProxy.superclass.constructor.call(this);
    this.data = data;
};

Ext.extend(Ext.data.MemoryProxy, Ext.data.DataProxy, {

    load : function(params, reader, callback, scope, arg){
        params = params || {};
        var result;
        try {
            result = reader.readRecords(this.data);
        }catch(e){
            this.fireEvent("loadexception", this, arg, null, e);
            callback.call(scope, null, arg, false);
            return;
        }
        callback.call(scope, result, arg, true);
    },

    update : function(params, records){

    }
});

Ext.data.HttpProxy = function(conn){
    Ext.data.HttpProxy.superclass.constructor.call(this);

    this.conn = conn;
    this.useAjax = !conn || !conn.events;
};

Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, {

    getConnection : function(){
        return this.useAjax ? Ext.Ajax : this.conn;
    },

    load : function(params, reader, callback, scope, arg){
        if(this.fireEvent("beforeload", this, params) !== false){
            var  o = {
                params : params || {},
                request: {
                    callback : callback,
                    scope : scope,
                    arg : arg
                },
                reader: reader,
                callback : this.loadResponse,
                scope: this
            };
            if(this.useAjax){
                Ext.applyIf(o, this.conn);
                if(this.activeRequest){
                    Ext.Ajax.abort(this.activeRequest);
                }
                this.activeRequest = Ext.Ajax.request(o);
            }else{
                this.conn.request(o);
            }
        }else{
            callback.call(scope||this, null, arg, false);
        }
    },

    loadResponse : function(o, success, response){
        delete this.activeRequest;
        if(!success){
            this.fireEvent("loadexception", this, o, response);
            o.request.callback.call(o.request.scope, null, o.request.arg, false);
            return;
        }
        var result;
        try {
            result = o.reader.read(response);
        }catch(e){
            this.fireEvent("loadexception", this, o, response, e);
            o.request.callback.call(o.request.scope, null, o.request.arg, false);
            return;
        }
        this.fireEvent("load", this, o, o.request.arg);
        o.request.callback.call(o.request.scope, result, o.request.arg, true);
    },

    update : function(dataSet){

    },

    updateResponse : function(dataSet){

    }
});

Ext.data.ScriptTagProxy = function(config){
    Ext.data.ScriptTagProxy.superclass.constructor.call(this);
    Ext.apply(this, config);
    this.head = document.getElementsByTagName("head")[0];
};

Ext.data.ScriptTagProxy.TRANS_ID = 1000;

Ext.extend(Ext.data.ScriptTagProxy, Ext.data.DataProxy, {

    timeout : 30000,

    callbackParam : "callback",

    nocache : true,

    load : function(params, reader, callback, scope, arg){
        if(this.fireEvent("beforeload", this, params) !== false){

            var p = Ext.urlEncode(Ext.apply(params, this.extraParams));

            var url = this.url;
            url += (url.indexOf("?") != -1 ? "&" : "?") + p;
            if(this.nocache){
                url += "&_dc=" + (new Date().getTime());
            }
            var transId = ++Ext.data.ScriptTagProxy.TRANS_ID;
            var trans = {
                id : transId,
                cb : "stcCallback"+transId,
                scriptId : "stcScript"+transId,
                params : params,
                arg : arg,
                url : url,
                callback : callback,
                scope : scope,
                reader : reader
            };
            var conn = this;

            window[trans.cb] = function(o){
                conn.handleResponse(o, 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;
        }else{
            callback.call(scope||this, null, arg, false);
        }
    },

    isLoading : function(){
        return this.trans ? true : false;
    },

    abort : function(){
        if(this.isLoading()){
            this.destroyTrans(this.trans);
        }
    },

    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{

            window[trans.cb] = function(){
                window[trans.cb] = undefined;
                try{
                    delete window[trans.cb];
                }catch(e){}
            };
        }
    },

    handleResponse : function(o, trans){
        this.trans = false;
        this.destroyTrans(trans, true);
        var result;
        try {
            result = trans.reader.readRecords(o);
        }catch(e){
            this.fireEvent("loadexception", this, o, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        this.fireEvent("load", this, o, trans.arg);
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    },

    handleFailure : function(trans){
        this.trans = false;
        this.destroyTrans(trans, false);
        this.fireEvent("loadexception", this, null, trans.arg);
        trans.callback.call(trans.scope||window, null, trans.arg, false);
    }
});

Ext.data.JsonReader = function(meta, recordType){
    meta = meta || {};
    Ext.data.JsonReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};
Ext.extend(Ext.data.JsonReader, Ext.data.DataReader, {

    read : function(response){
        var json = response.responseText;
        var o = eval("("+json+")");
        if(!o) {
            throw {message: "JsonReader.read: Json object not found"};
        }
        if(o.metaData){
            delete this.ef;
            this.meta = o.metaData;
            this.recordType = Ext.data.Record.create(o.metaData.fields);
            this.onMetaChange(this.meta, this.recordType, o);
        }
        return this.readRecords(o);
    },

    onMetaChange : function(meta, recordType, o){

    },

    simpleAccess: function(obj, subsc) {
        return obj[subsc];
    },

    getJsonAccessor: function(){
        var re = /[\[\.]/;
        return function(expr) {
            try {
                return(re.test(expr))
                    ? new Function("obj", "return obj." + expr)
                    : function(obj){
                        return obj[expr];
                    };
            } catch(e){}
            return Ext.emptyFn;
        };
    }(),

    readRecords : function(o){

        this.jsonData = o;
        var s = this.meta, Record = this.recordType,
            f = Record.prototype.fields, fi = f.items, fl = f.length;

        if (!this.ef) {
            if(s.totalProperty) {
                this.getTotal = this.getJsonAccessor(s.totalProperty);
            }
            if(s.successProperty) {
                this.getSuccess = this.getJsonAccessor(s.successProperty);
            }
            this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
            if (s.id) {
                var g = this.getJsonAccessor(s.id);
                this.getId = function(rec) {
                    var r = g(rec);
                    return (r === undefined || r === "") ? null : r;
                };
            } else {
                this.getId = function(){return null;};
            }
            this.ef = [];
            for(var i = 0; i < fl; i++){
                f = fi[i];
                var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
                this.ef[i] = this.getJsonAccessor(map);
            }
        }

        var root = this.getRoot(o), c = root.length, totalRecords = c, success = true;
        if(s.totalProperty){
            var v = parseInt(this.getTotal(o), 10);
            if(!isNaN(v)){
                totalRecords = v;
            }
        }
        if(s.successProperty){
            var v = this.getSuccess(o);
            if(v === false || v === 'false'){
                success = false;
            }
        }
        var records = [];
        for(var i = 0; i < c; i++){
            var n = root[i];
            var values = {};
            var id = this.getId(n);
            for(var j = 0; j < fl; j++){
                f = fi[j];
                var v = this.ef[j](n);
                values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue, n);
            }
            var record = new Record(values, id);
            record.json = n;
            records[i] = record;
        }
        return {
            success : success,
            records : records,
            totalRecords : totalRecords
        };
    }
});

Ext.data.XmlReader = function(meta, recordType){
    meta = meta || {};
    Ext.data.XmlReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};
Ext.extend(Ext.data.XmlReader, Ext.data.DataReader, {

    read : function(response){
        var doc = response.responseXML;
        if(!doc) {
            throw {message: "XmlReader.read: XML Document not available"};
        }
        return this.readRecords(doc);
    },

    readRecords : function(doc){

        this.xmlData = doc;
        var root = doc.documentElement || doc;
        var q = Ext.DomQuery;
        var recordType = this.recordType, fields = recordType.prototype.fields;
        var sid = this.meta.id;
        var totalRecords = 0, success = true;
        if(this.meta.totalRecords){
            totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
        }

        if(this.meta.success){
            var sv = q.selectValue(this.meta.success, root, true);
            success = sv !== false && sv !== 'false';
        }
        var records = [];
        var ns = q.select(this.meta.record, root);
        for(var i = 0, len = ns.length; i < len; i++) {
            var n = ns[i];
            var values = {};
            var id = sid ? q.selectValue(sid, n) : undefined;
            for(var j = 0, jlen = fields.length; j < jlen; j++){
                var f = fields.items[j];
                var v = q.selectValue(f.mapping || f.name, n, f.defaultValue);
                v = f.convert(v, n);
                values[f.name] = v;
            }
            var record = new recordType(values, id);
            record.node = n;
            records[records.length] = record;
        }

        return {
            success : success,
            records : records,
            totalRecords : totalRecords || records.length
        };
    }
});

Ext.data.ArrayReader = Ext.extend(Ext.data.JsonReader, {

    readRecords : function(o){
        var sid = this.meta ? this.meta.id : null;
        var recordType = this.recordType, fields = recordType.prototype.fields;
        var records = [];
        var root = o;
        for(var i = 0; i < root.length; i++){
            var n = root[i];
            var values = {};
            var 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];
                var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;
                var 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;
        }
        return {
            records : records,
            totalRecords : records.length
        };
    }
});

Ext.data.Tree = function(root){
   this.nodeHash = {};

   this.root = null;
   if(root){
       this.setRootNode(root);
   }
   this.addEvents(

       "append",

       "remove",

       "move",

       "insert",

       "beforeappend",

       "beforeremove",

       "beforemove",

       "beforeinsert"
   );

    Ext.data.Tree.superclass.constructor.call(this);
};

Ext.extend(Ext.data.Tree, Ext.util.Observable, {

    pathSeparator: "/",

    proxyNodeEvent : function(){
        return this.fireEvent.apply(this, arguments);
    },

    getRootNode : function(){
        return this.root;
    },

    setRootNode : function(node){
        this.root = node;
        node.ownerTree = this;
        node.isRoot = true;
        this.registerNode(node);
        return node;
    },

    getNodeById : function(id){
        return this.nodeHash[id];
    },

    registerNode : function(node){
        this.nodeHash[node.id] = node;
    },

    unregisterNode : function(node){
        delete this.nodeHash[node.id];
    },

    toString : function(){
        return "[Tree"+(this.id?" "+this.id:"")+"]";
    }
});

Ext.data.Node = function(attributes){

    this.attributes = attributes || {};
    this.leaf = this.attributes.leaf;

    this.id = this.attributes.id;
    if(!this.id){
        this.id = Ext.id(null, "ynode-");
        this.attributes.id = this.id;
    }

    this.childNodes = [];
    if(!this.childNodes.indexOf){
        this.childNodes.indexOf = function(o){
            for(var i = 0, len = this.length; i < len; i++){
                if(this[i] == o) return i;
            }
            return -1;
        };
    }

    this.parentNode = null;

    this.firstChild = null;

    this.lastChild = null;

    this.previousSibling = null;

    this.nextSibling = null;

    this.addEvents({

       "append" : true,

       "remove" : true,

       "move" : true,

       "insert" : true,

       "beforeappend" : true,

       "beforeremove" : true,

       "beforemove" : true,

       "beforeinsert" : true
   });
    this.listeners = this.attributes.listeners;
    Ext.data.Node.superclass.constructor.call(this);
};

Ext.extend(Ext.data.Node, Ext.util.Observable, {

    fireEvent : function(evtName){

        if(Ext.data.Node.superclass.fireEvent.apply(this, arguments) === false){
            return false;
        }

        var ot = this.getOwnerTree();
        if(ot){
            if(ot.proxyNodeEvent.apply(ot, arguments) === false){
                return false;
            }
        }
        return true;
    },

    isLeaf : function(){
        return this.leaf === true;
    },

    setFirstChild : function(node){
        this.firstChild = node;
    },

    setLastChild : function(node){
        this.lastChild = node;
    },

    isLast : function(){
       return (!this.parentNode ? true : this.parentNode.lastChild == this);
    },

    isFirst : function(){
       return (!this.parentNode ? true : this.parentNode.firstChild == this);
    },

    hasChildNodes : function(){
        return !this.isLeaf() && this.childNodes.length > 0;
    },

    appendChild : function(node){
        var multi = false;
        if(Ext.isArray(node)){
            multi = node;
        }else if(arguments.length > 1){
            multi = arguments;
        }

        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;

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

    removeChild : function(node){
        var index = this.childNodes.indexOf(node);
        if(index == -1){
            return false;
        }
        if(this.fireEvent("beforeremove", this.ownerTree, this, node) === false){
            return false;
        }

        this.childNodes.splice(index, 1);

        if(node.previousSibling){
            node.previousSibling.nextSibling = node.nextSibling;
        }
        if(node.nextSibling){
            node.nextSibling.previousSibling = node.previousSibling;
        }

        if(this.firstChild == node){
            this.setFirstChild(node.nextSibling);
        }
        if(this.lastChild == node){
            this.setLastChild(node.previousSibling);
        }

        node.setOwnerTree(null);

        node.parentNode = null;
        node.previousSibling = null;
        node.nextSibling = null;
        this.fireEvent("remove", this.ownerTree, this, node);
        return node;
    },

    insertBefore : function(node, refNode){
        if(!refNode){
            return this.appendChild(node);
        }

        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;

        if(oldParent == this && this.childNodes.indexOf(node) < index){
            refIndex--;
        }

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

    remove : function(){
        this.parentNode.removeChild(this);
        return this;
    },

    item : function(index){
        return this.childNodes[index];
    },

    replaceChild : function(newChild, oldChild){
        this.insertBefore(newChild, oldChild);
        this.removeChild(oldChild);
        return oldChild;
    },

    indexOf : function(child){
        return this.childNodes.indexOf(child);
    },

    getOwnerTree : function(){

        if(!this.ownerTree){
            var p = this;
            while(p){
                if(p.ownerTree){
                    this.ownerTree = p.ownerTree;
                    break;
                }
                p = p.parentNode;
            }
        }
        return this.ownerTree;
    },

    getDepth : function(){
        var depth = 0;
        var p = this;
        while(p.parentNode){
            ++depth;
            p = p.parentNode;
        }
        return depth;
    },

    setOwnerTree : function(tree){

        if(tree != this.ownerTree){
            if(this.ownerTree){
                this.ownerTree.unregisterNode(this);
            }
            this.ownerTree = tree;
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++) {
                cs[i].setOwnerTree(tree);
            }
            if(tree){
                tree.registerNode(this);
            }
        }
    },

    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);
    },

    bubble : function(fn, scope, args){
        var p = this;
        while(p){
            if(fn.apply(scope || p, args || [p]) === false){
                break;
            }
            p = p.parentNode;
        }
    },

    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);
            }
        }
    },

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

    findChild : function(attribute, value){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            if(cs[i].attributes[attribute] == value){
                return cs[i];
            }
        }
        return null;
    },

    findChildBy : function(fn, scope){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            if(fn.call(scope||cs[i], cs[i]) === true){
                return cs[i];
            }
        }
        return null;
    },

    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);
                }
            }
        }
    },

    contains : function(node){
        return node.isAncestor(this);
    },

    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:"")+"]";
    }
});

Ext.data.GroupingStore = Ext.extend(Ext.data.Store, {

    remoteGroup : false,

    groupOnSort:false,

    clearGrouping : function(){
        this.groupField = false;
        if(this.remoteGroup){
            if(this.baseParams){
                delete this.baseParams.groupBy;
            }
            this.reload();
        }else{
            this.applySort();
            this.fireEvent('datachanged', this);
        }
    },

    groupBy : function(field, forceRegroup){
        if(this.groupField == field && !forceRegroup){
            return;
        }
        this.groupField = field;
        if(this.remoteGroup){
            if(!this.baseParams){
                this.baseParams = {};
            }
            this.baseParams['groupBy'] = field;
        }
        if(this.groupOnSort){
            this.sort(field);
            return;
        }
        if(this.remoteGroup){
            this.reload();
        }else{
            var si = this.sortInfo || {};
            if(si.field != field){
                this.applySort();
            }else{
                this.sortData(field);
            }
            this.fireEvent('datachanged', this);
        }
    },

    applySort : function(){
        Ext.data.GroupingStore.superclass.applySort.call(this);
        if(!this.groupOnSort && !this.remoteGroup){
            var gs = this.getGroupState();
            if(gs && gs != this.sortInfo.field){
                this.sortData(this.groupField);
            }
        }
    },

    applyGrouping : function(alwaysFireChange){
        if(this.groupField !== false){
            this.groupBy(this.groupField, true);
            return true;
        }else{
            if(alwaysFireChange === true){
                this.fireEvent('datachanged', this);
            }
            return false;
        }
    },

    getGroupState : function(){
        return this.groupOnSort && this.groupField !== false ?
               (this.sortInfo ? this.sortInfo.field : undefined) : this.groupField;
    }
});

Ext.ComponentMgr = function(){
    var all = new Ext.util.MixedCollection();
    var types = {};

    return {

        register : function(c){
            all.add(c);
        },

        unregister : function(c){
            all.remove(c);
        },

        get : function(id){
            return all.get(id);
        },

        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);
                }
            });
        },

        all : all,

        registerType : function(xtype, cls){
            types[xtype] = cls;
            cls.xtype = xtype;
        },

        create : function(config, defaultType){
            return new types[config.xtype || defaultType](config);
        }
    };
}();

Ext.reg = Ext.ComponentMgr.registerType;

Ext.Component = function(config){
    config = config || {};
    if(config.initialConfig){
        if(config.isAction){                       this.baseAction = config;
        }
        config = config.initialConfig;     }else if(config.tagName || config.dom || typeof config == "string"){         config = {applyTo: config, id: config.id || config};
    }

    this.initialConfig = config;

    Ext.apply(this, config);
    this.addEvents(

        'disable',

        'enable',

        'beforeshow',

        'show',

        'beforehide',

        'hide',

        'beforerender',

        'render',

        'beforedestroy',

        'destroy',

        'beforestaterestore',

        'staterestore',

        'beforestatesave',

        '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].init(this);
            }
        }else{
            this.plugins.init(this);
        }
    }

    if(this.stateful !== false){
        this.initState(config);
    }

    if(this.applyTo){
        this.applyToMarkup(this.applyTo);
        delete this.applyTo;
    }else if(this.renderTo){
        this.render(this.renderTo);
        delete this.renderTo;
    }
};

Ext.Component.AUTO_ID = 1000;

Ext.extend(Ext.Component, Ext.util.Observable, {

    disabledClass : "x-item-disabled",

    allowDomMove : true,

    autoShow : false,

    hideMode: 'display',

    hideParent: false,

    hidden : false,

    disabled : false,

    rendered : false,

        ctype : "Ext.Component",

        actionMode : "el",

        getActionEl : function(){
        return this[this.actionMode];
    },

    initComponent : Ext.emptyFn,

    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(typeof position == 'number'){
                    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;
            }
            this.fireEvent("render", this);
            this.afterRender(this.container);
            if(this.hidden){
                this.hide();
            }
            if(this.disabled){
                this.disable();
            }

            this.initStateEvents();
        }
        return this;
    },

        initState : function(config){
        if(Ext.state.Manager){
            var state = Ext.state.Manager.get(this.stateId || this.id);
            if(state){
                if(this.fireEvent('beforestaterestore', this, state) !== false){
                    this.applyState(state);
                    this.fireEvent('staterestore', this, state);
                }
            }
        }
    },

        initStateEvents : function(){
        if(this.stateEvents){
            for(var i = 0, e; e = this.stateEvents[i]; i++){
                this.on(e, this.saveState, this, {delay:100});
            }
        }
    },

        applyState : function(state, config){
        if(state){
            Ext.apply(this, state);
        }
    },

        getState : function(){
        return null;
    },

        saveState : function(){
        if(Ext.state.Manager){
            var state = this.getState();
            if(this.fireEvent('beforestatesave', this, state) !== false){
                Ext.state.Manager.set(this.stateId || this.id, state);
                this.fireEvent('statesave', this, state);
            }
        }
    },

    applyToMarkup : function(el){
        this.allowDomMove = false;
        this.el = Ext.get(el);
        this.render(this.el.dom.parentNode);
    },

    addClass : function(cls){
        if(this.el){
            this.el.addClass(cls);
        }else{
            this.cls = this.cls ? this.cls + ' ' + cls : cls;
        }
    },

    removeClass : function(cls){
        if(this.el){
            this.el.removeClass(cls);
        }else if(this.cls){
            this.cls = this.cls.split(' ').remove(cls).join(' ');
        }
    },

            onRender : function(ct, position){
        if(this.autoEl){
            if(typeof this.autoEl == 'string'){
                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);
            }
        }
    },

        getAutoCreate : function(){
        var cfg = typeof this.autoCreate == "object" ?
                      this.autoCreate : Ext.apply({}, this.defaultAutoCreate);
        if(this.id && !cfg.id){
            cfg.id = this.id;
        }
        return cfg;
    },

        afterRender : Ext.emptyFn,

    destroy : function(){
        if(this.fireEvent("beforedestroy", this) !== false){
            this.beforeDestroy();
            if(this.rendered){
                this.el.removeAllListeners();
                this.el.remove();
                if(this.actionMode == "container"){
                    this.container.remove();
                }
            }
            this.onDestroy();
            Ext.ComponentMgr.unregister(this);
            this.fireEvent("destroy", this);
            this.purgeListeners();
        }
    },

        beforeDestroy : Ext.emptyFn,

        onDestroy  : Ext.emptyFn,

    getEl : function(){
        return this.el;
    },

    getId : function(){
        return this.id || (this.id = "ext-comp-" + (++Ext.Component.AUTO_ID));
    },

    getItemId : function(){
        return this.itemId || this.getId();
    },

    focus : function(selectText, delay){
        if(delay){
            this.focus.defer(typeof delay == 'number' ? delay : 10, this, [selectText, false]);
            return;
        }
        if(this.rendered){
            this.el.focus();
            if(selectText === true){
                this.el.dom.select();
            }
        }
        return this;
    },

        blur : function(){
        if(this.rendered){
            this.el.blur();
        }
        return this;
    },

    disable : function(){
        if(this.rendered){
            this.onDisable();
        }
        this.disabled = true;
        this.fireEvent("disable", this);
        return this;
    },

        onDisable : function(){
        this.getActionEl().addClass(this.disabledClass);
        this.el.dom.disabled = true;
    },

    enable : function(){
        if(this.rendered){
            this.onEnable();
        }
        this.disabled = false;
        this.fireEvent("enable", this);
        return this;
    },

        onEnable : function(){
        this.getActionEl().removeClass(this.disabledClass);
        this.el.dom.disabled = false;
    },

    setDisabled : function(disabled){
        this[disabled ? "disable" : "enable"]();
    },

    show: function(){
        if(this.fireEvent("beforeshow", this) !== false){
            this.hidden = false;
            if(this.autoRender){
                this.render(typeof this.autoRender == 'boolean' ? Ext.getBody() : this.autoRender);
            }
            if(this.rendered){
                this.onShow();
            }
            this.fireEvent("show", this);
        }
        return this;
    },

        onShow : function(){
        if(this.hideParent){
            this.container.removeClass('x-hide-' + this.hideMode);
        }else{
            this.getActionEl().removeClass('x-hide-' + this.hideMode);
        }

    },

    hide: function(){
        if(this.fireEvent("beforehide", this) !== false){
            this.hidden = true;
            if(this.rendered){
                this.onHide();
            }
            this.fireEvent("hide", this);
        }
        return this;
    },

        onHide : function(){
        if(this.hideParent){
            this.container.addClass('x-hide-' + this.hideMode);
        }else{
            this.getActionEl().addClass('x-hide-' + this.hideMode);
        }
    },

    setVisible: function(visible){
        if(visible) {
            this.show();
        }else{
            this.hide();
        }
        return this;
    },

    isVisible : function(){
        return this.rendered && this.getActionEl().isVisible();
    },

    cloneConfig : function(overrides){
        overrides = overrides || {};
        var id = overrides.id || Ext.id();
        var cfg = Ext.applyIf(overrides, this.initialConfig);
        cfg.id = id;         return new this.constructor(cfg);
    },

    getXType : function(){
        return this.constructor.xtype;
    },

    isXType : function(xtype, shallow){
        return !shallow ?
               ('/' + this.getXTypes() + '/').indexOf('/' + xtype + '/') != -1 :
                this.constructor.xtype == xtype;
    },

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

    findParentBy: function(fn) {
        for (var p = this.ownerCt; (p != null) && !fn(p, this); p = p.ownerCt);
        return p || null;
    },

    findParentByType: function(xtype) {
        return typeof xtype == 'function' ?
            this.findParentBy(function(p){
                return p.constructor === xtype;
            }) :
            this.findParentBy(function(p){
                return p.constructor.xtype === xtype;
            });
    }
});

Ext.reg('component', Ext.Component);

Ext.Action = function(config){
    this.initialConfig = config;
    this.items = [];
}

Ext.Action.prototype = {

    isAction : true,

    setText : function(text){
        this.initialConfig.text = text;
        this.callEach('setText', [text]);
    },

    getText : function(){
        return this.initialConfig.text;
    },

    setIconClass : function(cls){
        this.initialConfig.iconCls = cls;
        this.callEach('setIconClass', [cls]);
    },

    getIconClass : function(){
        return this.initialConfig.iconCls;
    },

    setDisabled : function(v){
        this.initialConfig.disabled = v;
        this.callEach('setDisabled', [v]);
    },

    enable : function(){
        this.setDisabled(false);
    },

    disable : function(){
        this.setDisabled(true);
    },

    isDisabled : function(){
        return this.initialConfig.disabled;
    },

    setHidden : function(v){
        this.initialConfig.hidden = v;
        this.callEach('setVisible', [!v]);
    },

    show : function(){
        this.setHidden(false);
    },

    hide : function(){
        this.setHidden(true);
    },

    isHidden : function(){
        return this.initialConfig.hidden;
    },

    setHandler : function(fn, scope){
        this.initialConfig.handler = fn;
        this.initialConfig.scope = scope;
        this.callEach('setHandler', [fn, scope]);
    },

    each : function(fn, scope){
        Ext.each(this.items, fn, scope);
    },

    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);
        }
    },

    addComponent : function(comp){
        this.items.push(comp);
        comp.on('destroy', this.removeComponent, this);
    },

    removeComponent : function(comp){
        this.items.remove(comp);
    },

    execute : function(){
        this.initialConfig.handler.apply(this.initialConfig.scope || window, arguments);
    }
};

(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.visibilityMode = 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;

var shims = [];

Ext.extend(Ext.Layer, Ext.Element, {

    getZIndex : function(){
        return this.zindex || parseInt(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);
            }
        }
    },

    sync : function(doShow){
        var sw = this.shadow;
        if(!this.updating && this.isVisible() && (sw || this.useShim)){
            var sh = this.getShim();

            var w = this.getWidth(),
                h = this.getHeight();

            var l = this.getLeft(true),
                t = this.getTop(true);

            if(sw && !this.shadowDisabled){
                if(doShow && !sw.isVisible()){
                    sw.show(this);
                }else{
                    sw.realign(l, t, w, h);
                }
                if(sh){
                    if(doShow){
                       sh.show();
                    }

                    var a = sw.adjusts, s = sh.dom.style;
                    s.left = (Math.min(l, l+a.l))+"px";
                    s.top = (Math.min(t, t+a.t))+"px";
                    s.width = (w+a.w)+"px";
                    s.height = (h+a.h)+"px";
                }
            }else if(sh){
                if(doShow){
                   sh.show();
                }
                sh.setSize(w, h);
                sh.setLeftTop(l, t);
            }

        }
    },

    destroy : function(){
        this.hideShim();
        if(this.shadow){
            this.shadow.hide();
        }
        this.removeAllListeners();
        Ext.removeNode(this.dom);
        Ext.Element.uncache(this.id);
    },

    remove : function(){
        this.destroy();
    },

    beginUpdate : function(){
        this.updating = true;
    },

    endUpdate : function(){
        this.updating = false;
        this.sync(true);
    },

    hideUnders : function(negOffset){
        if(this.shadow){
            this.shadow.hide();
        }
        this.hideShim();
    },

    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 w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;

            var moved = false;

            if((x + w) > vw+s.left){
                x = vw - w - this.shadowOffset;
                moved = true;
            }
            if((y + h) > vh+s.top){
                y = vh - h - this.shadowOffset;
                moved = true;
            }

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

    isVisible : function(){
        return this.visible;
    },

    showAction : function(){
        this.visible = true;
        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]);
        }
    },

    hideAction : function(){
        this.visible = false;
        if(this.useDisplay === true){
            this.setDisplayed(false);
        }else{
            this.setLeftTop(-10000,-10000);
        }
    },

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

    storeXY : function(xy){
        delete this.lastLT;
        this.lastXY = xy;
    },

    storeLeftTop : function(left, top){
        delete this.lastXY;
        this.lastLT = [left, top];
    },

    beforeFx : function(){
        this.beforeAction();
        return Ext.Layer.superclass.beforeFx.apply(this, arguments);
    },

    afterFx : function(){
        Ext.Layer.superclass.afterFx.apply(this, arguments);
        this.sync(this.isVisible());
    },

    beforeAction : function(){
        if(!this.updating && this.shadow){
            this.shadow.hide();
        }
    },

    setLeft : function(left){
        this.storeLeftTop(left, this.getTop(true));
        supr.setLeft.apply(this, arguments);
        this.sync();
    },

    setTop : function(top){
        this.storeLeftTop(this.getLeft(true), top);
        supr.setTop.apply(this, arguments);
        this.sync();
    },

    setLeftTop : function(left, top){
        this.storeLeftTop(left, top);
        supr.setLeftTop.apply(this, arguments);
        this.sync();
    },

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

    createCB : function(c){
        var el = this;
        return function(){
            el.constrainXY();
            el.sync(true);
            if(c){
                c();
            }
        };
    },

    setX : function(x, a, d, c, e){
        this.setXY([x, this.getY()], a, d, c, e);
    },

    setY : function(y, a, d, c, e){
        this.setXY([this.getX(), y], a, d, c, e);
    },

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

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

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

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

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

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()){         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 = {

    offset: 4,

        defaultMode: "drop",

    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";
    },

    isVisible : function(){
        return this.el ? true : false;
    },

    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";
            }
        }
    },

    hide : function(){
        if(this.el){
            this.el.dom.style.display = "none";
            Ext.Shadow.Pool.push(this.el);
            delete this.el;
        }
    },

    setZIndex : function(z){
        this.zIndex = z;
        if(this.el){
            this.el.setStyle("z-index", z);
        }
    }
};

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

Ext.BoxComponent = Ext.extend(Ext.Component, {

    initComponent : function(){
        Ext.BoxComponent.superclass.initComponent.call(this);
        this.addEvents(

            'resize',

            'move'
        );
    },

        boxReady : false,
        deferHeight: false,

    setSize : function(w, h){
                if(typeof w == 'object'){
            h = w.height;
            w = w.width;
        }
                if(!this.boxReady){
            this.width = w;
            this.height = h;
            return this;
        }

                if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
            return this;
        }
        this.lastSize = {width: w, height: h};
        var adj = this.adjustSize(w, h);
        var aw = adj.width, ah = adj.height;
        if(aw !== undefined || ah !== undefined){             var 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;
    },

    setWidth : function(width){
        return this.setSize(width);
    },

    setHeight : function(height){
        return this.setSize(undefined, height);
    },

    getSize : function(){
        return this.el.getSize();
    },

    getPosition : function(local){
        if(local === true){
            return [this.el.getLeft(true), this.el.getTop(true)];
        }
        return this.xy || this.el.getXY();
    },

    getBox : function(local){
        var s = this.el.getSize();
        if(local === true){
            s.x = this.el.getLeft(true);
            s.y = this.el.getTop(true);
        }else{
            var xy = this.xy || this.el.getXY();
            s.x = xy[0];
            s.y = xy[1];
        }
        return s;
    },

    updateBox : function(box){
        this.setSize(box.width, box.height);
        this.setPagePosition(box.x, box.y);
        return this;
    },

        getResizeEl : function(){
        return this.resizeEl || this.el;
    },

        getPositionEl : function(){
        return this.positionEl || this.el;
    },

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

    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){             return;
        }
        var p = this.el.translatePoints(x, y);
        this.setPosition(p.left, p.top);
        return this;
    },

        onRender : function(ct, position){
        Ext.BoxComponent.superclass.onRender.call(this, ct, position);
        if(this.resizeEl){
            this.resizeEl = Ext.get(this.resizeEl);
        }
        if(this.positionEl){
            this.positionEl = Ext.get(this.positionEl);
        }
    },

        afterRender : function(){
        Ext.BoxComponent.superclass.afterRender.call(this);
        this.boxReady = true;
        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);
        }
    },

    syncSize : function(){
        delete this.lastSize;
        this.setSize(this.autoWidth ? undefined : this.el.getWidth(), this.autoHeight ? undefined : this.el.getHeight());
        return this;
    },

    onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){

    },

    onPosition : function(x, y){

    },

        adjustSize : function(w, h){
        if(this.autoWidth){
            w = 'auto';
        }
        if(this.autoHeight){
            h = 'auto';
        }
        return {width : w, height: h};
    },

        adjustPosition : function(x, y){
        return {x : x, y: y};
    }
});
Ext.reg('box', Ext.BoxComponent);

Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){

    this.el = Ext.get(dragElement, true);
    this.el.dom.unselectable = "on";

    this.resizingEl = Ext.get(resizingElement, true);

    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;

    this.minSize = 0;

    this.maxSize = 2000;

    this.animate = false;

    this.useShim = false;

    this.shim = null;

    if(!existingProxy){

        this.proxy = Ext.SplitBar.createProxy(this.orientation);
    }else{
        this.proxy = Ext.get(existingProxy).dom;
    }

    this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});

    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);

    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);

    this.dragSpecs = {};

    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
    this.adapter.init(this);

    if(this.orientation == Ext.SplitBar.HORIZONTAL){

        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
        this.el.addClass("x-splitbar-h");
    }else{

        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
        this.el.addClass("x-splitbar-v");
    }

    this.addEvents(

        "resize",

        "moved",

        "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.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.dragSpecs.startSize = size;
        this.dragSpecs.startPoint = [x, y];
        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
    },

    onEndProxyDrag : function(e){
        Ext.get(this.proxy).setDisplayed(false);
        var endPoint = Ext.lib.Event.getXY(e);
        if(this.overlay){
            this.overlay.remove();
            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);
            }
        }
    },

    getAdapter : function(){
        return this.adapter;
    },

    setAdapter : function(adapter){
        this.adapter = adapter;
        this.adapter.init(this);
    },

    getMinimumSize : function(){
        return this.minSize;
    },

    setMinimumSize : function(minSize){
        this.minSize = minSize;
    },

    getMaximumSize : function(){
        return this.maxSize;
    },

    setMaximumSize : function(maxSize){
        this.maxSize = maxSize;
    },

    setCurrentSize : function(size){
        var oldAnimate = this.animate;
        this.animate = false;
        this.adapter.setElementSize(this, size);
        this.animate = oldAnimate;
    },

    destroy : function(removeEl){
        if(this.shim){
            this.shim.remove();
        }
        this.dd.unreg();
        Ext.removeNode(this.proxy);
        if(removeEl){
            this.el.remove();
        }
    }
});

Ext.SplitBar.createProxy = function(dir){
    var proxy = new Ext.Element(document.createElement("div"));
    proxy.unselectable();
    var cls = 'x-splitbar-proxy';
    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
    document.body.appendChild(proxy.dom);
    return proxy.dom;
};

Ext.SplitBar.BasicLayoutAdapter = function(){
};

Ext.SplitBar.BasicLayoutAdapter.prototype = {

    init : function(s){

    },

     getElementSize : function(s){
        if(s.orientation == Ext.SplitBar.HORIZONTAL){
            return s.resizingEl.getWidth();
        }else{
            return s.resizingEl.getHeight();
        }
    },

    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');
            }
        }
    }
};

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

Ext.SplitBar.VERTICAL = 1;

Ext.SplitBar.HORIZONTAL = 2;

Ext.SplitBar.LEFT = 1;

Ext.SplitBar.RIGHT = 2;

Ext.SplitBar.TOP = 3;

Ext.SplitBar.BOTTOM = 4;

Ext.Container = Ext.extend(Ext.BoxComponent, {

    autoDestroy: true,

    defaultType: 'panel',

        initComponent : function(){
        Ext.Container.superclass.initComponent.call(this);

        this.addEvents(

            'afterlayout',

            'beforeadd',

            'beforeremove',

            'add',

            'remove'
        );

        var items = this.items;
        if(items){
            delete this.items;
            if(Ext.isArray(items)){
                this.add.apply(this, items);
            }else{
                this.add(items);
            }
        }
    },

        initItems : function(){
        if(!this.items){
            this.items = new Ext.util.MixedCollection(false, this.getComponentId);
            this.getLayout();         }
    },

        setLayout : function(layout){
        if(this.layout && this.layout != layout){
            this.layout.setContainer(null);
        }
        this.initItems();
        this.layout = layout;
        layout.setContainer(this);
    },

        render : function(){
        Ext.Container.superclass.render.apply(this, arguments);
        if(this.layout){
            if(typeof this.layout == 'string'){
                this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
            }
            this.setLayout(this.layout);

            if(this.activeItem !== undefined){
                var item = this.activeItem;
                delete this.activeItem;
                this.layout.setActiveItem(item);
                return;
            }
        }
        if(!this.ownerCt){
            this.doLayout();
        }
        if(this.monitorResize === true){
            Ext.EventManager.onWindowResize(this.doLayout, this, [false]);
        }
    },

        getLayoutTarget : function(){
        return this.el;
    },

        getComponentId : function(comp){
        return comp.itemId || comp.id;
    },

    add : function(comp){
        if(!this.items){
            this.initItems();
        }
        var a = arguments, len = a.length;
        if(len > 1){
            for(var i = 0; i < len; i++) {
                this.add(a[i]);
            }
            return;
        }
        var c = this.lookupComponent(this.applyDefaults(comp));
        var pos = this.items.length;
        if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
            this.items.add(c);
            c.ownerCt = this;
            this.fireEvent('add', this, c, pos);
        }
        return c;
    },

    insert : function(index, comp){
        if(!this.items){
            this.initItems();
        }
        var a = arguments, len = a.length;
        if(len > 2){
            for(var i = len-1; i >= 1; --i) {
                this.insert(index, a[i]);
            }
            return;
        }
        var c = this.lookupComponent(this.applyDefaults(comp));

        if(c.ownerCt == this && this.items.indexOf(c) < index){
            --index;
        }

        if(this.fireEvent('beforeadd', this, c, index) !== false && this.onBeforeAdd(c) !== false){
            this.items.insert(index, c);
            c.ownerCt = this;
            this.fireEvent('add', this, c, index);
        }
        return c;
    },

        applyDefaults : function(c){
        if(this.defaults){
            if(typeof c == 'string'){
                c = Ext.ComponentMgr.get(c);
                Ext.apply(c, this.defaults);
            }else if(!c.events){
                Ext.applyIf(c, this.defaults);
            }else{
                Ext.apply(c, this.defaults);
            }
        }
        return c;
    },

        onBeforeAdd : function(item){
        if(item.ownerCt){
            item.ownerCt.remove(item, false);
        }
        if(this.hideBorders === true){
            item.border = (item.border === true);
        }
    },

    remove : function(comp, autoDestroy){
        var c = this.getComponent(comp);
        if(c && this.fireEvent('beforeremove', this, c) !== false){
            this.items.remove(c);
            delete c.ownerCt;
            if(autoDestroy === true || (autoDestroy !== false && this.autoDestroy)){
                c.destroy();
            }
            if(this.layout && this.layout.activeItem == c){
                delete this.layout.activeItem;
            }
            this.fireEvent('remove', this, c);
        }
        return c;
    },

    getComponent : function(comp){
        if(typeof comp == 'object'){
            return comp;
        }
        return this.items.get(comp);
    },

        lookupComponent : function(comp){
        if(typeof comp == 'string'){
            return Ext.ComponentMgr.get(comp);
        }else if(!comp.events){
            return this.createComponent(comp);
        }
        return comp;
    },

        createComponent : function(config){
        return Ext.ComponentMgr.create(config, this.defaultType);
    },

    doLayout : function(shallow){
        if(this.rendered && this.layout){
            this.layout.layout();
        }
        if(shallow !== false && 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();
                }
            }
        }
    },

    getLayout : function(){
        if(!this.layout){
            var layout = new Ext.layout.ContainerLayout(this.layoutConfig);
            this.setLayout(layout);
        }
        return this.layout;
    },

        onDestroy : function(){
        if(this.items){
            var cs = this.items.items;
            for(var i = 0, len = cs.length; i < len; i++) {
                Ext.destroy(cs[i]);
            }
        }
        if(this.monitorResize){
            Ext.EventManager.removeResizeListener(this.doLayout, this);
        }
        Ext.Container.superclass.onDestroy.call(this);
    },

    bubble : function(fn, scope, args){
        var p = this;
        while(p){
            if(fn.apply(scope || p, args || [p]) === false){
                break;
            }
            p = p.ownerCt;
        }
    },

    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 || this, args || [cs[i]]);
                    }
                }
            }
        }
    },

    findById : function(id){
        var m, ct = this;
        this.cascade(function(c){
            if(ct != c && c.id === id){
                m = c;
                return false;
            }
        });
        return m || null;
    },

    findByType : function(xtype){
        return typeof xtype == 'function' ?
            this.findBy(function(c){
                return c.constructor === xtype;
            }) :
            this.findBy(function(c){
                return c.constructor.xtype === xtype;
            });
    },

    find : function(prop, value){
        return this.findBy(function(c){
            return c[prop] === value;
        });
    },

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

Ext.Container.LAYOUTS = {};
Ext.reg('container', Ext.Container);

Ext.layout.ContainerLayout = function(config){
    Ext.apply(this, config);
};

Ext.layout.ContainerLayout.prototype = {

        monitorResize:false,
        activeItem : null,

        layout : function(){
        var target = this.container.getLayoutTarget();
        this.onLayout(this.container, target);
        this.container.fireEvent('afterlayout', this.container, this);
    },

        onLayout : function(ct, target){
        this.renderAll(ct, target);
    },

        isValidParent : function(c, target){
        var el = c.getPositionEl ? c.getPositionEl() : c.getEl();
        return el.dom.parentNode == target.dom;
    },

        renderAll : function(ct, target){
        var items = ct.items.items;
        for(var i = 0, len = items.length; i < len; i++) {
            var c = items[i];
            if(c && (!c.rendered || !this.isValidParent(c, target))){
                this.renderItem(c, i, target);
            }
        }
    },

        renderItem : function(c, position, target){
        if(c && !c.rendered){
            c.render(target, position);
            if(this.extraCls){
                var t = c.getPositionEl ? c.getPositionEl() : c;
                t.addClass(this.extraCls);
            }
            if (this.renderHidden && c != this.activeItem) {
                c.hide();
            }
        }else if(c && !this.isValidParent(c, target)){
            if(this.extraCls){
                c.addClass(this.extraCls);
            }
            if(typeof position == 'number'){
                position = target.dom.childNodes[position];
            }
            target.dom.insertBefore(c.getEl().dom, position || null);
            if (this.renderHidden && c != this.activeItem) {
                c.hide();
            }
        }
    },

        onResize: function(){
        if(this.container.collapsed){
            return;
        }
        var b = this.container.bufferResize;
        if(b){
            if(!this.resizeTask){
                this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
                this.resizeBuffer = typeof b == 'number' ? b : 100;
            }
            this.resizeTask.delay(this.resizeBuffer);
        }else{
            this.layout();
        }
    },

        setContainer : function(ct){
        if(this.monitorResize && ct != this.container){
            if(this.container){
                this.container.un('resize', this.onResize, this);
            }
            if(ct){
                ct.on('resize', this.onResize, this);
            }
        }
        this.container = ct;
    },

        parseMargins : function(v){
        var ms = v.split(' ');
        var len = ms.length;
        if(len == 1){
            ms[1] = ms[0];
            ms[2] = ms[0];
            ms[3] = ms[0];
        }
        if(len == 2){
            ms[2] = ms[0];
            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
        };
    }
};
Ext.Container.LAYOUTS['auto'] = Ext.layout.ContainerLayout;

Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, {

    monitorResize:true,

    onLayout : function(ct, target){
        Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
        if(!this.container.collapsed){
            this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
        }
    },

    setItemSize : function(item, size){
        if(item && size.height > 0){
            item.setSize(size);
        }
    }
});
Ext.Container.LAYOUTS['fit'] = Ext.layout.FitLayout;

Ext.layout.CardLayout = Ext.extend(Ext.layout.FitLayout, {

    deferredRender : false,

    renderHidden : true,

    setActiveItem : function(item){
        item = this.container.getComponent(item);
        if(this.activeItem != item){
            if(this.activeItem){
                this.activeItem.hide();
            }
            this.activeItem = item;
            item.show();
            this.layout();
        }
    },

    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;

Ext.layout.AnchorLayout = Ext.extend(Ext.layout.ContainerLayout, {

    monitorResize:true,

    getAnchorViewSize : function(ct, target){
        return target.dom == document.body ?
                   target.getViewSize() : target.getStyleSize();
    },

    onLayout : function(ct, target){
        Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);

        var size = this.getAnchorViewSize(ct, target);

        var w = size.width, h = size.height;

        if(w < 20 || h < 20){
            return;
        }

        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 = ct.items.items, len = cs.length, i, c, a, cw, ch;
        for(i = 0; i < len; i++){
            c = cs[i];
            if(c.anchor){
                a = c.anchorSpec;
                if(!a){
                    var 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), c) : undefined;
                ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;

                if(cw || ch){
                    c.setSize(cw || undefined, ch || undefined);
                }
            }
        }
    },

    parseAnchor : function(a, start, cstart){
        if(a && a != 'none'){
            var last;
            if(/^(r|right|b|bottom)$/i.test(a)){
                var diff = cstart - start;
                return function(v){
                    if(v !== last){
                        last = v;
                        return v - diff;
                    }
                }
            }else if(a.indexOf('%') != -1){
                var ratio = parseFloat(a.replace('%', ''))*.01;
                return function(v){
                    if(v !== last){
                        last = v;
                        return Math.floor(v*ratio);
                    }
                }
            }else{
                a = parseInt(a, 10);
                if(!isNaN(a)){
                    return function(v){
                        if(v !== last){
                            last = v;
                            return v + a;
                        }
                    }
                }
            }
        }
        return false;
    },

    adjustWidthAnchor : function(value, comp){
        return value;
    },

    adjustHeightAnchor : function(value, comp){
        return value;
    }

});
Ext.Container.LAYOUTS['anchor'] = Ext.layout.AnchorLayout;

Ext.layout.ColumnLayout = Ext.extend(Ext.layout.ContainerLayout, {

    monitorResize:true,

    extraCls: 'x-column',

    scrollOffset : 0,

    isValidParent : function(c, target){
        return c.getEl().dom.parentNode == this.innerCt.dom;
    },

    onLayout : function(ct, target){
        var cs = ct.items.items, len = cs.length, c, i;

        if(!this.innerCt){
            target.addClass('x-column-layout-ct');

            this.innerCt = target.createChild({cls:'x-column-inner'});
            this.innerCt.createChild({cls:'x-clear'});
        }
        this.renderAll(ct, this.innerCt);

        var size = target.getViewSize();

        if(size.width < 1 && size.height < 1){
            return;
        }

        var w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            pw = w;

        this.innerCt.setWidth(w);

        for(i = 0; i < len; i++){
            c = cs[i];
            if(!c.columnWidth){
                pw -= (c.getSize().width + c.getEl().getMargins('lr'));
            }
        }

        pw = pw < 0 ? 0 : pw;

        for(i = 0; i < len; i++){
            c = cs[i];
            if(c.columnWidth){
                c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr'));
            }
        }
    }

});

Ext.Container.LAYOUTS['column'] = Ext.layout.ColumnLayout;

Ext.layout.BorderLayout = Ext.extend(Ext.layout.ContainerLayout, {
        monitorResize:true,
        rendered : false,

        onLayout : function(ct, target){
        var collapsed;
        if(!this.rendered){
            target.position();
            target.addClass('x-border-layout-ct');
            var items = ct.items.items;
            collapsed = [];
            for(var i = 0, len = items.length; i < len; i++) {
                var c = items[i];
                var pos = c.region;
                if(c.collapsed){
                    collapsed.push(c);
                }
                c.collapsed = false;
                if(!c.rendered){
                    c.cls = c.cls ? c.cls +' x-border-panel' : 'x-border-panel';
                    c.render(target, i);
                }
                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 = target.getViewSize();
        if(size.width < 20 || size.height < 20){             if(collapsed){
                this.restoreCollapsed = collapsed;
            }
            return;
        }else if(this.restoreCollapsed){
            collapsed = this.restoreCollapsed;
            delete this.restoreCollapsed;
        }

        var w = size.width, h = size.height;
        var centerW = w, centerH = h, centerY = 0, centerX = 0;

        var n = this.north, s = this.south, west = this.west, e = this.east, c = this.center;
        if(!c){
            throw 'No center region defined in BorderLayout ' + ct.id;
        }

        if(n && n.isVisible()){
            var b = n.getSize();
            var 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()){
            var b = s.getSize();
            var m = s.getMargins();
            b.width = w - (m.left+m.right);
            b.x = m.left;
            var totalHeight = (b.height + m.top + m.bottom);
            b.y = h - totalHeight + m.top;
            centerH -= totalHeight;
            s.applyLayout(b);
        }
        if(west && west.isVisible()){
            var b = west.getSize();
            var m = west.getMargins();
            b.height = centerH - (m.top+m.bottom);
            b.x = m.left;
            b.y = centerY + m.top;
            var totalWidth = (b.width + m.left + m.right);
            centerX += totalWidth;
            centerW -= totalWidth;
            west.applyLayout(b);
        }
        if(e && e.isVisible()){
            var b = e.getSize();
            var m = e.getMargins();
            b.height = centerH - (m.top+m.bottom);
            var totalWidth = (b.width + m.left + m.right);
            b.x = w - totalWidth + m.left;
            b.y = centerY + m.top;
            centerW -= totalWidth;
            e.applyLayout(b);
        }

        var 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(var i = 0, len = collapsed.length; i < len; i++){
                collapsed[i].collapse(false);
            }
        }

        if(Ext.isIE && Ext.isStrict){             target.repaint();
        }
    }

});

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 = {

    collapsible : false,

    split:false,

    floatable: true,

    minWidth:50,

    minHeight:50,

        defaultMargins : {left:0,top:0,right:0,bottom:0},
        defaultNSCMargins : {left:5,top:5,right:5,bottom:5},
        defaultEWCMargins : {left:5,top:0,right:5,bottom:0},

    isCollapsed : false,

        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){
                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');
            }
        }
    },

        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 {
                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.collapsedEl.addClassOnOver("x-layout-collapsed-over");
                   this.collapsedEl.on("click", this.collapseClick, this);
                }
            }
        }
        return this.collapsedEl;
    },

        onExpandClick : function(e){
        if(this.isSlid){
            this.afterSlideIn();
            this.panel.expand(false);
        }else{
            this.panel.expand();
        }
    },

        onCollapseClick : function(e){
        this.panel.collapse();
    },

        beforeCollapse : function(p, animate){
        this.lastAnim = animate;
        if(this.splitEl){
            this.splitEl.hide();
        }
        this.getCollapsedEl().show();
        this.panel.el.setStyle('z-index', 100);
        this.isCollapsed = true;
        this.layout.layout();
    },

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

        beforeExpand : function(animate){
        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', 100);
    },

        onExpand : function(){
        this.isCollapsed = false;
        if(this.splitEl){
            this.splitEl.show();
        }
        this.layout.layout();
        this.panel.el.setStyle('z-index', 1);
        this.state.collapsed = false;
        this.panel.saveState();
    },

        collapseClick : function(e){
        if(this.isSlid){
           e.stopPropagation();
           this.slideIn();
        }else{
           e.stopPropagation();
           this.slideOut();
        }
    },

        onHide : function(){
        if(this.isCollapsed){
            this.getCollapsedEl().hide();
        }else if(this.splitEl){
            this.splitEl.hide();
        }
    },

        onShow : function(){
        if(this.isCollapsed){
            this.getCollapsedEl().show();
        }else if(this.splitEl){
            this.splitEl.show();
        }
    },

    isVisible : function(){
        return !this.panel.hidden;
    },

    getMargins : function(){
        return this.isCollapsed && this.cmargins ? this.cmargins : this.margins;
    },

    getSize : function(){
        return this.isCollapsed ? this.getCollapsedEl().getSize() : this.panel.getSize();
    },

    setPanel : function(panel){
        this.panel = panel;
    },

    getMinWidth: function(){
        return this.minWidth;
    },

    getMinHeight: function(){
        return this.minHeight;
    },

        applyLayoutCollapsed : function(box){
        var ce = this.getCollapsedEl();
        ce.setLeftTop(box.x, box.y);
        ce.setSize(box.width, box.height);
    },

        applyLayout : function(box){
        if(this.isCollapsed){
            this.applyLayoutCollapsed(box);
        }else{
            this.panel.setPosition(box.x, box.y);
            this.panel.setSize(box.width, box.height);
        }
    },

        beforeSlide: function(){
        this.panel.beforeEffect();
    },

        afterSlide : function(){
        this.panel.afterEffect();
    },

        initAutoHide : function(){
        if(this.autoHide !== false){
            if(!this.autoHideHd){
                var st = new Ext.util.DelayedTask(this.slideIn, this);
                this.autoHideHd = {
                    "mouseout": function(e){
                        if(!e.within(this.el, true)){
                            st.delay(500);
                        }
                    },
                    "mouseover" : function(e){
                        st.cancel();
                    },
                    scope : this
                };
            }
            this.el.on(this.autoHideHd);
        }
    },

        clearAutoHide : function(){
        if(this.autoHide !== false){
            this.el.un("mouseout", this.autoHideHd.mouseout);
            this.el.un("mouseover", this.autoHideHd.mouseover);
        }
    },

        clearMonitor : function(){
        Ext.getDoc().un("click", this.slideInIf, this);
    },

            slideOut : function(){
        if(this.isSlid || this.el.hasActiveFx()){
            return;
        }
        this.isSlid = true;
        var ts = this.panel.tools;
        if(ts && ts.toggle){
            ts.toggle.hide();
        }
        this.el.show();
        if(this.position == 'east' || this.position == 'west'){
            this.panel.setSize(undefined, this.collapsedEl.getHeight());
        }else{
            this.panel.setSize(this.collapsedEl.getWidth(), undefined);
        }
        this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
        this.el.setStyle("z-index", 102);
        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);
        }
    },

        afterSlideIn : function(){
        this.clearAutoHide();
        this.isSlid = false;
        this.clearMonitor();
        this.el.setStyle("z-index", "");
        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();
        }
    },

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

        slideInIf : function(e){
        if(!e.within(this.el)){
            this.slideIn();
        }
    },

        anchors : {
        "west" : "left",
        "east" : "right",
        "north" : "top",
        "south" : "bottom"
    },

        sanchors : {
        "west" : "l",
        "east" : "r",
        "north" : "t",
        "south" : "b"
    },

        canchors : {
        "west" : "tl-tr",
        "east" : "tr-tl",
        "north" : "tl-bl",
        "south" : "bl-tl"
    },

        getAnchor : function(){
        return this.anchors[this.position];
    },

        getCollapseAnchor : function(){
        return this.canchors[this.position];
    },

        getSlideAnchor : function(){
        return this.sanchors[this.position];
    },

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

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

Ext.layout.BorderLayout.SplitRegion = function(layout, config, pos){
    Ext.layout.BorderLayout.SplitRegion.superclass.constructor.call(this, layout, config, pos);
        this.applyLayout = this.applyFns[pos];
};

Ext.extend(Ext.layout.BorderLayout.SplitRegion, Ext.layout.BorderLayout.Region, {

    splitTip : "Drag to resize.",

    collapsibleSplitTip : "Drag to resize. Double click to hide.",

    useSplitTips : false,

        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'
        }
    },

        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);
        }
    },

        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.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);
        }
    },

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

        getHMaxSize : function(){
         var cmax = this.maxSize || 10000;
         var center = this.layout.center;
         return Math.min(cmax, (this.el.getWidth()+center.el.getWidth())-center.getMinWidth());
    },

        getVMaxSize : function(){
        var cmax = this.maxSize || 10000;
        var center = this.layout.center;
        return Math.min(cmax, (this.el.getHeight()+center.el.getHeight())-center.getMinHeight());
    },

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

    getSplitBar : function(){
        return this.split;
    }
});

Ext.Container.LAYOUTS['border'] = Ext.layout.BorderLayout;

Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {

    labelSeparator : ':',

        getAnchorViewSize : function(ct, target){
        return ct.body.getStyleSize();
    },

        setContainer : function(ct){
        Ext.layout.FormLayout.superclass.setContainer.call(this, ct);

        if(ct.labelAlign){
            ct.addClass('x-form-label-'+ct.labelAlign);
        }

        if(ct.hideLabels){
            this.labelStyle = "display:none";
            this.elementStyle = "padding-left:0;";
            this.labelAdjust = 0;
        }else{
            this.labelSeparator = ct.labelSeparator || this.labelSeparator;
            ct.labelWidth = ct.labelWidth || 100;
            if(typeof ct.labelWidth == 'number'){
                var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
                this.labelAdjust = ct.labelWidth+pad;
                this.labelStyle = "width:"+ct.labelWidth+"px;";
                this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
            }
            if(ct.labelAlign == 'top'){
                this.labelStyle = "width:auto;";
                this.labelAdjust = 0;
                this.elementStyle = "padding-left:0;";
            }
        }

        if(!this.fieldTpl){
                        var t = new Ext.Template(
                '
',
                    '',
                    '
',
                    '
',
                '
'
            );
            t.disableFormats = true;
            t.compile();
            Ext.layout.FormLayout.prototype.fieldTpl = t;
        }
    },

        renderItem : function(c, position, target){
        if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
            var args = [
                   c.id, c.fieldLabel,
                   c.labelStyle||this.labelStyle||'',
                   this.elementStyle||'',
                   typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                   (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
                   c.clearCls || 'x-form-clear-left'
            ];
            if(typeof position == 'number'){
                position = target.dom.childNodes[position] || null;
            }
            if(position){
                this.fieldTpl.insertBefore(position, args);
            }else{
                this.fieldTpl.append(target, args);
            }
            c.render('x-form-el-'+c.id);
        }else {
            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
        }
    },

        adjustWidthAnchor : function(value, comp){
        return value - (comp.isFormField  ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
    },

        isValidParent : function(c, target){
        return true;
    }

});

Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;

Ext.layout.Accordion = Ext.extend(Ext.layout.FitLayout, {

    fill : true,

    autoWidth : true,

    titleCollapse : true,

    hideCollapseTool : false,

    collapseFirst : false,

    animate : false,

    sequence : false,

    activeOnTop : false,

    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.activeItem = c;
        }else if(this.activeItem){
            c.collapsed = true;
        }
        Ext.layout.Accordion.superclass.renderItem.apply(this, arguments);
        c.header.addClass('x-accordion-hd');
        c.on('beforeexpand', this.beforeExpand, this);
    },

    beforeExpand : function(p, anim){
        var ai = this.activeItem;
        if(ai){
            if(this.sequence){
                delete this.activeItem;
                ai.collapse({callback:function(){
                    p.expand(anim || true);
                }, scope: this});
                return false;
            }else{
                ai.collapse(this.animate);
            }
        }
        this.activeItem = p;
        if(this.activeOnTop){
            p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
        }
        this.layout();
    },

    setItemSize : function(item, size){
        if(this.fill && item){
            var items = this.container.items.items;
            var hh = 0;
            for(var i = 0, len = items.length; i < len; i++){
                var p = items[i];
                if(p != item){
                    hh += (p.getSize().height - p.bwrap.getHeight());
                }
            }
            size.height -= hh;
            item.setSize(size);
        }
    }
});
Ext.Container.LAYOUTS['accordion'] = Ext.layout.Accordion;

Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {

    monitorResize:false,

    setContainer : function(ct){
        Ext.layout.TableLayout.superclass.setContainer.call(this, ct);

        this.currentRow = 0;
        this.currentColumn = 0;
        this.cells = [];
    },

    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(
                {tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, null, true);

            this.renderAll(ct, target);
        }
    },

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

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

    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];
    },

    renderItem : function(c, position, target){
        if(c && !c.rendered){
            c.render(this.getNextCell(c));
        }
    },

    isValidParent : function(c, target){
        return true;
    }

});

Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;

Ext.layout.AbsoluteLayout = Ext.extend(Ext.layout.AnchorLayout, {
    extraCls: 'x-abs-layout-item',
    isForm: false,

    setContainer : function(ct){
        Ext.layout.AbsoluteLayout.superclass.setContainer.call(this, ct);
        if(ct.isXType('form')){
            this.isForm = true;
        }
    },

    onLayout : function(ct, target){
        if(this.isForm){ ct.body.position(); } else { target.position(); }
        Ext.layout.AbsoluteLayout.superclass.onLayout.call(this, ct, target);
    },

    getAnchorViewSize : function(ct, target){
        return this.isForm ? ct.body.getStyleSize() : Ext.layout.AbsoluteLayout.superclass.getAnchorViewSize.call(this, ct, target);
    },

    isValidParent : function(c, target){
        return this.isForm ? true : Ext.layout.AbsoluteLayout.superclass.isValidParent.call(this, c, target);
    },

    adjustWidthAnchor : function(value, comp){
        return value ? value - comp.getPosition(true)[0] : value;
    },

    adjustHeightAnchor : function(value, comp){
        return  value ? value - comp.getPosition(true)[1] : value;
    }

});
Ext.Container.LAYOUTS['absolute'] = Ext.layout.AbsoluteLayout;

Ext.Viewport = Ext.extend(Ext.Container, {

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

Ext.Panel = Ext.extend(Ext.Container, {

    baseCls : 'x-panel',

    collapsedCls : 'x-panel-collapsed',

    maskDisabled: true,

    animCollapse: Ext.enableFx,

    headerAsText: true,

    buttonAlign: 'right',

    collapsed : false,

    collapseFirst: true,

    minButtonWidth:75,

    elements : 'body',

                toolTarget : 'header',
    collapseEl : 'bwrap',
    slideAnchor : 't',

        deferHeight: true,
        expandDefaults: {
        duration:.25
    },
        collapseDefaults: {
        duration:.25
    },

        initComponent : function(){
        Ext.Panel.superclass.initComponent.call(this);

        this.addEvents(

            'bodyresize',

            'titlechange',

            'collapse',

            'expand',

            'beforecollapse',

            'beforeexpand',

            'beforeclose',

            'close',

            'activate',

            'deactivate'
        );

                if(this.tbar){
            this.elements += ',tbar';
            if(typeof this.tbar == 'object'){
                this.topToolbar = this.tbar;
            }
            delete this.tbar;
        }
        if(this.bbar){
            this.elements += ',bbar';
            if(typeof this.bbar == 'object'){
                this.bottomToolbar = this.bbar;
            }
            delete this.bbar;
        }

        if(this.header === true){
            this.elements += ',header';
            delete this.header;
        }else if(this.title && this.header !== false){
            this.elements += ',header';
        }

        if(this.footer === true){
            this.elements += ',footer';
            delete this.footer;
        }

        if(this.buttons){
            var btns = this.buttons;

            this.buttons = [];
            for(var i = 0, len = btns.length; i < len; i++) {
                if(btns[i].render){                     this.buttons.push(btns[i]);
                }else{
                    this.addButton(btns[i]);
                }
            }
        }
        if(this.autoLoad){
            this.on('render', this.doAutoLoad, this, {delay:10});
        }
    },

        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));
            }
        }
    },

        onRender : function(ct, position){
        Ext.Panel.superclass.onRender.call(this, ct, position);

        this.createClasses();

        if(this.el){             this.el.addClass(this.baseCls);
            this.header = this.el.down('.'+this.headerCls);
            this.bwrap = this.el.down('.'+this.bwrapCls);
            var cp = this.bwrap ? this.bwrap : this.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;
        }else{
            this.el = ct.createChild({
                id: this.id,
                cls: this.baseCls
            }, position);
        }
        var el = this.el, d = el.dom;

        if(this.cls){
            this.el.addClass(this.cls);
        }

        if(this.buttons){
            this.elements += ',footer';
        }

                if(this.frame){
            el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls));

            this.createElement('header', d.firstChild.firstChild.firstChild);
            this.createElement('bwrap', d);

                        var 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';
            }
        }else{
            this.createElement('header', d);
            this.createElement('bwrap', d);

                        var 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(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');
        }

        if(this.bodyStyle){
           this.body.applyStyles(this.bodyStyle);
        }

        this.bwrap.enableDisplayMode('block');

        if(this.header){
            this.header.unselectable();

                        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.tools = this.tools ? this.tools.slice(0) : [];
            if(!this.hideCollapseTool){
                this.tools[this.collapseFirst?'unshift':'push']({
                    id: 'toggle',
                    handler : this.toggleCollapse,
                    scope: this
                });
            }
            if(this.titleCollapse && this.header){
                this.header.on('click', this.toggleCollapse, this);
                this.header.setStyle('cursor', 'pointer');
            }
        }
        if(this.tools){
            var ts = this.tools;
            this.tools = {};
            this.addTool.apply(this, ts);
        }else{
            this.tools = {};
        }

        if(this.buttons && this.buttons.length > 0){
                        var tb = this.footer.createChild({cls:'x-panel-btns-ct', cn: {
                cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,
                html:'
'
            }}, null, true);
            var tr = tb.getElementsByTagName('tr')[0];
            for(var i = 0, len = this.buttons.length; i < len; i++) {
                var b = this.buttons[i];
                var td = document.createElement('td');
                td.className = 'x-panel-btn-td';
                b.render(tr.appendChild(td));
            }
        }

        if(this.tbar && this.topToolbar){
            if(Ext.isArray(this.topToolbar)){
                this.topToolbar = new Ext.Toolbar(this.topToolbar);
            }
            this.topToolbar.render(this.tbar);
        }
        if(this.bbar && this.bottomToolbar){
            if(Ext.isArray(this.bottomToolbar)){
                this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
            }
            this.bottomToolbar.render(this.bbar);
        }
    },

    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.dom;
                var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null;
                if(img){
                    Ext.fly(img).replaceClass(old, this.iconCls);
                }else{
                    Ext.DomHelper.insertBefore(hd.firstChild, {
                        tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls
                    });
                 }
            }
        }
    },

        makeFloating : function(cfg){
        this.floating = true;
        this.el = new Ext.Layer(
            typeof cfg == 'object' ? cfg : {
                shadow: this.shadow !== undefined ? this.shadow : 'sides',
                shadowOffset: this.shadowOffset,
                constrain:false,
                shim: this.shim === false ? false : undefined
            }, this.el
        );
    },

    getTopToolbar : function(){
        return this.topToolbar;
    },

    getBottomToolbar : function(){
        return this.bottomToolbar;
    },

    addButton : function(config, handler, scope){
        var bc = {
            handler: handler,
            scope: scope,
            minWidth: this.minButtonWidth,
            hideParent:true
        };
        if(typeof config == "string"){
            bc.text = config;
        }else{
            Ext.apply(bc, config);
        }
        var btn = new Ext.Button(bc);
        btn.ownerCt = this;
        if(!this.buttons){
            this.buttons = [];
        }
        this.buttons.push(btn);
        return btn;
    },

        addTool : function(){
        if(!this[this.toolTarget]) {             return;
        }
        if(!this.toolTemplate){
                        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], overCls = 'x-tool-'+tc.id+'-over';
            var t = this.toolTemplate.insertFirst(this[this.toolTarget], tc, true);
            this.tools[tc.id] = t;
            t.enableDisplayMode('block');
            t.on('click', this.createToolHandler(t, tc, overCls, this));
            if(tc.on){
                t.on(tc.on);
            }
            if(tc.hidden){
                t.hide();
            }
            if(tc.qtip){
                if(typeof tc.qtip == 'object'){
                    Ext.QuickTips.register(Ext.apply({
                          target: t.id
                    }, tc.qtip));
                } else {
                    t.dom.qtip = tc.qtip;
                }
            }
            t.addClassOnOver(overCls);
        }
    },

        onShow : function(){
        if(this.floating){
            return this.el.show();
        }
        Ext.Panel.superclass.onShow.call(this);
    },

        onHide : function(){
        if(this.floating){
            return this.el.hide();
        }
        Ext.Panel.superclass.onHide.call(this);
    },

        createToolHandler : function(t, tc, overCls, panel){
        return function(e){
            t.removeClass(overCls);
            e.stopEvent();
            if(tc.handler){
                tc.handler.call(tc.scope || t, e, t, panel);
            }
        };
    },

        afterRender : function(){
        if(this.fromMarkup && this.height === undefined && !this.autoHeight){
            this.height = this.el.getHeight();
        }
        if(this.floating && !this.hidden && !this.initHidden){
            this.el.show();
        }
        if(this.title){
            this.setTitle(this.title);
        }
        this.setAutoScroll();
        if(this.html){
            this.body.update(typeof this.html == 'object' ?
                             Ext.DomHelper.markup(this.html) :
                             this.html);
            delete this.html;
        }
        if(this.contentEl){
            var ce = Ext.getDom(this.contentEl);
            Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
            this.body.dom.appendChild(ce);
        }
        if(this.collapsed){
            this.collapsed = false;
            this.collapse(false);
        }
        Ext.Panel.superclass.afterRender.call(this);         this.initEvents();
    },

        setAutoScroll : function(){
        if(this.rendered && this.autoScroll){
            this.body.setOverflow('auto');
        }
    },

        getKeyMap : function(){
        if(!this.keyMap){
            this.keyMap = new Ext.KeyMap(this.el, this.keys);
        }
        return this.keyMap;
    },

        initEvents : function(){
        if(this.keys){
            this.getKeyMap();
        }
        if(this.draggable){
            this.initDraggable();
        }
    },

        initDraggable : function(){
        this.dd = new Ext.Panel.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
    },

        beforeEffect : function(){
        if(this.floating){
            this.el.beforeAction();
        }
        this.el.addClass('x-panel-animated');
    },

        afterEffect : function(){
        this.syncShadow();
        this.el.removeClass('x-panel-animated');
    },

        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 {             o.callback = function(){
                cb.call(scope);
                Ext.callback(a.callback, a.scope);
            };
        }
        return Ext.applyIf(o, a);
    },

    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();
        this.onCollapse(doAnim, animate);
        return this;
    },

        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.afterCollapse();
        }
    },

        afterCollapse : function(){
        this.collapsed = true;
        this.el.addClass(this.collapsedCls);
        this.afterEffect();
        this.fireEvent('collapse', 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();
        this.onExpand(doAnim, animate);
        return this;
    },

        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.afterExpand();
        }
    },

        afterExpand : function(){
        this.collapsed = false;
        this.afterEffect();
        this.fireEvent('expand', this);
    },

    toggleCollapse : function(animate){
        this[this.collapsed ? 'expand' : 'collapse'](animate);
        return this;
    },

        onDisable : function(){
        if(this.rendered && this.maskDisabled){
            this.el.mask();
        }
        Ext.Panel.superclass.onDisable.call(this);
    },

        onEnable : function(){
        if(this.rendered && this.maskDisabled){
            this.el.unmask();
        }
        Ext.Panel.superclass.onEnable.call(this);
    },

        onResize : function(w, h){
        if(w !== undefined || h !== undefined){
            if(!this.collapsed){
                if(typeof w == 'number'){
                    this.body.setWidth(
                            this.adjustBodyWidth(w - this.getFrameWidth()));
                }else if(w == 'auto'){
                    this.body.setWidth(w);
                }

                if(typeof h == 'number'){
                    this.body.setHeight(
                            this.adjustBodyHeight(h - this.getFrameHeight()));
                }else if(h == 'auto'){
                    this.body.setHeight(h);
                }
            }else{
                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.doLayout();
                    }, this, {single:true});
                }
            }
            this.fireEvent('bodyresize', this, w, h);
        }
        this.syncShadow();
    },

        adjustBodyHeight : function(h){
        return h;
    },

        adjustBodyWidth : function(w){
        return w;
    },

        onPosition : function(){
        this.syncShadow();
    },

        onDestroy : function(){
        if(this.tools){
            for(var k in this.tools){
                Ext.destroy(this.tools[k]);
            }
        }
        if(this.buttons){
            for(var b in this.buttons){
                Ext.destroy(this.buttons[b]);
            }
        }
        Ext.destroy(
            this.topToolbar,
            this.bottomToolbar
        );
        Ext.Panel.superclass.onDestroy.call(this);
    },

    getFrameWidth : function(){
        var w = this.el.getFrameWidth('lr');

        if(this.frame){
            var l = this.bwrap.dom.firstChild;
            w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r'));
            var mc = this.bwrap.dom.firstChild.firstChild.firstChild;
            w += Ext.fly(mc).getFrameWidth('lr');
        }
        return w;
    },

    getFrameHeight : function(){
        var h  = this.el.getFrameWidth('tb');
        h += (this.tbar ? this.tbar.getHeight() : 0) +
             (this.bbar ? this.bbar.getHeight() : 0);

        if(this.frame){
            var hd = this.el.dom.firstChild;
            var ft = this.bwrap.dom.lastChild;
            h += (hd.offsetHeight + ft.offsetHeight);
            var mc = this.bwrap.dom.firstChild.firstChild.firstChild;
            h += Ext.fly(mc).getFrameWidth('tb');
        }else{
            h += (this.header ? this.header.getHeight() : 0) +
                (this.footer ? this.footer.getHeight() : 0);
        }
        return h;
    },

    getInnerWidth : function(){
        return this.getSize().width - this.getFrameWidth();
    },

    getInnerHeight : function(){
        return this.getSize().height - this.getFrameHeight();
    },

        syncShadow : function(){
        if(this.floating){
            this.el.sync(true);
        }
    },

        getLayoutTarget : function(){
        return this.body;
    },

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

    getUpdater : function(){
        return this.body.getUpdater();
    },

    load : function(){
        var um = this.body.getUpdater();
        um.update.apply(um, arguments);
        return this;
    },

        beforeDestroy : function(){
        Ext.Element.uncache(
            this.header,
            this.tbar,
            this.bbar,
            this.footer,
            this.body
        );
    },

        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';
    },

        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);
        }
    },

        doAutoLoad : function(){
        this.body.load(
            typeof this.autoLoad == 'object' ?
                this.autoLoad : {url: this.autoLoad});
    }

});
Ext.reg('panel', Ext.Panel);

Ext.Window = Ext.extend(Ext.Panel, {

    baseCls : 'x-window',

    resizable:true,

    draggable:true,

    closable : true,

    constrain:false,

    constrainHeader:false,

    plain:false,

    minimizable : false,

    maximizable : false,

    minHeight: 100,

    minWidth: 200,

    expandOnShow: true,

    closeAction: 'close',

        collapsible:false,

        initHidden : true,

    monitorResize : true,

    elements: 'header,body',

    frame:true,

    floating:true,

        initComponent : function(){
        Ext.Window.superclass.initComponent.call(this);
        this.addEvents(

            'resize',

            'maximize',

            'minimize',

            'restore'
        );
    },

        getState : function(){
        return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox());
    },

        onRender : function(ct, position){
        Ext.Window.superclass.onRender.call(this, ct, position);

        if(this.plain){
            this.el.addClass('x-window-plain');
        }

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

        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
            });
            this.resizer.window = this;
            this.resizer.on("beforeresize", this.beforeResize, this);
        }

        if(this.draggable){
            this.header.addClass("x-window-draggable");
        }
        this.initTools();

        this.el.on("mousedown", this.toFront, this);
        this.manager = this.manager || Ext.WindowMgr;
        this.manager.register(this);
        this.hidden = true;
        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(){
        this.dd = new Ext.Window.DD(this);
    },

       onEsc : function(){
        this[this.closeAction]();
    },

        beforeDestroy : function(){
        Ext.destroy(
            this.resizer,
            this.dd,
            this.proxy,
            this.mask
        );
        Ext.Window.superclass.beforeDestroy.call(this);
    },

        onDestroy : function(){
        if(this.manager){
            this.manager.unregister(this);
        }
        Ext.Window.superclass.onDestroy.call(this);
    },

        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
            });
            this.header.on('dblclick', this.toggleMaximize, this);
        }
        if(this.closable){
            this.addTool({
                id: 'close',
                handler: this[this.closeAction].createDelegate(this, [])
            });
        }
    },

        resizerAction : function(){
        var box = this.proxy.getBox();
        this.proxy.hide();
        this.window.handleResize(box);
        return box;
    },

        beforeResize : function(){
        this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40);         this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40);
        this.resizeBox = this.el.getBox();
    },

        updateHandles : function(){
        if(Ext.isIE && this.resizer){
            this.resizer.syncHandleHeight();
            this.el.repaint();
        }
    },

        handleResize : function(box){
        var rz = this.resizeBox;
        if(rz.x != box.x || rz.y != box.y){
            this.updateBox(box);
        }else{
            this.setSize(box);
        }
        this.focus();
        this.updateHandles();
        this.saveState();
        this.fireEvent("resize", this, box.width, box.height);
    },

    focus : function(){
        var f = this.focusEl, db = this.defaultButton, t = typeof db;
        if(t != 'undefined'){
            if(t == 'number'){
                f = this.buttons[db];
            }else if(t == 'string'){
                f = Ext.getCmp(db);
            }else{
                f = db;
            }
        }
        f.focus.defer(10, f);
    },

    setAnimateTarget : function(el){
        el = Ext.get(el);
        this.animateTarget = el;
    },

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

    show : function(animateTarget, cb, scope){
        if(!this.rendered){
            this.render(Ext.getBody());
        }
        if(this.hidden === false){
            this.toFront();
            return;
        }
        if(this.fireEvent("beforeshow", this) === false){
            return;
        }
        if(cb){
            this.on('show', cb, scope, {single:true});
        }
        this.hidden = false;
        if(animateTarget !== undefined){
            this.setAnimateTarget(animateTarget);
        }
        this.beforeShow();
        if(this.animateTarget){
            this.animShow();
        }else{
            this.afterShow();
        }
    },

        afterShow : function(){
        this.proxy.hide();
        this.el.setStyle('display', 'block');
        this.el.show();
        if(this.maximized){
            this.fitContainer();
        }
        if(Ext.isMac && Ext.isGecko){         	this.cascade(this.setAutoScroll);
        }

        if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
            Ext.EventManager.onWindowResize(this.onWindowResize, this);
        }
        this.doConstrain();
        if(this.layout){
            this.doLayout();
        }
        if(this.keyMap){
            this.keyMap.enable();
        }
        this.toFront();
        this.updateHandles();
        this.fireEvent("show", this);
    },

        animShow : function(){
        this.proxy.show();
        this.proxy.setBox(this.animateTarget.getBox());
        this.proxy.setOpacity(0);
        var b = this.getBox(false);
        b.callback = this.afterShow;
        b.scope = this;
        b.duration = .25;
        b.easing = 'easeNone';
        b.opacity = .5;
        b.block = true;
        this.el.setStyle('display', 'none');
        this.proxy.shift(b);
    },

    hide : function(animateTarget, cb, scope){
        if(this.hidden || this.fireEvent("beforehide", this) === false){
            return;
        }
        if(cb){
            this.on('hide', cb, scope, {single:true});
        }
        this.hidden = true;
        if(animateTarget !== undefined){
            this.setAnimateTarget(animateTarget);
        }
        if(this.animateTarget){
            this.animHide();
        }else{
            this.el.hide();
            this.afterHide();
        }
    },

        afterHide : function(){
        this.proxy.hide();
        if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
            Ext.EventManager.removeResizeListener(this.onWindowResize, this);
        }
        if(this.modal){
            this.mask.hide();
            Ext.getBody().removeClass("x-body-masked");
        }
        if(this.keyMap){
            this.keyMap.disable();
        }
        this.fireEvent("hide", this);
    },

        animHide : function(){
        this.proxy.setOpacity(.5);
        this.proxy.show();
        var tb = this.getBox(false);
        this.proxy.setBox(tb);
        this.el.hide();
        var b = this.animateTarget.getBox();
        b.callback = this.afterHide;
        b.scope = this;
        b.duration = .25;
        b.easing = 'easeNone';
        b.block = true;
        b.opacity = 0;
        this.proxy.shift(b);
    },

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

        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]);
            }
        }
    },

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

        unghost : function(show, matchPosition){
        if(show !== false){
            this.el.show();
            this.focus();
            if(Ext.isMac && Ext.isGecko){ 	        	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;
    },

    minimize : function(){
        this.fireEvent('minimize', this);
    },

    close : function(){
        if(this.fireEvent("beforeclose", this) !== false){
            this.hide(null, function(){
                this.fireEvent('close', this);
                this.destroy();
            }, this);
        }
    },

    maximize : function(){
        if(!this.maximized){
            this.expand(false);
            this.restoreSize = this.getSize();
            this.restorePos = this.getPosition(true);
            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);
        }
    },

    restore : function(){
        if(this.maximized){
            this.el.removeClass('x-window-maximized');
            this.tools.restore.hide();
            this.tools.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){
                this.tools.toggle.show();
            }
            this.container.removeClass('x-window-maximized-ct');

            this.doConstrain();
            this.fireEvent('restore', this);
        }
    },

    toggleMaximize : function(){
        this[this.maximized ? 'restore' : 'maximize']();
    },

        fitContainer : function(){
        var vs = this.container.getViewSize();
        this.setSize(vs.width, vs.height);
    },

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

    alignTo : function(element, position, offsets){
        var xy = this.el.getAlignToXY(element, position, offsets);
        this.setPagePosition(xy[0], xy[1]);
        return this;
    },

    anchorTo : function(el, alignment, offsets, monitorScroll, _pname){
        var action = function(){
            this.alignTo(el, alignment, offsets);
        };
        Ext.EventManager.onWindowResize(action, this);
        var tm = typeof monitorScroll;
        if(tm != 'undefined'){
            Ext.EventManager.on(window, 'scroll', action, this,
                {buffer: tm == 'number' ? monitorScroll : 50});
        }
        action.call(this);
        this[_pname] = action;
        return this;
    },

    toFront : function(){
        if(this.manager.bringToFront(this)){
            this.focus();
        }
        return this;
    },

    setActive : function(active){
        if(active){
            if(!this.maximized){
                this.el.enableShadow(true);
            }
            this.fireEvent('activate', this);
        }else{
            this.el.disableShadow();
            this.fireEvent('deactivate', this);
        }
    },

    toBack : function(){
        this.manager.sendToBack(this);
        return this;
    },

    center : function(){
        var xy = this.el.getAlignToXY(this.container, 'c-c');
        this.setPagePosition(xy[0], xy[1]);
        return this;
    }
});
Ext.reg('window', Ext.Window);

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

Ext.WindowGroup = function(){
    var list = {};
    var accessList = [];
    var front = null;

        var sortWindows = function(d1, d2){
        return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
    };

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

        var setActiveWin = function(win){
        if(win != front){
            if(front){
                front.setActive(false);
            }
            front = win;
            if(win){
                win.setActive(true);
            }
        }
    };

        var activateLast = function(){
        for(var i = accessList.length-1; i >=0; --i) {
            if(!accessList[i].hidden){
                setActiveWin(accessList[i]);
                return;
            }
        }
                setActiveWin(null);
    };

    return {

        zseed : 9000,

                register : function(win){
            list[win.id] = win;
            accessList.push(win);
            win.on('hide', activateLast);
        },

                unregister : function(win){
            delete list[win.id];
            win.un('hide', activateLast);
            accessList.remove(win);
        },

        get : function(id){
            return typeof id == "object" ? id : list[id];
        },

        bringToFront : function(win){
            win = this.get(win);
            if(win != front){
                win._lastAccess = new Date().getTime();
                orderWindows();
                return true;
            }
            return false;
        },

        sendToBack : function(win){
            win = this.get(win);
            win._lastAccess = -(new Date().getTime());
            orderWindows();
            return win;
        },

        hideAll : function(){
            for(var id in list){
                if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
                    list[id].hide();
                }
            }
        },

        getActive : function(){
            return front;
        },

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

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

Ext.WindowMgr = new Ext.WindowGroup();

Ext.dd.PanelProxy = function(panel, config){
    this.panel = panel;
    this.id = this.panel.id +'-ddproxy';
    Ext.apply(this, config);
};

Ext.dd.PanelProxy.prototype = {

    insertProxy : true,

    setStatus : Ext.emptyFn,
    reset : Ext.emptyFn,
    update : Ext.emptyFn,
    stop : Ext.emptyFn,
    sync: Ext.emptyFn,

    getEl : function(){
        return this.ghost;
    },

    getGhost : function(){
        return this.ghost;
    },

    getProxy : function(){
        return this.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;
        }
    },

    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';
        }
    },

    repair : function(xy, callback, scope){
        this.hide();
        if(typeof callback == "function"){
            callback.call(scope || this);
        }
    },

    moveProxy : function(parentNode, before){
        if(this.proxy){
            parentNode.insertBefore(this.proxy.dom, before);
        }
    }
};

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);
    this.setHandleElId(panel.header.id);
    panel.header.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);
    }
});

Ext.state.Provider = function(){

    this.addEvents("statechange");
    this.state = {};
    Ext.state.Provider.superclass.constructor.call(this);
};
Ext.extend(Ext.state.Provider, Ext.util.Observable, {

    get : function(name, defaultValue){
        return typeof this.state[name] == "undefined" ?
            defaultValue : this.state[name];
    },

    clear : function(name){
        delete this.state[name];
        this.fireEvent("statechange", this, name, null);
    },

    set : function(name, value){
        this.state[name] = value;

        this.fireEvent("statechange", this, name, value);
    },

    decodeValue : function(cookie){
        var re = /^(a|n|d|b|s|o)\:(.*)$/;
        var matches = re.exec(unescape(cookie));
        if(!matches || !matches[1]) return;
        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 = [];
                var values = v.split("^");
                for(var i = 0, len = values.length; i < len; i++){
                    all.push(this.decodeValue(values[i]));
                }
                return all;
           case "o":
                var all = {};
                var values = v.split("^");
                for(var i = 0, len = values.length; i < len; i++){
                    var kv = values[i].split("=");
                    all[kv[0]] = this.decodeValue(kv[1]);
                }
                return all;
           default:
                return v;
        }
    },

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

Ext.state.Manager = function(){
    var provider = new Ext.state.Provider();

    return {

        setProvider : function(stateProvider){
            provider = stateProvider;
        },

        get : function(key, defaultValue){
            return provider.get(key, defaultValue);
        },

         set : function(key, value){
            provider.set(key, value);
        },

        clear : function(key){
            provider.clear(key);
        },

        getProvider : function(){
            return provider;
        }
    };
}();

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));
    this.domain = null;
    this.secure = false;
    Ext.apply(this, config);
    this.state = this.readCookies();
};

Ext.extend(Ext.state.CookieProvider, Ext.state.Provider, {

    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);
    },

    clear : function(name){
        this.clearCookie(name);
        Ext.state.CookieProvider.superclass.clear.call(this, name);
    },

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

    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" : "");
    },

    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" : "");
    }
});

Ext.DataView = Ext.extend(Ext.BoxComponent, {

    selectedClass : "x-view-selected",

    emptyText : "",

    last: false,

    initComponent : function(){
        Ext.DataView.superclass.initComponent.call(this);
        if(typeof this.tpl == "string"){
            this.tpl = new Ext.XTemplate(this.tpl);
        }

        this.addEvents(

            "beforeclick",

            "click",

            "containerclick",

            "dblclick",

            "contextmenu",

            "selectionchange",

            "beforeselect"
        );

        this.all = new Ext.CompositeElementLite();
        this.selected = new Ext.CompositeElementLite();
    },

    onRender : function(){
        if(!this.el){
            this.el = document.createElement('div');
        }
        Ext.DataView.superclass.onRender.apply(this, arguments);
    },

    afterRender : function(){
        Ext.DataView.superclass.afterRender.call(this);

        this.el.on({
            "click": this.onClick,
            "dblclick": this.onDblClick,
            "contextmenu": this.onContextMenu,
            scope:this
        });

        if(this.overClass){
            this.el.on({
                "mouseover": this.onMouseOver,
                "mouseout": this.onMouseOut,
                scope:this
            });
        }

        if(this.store){
            this.setStore(this.store, true);
        }
    },

    refresh : function(){
        this.clearSelections(false, true);
        this.el.update("");
        var html = [];
        var records = this.store.getRange();
        if(records.length < 1){
            this.el.update(this.emptyText);
            this.all.clear();
            return;
        }
        this.tpl.overwrite(this.el, this.collectData(records, 0));
        this.all.fill(Ext.query(this.itemSelector, this.el.dom));
        this.updateIndexes(0);
    },

    prepareData : function(data){
        return data;
    },

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

    bufferRender : function(records){
        var div = document.createElement('div');
        this.tpl.overwrite(div, this.collectData(records));
        return Ext.query(this.itemSelector, div);
    },

    onUpdate : function(ds, record){
        var index = this.store.indexOf(record);
        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);
    },

    onAdd : function(ds, records, index){
        if(this.all.getCount() == 0){
            this.refresh();
            return;
        }
        var nodes = this.bufferRender(records, index), n;
        if(index < this.all.getCount()){
            n = this.all.item(index).insertSibling(nodes, 'before', true);
            this.all.elements.splice(index, 0, n);
        }else{
            n = this.all.last().insertSibling(nodes, 'after', true);
            this.all.elements.push(n);
        }
        this.updateIndexes(index);
    },

    onRemove : function(ds, record, index){
        this.deselect(index);
        this.all.removeElement(index, true);
        this.updateIndexes(index);
    },

    refreshNode : function(index){
        this.onUpdate(this.store, this.store.getAt(index));
    },

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

    setStore : function(store, initial){
        if(!initial && this.store){
            this.store.un("beforeload", this.onBeforeLoad, this);
            this.store.un("datachanged", this.refresh, 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){
            store = Ext.StoreMgr.lookup(store);
            store.on("beforeload", this.onBeforeLoad, this);
            store.on("datachanged", this.refresh, this);
            store.on("add", this.onAdd, this);
            store.on("remove", this.onRemove, this);
            store.on("update", this.onUpdate, this);
            store.on("clear", this.refresh, this);
        }
        this.store = store;
        if(store){
            this.refresh();
        }
    },

    findItemFromChild : function(node){
        return Ext.fly(node).findParent(this.itemSelector, this.el);
    },

    onClick : function(e){
        var item = e.getTarget(this.itemSelector, this.el);
        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.clearSelections();
            }
        }
    },

    onContextMenu : function(e){
        var item = e.getTarget(this.itemSelector, this.el);
        if(item){
            this.fireEvent("contextmenu", this, this.indexOf(item), item, e);
        }
    },

    onDblClick : function(e){
        var item = e.getTarget(this.itemSelector, this.el);
        if(item){
            this.fireEvent("dblclick", this, this.indexOf(item), item, e);
        }
    },

    onMouseOver : function(e){
        var item = e.getTarget(this.itemSelector, this.el);
        if(item && item !== this.lastItem){
            this.lastItem = item;
            Ext.fly(item).addClass(this.overClass);
        }
    },

    onMouseOut : function(e){
        if(this.lastItem){
            if(!e.within(this.lastItem, true)){
                Ext.fly(this.lastItem).removeClass(this.overClass);
                delete this.lastItem;
            }
        }
    },

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

    doSingleSelection : function(item, index, e){
        if(e.ctrlKey && this.isSelected(index)){
            this.deselect(index);
        }else{
            this.select(index, false);
        }
    },

    doMultiSelection : function(item, index, e){
        if(e.shiftKey && this.last !== false){
            var last = this.last;
            this.selectRange(last, index, e.ctrlKey);
            this.last = last;
        }else{
            if((e.ctrlKey||this.simpleSelect) && this.isSelected(index)){
                this.deselect(index);
            }else{
                this.select(index, e.ctrlKey || e.shiftKey || this.simpleSelect);
            }
        }
    },

    getSelectionCount : function(){
        return this.selected.getCount()
    },

    getSelectedNodes : function(){
        return this.selected.elements;
    },

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

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

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

    getRecord : function(node){
        return this.store.getAt(node.viewIndex);
    },

    clearSelections : function(suppressEvent, skipUpdate){
        if(this.multiSelect || this.singleSelect){
            if(!skipUpdate){
                this.selected.removeClass(this.selectedClass);
            }
            this.selected.clear();
            this.last = false;
            if(!suppressEvent){
                this.fireEvent("selectionchange", this, this.selected.elements);
            }
        }
    },

    isSelected : function(node){
        return this.selected.contains(this.getNode(node));
    },

    deselect : function(node){
        if(this.isSelected(node)){
            var 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);
        }
    },

    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);
            }
        } 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);
                    }
                }
            }
        }
    },

    selectRange : function(start, end, keepExisting){
        if(!keepExisting){
            this.clearSelections(true);
        }
        this.select(this.getNodes(start, end), true);
    },

    getNode : function(nodeInfo){
        if(typeof nodeInfo == "string"){
            return document.getElementById(nodeInfo);
        }else if(typeof nodeInfo == "number"){
            return this.all.elements[nodeInfo];
        }
        return nodeInfo;
    },

    getNodes : function(start, end){
        var ns = this.all.elements;
        start = start || 0;
        end = typeof end == "undefined" ? ns.length - 1 : end;
        var nodes = [], i;
        if(start <= end){
            for(i = start; i <= end; i++){
                nodes.push(ns[i]);
            }
        } else{
            for(i = start; i >= end; i--){
                nodes.push(ns[i]);
            }
        }
        return nodes;
    },

    indexOf : function(node){
        node = this.getNode(node);
        if(typeof node.viewIndex == "number"){
            return node.viewIndex;
        }
        return this.all.indexOf(node);
    },

    onBeforeLoad : function(){
        if(this.loadingText){
            this.clearSelections(false, true);
            this.el.update('
'+this.loadingText+'
');
            this.all.clear();
        }
    }
});

Ext.reg('dataview', Ext.DataView);

Ext.ColorPalette = function(config){
    Ext.ColorPalette.superclass.constructor.call(this, config);
    this.addEvents(

        'select'
    );

    if(this.handler){
        this.on("select", this.handler, this.scope, true);
    }
};
Ext.extend(Ext.ColorPalette, Ext.Component, {

    itemCls : "x-color-palette",

    value : null,
    clickEvent:'click',
        ctype: "Ext.ColorPalette",

    allowReselect : false,

    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"
    ],

        onRender : function(container, position){
        var t = this.tpl || new Ext.XTemplate(
            ' '
        );
        var el = document.createElement("div");
        el.className = this.itemCls;
        t.overwrite(el, this.colors);
        container.dom.insertBefore(el, position);
        this.el = Ext.get(el);
        this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
        if(this.clickEvent != 'click'){
            this.el.on('click', Ext.emptyFn,  this, {delegate: "a", preventDefault:true});
        }
    },

        afterRender : function(){
        Ext.ColorPalette.superclass.afterRender.call(this);
        if(this.value){
            var s = this.value;
            this.value = null;
            this.select(s);
        }
    },

        handleClick : function(e, t){
        e.preventDefault();
        if(!this.disabled){
            var c = t.className.match(/(?:^|\s)color-(.{6})(?:\s|$)/)[1];
            this.select(c.toUpperCase());
        }
    },

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

});
Ext.reg('colorpalette', Ext.ColorPalette);

Ext.DatePicker = Ext.extend(Ext.Component, {

    todayText : "Today",

    okText : " OK ",

    cancelText : "Cancel",

    todayTip : "{0} (Spacebar)",

    minDate : null,

    maxDate : null,

    minText : "This date is before the minimum date",

    maxText : "This date is after the maximum date",

    format : "m/d/y",

    disabledDays : null,

    disabledDaysText : "",

    disabledDatesRE : null,

    disabledDatesText : "",

    constrainToViewport : true,

    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)',

    startDay : 0,

    initComponent : function(){
        Ext.DatePicker.superclass.initComponent.call(this);

        this.value = this.value ?
                 this.value.clearTime() : new Date().clearTime();

        this.addEvents(

            'select'
        );

        if(this.handler){
            this.on("select", this.handler,  this.scope || this);
        }

        this.initDisabledDays();
    },

    initDisabledDays : function(){
        if(!this.disabledDatesRE && this.disabledDates){
            var dd = this.disabledDates;
            var re = "(?:";
            for(var i = 0; i < dd.length; i++){
                re += dd[i];
                if(i != dd.length-1) re += "|";
            }
            this.disabledDatesRE = new RegExp(re + ")");
        }
    },

    setValue : function(value){
        var old = this.value;
        this.value = value.clearTime(true);
        if(this.el){
            this.update(this.value);
        }
    },

    getValue : function(){
        return this.value;
    },

    focus : function(){
        if(this.el){
            this.update(this.activeDate);
        }
    },

    onRender : function(container, position){
        var m = [
             '',
                '',
                '

'];
        var dn = this.dayNames;
        for(var i = 0; i < 7; i++){
            var d = this.startDay+i;
            if(d > 6){
                d = d-7;
            }
            m.push("");
        }
        m[m.length] = "";
        for(var i = 0; i < 42; i++) {
            if(i % 7 == 0 && i != 0){
                m[m.length] = "";
            }
            m[m.length] = '';
        }
        m[m.length] = '
", 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);

        new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {
            handler: this.showPrevMonth,
            scope: this,
            preventDefault:true,
            stopDefault:true
        });

        new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {
            handler: this.showNextMonth,
            scope: this,
            preventDefault:true,
            stopDefault:true
        });

        this.eventEl.on("mousewheel", this.handleMouseWheel,  this);

        this.monthPicker = this.el.down('div.x-date-mp');
        this.monthPicker.enableDisplayMode('block');

        var kn = new Ext.KeyNav(this.eventEl, {
            "left" : function(e){
                e.ctrlKey ?
                    this.showPrevMonth() :
                    this.update(this.activeDate.add("d", -1));
            },

            "right" : function(e){
                e.ctrlKey ?
                    this.showNextMonth() :
                    this.update(this.activeDate.add("d", 1));
            },

            "up" : function(e){
                e.ctrlKey ?
                    this.showNextYear() :
                    this.update(this.activeDate.add("d", -7));
            },

            "down" : function(e){
                e.ctrlKey ?
                    this.showPrevYear() :
                    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.eventEl.on("click", this.handleDateClick,  this, {delegate: "a.x-date-date"});

        this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  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.on('click', this.showMonthPicker, this);
        this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");

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

        if(Ext.isIE){
            this.el.repaint();
        }
        this.update(this.value);
    },

    createMonthPicker : function(){
        if(!this.monthPicker.dom.firstChild){
            var buf = [''];
            for(var i = 0; i < 6; i++){
                buf.push(
                    '',
                    '',
                    i == 0 ?
                    '' :
                    ''
                );
            }
            buf.push(
                '',
                '
', this.monthNames[i].substr(0, 3), ' ', this.monthNames[i+6].substr(0, 3), '

'
            );
            this.monthPicker.update(buf.join(''));
            this.monthPicker.on('click', this.onMonthClick, this);
            this.monthPicker.on('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 * .5);
                }else{
                    m.dom.xmonth = Math.round((i-1) * .5);
                }
            });
        }
    },

    showMonthPicker : function(){
        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:.2});
    },

    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 * .5);
                td.firstChild.innerHTML = y2;
                td.xyear = y2;
            }else{
                y2 = y - (5-Math.round(i * .5));
                td.firstChild.innerHTML = y2;
                td.xyear = y2;
            }
            this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
        }
    },

    updateMPMonth : function(sm){
        this.mpMonths.each(function(m, a, i){
            m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
        });
    },

    selectMPMonth: function(m){

    },

    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')){
            this.update(new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
            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);
        }
    },

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

    hideMonthPicker : function(disableAnim){
        if(this.monthPicker){
            if(disableAnim === true){
                this.monthPicker.hide();
            }else{
                this.monthPicker.slideOut('t', {duration:.2});
            }
        }
    },

    showPrevMonth : function(e){
        this.update(this.activeDate.add("mo", -1));
    },

    showNextMonth : function(e){
        this.update(this.activeDate.add("mo", 1));
    },

    showPrevYear : function(){
        this.update(this.activeDate.add("y", -1));
    },

    showNextYear : function(){
        this.update(this.activeDate.add("y", 1));
    },

    handleMouseWheel : function(e){
        var delta = e.getWheelDelta();
        if(delta > 0){
            this.showPrevMonth();
            e.stopEvent();
        } else if(delta < 0){
            this.showNextMonth();
            e.stopEvent();
        }
    },

    handleDateClick : function(e, t){
        e.stopEvent();
        if(t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled")){
            this.setValue(new Date(t.dateValue));
            this.fireEvent("select", this, this.value);
        }
    },

    selectToday : function(){
        this.setValue(new Date().clearTime());
        this.fireEvent("select", this, this.value);
    },

    update : function(date){
        var vd = this.activeDate;
        this.activeDate = date;
        if(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");
                       setTimeout(function(){
                            try{c.dom.firstChild.focus();}catch(e){}
                       }, 50);
                       return false;
                   }
                });
                return;
            }
        }
        var days = date.getDaysInMonth();
        var firstOfMonth = date.getFirstDateOfMonth();
        var startingPos = firstOfMonth.getDay()-this.startDay;

        if(startingPos <= this.startDay){
            startingPos += 7;
        }

        var pm = date.add("mo", -1);
        var prevStart = pm.getDaysInMonth()-startingPos;

        var cells = this.cells.elements;
        var textEls = this.textNodes;
        days += startingPos;

        var day = 86400000;
        var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
        var today = new Date().clearTime().getTime();
        var sel = date.clearTime().getTime();
        var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
        var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
        var ddMatch = this.disabledDatesRE;
        var ddText = this.disabledDatesText;
        var ddays = this.disabledDays ? this.disabledDays.join("") : false;
        var ddaysText = this.disabledDaysText;
        var format = this.format;

        var setCellClass = function(cal, cell){
            cell.title = "";
            var t = d.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";
                setTimeout(function(){
                    try{cell.firstChild.focus();}catch(e){}
                }, 50);
            }

            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++){
            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;
            var w = main.offsetWidth;
            this.el.setWidth(w + this.el.getBorderWidth("lr"));
            Ext.fly(main).setWidth(w);
            this.internalRender = true;

            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]);
            }
        }
    },

    beforeDestroy : function() {
        this.mbtn.destroy();
        this.todayBtn.destroy();
    }

});
Ext.reg('datepicker', Ext.DatePicker);

Ext.TabPanel = Ext.extend(Ext.Panel,  {

    monitorResize : true,

    deferredRender : true,

    tabWidth: 120,

    minTabWidth: 30,

    resizeTabs:false,

    enableTabScroll: false,

    scrollIncrement : 0,

    scrollRepeatInterval : 400,

    scrollDuration : .35,

    animScroll : true,

    tabPosition: 'top',

    baseCls: 'x-tab-panel',

    autoTabs : false,

    autoTabSelector:'div.x-tab',

    activeTab : null,

    tabMargin : 2,

    plain: false,

    wheelIncrement : 20,

    idDelimiter : '__',

        itemCls : 'x-tab-item',

        elements: 'body',
    headerAsText: false,
    frame: false,
    hideBorders:true,

        initComponent : function(){
        this.frame = false;
        Ext.TabPanel.superclass.initComponent.call(this);
        this.addEvents(

            'beforetabchange',

            'tabchange',

            'contextmenu'
        );
        this.setLayout(new Ext.layout.CardLayout({
            deferredRender: this.deferredRender
        }));
        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();
    },

        render : function(){
        Ext.TabPanel.superclass.render.apply(this, arguments);
        if(this.activeTab !== undefined){
            var item = this.activeTab;
            delete this.activeTab;
            this.setActiveTab(item);
        }
    },

        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}});
        this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'});
        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

        this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
        this.strip.createChild({cls:'x-clear'});

        this.body.addClass('x-tab-panel-body-'+this.tabPosition);

        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);
    },

        afterRender : function(){
        Ext.TabPanel.superclass.afterRender.call(this);
        if(this.autoTabs){
            this.readTabs(false);
        }
    },

        initEvents : function(){
        Ext.TabPanel.superclass.initEvents.call(this);
        this.on('add', this.onAdd, this);
        this.on('remove', this.onRemove, this);

        this.strip.on('mousedown', this.onStripMouseDown, this);
        this.strip.on('click', this.onStripClick, this);
        this.strip.on('contextmenu', this.onStripContextMenu, this);
        if(this.enableTabScroll){
            this.strip.on('mousewheel', this.onWheel, this);
        }
    },

        findTargets : function(e){
        var item = null;
        var itemEl = e.getTarget('li', 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
        };
    },

        onStripMouseDown : function(e){
        e.preventDefault();
        if(e.button != 0){
            return;
        }
        var t = this.findTargets(e);
        if(t.close){
            this.remove(t.item);
            return;
        }
        if(t.item && t.item != this.activeTab){
            this.setActiveTab(t.item);
        }
    },

        onStripClick : function(e){
        var t = this.findTargets(e);
        if(!t.close && t.item && t.item != this.activeTab){
            this.setActiveTab(t.item);
        }
    },

        onStripContextMenu : function(e){
        e.preventDefault();
        var t = this.findTargets(e);
        if(t.item){
            this.fireEvent('contextmenu', this, t.item, e);
        }
    },

    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];
            var title = tab.getAttribute('title');
            tab.removeAttribute('title');
            this.add({
                title: title,
                el: tab
            });
        }
    },

        initTab : function(item, index){
        var before = this.strip.dom.childNodes[index];
        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;
        }

        var p = {
            id: this.id + this.idDelimiter + item.getItemId(),
            text: item.title,
            cls: cls,
            iconCls: item.iconCls || ''
        };
        var el = before ?
                 this.itemTpl.insertBefore(before, p) :
                 this.itemTpl.append(this.strip, p);

        Ext.fly(el).addClassOnOver('x-tab-strip-over');

        if(item.tabTip){
            Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
        }
        item.on('disable', this.onItemDisabled, this);
        item.on('enable', this.onItemEnabled, this);
        item.on('titlechange', this.onItemTitleChanged, this);
        item.on('beforeshow', this.onBeforeShowItem, this);
    },

        onAdd : function(tp, item, index){
        this.initTab(item, index);
        if(this.items.getCount() == 1){
            this.syncSize();
        }
        this.delegateUpdates();
    },

        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);
    },

        onRemove : function(tp, item){
        Ext.removeNode(this.getTabEl(item));
        this.stack.remove(item);
        if(item == this.activeTab){
            var next = this.stack.next();
            if(next){
                this.setActiveTab(next);
            }else{
                this.setActiveTab(0);
            }
        }
        this.delegateUpdates();
    },

        onBeforeShowItem : function(item){
        if(item != this.activeTab){
            this.setActiveTab(item);
            return false;
        }
    },

        onItemDisabled : function(item){
        var el = this.getTabEl(item);
        if(el){
            Ext.fly(el).addClass('x-item-disabled');
        }
        this.stack.remove(item);
    },

        onItemEnabled : function(item){
        var el = this.getTabEl(item);
        if(el){
            Ext.fly(el).removeClass('x-item-disabled');
        }
    },

        onItemTitleChanged : function(item){
        var el = this.getTabEl(item);
        if(el){
            Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
        }
    },

    getTabEl : function(item){
        var itemId = (typeof item === 'number')?this.items.items[item].getItemId() : item.getItemId();
        return document.getElementById(this.id+this.idDelimiter+itemId);
    },

        onResize : function(){
        Ext.TabPanel.superclass.onResize.apply(this, arguments);
        this.delegateUpdates();
    },

    beginUpdate : function(){
        this.suspendUpdates = true;
    },

    endUpdate : function(){
        this.suspendUpdates = false;
        this.delegateUpdates();
    },

    hideTabStripItem : function(item){
        item = this.getComponent(item);
        var el = this.getTabEl(item);
        if(el){
            el.style.display = 'none';
            this.delegateUpdates();
        }
    },

    unhideTabStripItem : function(item){
        item = this.getComponent(item);
        var el = this.getTabEl(item);
        if(el){
            el.style.display = '';
            this.delegateUpdates();
        }
    },

        delegateUpdates : function(){
        if(this.suspendUpdates){
            return;
        }
        if(this.resizeTabs && this.rendered){
            this.autoSizeTabs();
        }
        if(this.enableTabScroll && this.rendered){
            this.autoScrollTabs();
        }
    },

        autoSizeTabs : function(){
        var count = this.items.length;
        var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
        var ow = this[ce].dom.offsetWidth;
        var aw = this[ce].dom.clientWidth;

        if(!this.resizeTabs || count < 1 || !aw){             return;
        }

        var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth);         this.lastTabWidth = each;
        var lis = this.stripWrap.dom.getElementsByTagName('li');
        for(var i = 0, len = lis.length-1; i < len; i++) {             var li = lis[i];
            var inner = li.childNodes[1].firstChild.firstChild;
            var tw = li.offsetWidth;
            var iw = inner.offsetWidth;
            inner.style.width = (each - (tw-iw)) + 'px';
        }
    },

        adjustBodyWidth : function(w){
        if(this.header){
            this.header.setWidth(w);
        }
        if(this.footer){
            this.footer.setWidth(w);
        }
        return w;
    },

    setActiveTab : function(item){
        item = this.getComponent(item);
        if(!item || 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');
                }
                this.activeTab.fireEvent('deactivate', this.activeTab);
            }
            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.layoutOnTabChange && item.doLayout){
                item.doLayout();
            }
            if(this.scrolling){
                this.scrollToTab(item, this.animScroll);
            }

            item.fireEvent('activate', item);
            this.fireEvent('tabchange', this, item);
        }
    },

    getActiveTab : function(){
        return this.activeTab || null;
    },

    getItem : function(item){
        return this.getComponent(item);
    },

        autoScrollTabs : function(){
        var count = this.items.length;
        var ow = this.header.dom.offsetWidth;
        var tw = this.header.dom.clientWidth;

        var wrap = this.stripWrap;
        var wd = wrap.dom;
        var cw = wd.offsetWidth;
        var pos = this.getScrollPos();
        var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;

        if(!this.enableTabScroll || count < 1 || cw < 20){             return;
        }
        if(l <= tw){
            wd.scrollLeft = 0;
            wrap.setWidth(tw);
            if(this.scrolling){
                this.scrolling = false;
                this.header.removeClass('x-tab-scrolling');
                this.scrollLeft.hide();
                this.scrollRight.hide();
                if(Ext.isAir){
                    wd.style.marginLeft = '';
                    wd.style.marginRight = '';
                }
            }
        }else{
            if(!this.scrolling){
                this.header.addClass('x-tab-scrolling');
                if(Ext.isAir){
                    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)){                 wd.scrollLeft = l-tw;
            }else{                 this.scrollToTab(this.activeTab, false);
            }
            this.updateScrollButtons();
        }
    },

        createScrollers : function(){
        var h = this.stripWrap.dom.offsetHeight;

                var sl = this.header.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;

                var sr = this.header.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;
    },

        getScrollWidth : function(){
        return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
    },

        getScrollPos : function(){
        return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
    },

        getScrollArea : function(){
        return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
    },

        getScrollAnim : function(){
        return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
    },

        getScrollIncrement : function(){
        return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
    },

    scrollToTab : function(item, animate){
        if(!item){ return; }
        var el = this.getTabEl(item);
        var pos = this.getScrollPos(), area = this.getScrollArea();
        var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
        var right = left + el.offsetWidth;
        if(left < pos){
            this.scrollTo(left, animate);
        }else if(right > (pos + area)){
            this.scrollTo(right - area, animate);
        }
    },

        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();
        var newpos = pos + d;
        var sw = this.getScrollWidth()-this.getScrollArea();

        var s = Math.max(0, Math.min(sw, newpos));
        if(s != pos){
            this.scrollTo(s, false);
        }
    },

        onScrollRight : function(){
        var sw = this.getScrollWidth()-this.getScrollArea();
        var pos = this.getScrollPos();
        var s = Math.min(sw, pos + this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },

        onScrollLeft : function(){
        var pos = this.getScrollPos();
        var s = Math.max(0, pos - this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },

        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');
    }

});
Ext.reg('tabpanel', Ext.TabPanel);

Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;

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

Ext.Button = Ext.extend(Ext.Component, {

    hidden : false,

    disabled : false,

    pressed : false,

    enableToggle: false,

    menuAlign : "tl-bl?",

    type : 'button',

        menuClassTarget: 'tr',

    clickEvent : 'click',

    handleMouseEvents : true,

    tooltipType : 'qtip',

    buttonSelector : "button:first",

    initComponent : function(){
        Ext.Button.superclass.initComponent.call(this);

        this.addEvents(

            "click",

            "toggle",

            'mouseover',

            'mouseout',

            'menushow',

            'menuhide',

            'menutriggerover',

            'menutriggerout'
        );
        if(this.menu){
            this.menu = Ext.menu.MenuMgr.get(this.menu);
        }
        if(typeof this.toggleGroup === 'string'){
            this.enableToggle = true;
        }
    },

        onRender : function(ct, position){
        if(!this.template){
            if(!Ext.Button.buttonTemplate){
                                Ext.Button.buttonTemplate = new Ext.Template(
                    '',
                    '',
                    "

    ");
            }
            this.template = Ext.Button.buttonTemplate;
        }
        var btn, targs = [this.text || ' ', this.type];

        if(position){
            btn = this.template.insertBefore(position, targs, true);
        }else{
            btn = this.template.append(ct, targs, true);
        }
        var btnEl = btn.child(this.buttonSelector);
        btnEl.on('focus', this.onFocus, this);
        btnEl.on('blur', this.onBlur, this);

        this.initButtonEl(btn, btnEl);

        if(this.menu){
            this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
        }
        Ext.ButtonToggleMgr.register(this);
    },

        initButtonEl : function(btn, btnEl){

        this.el = btn;
        btn.addClass("x-btn");

        if(this.icon){
            btnEl.setStyle('background-image', 'url(' +this.icon +')');
        }
        if(this.iconCls){
            btnEl.addClass(this.iconCls);
            if(!this.cls){
                btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
            }
        }
        if(this.tabIndex !== undefined){
            btnEl.dom.tabIndex = this.tabIndex;
        }
        if(this.tooltip){
            if(typeof this.tooltip == 'object'){
                Ext.QuickTips.register(Ext.apply({
                      target: btnEl.id
                }, this.tooltip));
            } else {
                btnEl.dom[this.tooltipType] = this.tooltip;
            }
        }

        if(this.pressed){
            this.el.addClass("x-btn-pressed");
        }

        if(this.handleMouseEvents){
            btn.on("mouseover", this.onMouseOver, this);
                                    btn.on("mousedown", this.onMouseDown, this);
        }

        if(this.menu){
            this.menu.on("show", this.onMenuShow, this);
            this.menu.on("hide", this.onMenuHide, this);
        }

        if(this.id){
            this.el.dom.id = this.el.id = this.id;
        }

        if(this.repeat){
            var repeater = new Ext.util.ClickRepeater(btn,
                typeof this.repeat == "object" ? this.repeat : {}
            );
            repeater.on("click", this.onClick,  this);
        }

        btn.on(this.clickEvent, this.onClick, this);
    },

        afterRender : function(){
        Ext.Button.superclass.afterRender.call(this);
        if(Ext.isIE6){
            this.autoWidth.defer(1, this);
        }else{
            this.autoWidth();
        }
    },

    setIconClass : function(cls){
        if(this.el){
            this.el.child(this.buttonSelector).replaceClass(this.iconCls, cls);
        }
        this.iconCls = cls;
    },

        beforeDestroy: function(){
        if(this.rendered){
            var btn = this.el.child(this.buttonSelector);
            if(btn){
                btn.removeAllListeners();
            }
        }
        if(this.menu){
            Ext.destroy(this.menu);
        }
    },

        onDestroy : function(){
        if(this.rendered){
            Ext.ButtonToggleMgr.unregister(this);
        }
    },

        autoWidth : function(){
        if(this.el){
            this.el.setWidth("auto");
            if(Ext.isIE7 && Ext.isStrict){
                var ib = this.el.child(this.buttonSelector);
                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);
                }
            }
        }
    },

    setHandler : function(handler, scope){
        this.handler = handler;
        this.scope = scope;
    },

    setText : function(text){
        this.text = text;
        if(this.el){
            this.el.child("td.x-btn-center " + this.buttonSelector).update(text);
        }
        this.autoWidth();
    },

    getText : function(){
        return this.text;
    },

    toggle : function(state){
        state = state === undefined ? !this.pressed : state;
        if(state != this.pressed){
            if(state){
                this.el.addClass("x-btn-pressed");
                this.pressed = true;
                this.fireEvent("toggle", this, true);
            }else{
                this.el.removeClass("x-btn-pressed");
                this.pressed = false;
                this.fireEvent("toggle", this, false);
            }
            if(this.toggleHandler){
                this.toggleHandler.call(this.scope || this, this, state);
            }
        }
    },

    focus : function(){
        this.el.child(this.buttonSelector).focus();
    },

        onDisable : function(){
        if(this.el){
            if(!Ext.isIE6 || !this.text){
                this.el.addClass(this.disabledClass);
            }
            this.el.dom.disabled = true;
        }
        this.disabled = true;
    },

        onEnable : function(){
        if(this.el){
            if(!Ext.isIE6 || !this.text){
                this.el.removeClass(this.disabledClass);
            }
            this.el.dom.disabled = false;
        }
        this.disabled = false;
    },

    showMenu : function(){
        if(this.menu){
            this.menu.show(this.el, this.menuAlign);
        }
        return this;
    },

    hideMenu : function(){
        if(this.menu){
            this.menu.hide();
        }
        return this;
    },

    hasVisibleMenu : function(){
        return this.menu && this.menu.isVisible();
    },

        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.menu.isVisible() && !this.ignoreNextClick){
                this.showMenu();
            }
            this.fireEvent("click", this, e);
            if(this.handler){
                                this.handler.call(this.scope || this, this, e);
            }
        }
    },

        isMenuTriggerOver : function(e, internal){
        return this.menu && !internal;
    },

        isMenuTriggerOut : function(e, internal){
        return this.menu && !internal;
    },

        onMouseOver : function(e){
        if(!this.disabled){
            var internal = e.within(this.el,  true);
            if(!internal){
                this.el.addClass("x-btn-over");
                Ext.getDoc().on('mouseover', this.monitorMouseOver, this);
                this.fireEvent('mouseover', this, e);
            }
            if(this.isMenuTriggerOver(e, internal)){
                this.fireEvent('menutriggerover', this, this.menu, e);
            }
        }
    },

        monitorMouseOver : function(e){
        if(e.target != this.el.dom && !e.within(this.el)){
            Ext.getDoc().un('mouseover', this.monitorMouseOver, this);
            this.onMouseOut(e);
        }
    },

        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);
        }
    },
        onFocus : function(e){
        if(!this.disabled){
            this.el.addClass("x-btn-focus");
        }
    },
        onBlur : function(e){
        this.el.removeClass("x-btn-focus");
    },

        getClickEl : function(e, isUp){
       return this.el;
    },

        onMouseDown : function(e){
        if(!this.disabled && e.button == 0){
            this.getClickEl(e).addClass("x-btn-click");
            Ext.getDoc().on('mouseup', this.onMouseUp, this);
        }
    },
        onMouseUp : function(e){
        if(e.button == 0){
            this.getClickEl(e, true).removeClass("x-btn-click");
            Ext.getDoc().un('mouseup', this.onMouseUp, this);
        }
    },
        onMenuShow : function(e){
        this.ignoreNextClick = 0;
        this.el.addClass("x-btn-menu-active");
        this.fireEvent('menushow', this, this.menu);
    },
        onMenuHide : function(e){
        this.el.removeClass("x-btn-menu-active");
        this.ignoreNextClick = this.restoreClick.defer(250, this);
        this.fireEvent('menuhide', this, this.menu);
    },

        restoreClick : function(){
        this.ignoreNextClick = 0;
    }

});
Ext.reg('button', Ext.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);
           }
       }
   };
}();

Ext.SplitButton = Ext.extend(Ext.Button, {

    arrowSelector : 'button:last',

    initComponent : function(){
        Ext.SplitButton.superclass.initComponent.call(this);

        this.addEvents("arrowclick");
    },

    onRender : function(ct, position){

        var tpl = new Ext.Template(
            '
    ',
            '',
            '',
            "

                 ",
            '',
            '',
            "

    "
        );
        var btn, targs = [this.text || ' ', this.type];
        if(position){
            btn = tpl.insertBefore(position, targs, true);
        }else{
            btn = tpl.append(ct, targs, true);
        }
        var btnEl = btn.child(this.buttonSelector);

        this.initButtonEl(btn, btnEl);
        this.arrowBtnTable = btn.child("table:last");
        if(this.arrowTooltip){
            btn.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
        }
    },

    autoWidth : function(){
        if(this.el){
            var tbl = this.el.child("table:first");
            var tbl2 = this.el.child("table:last");
            this.el.setWidth("auto");
            tbl.setWidth("auto");
            if(Ext.isIE7 && Ext.isStrict){
                var ib = this.el.child(this.buttonSelector);
                if(ib && ib.getWidth() > 20){
                    ib.clip();
                    ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
                }
            }
            if(this.minWidth){
                if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
                    tbl.setWidth(this.minWidth-tbl2.getWidth());
                }
            }
            this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
        }
    },

    setArrowHandler : function(handler, scope){
        this.arrowHandler = handler;
        this.scope = scope;
    },

    onClick : function(e){
        e.preventDefault();
        if(!this.disabled){
            if(e.getTarget(".x-btn-menu-arrow-wrap")){
                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);
                }
            }
        }
    },

    getClickEl : function(e, isUp){
        if(!isUp){
            return (this.lastClickEl = e.getTarget("table", 10, true));
        }
        return this.lastClickEl;
    },

    onDisable : function(){
        if(this.el){
            if(!Ext.isIE6){
                this.el.addClass("x-item-disabled");
            }
            this.el.child(this.buttonSelector).dom.disabled = true;
            this.el.child(this.arrowSelector).dom.disabled = true;
        }
        this.disabled = true;
    },

    onEnable : function(){
        if(this.el){
            if(!Ext.isIE6){
                this.el.removeClass("x-item-disabled");
            }
            this.el.child(this.buttonSelector).dom.disabled = false;
            this.el.child(this.arrowSelector).dom.disabled = false;
        }
        this.disabled = false;
    },

    isMenuTriggerOver : function(e){
        return this.menu && e.within(this.arrowBtnTable) && !e.within(this.arrowBtnTable, true);
    },

    isMenuTriggerOut : function(e, internal){
        return this.menu && !e.within(this.arrowBtnTable);
    },

    onDestroy : function(){
        Ext.destroy(this.arrowBtnTable);
        Ext.SplitButton.superclass.onDestroy.call(this);
    }
});

Ext.MenuButton = Ext.SplitButton;

Ext.reg('splitbutton', Ext.SplitButton);

Ext.CycleButton = Ext.extend(Ext.SplitButton, {

    getItemText : function(item){
        if(item && this.showText === true){
            var text = '';
            if(this.prependText){
                text += this.prependText;
            }
            text += item.text;
            return text;
        }
        return undefined;
    },

    setActiveItem : function(item, suppressEvent){
        if(typeof item != 'object'){
            item = this.menu.items.get(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, true);
            }
            if(this.forceIcon){
                this.setIconClass(this.forceIcon);
            }
            if(!suppressEvent){
                this.fireEvent('change', this, item);
            }
        }
    },

    getActiveItem : function(){
        return this.activeItem;
    },

    initComponent : function(){
        this.addEvents(

            "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;
        for(var i = 0, len = this.itemCount; i < len; i++){
            var item = this.items[i];
            item.group = item.group || this.id;
            item.itemIndex = i;
            item.checkHandler = this.checkHandler;
            item.scope = this;
            item.checked = item.checked || false;
            this.menu.items.push(item);
            if(item.checked){
                checked = item;
            }
        }
        this.setActiveItem(checked, true);
        Ext.CycleButton.superclass.initComponent.call(this);

        this.on('click', this.toggleSelected, this);
    },

    checkHandler : function(item, pressed){
        if(pressed){
            this.setActiveItem(item);
        }
    },

    toggleSelected : function(){
        this.menu.render();

        var nextIdx, checkItem;
        for (var i = 1; i < this.itemCount; i++) {
            nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;

            checkItem = this.menu.items.itemAt(nextIdx);

            if (!checkItem.disabled) {
                checkItem.setChecked(true);
                break;
            }
        }
    }
});
Ext.reg('cycle', Ext.CycleButton);

 Ext.Toolbar = function(config){
    if(Ext.isArray(config)){
        config = {buttons:config};
    }
    Ext.Toolbar.superclass.constructor.call(this, config);
};

(function(){

var T = Ext.Toolbar;

Ext.extend(T, Ext.BoxComponent, {

    trackMenus : true,

    initComponent : function(){
        T.superclass.initComponent.call(this);

        if(this.items){
            this.buttons = this.items;
        }

        this.items = new Ext.util.MixedCollection(false, function(o){
            return o.itemId || o.id || Ext.id();
        });
    },

    autoCreate: {
        cls:'x-toolbar x-small-editor',
        html:'
    '
    },

    onRender : function(ct, position){
        this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
        this.tr = this.el.child("tr", true);
    },

    afterRender : function(){
        T.superclass.afterRender.call(this);
        if(this.buttons){
            this.add.apply(this, this.buttons);
            delete this.buttons;
        }
    },

    add : function(){
        var a = arguments, l = a.length;
        for(var i = 0; i < l; i++){
            var el = a[i];
            if(el.isFormField){
                this.addField(el);
            }else if(el.render){
                this.addItem(el);
            }else if(typeof el == "string"){
                if(el == "separator" || el == "-"){
                    this.addSeparator();
                }else if(el == " "){
                    this.addSpacer();
                }else if(el == "->"){
                    this.addFill();
                }else{
                    this.addText(el);
                }
            }else if(el.tagName){
                this.addElement(el);
            }else if(typeof el == "object"){
                if(el.xtype){
                    this.addField(Ext.ComponentMgr.create(el, 'button'));
                }else{
                    this.addButton(el);
                }
            }
        }
    },

    addSeparator : function(){
        return this.addItem(new T.Separator());
    },

    addSpacer : function(){
        return this.addItem(new T.Spacer());
    },

    addFill : function(){
        return this.addItem(new T.Fill());
    },

    addElement : function(el){
        return this.addItem(new T.Item(el));
    },

    addItem : function(item){
        var td = this.nextBlock();
        this.initMenuTracking(item);
        item.render(td);
        this.items.add(item);
        return item;
    },

    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;
        }
        var b = config;
        if(!(config instanceof T.Button)){
            b = config.split ?
                new T.SplitButton(config) :
                new T.Button(config);
        }
        var td = this.nextBlock();
        this.initMenuTracking(b);
        b.render(td);
        this.items.add(b);
        return b;
    },

    initMenuTracking : function(item){
        if(this.trackMenus && item.menu){
            item.on({
                'menutriggerover' : this.onButtonTriggerOver,
                'menushow' : this.onButtonMenuShow,
                'menuhide' : this.onButtonMenuHide,
                scope: this
            })
        }
    },

    addText : function(text){
        return this.addItem(new T.TextItem(text));
    },

    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;
        }
        if (!(item instanceof T.Button)){
           item = new T.Button(item);
        }
        var td = document.createElement("td");
        this.tr.insertBefore(td, this.tr.childNodes[index]);
        this.initMenuTracking(item);
        item.render(td);
        this.items.insert(index, item);
        return item;
    },

    addDom : function(config, returnEl){
        var td = this.nextBlock();
        Ext.DomHelper.overwrite(td, config);
        var ti = new T.Item(td.firstChild);
        ti.render(td);
        this.items.add(ti);
        return ti;
    },

    addField : function(field){
        var td = this.nextBlock();
        field.render(td);
        var ti = new T.Item(td.firstChild);
        ti.render(td);
        this.items.add(ti);
        return ti;
    },

    nextBlock : function(){
        var td = document.createElement("td");
        this.tr.appendChild(td);
        return td;
    },

    onDestroy : function(){
        Ext.Toolbar.superclass.onDestroy.call(this);
        if(this.rendered){
            if(this.items){
                Ext.destroy.apply(Ext, this.items.items);
            }
            Ext.Element.uncache(this.tr);
        }
    },

    onDisable : function(){
        this.items.each(function(item){
             if(item.disable){
                 item.disable();
             }
        });
    },

    onEnable : function(){
        this.items.each(function(item){
             if(item.enable){
                 item.enable();
             }
        });
    },

    onButtonTriggerOver : function(btn){
        if(this.activeMenuBtn && this.activeMenuBtn != btn){
            this.activeMenuBtn.hideMenu();
            btn.showMenu();
            this.activeMenuBtn = btn;
        }
    },

    onButtonMenuShow : function(btn){
        this.activeMenuBtn = btn;
    },

    onButtonMenuHide : function(btn){
        delete this.activeMenuBtn;
    }

});
Ext.reg('toolbar', Ext.Toolbar);

T.Item = function(el){
    this.el = Ext.getDom(el);
    this.id = Ext.id(this.el);
    this.hidden = false;
};

T.Item.prototype = {

    getEl : function(){
       return this.el;
    },

    render : function(td){
        this.td = td;
        td.appendChild(this.el);
    },

    destroy : function(){
        if(this.td && this.td.parentNode){
            this.td.parentNode.removeChild(this.td);
        }
    },

    show: function(){
        this.hidden = false;
        this.td.style.display = "";
    },

    hide: function(){
        this.hidden = true;
        this.td.style.display = "none";
    },

    setVisible: function(visible){
        if(visible) {
            this.show();
        }else{
            this.hide();
        }
    },

    focus : function(){
        Ext.fly(this.el).focus();
    },

    disable : function(){
        Ext.fly(this.td).addClass("x-item-disabled");
        this.disabled = true;
        this.el.disabled = true;
    },

    enable : function(){
        Ext.fly(this.td).removeClass("x-item-disabled");
        this.disabled = false;
        this.el.disabled = false;
    }
};
Ext.reg('tbitem', T.Item);

T.Separator = function(){
    var s = document.createElement("span");
    s.className = "xtb-sep";
    T.Separator.superclass.constructor.call(this, s);
};
Ext.extend(T.Separator, T.Item, {
    enable:Ext.emptyFn,
    disable:Ext.emptyFn,
    focus:Ext.emptyFn
});
Ext.reg('tbseparator', T.Separator);

T.Spacer = function(){
    var s = document.createElement("div");
    s.className = "xtb-spacer";
    T.Spacer.superclass.constructor.call(this, s);
};
Ext.extend(T.Spacer, T.Item, {
    enable:Ext.emptyFn,
    disable:Ext.emptyFn,
    focus:Ext.emptyFn
});

Ext.reg('tbspacer', T.Spacer);

T.Fill = Ext.extend(T.Spacer, {

    render : function(td){
        td.style.width = '100%';
        T.Fill.superclass.render.call(this, td);
    }
});
Ext.reg('tbfill', T.Fill);

T.TextItem = function(t){
    var s = document.createElement("span");
    s.className = "xtb-text";
    s.innerHTML = t.text ? t.text : t;
    T.TextItem.superclass.constructor.call(this, s);
};
Ext.extend(T.TextItem, T.Item, {
    enable:Ext.emptyFn,
    disable:Ext.emptyFn,
    focus:Ext.emptyFn
});
Ext.reg('tbtext', T.TextItem);

T.Button = Ext.extend(Ext.Button, {
    hideParent : true,

    onDestroy : function(){
        T.Button.superclass.onDestroy.call(this);
        if(this.container){
            this.container.remove();
        }
    }
});
Ext.reg('tbbutton', T.Button);

T.SplitButton = Ext.extend(Ext.SplitButton, {
    hideParent : true,

    onDestroy : function(){
        T.SplitButton.superclass.onDestroy.call(this);
        if(this.container){
            this.container.remove();
        }
    }
});

Ext.reg('tbsplit', T.SplitButton);

T.MenuButton = T.SplitButton;

})();

Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {

    pageSize: 20,

    displayMsg : 'Displaying {0} - {1} of {2}',

    emptyMsg : 'No data to display',

    beforePageText : "Page",

    afterPageText : "of {0}",

    firstText : "First Page",

    prevText : "Previous Page",

    nextText : "Next Page",

    lastText : "Last Page",

    refreshText : "Refresh",

    paramNames : {start: 'start', limit: 'limit'},

    initComponent : function(){
        Ext.PagingToolbar.superclass.initComponent.call(this);
        this.cursor = 0;
        this.bind(this.store);
    },

        onRender : function(ct, position){
        Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
        this.first = this.addButton({
            tooltip: this.firstText,
            iconCls: "x-tbar-page-first",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["first"])
        });
        this.prev = this.addButton({
            tooltip: this.prevText,
            iconCls: "x-tbar-page-prev",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["prev"])
        });
        this.addSeparator();
        this.add(this.beforePageText);
        this.field = Ext.get(this.addDom({
           tag: "input",
           type: "text",
           size: "3",
           value: "1",
           cls: "x-tbar-page-number"
        }).el);
        this.field.on("keydown", this.onPagingKeydown, this);
        this.field.on("focus", function(){this.dom.select();});
        this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
        this.field.setHeight(18);
        this.addSeparator();
        this.next = this.addButton({
            tooltip: this.nextText,
            iconCls: "x-tbar-page-next",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["next"])
        });
        this.last = this.addButton({
            tooltip: this.lastText,
            iconCls: "x-tbar-page-last",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["last"])
        });
        this.addSeparator();
        this.loading = this.addButton({
            tooltip: this.refreshText,
            iconCls: "x-tbar-loading",
            handler: this.onClick.createDelegate(this, ["refresh"])
        });

        if(this.displayInfo){
            this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});
        }
        if(this.dsLoaded){
            this.onLoad.apply(this, this.dsLoaded);
        }
    },

        updateInfo : function(){
        if(this.displayEl){
            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.displayEl.update(msg);
        }
    },

        onLoad : function(store, r, o){
        if(!this.rendered){
            this.dsLoaded = [store, r, o];
            return;
        }
       this.cursor = o.params ? o.params[this.paramNames.start] : 0;
       var d = this.getPageData(), ap = d.activePage, ps = d.pages;

       this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
       this.field.dom.value = ap;
       this.first.setDisabled(ap == 1);
       this.prev.setDisabled(ap == 1);
       this.next.setDisabled(ap == ps);
       this.last.setDisabled(ap == ps);
       this.loading.enable();
       this.updateInfo();
    },

        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)
        };
    },

        onLoadError : function(){
        if(!this.rendered){
            return;
        }
        this.loading.enable();
    },

    readPage : function(d){
        var v = this.field.dom.value, pageNum;
        if (!v || isNaN(pageNum = parseInt(v, 10))) {
            this.field.dom.value = d.activePage;
            return false;
        }
        return pageNum;
    },

        onPagingKeydown : function(e){
        var k = e.getKey(), d = this.getPageData(), pageNum;
        if (k == e.RETURN) {
            e.stopEvent();
            if(pageNum = this.readPage(d)){
                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;
            this.field.dom.value = 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){
                    this.field.dom.value = pageNum;
                }
            }
        }
    },

        beforeLoad : function(){
        if(this.rendered && this.loading){
            this.loading.disable();
        }
    },

    doLoad : function(start){
        var o = {}, pn = this.paramNames;
        o[pn.start] = start;
        o[pn.limit] = this.pageSize;
        this.store.load({params:o});
    },

        onClick : function(which){
        var store = this.store;
        switch(which){
            case "first":
                this.doLoad(0);
            break;
            case "prev":
                this.doLoad(Math.max(0, this.cursor-this.pageSize));
            break;
            case "next":
                this.doLoad(this.cursor+this.pageSize);
            break;
            case "last":
                var total = store.getTotalCount();
                var extra = total % this.pageSize;
                var lastStart = extra ? (total - extra) : total-this.pageSize;
                this.doLoad(lastStart);
            break;
            case "refresh":
                this.doLoad(this.cursor);
            break;
        }
    },

    unbind : function(store){
        store = Ext.StoreMgr.lookup(store);
        store.un("beforeload", this.beforeLoad, this);
        store.un("load", this.onLoad, this);
        store.un("loadexception", this.onLoadError, this);
        this.store = undefined;
    },

    bind : function(store){
        store = Ext.StoreMgr.lookup(store);
        store.on("beforeload", this.beforeLoad, this);
        store.on("load", this.onLoad, this);
        store.on("loadexception", this.onLoadError, this);
        this.store = store;
    }
});
Ext.reg('paging', Ext.PagingToolbar);

Ext.Resizable = 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";
        }
    }

    this.proxy = this.el.createProxy({tag: "div", cls: "x-resizable-proxy", id: this.el.id + "-rzproxy"});
    this.proxy.unselectable();
    this.proxy.enableDisplayMode('block');

    Ext.apply(this, config);

    if(this.pinned){
        this.disableTrackOver = true;
        this.el.addClass("x-resizable-pinned");
    }

    var position = this.el.getStyle("position");
    if(position != "absolute" && position != "fixed"){
        this.el.setStyle("position", "relative");
    }
    if(!this.handles){
        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.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);
    }

    this.addEvents(
        "beforeresize",
        "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);
};

Ext.extend(Ext.Resizable, Ext.util.Observable, {
        resizeChild : false,
        adjustments : [0, 0],
        minWidth : 5,
        minHeight : 5,
        maxWidth : 10000,
        maxHeight : 10000,
        enabled : true,
        animate : false,
        duration : .35,
        dynamic : false,
        handles : false,
        multiDirectional : false,
        disableTrackOver : false,
        easing : 'easeOutStrong',
        widthIncrement : 0,
        heightIncrement : 0,
        pinned : false,
        width : null,
        height : null,
        preserveRatio : false,
        transparent: false,
        minX: 0,
        minY: 0,
        draggable: false,

    resizeTo : function(width, height){
        this.el.setSize(width, height);
        this.updateChildSize();
        this.fireEvent("resize", this, width, height, null);
    },

    startSizing : function(e, handle){
        this.fireEvent("beforeresize", this, e);
        if(this.enabled){

            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("mousemove", this.onMouseMove, this);
                this.overlay.on("mouseup", this.onMouseUp, this);
            }
            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');
            this.proxy.show();
            this.proxy.setBox(this.startBox);
            if(!this.dynamic){
                this.proxy.setStyle('visibility', 'visible');
            }
        }
    },

    onMouseDown : function(handle, e){
        if(this.enabled){
            e.stopEvent();
            this.activeHandle = handle;
            this.startSizing(e, handle);
        }
    },

    onMouseUp : function(e){
        var size = this.resizeElement();
        this.resizing = false;
        this.handleOut();
        this.overlay.hide();
        this.proxy.hide();
        this.fireEvent("resize", this, size.width, size.height, e);
    },

    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]);
            }

            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);
            }
        }
    },

    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);
    },

    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();
        }
        return box;
    },

    constrain : function(v, diff, m, mx){
        if(v - diff < m){
            diff = v - m;
        }else if(v - diff > mx){
            diff = mx - v;
        }
        return diff;
    },

    onMouseMove : function(e){
        if(this.enabled){
            try{

            if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
                return;
            }

            var curSize = this.curSize || this.startBox;
            var x = this.startBox.x, y = this.startBox.y;
            var ox = x, oy = y;
            var w = curSize.width, h = curSize.height;
            var ow = w, oh = h;
            var mw = this.minWidth, mh = this.minHeight;
            var mxw = this.maxWidth, mxh = this.maxHeight;
            var wi = this.widthIncrement;
            var hi = this.heightIncrement;

            var eventXY = e.getXY();
            var diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0]));
            var diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1]));

            var pos = this.activeHandle.position;

            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":
                        var 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);
                        var tw = w;
                        w = ow * (h/oh);
                        x += tw - w;
                        break;
                    case "west":
                        var th = h;
                        h = oh * (w/ow);
                        h = Math.min(Math.max(mh, h), mxh);
                        y += (th - h) / 2;
                        var tw = w;
                        w = ow * (h/oh);
                        x += tw - w;
                       break;
                    case "northwest":
                        var tw = w;
                        var 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(e){}
        }
    },

    handleOver : function(){
        if(this.enabled){
            this.el.addClass("x-resizable-over");
        }
    },

    handleOut : function(){
        if(!this.resizing){
            this.el.removeClass("x-resizable-over");
        }
    },

    getEl : function(){
        return this.el;
    },

    getResizeChild : function(){
        return this.resizeChild;
    },

    destroy : function(removeEl){
        this.proxy.remove();
        if(this.overlay){
            this.overlay.removeAllListeners();
            this.overlay.remove();
        }
        var ps = Ext.Resizable.positions;
        for(var k in ps){
            if(typeof ps[k] != "function" && this[ps[k]]){
                var h = this[ps[k]];
                h.el.removeAllListeners();
                h.el.remove();
            }
        }
        if(removeEl){
            this.el.update("");
            this.el.remove();
        }
    },

    syncHandleHeight : function(){
        var h = this.el.getHeight(true);
        if(this.west){
            this.west.el.setHeight(h);
        }
        if(this.east){
            this.east.el.setHeight(h);
        }
    }
});

Ext.Resizable.positions = {
    n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast"
};

Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
    if(!this.tpl){

        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);
    }
    this.el.on("mousedown", this.onMouseDown, this);
    if(!disableTrackOver){
        this.el.on("mouseover", this.onMouseOver, this);
        this.el.on("mouseout", this.onMouseOut, this);
    }
};

Ext.Resizable.Handle.prototype = {
    afterResize : function(rz){

    },

    onMouseDown : function(e){
        this.rz.onMouseDown(this, e);
    },

    onMouseOver : function(e){
        this.rz.handleOver(this, e);
    },

    onMouseOut : function(e){
        this.rz.handleOut(this, e);
    }
};

Ext.Editor = function(field, config){
    this.field = field;
    Ext.Editor.superclass.constructor.call(this, config);
};

Ext.extend(Ext.Editor, Ext.Component, {

    value : "",

    alignment: "c-c?",

    shadow : "frame",

    constrain : false,

    swallowKeys : true,

    completeOnEnter : false,

    cancelOnEsc : false,

    updateEl : false,

    initComponent : function(){
        Ext.Editor.superclass.initComponent.call(this);
        this.addEvents(

            "beforestartedit",

            "startedit",

            "beforecomplete",

            "complete",

            "specialkey"
        );
    },

        onRender : function(ct, position){
        this.el = new Ext.Layer({
            shadow: this.shadow,
            cls: "x-editor",
            parentEl : ct,
            shim : this.shim,
            shadowOffset:4,
            id: this.id,
            constrain: this.constrain
        });
        this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
        if(this.field.msgTarget != 'title'){
            this.field.msgTarget = 'qtip';
        }
        this.field.inEditor = true;
        this.field.render(this.el);
        if(Ext.isGecko){
            this.field.el.dom.setAttribute('autocomplete', 'off');
        }
        this.field.on("specialkey", this.onSpecialKey, this);
        if(this.swallowKeys){
            this.field.el.swallowEvent(['keydown','keypress']);
        }
        this.field.show();
        this.field.on("blur", this.onBlur, this);
        if(this.field.grow){
            this.field.on("autosize", this.el.sync,  this.el, {delay:1});
        }
    },

    onSpecialKey : function(field, e){
        if(this.completeOnEnter && e.getKey() == e.ENTER){
            e.stopEvent();
            this.completeEdit();
        }else if(this.cancelOnEsc && e.getKey() == e.ESC){
            this.cancelEdit();
        }else{
            this.fireEvent('specialkey', field, e);
        }
    },

    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){
            return;
        }
        this.startValue = v;
        this.field.setValue(v);
        this.doAutoSize();
        this.el.alignTo(this.boundEl, this.alignment);
        this.editing = true;
        this.show();
    },

        doAutoSize : function(){
        if(this.autoSize){
            var sz = this.boundEl.getSize();
            switch(this.autoSize){
                case "width":
                    this.setSize(sz.width,  "");
                break;
                case "height":
                    this.setSize("",  sz.height);
                break;
                default:
                    this.setSize(sz.width,  sz.height);
            }
        }
    },

    setSize : function(w, h){
        delete this.field.lastSize;
        this.field.setSize(w, h);
        if(this.el){
            this.el.sync();
        }
    },

    realign : function(){
        this.el.alignTo(this.boundEl, this.alignment);
    },

    completeEdit : function(remainVisible){
        if(!this.editing){
            return;
        }
        var v = this.getValue();
        if(this.revertInvalid !== false && !this.field.isValid()){
            v = this.startValue;
            this.cancelEdit(true);
        }
        if(String(v) === String(this.startValue) && this.ignoreNoChange){
            this.editing = false;
            this.hide();
            return;
        }
        if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
            this.editing = false;
            if(this.updateEl && this.boundEl){
                this.boundEl.update(v);
            }
            if(remainVisible !== true){
                this.hide();
            }
            this.fireEvent("complete", this, v, this.startValue);
        }
    },

        onShow : function(){
        this.el.show();
        if(this.hideEl !== false){
            this.boundEl.hide();
        }
        this.field.show();
        if(Ext.isIE && !this.fixIEFocus){             this.fixIEFocus = true;
            this.deferredFocus.defer(50, this);
        }else{
            this.field.focus();
        }
        this.fireEvent("startedit", this.boundEl, this.startValue);
    },

    deferredFocus : function(){
        if(this.editing){
            this.field.focus();
        }
    },

    cancelEdit : function(remainVisible){
        if(this.editing){
            this.setValue(this.startValue);
            if(remainVisible !== true){
                this.hide();
            }
        }
    },

        onBlur : function(){
        if(this.allowBlur !== true && this.editing){
            this.completeEdit();
        }
    },

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

    setValue : function(v){
        this.field.setValue(v);
    },

    getValue : function(){
        return this.field.getValue();
    },

    beforeDestroy : function(){
        this.field.destroy();
        this.field = null;
    }
});
Ext.reg('editor', Ext.Editor);

Ext.MessageBox = function(){
    var dlg, opt, mask, waitTimer;
    var bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl;
    var buttons, activeTextEl, bwidth, iconCls = '';

    var handleButton = function(button){
        dlg.hide();
        Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
    };

    var handleHide = function(){
        if(opt && opt.cls){
            dlg.el.removeClass(opt.cls);
        }
        progressBar.reset();
    };

    var handleEsc = function(d, k, e){
        if(opt && opt.closable !== false){
            dlg.hide();
        }
        if(e){
            e.stopEvent();
        }
    };

    var updateButtons = function(b){
        var width = 0;
        if(!b){
            buttons["ok"].hide();
            buttons["cancel"].hide();
            buttons["yes"].hide();
            buttons["no"].hide();
            return width;
        }
        dlg.footer.dom.style.display = '';
        for(var k in buttons){
            if(typeof buttons[k] != "function"){
                if(b[k]){
                    buttons[k].show();
                    buttons[k].setText(typeof b[k] == "string" ? b[k] : Ext.MessageBox.buttonText[k]);
                    width += buttons[k].el.getWidth()+15;
                }else{
                    buttons[k].hide();
                }
            }
        }
        return width;
    };

    return {

        getDialog : function(titleText){
           if(!dlg){
                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");
                        }
                    }
                });
                buttons = {};
                var bt = this.buttonText;

                buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
                buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
                buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
                buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
                buttons["ok"].hideMode = buttons["yes"].hideMode = buttons["no"].hideMode = buttons["cancel"].hideMode = 'offsets';
                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]);
                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[3]);
                textareaEl.enableDisplayMode();
                progressBar = new Ext.ProgressBar({
                    renderTo:bodyEl
                });
               bodyEl.createChild({cls:'x-clear'});
            }
            return dlg;
        },

        updateText : function(text){
            if(!dlg.isVisible() && !opt.width){
                dlg.setSize(this.maxWidth, 100);
            }
            msgEl.update(text || ' ');

            var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0;
            var mw = msgEl.getWidth() + msgEl.getMargins('lr');
            var fw = dlg.getFrameWidth('lr');
            var bw = dlg.body.getFrameWidth('lr');
            if (Ext.isIE && iw > 0){

                iw += 3;
            }
            var w = Math.max(Math.min(opt.width || iw+mw+fw+bw, 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);
            }
            dlg.setSize(w, 'auto').center();
            return this;
        },

        updateProgress : function(value, progressText, msg){
            progressBar.updateProgress(value, progressText);
            if(msg){
                this.updateText(msg);
            }
            return this;
        },

        isVisible : function(){
            return dlg && dlg.isVisible();
        },

        hide : function(){
            if(this.isVisible()){
                dlg.hide();
                handleHide();
            }
            return 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(typeof opt.multiline == "number" ?
                        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;
                }
            }
            this.setIcon(opt.icon);
            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()){

                document.body.appendChild(dlg.el.dom);
                d.setAnimateTarget(opt.animEl);
                d.show(opt.animEl);
            }

            d.on('show', function(){
                if(allowClose === true){
                    d.keyMap.enable();
                }else{
                    d.keyMap.disable();
                }
            }, this, {single:true});

            if(opt.wait === true){
                progressBar.wait(opt.waitConfig);
            }
            return this;
        },

        setIcon : function(icon){
            if(icon && icon != ''){
                iconEl.removeClass('x-hidden');
                iconEl.replaceClass(iconCls, icon);
                iconCls = icon;
            }else{
                iconEl.replaceClass(iconCls, 'x-hidden');
                iconCls = '';
            }
            return 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;
        },

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

        alert : function(title, msg, fn, scope){
            this.show({
                title : title,
                msg : msg,
                buttons: this.OK,
                fn: fn,
                scope : scope
            });
            return this;
        },

        confirm : function(title, msg, fn, scope){
            this.show({
                title : title,
                msg : msg,
                buttons: this.YESNO,
                fn: fn,
                scope : scope,
                icon: this.QUESTION
            });
            return this;
        },

        prompt : function(title, msg, fn, scope, multiline){
            this.show({
                title : title,
                msg : msg,
                buttons: this.OKCANCEL,
                fn: fn,
                minWidth:250,
                scope : scope,
                prompt:true,
                multiline: multiline
            });
            return this;
        },

        OK : {ok:true},

        CANCEL : {cancel:true},

        OKCANCEL : {ok:true, cancel:true},

        YESNO : {yes:true, no:true},

        YESNOCANCEL : {yes:true, no:true, cancel:true},

        INFO : 'ext-mb-info',

        WARNING : 'ext-mb-warning',

        QUESTION : 'ext-mb-question',

        ERROR : 'ext-mb-error',

        defaultTextHeight : 75,

        maxWidth : 600,

        minWidth : 100,

        minProgressWidth : 250,

        buttonText : {
            ok : "OK",
            cancel : "Cancel",
            yes : "Yes",
            no : "No"
        }
    };
}();

Ext.Msg = Ext.MessageBox;

Ext.Tip = Ext.extend(Ext.Panel, {

    minWidth : 40,

    maxWidth : 300,

    shadow : "sides",

    defaultAlign : "tl-bl?",
    autoRender: true,
    quickShowInterval : 250,

    frame:true,
    hidden:true,
    baseCls: 'x-tip',
    floating:{shadow:true,shim:true,useDisplay:true,constrain:false},
    autoHeight:true,

    initComponent : function(){
        Ext.Tip.superclass.initComponent.call(this);
        if(this.closable && !this.title){
            this.elements += ',header';
        }
    },

    afterRender : function(){
        Ext.Tip.superclass.afterRender.call(this);
        if(this.closable){
            this.addTool({
                id: 'close',
                handler: this.hide,
                scope: this
            });
        }
    },

    showAt : function(xy){
        Ext.Tip.superclass.show.call(this);
        if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
            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");
            this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
        }
        if(this.constrainPosition){
            xy = this.el.adjustForConstraints(xy);
        }
        this.setPagePosition(xy[0], xy[1]);
    },

    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.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);
    }
});

Ext.ToolTip = Ext.extend(Ext.Tip, {

    showDelay: 500,

    hideDelay: 200,

    dismissDelay: 5000,

    mouseOffset: [15,18],

    trackMouse : false,
    constrainPosition: true,

    initComponent: function(){
        Ext.ToolTip.superclass.initComponent.call(this);
        this.lastActive = new Date();
        this.initTarget();
    },

    initTarget : function(){
        if(this.target){
            this.target = Ext.get(this.target);
            this.target.on('mouseover', this.onTargetOver, this);
            this.target.on('mouseout', this.onTargetOut, this);
            this.target.on('mousemove', this.onMouseMove, this);
        }
    },

    onMouseMove : function(e){
        this.targetXY = e.getXY();
        if(!this.hidden && this.trackMouse){
            this.setPagePosition(this.getTargetXY());
        }
    },

    getTargetXY : function(){
        return [this.targetXY[0]+this.mouseOffset[0], this.targetXY[1]+this.mouseOffset[1]];
    },

    onTargetOver : function(e){
        if(this.disabled || e.within(this.target.dom, true)){
            return;
        }
        this.clearTimer('hide');
        this.targetXY = e.getXY();
        this.delayShow();
    },

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

    onTargetOut : function(e){
        if(this.disabled || e.within(this.target.dom, true)){
            return;
        }
        this.clearTimer('show');
        if(this.autoHide !== false){
            this.delayHide();
        }
    },

    delayHide : function(){
        if(!this.hidden && !this.hideTimer){
            this.hideTimer = this.hide.defer(this.hideDelay, this);
        }
    },

    hide: function(){
        this.clearTimer('dismiss');
        this.lastActive = new Date();
        Ext.ToolTip.superclass.hide.call(this);
    },

    show : function(){
        this.showAt(this.getTargetXY());
    },

    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);
        }
    },

    clearTimer : function(name){
        name = name + 'Timer';
        clearTimeout(this[name]);
        delete this[name];
    },

    clearTimers : function(){
        this.clearTimer('show');
        this.clearTimer('dismiss');
        this.clearTimer('hide');
    },

    onShow : function(){
        Ext.ToolTip.superclass.onShow.call(this);
        Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
    },

    onHide : function(){
        Ext.ToolTip.superclass.onHide.call(this);
        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
    },

    onDocMouseDown : function(e){
        if(this.autoHide !== false && !e.within(this.el.dom)){
            this.disable();
            this.enable.defer(100, this);
        }
    },

    onDisable : function(){
        this.clearTimers();
        this.hide();
    },

    adjustPosition : function(x, y){

        var ay = this.targetXY[1], h = this.getSize().height;
        if(this.constrainPosition && y <= ay && (y+h) >= ay){
            y = ay-h-5;
        }
        return {x : x, y: y};
    },

    onDestroy : function(){
        Ext.ToolTip.superclass.onDestroy.call(this);
        if(this.target){
            this.target.un('mouseover', this.onTargetOver, this);
            this.target.un('mouseout', this.onTargetOut, this);
            this.target.un('mousemove', this.onMouseMove, this);
        }
    }
});

Ext.QuickTip = Ext.extend(Ext.ToolTip, {

    interceptTitles : false,

    tagConfig : {
        namespace : "ext",
        attribute : "qtip",
        width : "qwidth",
        target : "target",
        title : "qtitle",
        hide : "hide",
        cls : "qclass",
        align : "qalign"
    },

    initComponent : function(){
        this.target = this.target || Ext.getDoc();
        this.targets = this.targets || {};
        Ext.QuickTip.superclass.initComponent.call(this);
    },

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

    unregister : function(el){
        delete this.targets[Ext.id(el)];
    },

    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){
            this.clearTimer('hide');
            this.show();
            return;
        }
        if(t && this.targets[t.id]){
            this.activeTarget = this.targets[t.id];
            this.activeTarget.el = t;
            this.delayShow();
            return;
        }
        var ttp, et = Ext.fly(t), cfg = this.tagConfig;
        var ns = cfg.namespace;
        if(this.interceptTitles && t.title){
            ttp = t.title;
            t.qtip = ttp;
            t.removeAttribute("title");
            e.preventDefault();
        } else{
            ttp = t.qtip || et.getAttributeNS(ns, cfg.attribute);
        }
        if(ttp){
            var autoHide = et.getAttributeNS(ns, cfg.hide);
            this.activeTarget = {
                el: t,
                text: ttp,
                width: et.getAttributeNS(ns, cfg.width),
                autoHide: autoHide != "user" && autoHide !== 'false',
                title: et.getAttributeNS(ns, cfg.title),
                cls: et.getAttributeNS(ns, cfg.cls),
                align: et.getAttributeNS(ns, cfg.align)
            };
            this.delayShow();
        }
    },

    onTargetOut : function(e){
        this.clearTimer('show');
        if(this.autoHide !== false){
            this.delayHide();
        }
    },

    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(t.align){
                xy = this.el.getAlignToXY(t.el, t.align);
                this.constrainPosition = false;
            } else{
                this.constrainPosition = true;
            }
        }
        Ext.QuickTip.superclass.showAt.call(this, xy);
    },

    hide: function(){
        delete this.activeTarget;
        Ext.QuickTip.superclass.hide.call(this);
    }
});

Ext.QuickTips = function(){
    var tip, locks = [];
    return {

        init : function(){
            if(!tip){
                tip = new Ext.QuickTip({elements:'header,body'});
            }
        },

        enable : function(){
            if(tip){
                locks.pop();
                if(locks.length < 1){
                    tip.enable();
                }
            }
        },

        disable : function(){
            if(tip){
                tip.disable();
            }
            locks.push(1);
        },

        isEnabled : function(){
            return tip && !tip.disabled;
        },

        getQuickTip : function(){
            return tip;
        },

        register : function(){
            tip.register.apply(tip, arguments);
        },

        unregister : function(){
            tip.unregister.apply(tip, arguments);
        },

        tips :function(){
            tip.register.apply(tip, arguments);
        }
    }
}();

Ext.tree.TreePanel = Ext.extend(Ext.Panel, {
    rootVisible : true,
    animate: Ext.enableFx,
    lines : true,
    enableDD : false,
    hlDrop : Ext.enableFx,
    pathSeparator: "/",

    initComponent : function(){
        Ext.tree.TreePanel.superclass.initComponent.call(this);

        if(!this.eventModel){
            this.eventModel = new Ext.tree.TreeEventModel(this);
        }

        this.nodeHash = {};

        if(this.root){
           this.setRootNode(this.root);
        }

        this.addEvents(

           "append",

           "remove",

           "movenode",

           "insert",

           "beforeappend",

           "beforeremove",

           "beforemovenode",

            "beforeinsert",

            "beforeload",

            "load",

            "textchange",

            "beforeexpandnode",

            "beforecollapsenode",

            "expandnode",

            "disabledchange",

            "collapsenode",

            "beforeclick",

            "click",

            "checkchange",

            "dblclick",

            "contextmenu",

            "beforechildrenrendered",

            "startdrag",

            "enddrag",

            "dragdrop",

            "beforenodedrop",

            "nodedrop",

            "nodedragover"
        );
        if(this.singleExpand){
            this.on("beforeexpandnode", this.restrictExpand, this);
        }
    },

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

        return this.fireEvent(ename, a1, a2, a3, a4, a5, a6);
    },

    getRootNode : function(){
        return this.root;
    },

    setRootNode : function(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);
        }
        return node;
    },

    getNodeById : function(id){
        return this.nodeHash[id];
    },

    registerNode : function(node){
        this.nodeHash[node.id] = node;
    },

    unregisterNode : function(node){
        delete this.nodeHash[node.id];
    },

    toString : function(){
        return "[Tree"+(this.id?" "+this.id:"")+"]";
    },

    restrictExpand : function(node){
        var p = node.parentNode;
        if(p){
            if(p.expandedChild && p.expandedChild.parentNode == p){
                p.expandedChild.collapse();
            }
            p.expandedChild = node;
        }
    },

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

    getEl : function(){
        return this.el;
    },

    getLoader : function(){
        return this.loader;
    },

    expandAll : function(){
        this.root.expand(true);
    },

    collapseAll : function(){
        this.root.collapse(true);
    },

    getSelectionModel : function(){
        if(!this.selModel){
            this.selModel = new Ext.tree.DefaultSelectionModel();
        }
        return this.selModel;
    },

    expandPath : function(path, attr, callback){
        attr = attr || "id";
        var keys = path.split(this.pathSeparator);
        var curNode = this.root;
        if(curNode.attributes[attr] != keys[1]){
            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);
    },

    selectPath : function(path, attr, callback){
        attr = attr || "id";
        var keys = path.split(this.pathSeparator);
        var v = keys.pop();
        if(keys.length > 0){
            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);
            }
        }
    },

    getTreeEl : function(){
        return this.body;
    },

    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")});
    },

    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){

             this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
               ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
           });
        }
        if((this.enableDD || this.enableDrag) && !this.dragZone){

            this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || {
               ddGroup: this.ddGroup || "TreeDD",
               scroll: this.ddScroll
           });
        }
        this.getSelectionModel().init(this);
    },

    afterRender : function(){
        Ext.tree.TreePanel.superclass.afterRender.call(this);
        this.root.render();
        if(!this.rootVisible){
            this.root.renderChildren();
        }
    },

    onDestroy : function(){
        if(this.rendered){
            this.body.removeAllListeners();
            Ext.dd.ScrollManager.unregister(this.body);
            if(this.dropZone){
                this.dropZone.unreg();
            }
            if(this.dragZone){
               this.dragZone.unreg();
            }
        }
        this.root.destroy();
        this.nodeHash = null;
        Ext.tree.TreePanel.superclass.onDestroy.call(this);
    }

});
Ext.reg('treepanel', Ext.tree.TreePanel);
Ext.tree.TreeEventModel = function(tree){
    this.tree = tree;
    this.tree.on('render', this.initEvents, this);
}

Ext.tree.TreeEventModel.prototype = {
    initEvents : function(){
        var el = this.tree.getTreeEl();
        el.on('click', this.delegateClick, this);
        if(this.tree.trackMouseOver !== false){
            el.on('mouseover', this.delegateOver, this);
            el.on('mouseout', this.delegateOut, this);
        }
        el.on('dblclick', this.delegateDblClick, this);
        el.on('contextmenu', this.delegateContextMenu, this);
    },

    getNode : function(e){
        var t;
        if(t = e.getTarget('.x-tree-node-el', 10)){
            var id = Ext.fly(t, '_treeEvents').getAttributeNS('ext', 'tree-node-id');
            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(this.lastEcOver){
            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));
        }
    },

    delegateClick : function(e, t){
        if(!this.beforeEvent(e)){
            return;
        }

        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));
        }
    },

    delegateDblClick : function(e, t){
        if(this.beforeEvent(e) && this.getNodeTarget(e)){
            this.onNodeDblClick(e, this.getNode(e));
        }
    },

    delegateContextMenu : function(e, t){
        if(this.beforeEvent(e) && this.getNodeTarget(e)){
            this.onNodeContextMenu(e, this.getNode(e));
        }
    },

    onNodeClick : function(e, node){
        node.ui.onClick(e);
    },

    onNodeOver : function(e, 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){
        if(this.disabled){
            e.stopEvent();
            return false;
        }
        return true;
    },

    disable: function(){
        this.disabled = true;
    },

    enable: function(){
        this.disabled = false;
    }
};

Ext.tree.DefaultSelectionModel = function(config){
   this.selNode = null;

   this.addEvents(

       "selectionchange",

       "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.getTreeEl().on("keydown", this.onKeyDown, this);
        tree.on("click", this.onNodeClick, this);
    },

    onNodeClick : function(node, e){
        this.select(node);
    },

    select : function(node){
        var last = this.selNode;
        if(last != node && this.fireEvent('beforeselect', this, node, last) !== false){
            if(last){
                last.ui.onSelectedChange(false);
            }
            this.selNode = node;
            node.ui.onSelectedChange(true);
            this.fireEvent("selectionchange", this, node, last);
        }
        return node;
    },

    unselect : function(node){
        if(this.selNode == node){
            this.clearSelections();
        }
    },

    clearSelections : function(){
        var n = this.selNode;
        if(n){
            n.ui.onSelectedChange(false);
            this.selNode = null;
            this.fireEvent("selectionchange", this, null);
        }
        return n;
    },

    getSelectedNode : function(){
        return this.selNode;
    },

    isSelected : function(node){
        return this.selNode == node;
    },

    selectPrevious : function(){
        var s = this.selNode || this.lastSelNode;
        if(!s){
            return null;
        }
        var ps = s.previousSibling;
        if(ps){
            if(!ps.isExpanded() || ps.childNodes.length < 1){
                return this.select(ps);
            } else{
                var lc = ps.lastChild;
                while(lc && lc.isExpanded() && lc.childNodes.length > 0){
                    lc = lc.lastChild;
                }
                return this.select(lc);
            }
        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
            return this.select(s.parentNode);
        }
        return null;
    },

    selectNext : function(){
        var s = this.selNode || this.lastSelNode;
        if(!s){
            return null;
        }
        if(s.firstChild && s.isExpanded()){
             return this.select(s.firstChild);
         }else if(s.nextSibling){
             return this.select(s.nextSibling);
         }else if(s.parentNode){
            var newS = null;
            s.parentNode.bubble(function(){
                if(this.nextSibling){
                    newS = this.getOwnerTree().selModel.select(this.nextSibling);
                    return false;
                }
            });
            return newS;
         }
        return null;
    },

    onKeyDown : function(e){
        var s = this.selNode || this.lastSelNode;

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

Ext.tree.MultiSelectionModel = function(config){
   this.selNodes = [];
   this.selMap = {};
   this.addEvents(

       "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.getTreeEl().on("keydown", this.onKeyDown, this);
        tree.on("click", this.onNodeClick, this);
    },

    onNodeClick : function(node, e){
        this.select(node, e, e.ctrlKey);
    },

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

    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);
        }
    },

    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);
            }
        }
    },

    isSelected : function(node){
        return this.selMap[node.id] ? true : false;
    },

    getSelectedNodes : function(){
        return this.selNodes;
    },

    onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown,

    selectNext : Ext.tree.DefaultSelectionModel.prototype.selectNext,

    selectPrevious : Ext.tree.DefaultSelectionModel.prototype.selectPrevious
});

Ext.tree.TreeNode = function(attributes){
    attributes = attributes || {};
    if(typeof attributes == "string"){
        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;

    this.text = attributes.text;

    this.disabled = attributes.disabled === true;

    this.addEvents(

        "textchange",

        "beforeexpand",

        "beforecollapse",

        "expand",

        "disabledchange",

        "collapse",

        "beforeclick",

        "click",

        "checkchange",

        "dblclick",

        "contextmenu",

        "beforechildrenrendered"
    );

    var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI;

    this.ui = new uiClass(this);
};
Ext.extend(Ext.tree.TreeNode, Ext.data.Node, {
    preventHScroll: true,

    isExpanded : function(){
        return this.expanded;
    },

    getUI : function(){
        return this.ui;
    },

    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);
        }
    },

    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);
        }
    },

    appendChild : function(){
        var node = Ext.tree.TreeNode.superclass.appendChild.apply(this, arguments);
        if(node && this.childrenRendered){
            node.render();
        }
        this.ui.updateExpandIcon();
        return node;
    },

    removeChild : function(node){
        this.ownerTree.getSelectionModel().unselect(node);
        Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);

        if(this.childrenRendered){
            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;
    },

    insertBefore : function(node, refNode){
        var newNode = Ext.tree.TreeNode.superclass.insertBefore.apply(this, arguments);
        if(newNode && refNode && this.childrenRendered){
            node.render();
        }
        this.ui.updateExpandIcon();
        return newNode;
    },

    setText : function(text){
        var oldText = this.text;
        this.text = text;
        this.attributes.text = text;
        if(this.rendered){
            this.ui.onTextChange(this, text, oldText);
        }
        this.fireEvent("textchange", this, text, oldText);
    },

    select : function(){
        this.getOwnerTree().getSelectionModel().select(this);
    },

    unselect : function(){
        this.getOwnerTree().getSelectionModel().unselect(this);
    },

    isSelected : function(){
        return this.getOwnerTree().getSelectionModel().isSelected(this);
    },

    expand : function(deep, anim, callback){
        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);
                    if(typeof callback == "function"){
                        callback(this);
                    }
                    if(deep === true){
                        this.expandChildNodes(true);
                    }
                }.createDelegate(this));
                return;
            }else{
                this.ui.expand();
                this.fireEvent("expand", this);
                if(typeof callback == "function"){
                    callback(this);
                }
            }
        }else{
           if(typeof callback == "function"){
               callback(this);
           }
        }
        if(deep === true){
            this.expandChildNodes(true);
        }
    },

    isHiddenRoot : function(){
        return this.isRoot && !this.getOwnerTree().rootVisible;
    },

    collapse : function(deep, anim){
        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);
                    if(deep === true){
                        this.collapseChildNodes(true);
                    }
                }.createDelegate(this));
                return;
            }else{
                this.ui.collapse();
                this.fireEvent("collapse", this);
            }
        }
        if(deep === true){
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++) {
                cs[i].collapse(true, false);
            }
        }
    },

    delayedExpand : function(delay){
        if(!this.expandProcId){
            this.expandProcId = this.expand.defer(delay, this);
        }
    },

    cancelExpand : function(){
        if(this.expandProcId){
            clearTimeout(this.expandProcId);
        }
        this.expandProcId = false;
    },

    toggle : function(){
        if(this.expanded){
            this.collapse();
        }else{
            this.expand();
        }
    },

    ensureVisible : function(callback){
        var tree = this.getOwnerTree();
        tree.expandPath(this.parentNode.getPath(), false, function(){
            var node = tree.getNodeById(this.id);
            tree.getTreeEl().scrollChildIntoView(node.ui.anchor);
            Ext.callback(callback);
        }.createDelegate(this));
    },

    expandChildNodes : function(deep){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            cs[i].expand(deep);
        }
    },

    collapseChildNodes : function(deep){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            cs[i].collapse(deep);
        }
    },

    disable : function(){
        this.disabled = true;
        this.unselect();
        if(this.rendered && this.ui.onDisableChange){
            this.ui.onDisableChange(this, true);
        }
        this.fireEvent("disabledchange", this, true);
    },

    enable : function(){
        this.disabled = false;
        if(this.rendered && this.ui.onDisableChange){
            this.ui.onDisableChange(this, false);
        }
        this.fireEvent("disabledchange", this, false);
    },

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

    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);
            }
        }
    },

    render : function(bulkRender){
        this.ui.render(bulkRender);
        if(!this.rendered){

            this.getOwnerTree().registerNode(this);
            this.rendered = true;
            if(this.expanded){
                this.expanded = false;
                this.expand(false, false);
            }
        }
    },

    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.renderChildren();
        }
    },

    destroy : function(){
        for(var i = 0,l = this.childNodes.length; i < l; i++){
            this.childNodes[i].destroy();
        }
        this.childNodes = null;
        if(this.ui.destroy){
            this.ui.destroy();
        }
    }
});

 Ext.tree.AsyncTreeNode = function(config){
    this.loaded = false;
    this.loading = false;
    Ext.tree.AsyncTreeNode.superclass.constructor.apply(this, arguments);

    this.addEvents('beforeload', 'load');

};
Ext.extend(Ext.tree.AsyncTreeNode, Ext.tree.TreeNode, {
    expand : function(deep, anim, callback){
        if(this.loading){
            var timer;
            var f = function(){
                if(!this.loading){
                    clearInterval(timer);
                    this.expand(deep, anim, callback);
                }
            }.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]));
                return;
            }
        }
        Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback);
    },

    isLoading : function(){
        return this.loading;
    },

    loadComplete : function(deep, anim, callback){
        this.loading = false;
        this.loaded = true;
        this.ui.afterLoad(this);
        this.fireEvent("load", this);
        this.expand(deep, anim, callback);
    },

    isLoaded : function(){
        return this.loaded;
    },

    hasChildNodes : function(){
        if(!this.isLeaf() && !this.loaded){
            return true;
        }else{
            return Ext.tree.AsyncTreeNode.superclass.hasChildNodes.call(this);
        }
    },

    reload : function(callback){
        this.collapse(false, false);
        while(this.firstChild){
            this.removeChild(this.firstChild);
        }
        this.childrenRendered = false;
        this.loaded = false;
        if(this.isHiddenRoot()){
            this.expanded = false;
        }
        this.expand(false, false, callback);
    }
});

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 = {

    removeChild : function(node){
        if(this.rendered){
            this.ctNode.removeChild(node.ui.getEl());
        }
    },

    beforeLoad : function(){
         this.addClass("x-tree-node-loading");
    },

    afterLoad : function(){
         this.removeClass("x-tree-node-loading");
    },

    onTextChange : function(node, text, oldText){
        if(this.rendered){
            this.textNode.innerHTML = text;
        }
    },

    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");
        }
    },

    onSelectedChange : function(state){
        if(state){
            this.focus();
            this.addClass("x-tree-selected");
        }else{

            this.removeClass("x-tree-selected");
        }
    },

    onMove : function(tree, node, oldParent, newParent, index, refNode){
        this.childIndent = null;
        if(this.rendered){
            var targetNode = newParent.ui.getContainer();
            if(!targetNode){
                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);
        }
    },

    addClass : function(cls){
        if(this.elNode){
            Ext.fly(this.elNode).addClass(cls);
        }
    },

    removeClass : function(cls){
        if(this.elNode){
            Ext.fly(this.elNode).removeClass(cls);
        }
    },

    remove : function(){
        if(this.rendered){
            this.holder = document.createElement("div");
            this.holder.appendChild(this.wrap);
        }
    },

    fireEvent : function(){
        return this.node.fireEvent.apply(this.node, arguments);
    },

    initEvents : function(){
        this.node.on("move", this.onMove, this);

        if(this.node.disabled){
            this.addClass("x-tree-node-disabled");
            if (this.checkbox) {
                this.checkbox.disabled = 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
            });
        }
    },

    getDDHandles : function(){
        return [this.iconNode, this.textNode, this.elNode];
    },

    hide : function(){
        this.node.hidden = true;
        if(this.wrap){
            this.wrap.style.display = "none";
        }
    },

    show : function(){
        this.node.hidden = false;
        if(this.wrap){
            this.wrap.style.display = "";
        }
    },

    onContextMenu : function(e){
        if (this.node.hasListener("contextmenu") || this.node.getOwnerTree().hasListener("contextmenu")) {
            e.preventDefault();
            this.focus();
            this.fireEvent("contextmenu", this.node, e);
        }
    },

    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.hasChildNodes()){
                this.node.toggle();
            }

            this.fireEvent("click", this.node, e);
        }else{
            e.stopEvent();
        }
    },

    onDblClick : function(e){
        e.preventDefault();
        if(this.disabled){
            return;
        }
        if(this.checkbox){
            this.toggleCheck();
        }
        if(!this.animating && this.node.hasChildNodes()){
            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');
    },

    onCheckChange : function(){
        var checked = this.checkbox.checked;
        this.node.attributes.checked = checked;
        this.fireEvent('checkchange', this.node, checked);
    },

    ecClick : function(e){
        if(!this.animating && (this.node.hasChildNodes() || this.node.attributes.expandable)){
            this.node.toggle();
        }
    },

    startDrop : function(){
        this.dropping = true;
    },

    endDrop : function(){
       setTimeout(function(){
           this.dropping = false;
       }.createDelegate(this), 50);
    },

    expand : function(){
        this.updateExpandIcon();
        this.ctNode.style.display = "";
    },

    focus : function(){
        if(!this.node.preventHScroll){
            try{this.anchor.focus();
            }catch(e){}
        }else if(!Ext.isIE){
            try{
                var noscroll = this.node.getOwnerTree().getTreeEl().dom;
                var l = noscroll.scrollLeft;
                this.anchor.focus();
                noscroll.scrollLeft = l;
            }catch(e){}
        }
    },

    toggleCheck : function(value){
        var cb = this.checkbox;
        if(cb){
            cb.checked = (value === undefined ? !cb.checked : value);
        }
    },

    blur : function(){
        try{
            this.anchor.blur();
        }catch(e){}
    },

    animExpand : function(callback){
        var ct = Ext.get(this.ctNode);
        ct.stopFx();
        if(!this.node.hasChildNodes()){
            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
        });
    },

    highlight : function(){
        var tree = this.node.getOwnerTree();
        Ext.fly(this.wrap).highlight(
            tree.hlColor || "C3DAF9",
            {endColor: tree.hlBaseColor}
        );
    },

    collapse : function(){
        this.updateExpandIcon();
        this.ctNode.style.display = "none";
    },

    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
        });
    },

    getContainer : function(){
        return this.ctNode;
    },

    getEl : function(){
        return this.wrap;
    },

    appendDDGhost : function(ghostNode){
        ghostNode.appendChild(this.elNode.cloneNode(true));
    },

    getDDRepairXY : function(){
        return Ext.lib.Dom.getXY(this.iconNode);
    },

    onRender : function(){
        this.render();
    },

    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);
            }
        }
    },

    renderElements : function(n, a, targetNode, bulkRender){

        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        var cb = typeof a.checked == 'boolean';

        var href = a.href ? a.href : Ext.isGecko ? "" : "#";
        var buf = ['
  • ',
            '',this.indentMarkup,"",
            '  ',
            '  ',
            cb ? ('' : '/>')) : '',
            '',n.text,"
    ",
            '
      ',
            "
      • "].join('');

        var nel;
        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];
            index++;
        }
        this.anchor = cs[index];
        this.textNode = cs[index].firstChild;
    },

    getAnchor : function(){
        return this.anchor;
    },

    getTextEl : function(){
        return this.textNode;
    },

    getIconEl : function(){
        return this.iconNode;
    },

    isChecked : function(){
        return this.checkbox ? this.checkbox.checked : false;
    },

    updateExpandIcon : function(){
        if(this.rendered){
            var n = this.node, c1, c2;
            var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
            var 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-leaf");
                    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;
            }
        }
    },

    getChildIndent : function(){
        if(!this.childIndent){
            var buf = [];
            var 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;
    },

    renderIndent : function(){
        if(this.rendered){
            var indent = "";
            var p = this.node.parentNode;
            if(p){
                indent = p.ui.getChildIndent();
            }
            if(this.indentMarkup != indent){
                this.indentNode.innerHTML = indent;
                this.indentMarkup = indent;
            }
            this.updateExpandIcon();
        }
    },

    destroy : function(){
        if(this.elNode){
            Ext.dd.Registry.unregister(this.elNode.id);
        }
        delete this.elNode;
        delete this.ctNode;
        delete this.indentNode;
        delete this.ecNode;
        delete this.iconNode;
        delete this.checkbox;
        delete this.anchor;
        delete this.textNode;
        Ext.removeNode(this.ctNode);
    }
};

Ext.tree.RootTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {

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

Ext.tree.TreeLoader = function(config){
    this.baseParams = {};
    this.requestMethod = "POST";
    Ext.apply(this, config);

    this.addEvents(

        "beforeload",

        "load",

        "loadexception"
    );

    Ext.tree.TreeLoader.superclass.constructor.call(this);
};

Ext.extend(Ext.tree.TreeLoader, Ext.util.Observable, {

    uiProviders : {},

    clearOnLoad : true,

    load : function(node, callback){
        if(this.clearOnLoad){
            while(node.firstChild){
                node.removeChild(node.firstChild);
            }
        }
        if(this.doPreload(node)){
            if(typeof callback == "function"){
                callback();
            }
        }else if(this.dataUrl||this.url){
            this.requestData(node, callback);
        }
    },

    doPreload : function(node){
        if(node.attributes.children){
            if(node.childNodes.length < 1){
                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;
        }else {
            return false;
        }
    },

    getParams: function(node){
        var buf = [], bp = this.baseParams;
        for(var key in bp){
            if(typeof bp[key] != "function"){
                buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
            }
        }
        buf.push("node=", encodeURIComponent(node.id));
        return buf.join("");
    },

    requestData : function(node, callback){
        if(this.fireEvent("beforeload", this, node, callback) !== false){
            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},
                params: this.getParams(node)
            });
        }else{

            if(typeof callback == "function"){
                callback();
            }
        }
    },

    isLoading : function(){
        return this.transId ? true : false;
    },

    abort : function(){
        if(this.isLoading()){
            Ext.Ajax.abort(this.transId);
        }
    },

    createNode : function(attr){

        if(this.baseAttrs){
            Ext.applyIf(attr, this.baseAttrs);
        }
        if(this.applyLoader !== false){
            attr.loader = this;
        }
        if(typeof attr.uiProvider == 'string'){
           attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
        }
        return(attr.leaf ?
                        new Ext.tree.TreeNode(attr) :
                        new Ext.tree.AsyncTreeNode(attr));
    },

    processResponse : function(response, node, callback){
        var json = response.responseText;
        try {
            var o = eval("("+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();
            if(typeof callback == "function"){
                callback(this, node);
            }
        }catch(e){
            this.handleFailure(response);
        }
    },

    handleResponse : function(response){
        this.transId = false;
        var a = response.argument;
        this.processResponse(response, a.node, a.callback);
        this.fireEvent("load", this, a.node, response);
    },

    handleFailure : function(response){
        this.transId = false;
        var a = response.argument;
        this.fireEvent("loadexception", this, a.node, response);
        if(typeof a.callback == "function"){
            a.callback(this, a.node);
        }
    }
});

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 : function(value, attr, startNode){
        attr = attr || "text";
        var f;
        if(typeof value == "string"){
            var vlen = value.length;

            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){
            f = function(n){
                return value.test(n.attributes[attr]);
            };
        }else{
            throw 'Illegal filter type, must be string or regex';
        }
        this.filterBy(f, null, startNode);
    },

    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);
                   }
               }
           }
        }
    },

    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 = {};
    }
};

Ext.tree.TreeSorter = function(tree, config){
    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]);
        }
    }
};

if(Ext.dd.DropZone){

Ext.tree.TreeDropZone = function(tree, config){

    this.allowParentInsert = false;

    this.allowContainerDrop = false;

    this.appendOnly = false;
    Ext.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);

    this.tree = tree;

    this.dragOverData = {};

    this.lastInsertClass = "x-tree-no-status";
};

Ext.extend(Ext.tree.TreeDropZone, Ext.dd.DropZone, {

    ddGroup : "TreeDD",

    expandDelay : 1000,

    expandNode : function(node){
        if(node.hasChildNodes() && !node.isExpanded()){
            node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
        }
    },

    queueExpand : function(node){
        this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
    },

    cancelExpand : function(){
        if(this.expandProcId){
            clearTimeout(this.expandProcId);
            this.expandProcId = false;
        }
    },

    isValidDropPoint : function(n, pt, dd, e, data){
        if(!n || !data){ return false; }
        var targetNode = n.node;
        var dropNode = data.node;

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

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

    getDropPoint : function(e, n, dd){
        var tn = n.node;
        if(tn.isRoot){
            return tn.allowChildren !== false ? "append" : false;
        }
        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";
        }
    },

    onNodeEnter : function(n, dd, e, data){
        this.cancelExpand();
    },

    onNodeOver : function(n, dd, e, data){
        var pt = this.getDropPoint(e, n, dd);
        var node = n.node;

        if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
            this.queueExpand(node);
        }else if(pt != "append"){
            this.cancelExpand();
        }

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

    onNodeOut : function(n, dd, e, data){
        this.cancelExpand();
        this.removeDropIndicators(n);
    },

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

        var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
        var dropEvent = {
            tree : this.tree,
            target: targetNode,
            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){
            targetNode.ui.endDrop();
            return dropEvent.dropStatus;
        }

        targetNode = dropEvent.target;
        if(point == "append" && !targetNode.isExpanded()){
            targetNode.expand(false, null, function(){
                this.completeDrop(dropEvent);
            }.createDelegate(this));
        }else{
            this.completeDrop(dropEvent);
        }
        return true;
    },

    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(this.tree.hlDrop){
            n.ui.highlight();
        }
        t.ui.endDrop();
        this.tree.fireEvent("nodedrop", de);
    },

    afterNodeMoved : function(dd, data, e, targetNode, dropNode){
        if(this.tree.hlDrop){
            dropNode.ui.focus();
            dropNode.ui.highlight();
        }
        this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
    },

    getTree : function(){
        return this.tree;
    },

    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";
        }
    },

    beforeDragDrop : function(target, e, id){
        this.cancelExpand();
        return true;
    },

    afterRepair : function(data){
        if(data && Ext.enableFx){
            data.node.ui.highlight();
        }
        this.hideProxy();
    }
});

}

if(Ext.dd.DragZone){
Ext.tree.TreeDragZone = function(tree, config){
    Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.getTreeEl(), config);

    this.tree = tree;
};

Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {

    ddGroup : "TreeDD",

    onBeforeDrag : function(data, e){
        var n = data.node;
        return n && n.draggable && !n.disabled;
    },

    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);
    },

    getRepairXY : function(e, data){
        return data.node.ui.getDDRepairXY();
    },

    onEndDrag : function(data, e){
        this.tree.eventModel.enable.defer(100, this.tree.eventModel);
        this.tree.fireEvent("enddrag", this.tree, data.node, e);
    },

    onValidDrop : function(dd, e, id){
        this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
        this.hideProxy();
    },

    beforeInvalidDrop : function(e, id){

        var sm = this.tree.getSelectionModel();
        sm.clearSelections();
        sm.select(this.dragData.node);
    }
});
}

Ext.tree.TreeEditor = function(tree, config){
    config = config || {};
    var field = config.events ? config : new Ext.form.TextField(config);
    Ext.tree.TreeEditor.superclass.constructor.call(this, field);

    this.tree = tree;

    if(!tree.rendered){
        tree.on('render', this.initEditor, this);
    }else{
        this.initEditor(tree);
    }
};

Ext.extend(Ext.tree.TreeEditor, Ext.Editor, {

    alignment: "l-l",
        autoSize: false,

    hideEl : false,

    cls: "x-small-editor x-tree-editor",

    shim:false,
        shadow:"frame",

    maxWidth: 250,

    editDelay : 350,

    initEditor : function(tree){
        tree.on('beforeclick', this.beforeNodeClick, this);
        tree.on('dblclick', this.onNodeDblClick, this);
        this.on('complete', this.updateNode, this);
        this.on('beforestartedit', this.fitToTree, this);
        this.on('startedit', this.bindScroll, this, {delay:10});
        this.on('specialkey', this.onSpecialKey, this);
    },

        fitToTree : function(ed, el){
        var td = this.tree.getTreeEl().dom, nd = el.dom;
        if(td.scrollLeft >  nd.offsetLeft){             td.scrollLeft = nd.offsetLeft;
        }
        var w = Math.min(
                this.maxWidth,
                (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) - Math.max(0, nd.offsetLeft-td.scrollLeft) - 5);
        this.setSize(w, '');
    },

        triggerEdit : function(node, defer){
        this.completeEdit();
        if(node.attributes.editable !== false){
            this.editNode = node;
            this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]);
            return false;
        }
    },

        bindScroll : function(){
        this.tree.getTreeEl().on('scroll', this.cancelEdit, this);
    },

        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);
    },

        updateNode : function(ed, value){
        this.tree.getTreeEl().un('scroll', this.cancelEdit, this);
        this.editNode.setText(value);
    },

        onHide : function(){
        Ext.tree.TreeEditor.superclass.onHide.call(this);
        if(this.editNode){
            this.editNode.ui.focus.defer(50, this.editNode.ui);
        }
    },

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

Ext.menu.Menu = function(config){
    if(Ext.isArray(config)){
        config = {items:config};
    }
    Ext.apply(this, config);
    this.id = this.id || Ext.id();
    this.addEvents(

        'beforeshow',

        'beforehide',

        'show',

        'hide',

        'click',

        'mouseover',

        'mouseout',

        'itemclick'
    );
    Ext.menu.MenuMgr.register(this);
    Ext.menu.Menu.superclass.constructor.call(this);
    var mis = this.items;

    this.items = new Ext.util.MixedCollection();
    if(mis){
        this.add.apply(this, mis);
    }
};

Ext.extend(Ext.menu.Menu, Ext.util.Observable, {

    minWidth : 120,

    shadow : "sides",

    subMenuAlign : "tl-tr?",

    defaultAlign : "tl-bl?",

    allowOtherMenus : false,

    hidden:true,

    createEl : function(){
        return new Ext.Layer({
            cls: "x-menu",
            shadow:this.shadow,
            constrain: false,
            parentEl: this.parentEl || document.body,
            zindex:15000
        });
    },

        render : function(){
        if(this.el){
            return;
        }
        var el = this.el = this.createEl();

        if(!this.keyNav){
            this.keyNav = new Ext.menu.MenuNav(this);
        }
        if(this.plain){
            el.addClass("x-menu-plain");
        }
        if(this.cls){
            el.addClass(this.cls);
        }
                this.focusEl = el.createChild({
            tag: "a", cls: "x-menu-focus", href: "#", onclick: "return false;", tabIndex:"-1"
        });
        var ul = el.createChild({tag: "ul", cls: "x-menu-list"});
        ul.on("click", this.onClick, this);
        ul.on("mouseover", this.onMouseOver, this);
        ul.on("mouseout", this.onMouseOut, this);
        this.items.each(function(item){
            var li = document.createElement("li");
            li.className = "x-menu-list-item";
            ul.dom.appendChild(li);
            item.render(li, this);
        }, this);
        this.ul = ul;
        this.autoWidth();
    },

        autoWidth : function(){
        var el = this.el, ul = this.ul;
        if(!el){
            return;
        }
        var w = this.width;
        if(w){
            el.setWidth(w);
        }else if(Ext.isIE){
            el.setWidth(this.minWidth);
            var t = el.dom.offsetWidth;             el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
        }
    },

        delayAutoWidth : function(){
        if(this.el){
            if(!this.awTask){
                this.awTask = new Ext.util.DelayedTask(this.autoWidth, this);
            }
            this.awTask.delay(20);
        }
    },

        findTargetItem : function(e){
        var t = e.getTarget(".x-menu-list-item", this.ul,  true);
        if(t && t.menuItemId){
            return this.items.get(t.menuItemId);
        }
    },

        onClick : function(e){
        var t;
        if(t = this.findTargetItem(e)){
            t.onClick(e);
            this.fireEvent("click", this, t, e);
        }
    },

        setActiveItem : function(item, autoExpand){
        if(item != this.activeItem){
            if(this.activeItem){
                this.activeItem.deactivate();
            }
            this.activeItem = item;
            item.activate(autoExpand);
        }else if(autoExpand){
            item.expandMenu();
        }
    },

        tryActivate : function(start, step){
        var items = this.items;
        for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
            var item = items.get(i);
            if(!item.disabled && item.canActivate){
                this.setActiveItem(item, false);
                return item;
            }
        }
        return false;
    },

        onMouseOver : function(e){
        var t;
        if(t = this.findTargetItem(e)){
            if(t.canActivate && !t.disabled){
                this.setActiveItem(t, true);
            }
        }
        this.fireEvent("mouseover", this, e, t);
    },

        onMouseOut : function(e){
        var t;
        if(t = this.findTargetItem(e)){
            if(t == this.activeItem && t.shouldDeactivate(e)){
                this.activeItem.deactivate();
                delete this.activeItem;
            }
        }
        this.fireEvent("mouseout", this, e, t);
    },

    isVisible : function(){
        return this.el && !this.hidden;
    },

    show : function(el, pos, parentMenu){
        this.parentMenu = parentMenu;
        if(!this.el){
            this.render();
        }
        this.fireEvent("beforeshow", this);
        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
    },

    showAt : function(xy, parentMenu, _e){
        this.parentMenu = parentMenu;
        if(!this.el){
            this.render();
        }
        if(_e !== false){
            this.fireEvent("beforeshow", this);
            xy = this.el.adjustForConstraints(xy);
        }
        this.el.setXY(xy);
        this.el.show();
        this.hidden = false;
        this.focus();
        this.fireEvent("show", this);
    },

    focus : function(){
        if(!this.hidden){
            this.doFocus.defer(50, this);
        }
    },

    doFocus : function(){
        if(!this.hidden){
            this.focusEl.focus();
        }
    },

    hide : function(deep){
        if(this.el && this.isVisible()){
            this.fireEvent("beforehide", this);
            if(this.activeItem){
                this.activeItem.deactivate();
                this.activeItem = null;
            }
            this.el.hide();
            this.hidden = true;
            this.fireEvent("hide", this);
        }
        if(deep === true && this.parentMenu){
            this.parentMenu.hide(true);
        }
    },

    add : function(){
        var a = arguments, l = a.length, item;
        for(var i = 0; i < l; i++){
            var el = a[i];
            if(el.render){                 item = this.addItem(el);
            }else if(typeof el == "string"){                 if(el == "separator" || el == "-"){
                    item = this.addSeparator();
                }else{
                    item = this.addText(el);
                }
            }else if(el.tagName || el.el){                 item = this.addElement(el);
            }else if(typeof el == "object"){                 Ext.applyIf(el, this.defaults);
                item = this.addMenuItem(el);
            }
        }
        return item;
    },

    getEl : function(){
        if(!this.el){
            this.render();
        }
        return this.el;
    },

    addSeparator : function(){
        return this.addItem(new Ext.menu.Separator());
    },

    addElement : function(el){
        return this.addItem(new Ext.menu.BaseItem(el));
    },

    addItem : function(item){
        this.items.add(item);
        if(this.ul){
            var li = document.createElement("li");
            li.className = "x-menu-list-item";
            this.ul.dom.appendChild(li);
            item.render(li, this);
            this.delayAutoWidth();
        }
        return item;
    },

    addMenuItem : function(config){
        if(!(config instanceof Ext.menu.Item)){
            if(typeof config.checked == "boolean"){                 config = new Ext.menu.CheckItem(config);
            }else{
                config = new Ext.menu.Item(config);
            }
        }
        return this.addItem(config);
    },

    addText : function(text){
        return this.addItem(new Ext.menu.TextItem(text));
    },

    insert : function(index, item){
        this.items.insert(index, item);
        if(this.ul){
            var li = document.createElement("li");
            li.className = "x-menu-list-item";
            this.ul.dom.insertBefore(li, this.ul.dom.childNodes[index]);
            item.render(li, this);
            this.delayAutoWidth();
        }
        return item;
    },

    remove : function(item){
        this.items.removeKey(item.id);
        item.destroy();
    },

    removeAll : function(){
        var f;
        while(f = this.items.first()){
            this.remove(f);
        }
    },

    destroy : function(){
        this.beforeDestroy();
        Ext.menu.MenuMgr.unregister(this);
        if (this.keyNav) {
            this.keyNav.disable();
        }
        this.removeAll();
        if (this.ul) {
            this.ul.removeAllListeners();
        }
        if (this.el) {
            this.el.destroy();
        }
    },

        beforeDestroy : Ext.emptyFn

});

Ext.menu.MenuNav = function(menu){
    Ext.menu.MenuNav.superclass.constructor.call(this, menu.el);
    this.scope = this.menu = menu;
};

Ext.extend(Ext.menu.MenuNav, Ext.KeyNav, {
    doRelay : function(e, h){
        var k = e.getKey();
        if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
            this.menu.tryActivate(0, 1);
            return false;
        }
        return h.call(this.scope || this, e, this.menu);
    },

    up : function(e, m){
        if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
            m.tryActivate(m.items.length-1, -1);
        }
    },

    down : function(e, m){
        if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
            m.tryActivate(0, 1);
        }
    },

    right : function(e, m){
        if(m.activeItem){
            m.activeItem.expandMenu(true);
        }
    },

    left : function(e, m){
        m.hide();
        if(m.parentMenu && m.parentMenu.activeItem){
            m.parentMenu.activeItem.activate();
        }
    },

    enter : function(e, m){
        if(m.activeItem){
            e.stopPropagation();
            m.activeItem.onClick(e);
            m.fireEvent("click", this, m.activeItem);
            return true;
        }
    }
});

Ext.menu.MenuMgr = function(){
   var menus, active, groups = {}, attached = false, lastShow = new Date();

      function init(){
       menus = {};
       active = new Ext.util.MixedCollection();
       Ext.getDoc().addKeyListener(27, function(){
           if(active.length > 0){
               hideAll();
           }
       });
   }

      function hideAll(){
       if(active && active.length > 0){
           var c = active.clone();
           c.each(function(m){
               m.hide();
           });
       }
   }

      function onHide(m){
       active.remove(m);
       if(active.length < 1){
           Ext.getDoc().un("mousedown", onMouseDown);
           attached = false;
       }
   }

      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.isVisible()){
          m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
       }
   }

      function onBeforeHide(m){
       if(m.activeChild){
           m.activeChild.hide();
       }
       if(m.autoHideTimer){
           clearTimeout(m.autoHideTimer);
           delete m.autoHideTimer;
       }
   }

      function onBeforeShow(m){
       var pm = m.parentMenu;
       if(!pm && !m.allowOtherMenus){
           hideAll();
       }else if(pm && pm.activeChild){
           pm.activeChild.hide();
       }
   }

      function onMouseDown(e){
       if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
           hideAll();
       }
   }

      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 {

       hideAll : function(){
            hideAll();
       },

              register : function(menu){
           if(!menus){
               init();
           }
           menus[menu.id] = menu;
           menu.on("beforehide", onBeforeHide);
           menu.on("hide", onHide);
           menu.on("beforeshow", onBeforeShow);
           menu.on("show", onShow);
           var g = menu.group;
           if(g && menu.events["checkchange"]){
               if(!groups[g]){
                   groups[g] = [];
               }
               groups[g].push(menu);
               menu.on("checkchange", onCheck);
           }
       },

       get : function(menu){
           if(typeof menu == "string"){                if(!menus){                     return null;
               }
               return menus[menu];
           }else if(menu.events){                 return menu;
           }else if(typeof menu.length == 'number'){                return new Ext.menu.Menu({items:menu});
           }else{                return new Ext.menu.Menu(menu);
           }
       },

              unregister : function(menu){
           delete menus[menu.id];
           menu.un("beforehide", onBeforeHide);
           menu.un("hide", onHide);
           menu.un("beforeshow", onBeforeShow);
           menu.un("show", onShow);
           var g = menu.group;
           if(g && menu.events["checkchange"]){
               groups[g].remove(menu);
               menu.un("checkchange", onCheck);
           }
       },

              registerCheckable : function(menuItem){
           var g = menuItem.group;
           if(g){
               if(!groups[g]){
                   groups[g] = [];
               }
               groups[g].push(menuItem);
               menuItem.on("beforecheckchange", onBeforeCheck);
           }
       },

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

Ext.menu.BaseItem = function(config){
    Ext.menu.BaseItem.superclass.constructor.call(this, config);

    this.addEvents(

        'click',

        'activate',

        'deactivate'
    );

    if(this.handler){
        this.on("click", this.handler, this.scope);
    }
};

Ext.extend(Ext.menu.BaseItem, Ext.Component, {

    canActivate : false,

    activeClass : "x-menu-item-active",

    hideOnClick : true,

    hideDelay : 100,

        ctype: "Ext.menu.BaseItem",

        actionMode : "container",

        render : function(container, parentMenu){
        this.parentMenu = parentMenu;
        Ext.menu.BaseItem.superclass.render.call(this, container);
        this.container.menuItemId = this.id;
    },

        onRender : function(container, position){
        this.el = Ext.get(this.el);
        container.dom.appendChild(this.el.dom);
    },

    setHandler : function(handler, scope){
        if(this.handler){
            this.un("click", this.handler, this.scope);
        }
        this.on("click", this.handler = handler, this.scope = scope);
    },

        onClick : function(e){
        if(!this.disabled && this.fireEvent("click", this, e) !== false
                && this.parentMenu.fireEvent("itemclick", this, e) !== false){
            this.handleClick(e);
        }else{
            e.stopEvent();
        }
    },

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

        deactivate : function(){
        this.container.removeClass(this.activeClass);
        this.fireEvent("deactivate", this);
    },

        shouldDeactivate : function(e){
        return !this.region || !this.region.contains(e.getPoint());
    },

        handleClick : function(e){
        if(this.hideOnClick){
            this.parentMenu.hide.defer(this.hideDelay, this.parentMenu, [true]);
        }
    },

        expandMenu : function(autoActivate){
            },

        hideMenu : function(){
            }
});

Ext.menu.TextItem = function(text){
    this.text = text;
    Ext.menu.TextItem.superclass.constructor.call(this);
};

Ext.extend(Ext.menu.TextItem, Ext.menu.BaseItem, {

    hideOnClick : false,

    itemCls : "x-menu-text",

        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.menu.Separator = function(config){
    Ext.menu.Separator.superclass.constructor.call(this, config);
};

Ext.extend(Ext.menu.Separator, Ext.menu.BaseItem, {

    itemCls : "x-menu-sep",

    hideOnClick : false,

        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.menu.Item = function(config){
    Ext.menu.Item.superclass.constructor.call(this, config);
    if(this.menu){
        this.menu = Ext.menu.MenuMgr.get(this.menu);
    }
};
Ext.extend(Ext.menu.Item, Ext.menu.BaseItem, {

    itemCls : "x-menu-item",

    canActivate : true,

    showDelay: 200,
        hideDelay: 200,

        ctype: "Ext.menu.Item",

        onRender : function(container, position){
        var el = document.createElement("a");
        el.hideFocus = true;
        el.unselectable = "on";
        el.href = this.href || "#";
        if(this.hrefTarget){
            el.target = this.hrefTarget;
        }
        el.className = this.itemCls + (this.menu ?  " x-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "");
        el.innerHTML = String.format(
                '  {1}',
                this.icon || Ext.BLANK_IMAGE_URL, this.itemText||this.text, this.iconCls || '');
        this.el = el;
        Ext.menu.Item.superclass.onRender.call(this, container, position);
    },

    setText : function(text){
        this.text = text;
        if(this.rendered){
            this.el.update(String.format(
                '  {1}',
                this.icon || Ext.BLANK_IMAGE_URL, this.text, this.iconCls || ''));
            this.parentMenu.autoWidth();
        }
    },

    setIconClass : function(cls){
        var oldCls = this.iconCls;
        this.iconCls = cls;
        if(this.rendered){
            this.el.child('img.x-menu-item-icon').replaceClass(oldCls, this.iconCls);
        }
    },

        handleClick : function(e){
        if(!this.href){             e.stopEvent();
        }
        Ext.menu.Item.superclass.handleClick.apply(this, arguments);
    },

        activate : function(autoExpand){
        if(Ext.menu.Item.superclass.activate.apply(this, arguments)){
            this.focus();
            if(autoExpand){
                this.expandMenu();
            }
        }
        return true;
    },

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

        deactivate : function(){
        Ext.menu.Item.superclass.deactivate.apply(this, arguments);
        this.hideMenu();
    },

        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);
            }
        }
    },

        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);
        }
    },

        hideMenu : function(){
        clearTimeout(this.showTimer);
        delete this.showTimer;
        if(!this.hideTimer && this.menu && this.menu.isVisible()){
            this.hideTimer = this.deferHide.defer(this.hideDelay, this);
        }
    },

        deferHide : function(){
        delete this.hideTimer;
        this.menu.hide();
    }
});

Ext.menu.CheckItem = function(config){
    Ext.menu.CheckItem.superclass.constructor.call(this, config);
    this.addEvents(

        "beforecheckchange" ,

        "checkchange"
    );

    if(this.checkHandler){
        this.on('checkchange', this.checkHandler, this.scope);
    }
    Ext.menu.MenuMgr.registerCheckable(this);
};
Ext.extend(Ext.menu.CheckItem, Ext.menu.Item, {

    itemCls : "x-menu-item x-menu-check-item",

    groupClass : "x-menu-group-item",

    checked: false,

        ctype: "Ext.menu.CheckItem",

        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);
        }
    },

        destroy : function(){
        Ext.menu.MenuMgr.unregisterCheckable(this);
        Ext.menu.CheckItem.superclass.destroy.apply(this, arguments);
    },

    setChecked : function(state, suppressEvent){
        if(this.checked != state && this.fireEvent("beforecheckchange", this, state) !== false){
            if(this.container){
                this.container[state ? "addClass" : "removeClass"]("x-menu-item-checked");
            }
            this.checked = state;
            if(suppressEvent !== true){
                this.fireEvent("checkchange", this, state);
            }
        }
    },

        handleClick : function(e){
       if(!this.disabled && !(this.checked && this.group)){           this.setChecked(!this.checked);
       }
       Ext.menu.CheckItem.superclass.handleClick.apply(this, arguments);
    }
});

Ext.menu.Adapter = function(component, config){
    Ext.menu.Adapter.superclass.constructor.call(this, config);
    this.component = component;
};
Ext.extend(Ext.menu.Adapter, Ext.menu.BaseItem, {
        canActivate : true,

        onRender : function(container, position){
        this.component.render(container);
        this.el = this.component.getEl();
    },

        activate : function(){
        if(this.disabled){
            return false;
        }
        this.component.focus();
        this.fireEvent("activate", this);
        return true;
    },

        deactivate : function(){
        this.fireEvent("deactivate", this);
    },

        disable : function(){
        this.component.disable();
        Ext.menu.Adapter.superclass.disable.call(this);
    },

        enable : function(){
        this.component.enable();
        Ext.menu.Adapter.superclass.enable.call(this);
    }
});

Ext.menu.DateItem = function(config){
    Ext.menu.DateItem.superclass.constructor.call(this, new Ext.DatePicker(config), config);

    this.picker = this.component;
    this.addEvents('select');

    this.picker.on("render", function(picker){
        picker.getEl().swallowEvent("click");
        picker.container.addClass("x-menu-date-item");
    });

    this.picker.on("select", this.onSelect, this);
};

Ext.extend(Ext.menu.DateItem, Ext.menu.Adapter, {
        onSelect : function(picker, date){
        this.fireEvent("select", this, date, picker);
        Ext.menu.DateItem.superclass.handleClick.call(this);
    }
});

Ext.menu.ColorItem = function(config){
    Ext.menu.ColorItem.superclass.constructor.call(this, new Ext.ColorPalette(config), config);

    this.palette = this.component;
    this.relayEvents(this.palette, ["select"]);
    if(this.selectHandler){
        this.on('select', this.selectHandler, this.scope);
    }
};
Ext.extend(Ext.menu.ColorItem, Ext.menu.Adapter);

Ext.menu.DateMenu = function(config){
    Ext.menu.DateMenu.superclass.constructor.call(this, config);
    this.plain = true;
    var di = new Ext.menu.DateItem(config);
    this.add(di);

    this.picker = di.picker;

    this.relayEvents(di, ["select"]);

    this.on('beforeshow', function(){
        if(this.picker){
            this.picker.hideMonthPicker(true);
        }
    }, this);
};
Ext.extend(Ext.menu.DateMenu, Ext.menu.Menu, {
    cls:'x-date-menu',

        beforeDestroy : function() {
        this.picker.destroy();
    }
});

Ext.menu.ColorMenu = function(config){
    Ext.menu.ColorMenu.superclass.constructor.call(this, config);
    this.plain = true;
    var ci = new Ext.menu.ColorItem(config);
    this.add(ci);

    this.palette = ci.palette;

    this.relayEvents(ci, ["select"]);
};
Ext.extend(Ext.menu.ColorMenu, Ext.menu.Menu);

Ext.form.Field = Ext.extend(Ext.BoxComponent,  {

    invalidClass : "x-form-invalid",

    invalidText : "The value in this field is invalid",

    focusClass : "x-form-focus",

    validationEvent : "keyup",

    validateOnBlur : true,

    validationDelay : 250,

    defaultAutoCreate : {tag: "input", type: "text", size: "20", autocomplete: "off"},

    fieldClass : "x-form-field",

    msgTarget : 'qtip',

    msgFx : 'normal',

    readOnly : false,

    disabled : false,

        isFormField : true,

        hasFocus : false,

        initComponent : function(){
        Ext.form.Field.superclass.initComponent.call(this);
        this.addEvents(

            'focus',

            'blur',

            'specialkey',

            'change',

            'invalid',

            'valid'
        );
    },

    getName: function(){
         return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
    },

        onRender : function(ct, position){
        Ext.form.Field.superclass.onRender.call(this, 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.el = ct.createChild(cfg, position);
        }
        var type = this.el.dom.type;
        if(type){
            if(type == 'password'){
                type = 'text';
            }
            this.el.addClass('x-form-'+type);
        }
        if(this.readOnly){
            this.el.dom.readOnly = true;
        }
        if(this.tabIndex !== undefined){
            this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }

        this.el.addClass([this.fieldClass, this.cls]);
        this.initValue();
    },

        initValue : function(){
        if(this.value !== undefined){
            this.setValue(this.value);
        }else if(this.el.dom.value.length > 0){
            this.setValue(this.el.dom.value);
        }
    },

    isDirty : function() {
        if(this.disabled) {
            return false;
        }
        return String(this.getValue()) !== String(this.originalValue);
    },

        afterRender : function(){
        Ext.form.Field.superclass.afterRender.call(this);
        this.initEvents();
    },

        fireKey : function(e){
        if(e.isSpecialKey()){
            this.fireEvent("specialkey", this, e);
        }
    },

    reset : function(){
        this.setValue(this.originalValue);
        this.clearInvalid();
    },

        initEvents : function(){
        this.el.on(Ext.isIE ? "keydown" : "keypress", this.fireKey,  this);
        this.el.on("focus", this.onFocus,  this);
        this.el.on("blur", this.onBlur,  this);

                this.originalValue = this.getValue();
    },

        onFocus : function(){
        if(!Ext.isOpera && this.focusClass){             this.el.addClass(this.focusClass);
        }
        if(!this.hasFocus){
            this.hasFocus = true;
            this.startValue = this.getValue();
            this.fireEvent("focus", this);
        }
    },

    beforeBlur : Ext.emptyFn,

        onBlur : function(){
        this.beforeBlur();
        if(!Ext.isOpera && 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);
    },

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

    validate : function(){
        if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
            this.clearInvalid();
            return true;
        }
        return false;
    },

    processValue : function(value){
        return value;
    },

            validateValue : function(value){
        return true;
    },

    markInvalid : function(msg){
        if(!this.rendered || this.preventMark){             return;
        }
        this.el.addClass(this.invalidClass);
        msg = msg || this.invalidText;
        switch(this.msgTarget){
            case 'qtip':
                this.el.dom.qtip = msg;
                this.el.dom.qclass = 'x-form-invalid-tip';
                if(Ext.QuickTips){                     Ext.QuickTips.enable();
                }
                break;
            case 'title':
                this.el.dom.title = msg;
                break;
            case 'under':
                if(!this.errorEl){
                    var elp = this.el.findParent('.x-form-element', 5, true);
                    this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
                    this.errorEl.setWidth(elp.getWidth(true)-20);
                }
                this.errorEl.update(msg);
                Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
                break;
            case 'side':
                if(!this.errorIcon){
                    var elp = this.el.findParent('.x-form-element', 5, true);
                    this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                }
                this.alignErrorIcon();
                this.errorIcon.dom.qtip = msg;
                this.errorIcon.dom.qclass = 'x-form-invalid-tip';
                this.errorIcon.show();
                this.on('resize', this.alignErrorIcon, this);
                break;
            default:
                var t = Ext.getDom(this.msgTarget);
                t.innerHTML = msg;
                t.style.display = this.msgDisplay;
                break;
        }
        this.fireEvent('invalid', this, msg);
    },

        alignErrorIcon : function(){
        this.errorIcon.alignTo(this.el, 'tl-tr', [2, 0]);
    },

    clearInvalid : function(){
        if(!this.rendered || this.preventMark){             return;
        }
        this.el.removeClass(this.invalidClass);
        switch(this.msgTarget){
            case 'qtip':
                this.el.dom.qtip = '';
                break;
            case 'title':
                this.el.dom.title = '';
                break;
            case 'under':
                if(this.errorEl){
                    Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
                }
                break;
            case 'side':
                if(this.errorIcon){
                    this.errorIcon.dom.qtip = '';
                    this.errorIcon.hide();
                    this.un('resize', this.alignErrorIcon, this);
                }
                break;
            default:
                var t = Ext.getDom(this.msgTarget);
                t.innerHTML = '';
                t.style.display = 'none';
                break;
        }
        this.fireEvent('valid', this);
    },

    getRawValue : function(){
        var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');
        if(v === this.emptyText){
            v = '';
        }
        return v;
    },

    getValue : function(){
        if(!this.rendered) {
            return this.value;
        }
        var v = this.el.getValue();
        if(v === this.emptyText || v === undefined){
            v = '';
        }
        return v;
    },

    setRawValue : function(v){
        return this.el.dom.value = (v === null || v === undefined ? '' : v);
    },

    setValue : function(v){
        this.value = v;
        if(this.rendered){
            this.el.dom.value = (v === null || v === undefined ? '' : v);
            this.validate();
        }
    },

    adjustSize : function(w, h){
        var s = Ext.form.Field.superclass.adjustSize.call(this, w, h);
        s.width = this.adjustWidth(this.el.dom.tagName, s.width);
        return s;
    },

    adjustWidth : function(tag, w){
        tag = tag.toLowerCase();
        if(typeof w == 'number' && !Ext.isSafari){
            if(Ext.isIE && (tag == 'input' || tag == 'textarea')){
                if(tag == 'input' && !Ext.isStrict){
                    return this.inEditor ? w : w - 3;
                }
                if(tag == 'input' && Ext.isStrict){
                    return w - (Ext.isIE6 ? 4 : 1);
                }
                if(tag = 'textarea' && Ext.isStrict){
                    return w-2;
                }
            }else if(Ext.isOpera && Ext.isStrict){
                if(tag == 'input'){
                    return w + 2;
                }
                if(tag = 'textarea'){
                    return w-2;
                }
            }
        }
        return w;
    }

});

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

Ext.form.TextField = Ext.extend(Ext.form.Field,  {

    grow : false,

    growMin : 30,

    growMax : 800,

    vtype : null,

    maskRe : null,

    disableKeyFilter : false,

    allowBlank : true,

    minLength : 0,

    maxLength : Number.MAX_VALUE,

    minLengthText : "The minimum length for this field is {0}",

    maxLengthText : "The maximum length for this field is {0}",

    selectOnFocus : false,

    blankText : "This field is required",

    validator : null,

    regex : null,

    regexText : "",

    emptyText : null,

    emptyClass : 'x-form-empty-field',

    initComponent : function(){
        Ext.form.TextField.superclass.initComponent.call(this);
        this.addEvents(

            'autosize'
        );
    },

        initEvents : function(){
        Ext.form.TextField.superclass.initEvents.call(this);
        if(this.validationEvent == 'keyup'){
            this.validationTask = new Ext.util.DelayedTask(this.validate, this);
            this.el.on('keyup', this.filterValidation, this);
        }
        else if(this.validationEvent !== false){
            this.el.on(this.validationEvent, this.validate, this, {buffer: this.validationDelay});
        }
        if(this.selectOnFocus || this.emptyText){
            this.on("focus", this.preFocus, this);
            if(this.emptyText){
                this.on('blur', this.postBlur, this);
                this.applyEmptyText();
            }
        }
        if(this.maskRe || (this.vtype && this.disableKeyFilter !== true && (this.maskRe = Ext.form.VTypes[this.vtype+'Mask']))){
            this.el.on("keypress", this.filterKeys, this);
        }
        if(this.grow){
            this.el.on("keyup", this.onKeyUp,  this, {buffer:50});
            this.el.on("click", this.autoSize,  this);
        }
    },

    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);
        }
    },

        onKeyUp : function(e){
        if(!e.isNavKeyPress()){
            this.autoSize();
        }
    },

    reset : function(){
        Ext.form.TextField.superclass.reset.call(this);
        this.applyEmptyText();
    },

    applyEmptyText : function(){
        if(this.rendered && this.emptyText && this.getRawValue().length < 1){
            this.setRawValue(this.emptyText);
            this.el.addClass(this.emptyClass);
        }
    },

        preFocus : function(){
        if(this.emptyText){
            if(this.el.dom.value == this.emptyText){
                this.setRawValue('');
            }
            this.el.removeClass(this.emptyClass);
        }
        if(this.selectOnFocus){
            this.el.dom.select();
        }
    },

        postBlur : function(){
        this.applyEmptyText();
    },

        filterKeys : function(e){
        var k = e.getKey();
        if(!Ext.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
            return;
        }
        var c = e.getCharCode(), cc = String.fromCharCode(c);
        if(Ext.isIE && (e.isSpecialKey() || !cc)){
            return;
        }
        if(!this.maskRe.test(cc)){
            e.stopEvent();
        }
    },

    setValue : function(v){
        if(this.emptyText && this.el && v !== undefined && v !== null && v !== ''){
            this.el.removeClass(this.emptyClass);
        }
        Ext.form.TextField.superclass.setValue.apply(this, arguments);
        this.applyEmptyText();
        this.autoSize();
    },

    validateValue : function(value){
        if(value.length < 1 || value === this.emptyText){              if(this.allowBlank){
                 this.clearInvalid();
                 return true;
             }else{
                 this.markInvalid(this.blankText);
                 return false;
             }
        }
        if(value.length < this.minLength){
            this.markInvalid(String.format(this.minLengthText, this.minLength));
            return false;
        }
        if(value.length > this.maxLength){
            this.markInvalid(String.format(this.maxLengthText, this.maxLength));
            return false;
        }
        if(this.vtype){
            var vt = Ext.form.VTypes;
            if(!vt[this.vtype](value, this)){
                this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
                return false;
            }
        }
        if(typeof this.validator == "function"){
            var msg = this.validator(value);
            if(msg !== true){
                this.markInvalid(msg);
                return false;
            }
        }
        if(this.regex && !this.regex.test(value)){
            this.markInvalid(this.regexText);
            return false;
        }
        return true;
    },

    selectText : function(start, end){
        var v = this.getRawValue();
        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();
            }
        }
    },

    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;
        d = null;
        v += " ";
        var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) +  10, this.growMin));
        this.el.setWidth(w);
        this.fireEvent("autosize", this, w);
    }
});
Ext.reg('textfield', Ext.form.TextField);

Ext.form.TriggerField = Ext.extend(Ext.form.TextField,  {

    defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},

    hideTrigger:false,

    autoSize: Ext.emptyFn,
        monitorTab : true,
        deferHeight : true,
        mimicing : false,

        onResize : function(w, h){
        Ext.form.TriggerField.superclass.onResize.call(this, w, h);
        if(typeof w == 'number'){
            this.el.setWidth(this.adjustWidth('input', w - this.trigger.getWidth()));
        }
        this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
    },

        adjustSize : Ext.BoxComponent.prototype.adjustSize,

        getResizeEl : function(){
        return this.wrap;
    },

        getPositionEl : function(){
        return this.wrap;
    },

        alignErrorIcon : function(){
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    },

        onRender : function(ct, position){
        Ext.form.TriggerField.superclass.onRender.call(this, ct, position);
        this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
        this.trigger = this.wrap.createChild(this.triggerConfig ||
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
        if(this.hideTrigger){
            this.trigger.setDisplayed(false);
        }
        this.initTrigger();
        if(!this.width){
            this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
        }
    },

        initTrigger : function(){
        this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
        this.trigger.addClassOnOver('x-form-trigger-over');
        this.trigger.addClassOnClick('x-form-trigger-click');
    },

        onDestroy : function(){
        if(this.trigger){
            this.trigger.removeAllListeners();
            this.trigger.remove();
        }
        if(this.wrap){
            this.wrap.remove();
        }
        Ext.form.TriggerField.superclass.onDestroy.call(this);
    },

        onFocus : function(){
        Ext.form.TriggerField.superclass.onFocus.call(this);
        if(!this.mimicing){
            this.wrap.addClass('x-trigger-wrap-focus');
            this.mimicing = true;
            Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {delay: 10});
            if(this.monitorTab){
                this.el.on("keydown", this.checkTab, this);
            }
        }
    },

        checkTab : function(e){
        if(e.getKey() == e.TAB){
            this.triggerBlur();
        }
    },

        onBlur : function(){
            },

        mimicBlur : function(e){
        if(!this.wrap.contains(e.target) && this.validateBlur(e)){
            this.triggerBlur();
        }
    },

        triggerBlur : function(){
        this.mimicing = false;
        Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur);
        if(this.monitorTab){
            this.el.un("keydown", this.checkTab, this);
        }
        this.beforeBlur();
        this.wrap.removeClass('x-trigger-wrap-focus');
        Ext.form.TriggerField.superclass.onBlur.call(this);
    },

    beforeBlur : Ext.emptyFn,

            validateBlur : function(e){
        return true;
    },

        onDisable : function(){
        Ext.form.TriggerField.superclass.onDisable.call(this);
        if(this.wrap){
            this.wrap.addClass('x-item-disabled');
        }
    },

        onEnable : function(){
        Ext.form.TriggerField.superclass.onEnable.call(this);
        if(this.wrap){
            this.wrap.removeClass('x-item-disabled');
        }
    },

        onShow : function(){
        if(this.wrap){
            this.wrap.dom.style.display = '';
            this.wrap.dom.style.visibility = 'visible';
        }
    },

        onHide : function(){
        this.wrap.dom.style.display = 'none';
    },

    onTriggerClick : Ext.emptyFn

});

Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
    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);
        this.wrap.setStyle('overflow', 'hidden');
        var triggerField = this;
        ts.each(function(t, all, index){
            t.hide = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = 'none';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            t.show = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = '';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            var triggerIndex = 'Trigger'+(index+1);

            if(this['hide'+triggerIndex]){
                t.dom.style.display = 'none';
            }
            t.on("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;
    },

    onTrigger1Click : Ext.emptyFn,
    onTrigger2Click : Ext.emptyFn
});
Ext.reg('trigger', Ext.form.TriggerField);

Ext.form.TextArea = Ext.extend(Ext.form.TextField,  {

    growMin : 60,

    growMax: 1000,
    growAppend : ' \n ',
    growPad : 0,

    enterIsSpecial : false,

    preventScrollbars: false,

        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(){
        if(this.textSizeEl){
            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);
        }
    },

        onKeyUp : function(e){
        if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
            this.autoSize();
        }
    },

    autoSize : function(){
        if(!this.grow || !this.textSizeEl){
            return;
        }
        var el = this.el;
        var v = el.dom.value;
        var ts = this.textSizeEl;
        ts.innerHTML = '';
        ts.appendChild(document.createTextNode(v));
        v = ts.innerHTML;

        Ext.fly(ts).setWidth(this.el.getWidth());
        if(v.length < 1){
            v = "  ";
        }else{
            if(Ext.isIE){
                v = v.replace(/\n/g, '

      ');
            }
            v += this.growAppend;
        }
        ts.innerHTML = v;
        var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin)+this.growPad);
        if(h != this.lastHeight){
            this.lastHeight = h;
            this.el.setHeight(h);
            this.fireEvent("autosize", this, h);
        }
    }
});
Ext.reg('textarea', Ext.form.TextArea);

Ext.form.NumberField = Ext.extend(Ext.form.TextField,  {

    fieldClass: "x-form-field x-form-num-field",

    allowDecimals : true,

    decimalSeparator : ".",

    decimalPrecision : 2,

    allowNegative : true,

    minValue : Number.NEGATIVE_INFINITY,

    maxValue : Number.MAX_VALUE,

    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",

    baseChars : "0123456789",

        initEvents : function(){
        Ext.form.NumberField.superclass.initEvents.call(this);
        var allowed = this.baseChars+'';
        if(this.allowDecimals){
            allowed += this.decimalSeparator;
        }
        if(this.allowNegative){
            allowed += "-";
        }
        this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
        var keyPress = function(e){
            var k = e.getKey();
            if(!Ext.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
                return;
            }
            var c = e.getCharCode();
            if(allowed.indexOf(String.fromCharCode(c)) === -1){
                e.stopEvent();
            }
        };
        this.el.on("keypress", keyPress, this);
    },

        validateValue : function(value){
        if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
            return false;
        }
        if(value.length < 1){              return true;
        }
        value = String(value).replace(this.decimalSeparator, ".");
        if(isNaN(value)){
            this.markInvalid(String.format(this.nanText, value));
            return false;
        }
        var num = this.parseValue(value);
        if(num < this.minValue){
            this.markInvalid(String.format(this.minText, this.minValue));
            return false;
        }
        if(num > this.maxValue){
            this.markInvalid(String.format(this.maxText, this.maxValue));
            return false;
        }
        return true;
    },

    getValue : function(){
        return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
    },

    setValue : function(v){
        v = parseFloat(v);
        v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
        Ext.form.NumberField.superclass.setValue.call(this, v);
    },

        parseValue : function(value){
        value = parseFloat(String(value).replace(this.decimalSeparator, "."));
        return isNaN(value) ? '' : value;
    },

        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(v){
            this.setValue(this.fixPrecision(v));
        }
    }
});
Ext.reg('numberfield', Ext.form.NumberField);

Ext.form.DateField = Ext.extend(Ext.form.TriggerField,  {

    format : "m/d/y",

    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",

    disabledDays : null,

    disabledDaysText : "Disabled",

    disabledDates : null,

    disabledDatesText : "Disabled",

    minValue : null,

    maxValue : null,

    minText : "The date in this field must be equal to or after {0}",

    maxText : "The date in this field must be equal to or before {0}",

    invalidText : "{0} is not a valid date - it must be in the format {1}",

    triggerClass : 'x-form-date-trigger',

        defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},

    initComponent : function(){
        Ext.form.DateField.superclass.initComponent.call(this);
        if(typeof this.minValue == "string"){
            this.minValue = this.parseDate(this.minValue);
        }
        if(typeof this.maxValue == "string"){
            this.maxValue = this.parseDate(this.maxValue);
        }
        this.ddMatch = null;
        if(this.disabledDates){
            var dd = this.disabledDates;
            var re = "(?:";
            for(var i = 0; i < dd.length; i++){
                re += dd[i];
                if(i != dd.length-1) re += "|";
            }
            this.ddMatch = new RegExp(re + ")");
        }
    },

        validateValue : function(value){
        value = this.formatDate(value);
        if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
            return false;
        }
        if(value.length < 1){              return true;
        }
        var svalue = value;
        value = this.parseDate(value);
        if(!value){
            this.markInvalid(String.format(this.invalidText, svalue, this.format));
            return false;
        }
        var time = value.getTime();
        if(this.minValue && time < this.minValue.getTime()){
            this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
            return false;
        }
        if(this.maxValue && time > this.maxValue.getTime()){
            this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
            return false;
        }
        if(this.disabledDays){
            var day = value.getDay();
            for(var i = 0; i < this.disabledDays.length; i++) {
                if(day === this.disabledDays[i]){
                    this.markInvalid(this.disabledDaysText);
                    return false;
                }
            }
        }
        var fvalue = this.formatDate(value);
        if(this.ddMatch && this.ddMatch.test(fvalue)){
            this.markInvalid(String.format(this.disabledDatesText, fvalue));
            return false;
        }
        return true;
    },

            validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },

    getValue : function(){
        return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || "";
    },

    setValue : function(date){
        Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
    },

        parseDate : function(value){
        if(!value || Ext.isDate(value)){
            return value;
        }
        var v = Date.parseDate(value, this.format);
        if(!v && this.altFormats){
            if(!this.altFormatsArray){
                this.altFormatsArray = this.altFormats.split("|");
            }
            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
                v = Date.parseDate(value, this.altFormatsArray[i]);
            }
        }
        return v;
    },

        onDestroy : function(){
        if(this.menu) {
            this.menu.destroy();
        }
        if(this.wrap){
            this.wrap.remove();
        }
        Ext.form.DateField.superclass.onDestroy.call(this);
    },

        formatDate : function(date){
        return Ext.isDate(date) ? date.dateFormat(this.format) : date;
    },

        menuListeners : {
        select: function(m, d){
            this.setValue(d);
        },
        show : function(){             this.onFocus();
        },
        hide : function(){
            this.focus.defer(10, this);
            var ml = this.menuListeners;
            this.menu.un("select", ml.select,  this);
            this.menu.un("show", ml.show,  this);
            this.menu.un("hide", ml.hide,  this);
        }
    },

            onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.DateMenu();
        }
        Ext.apply(this.menu.picker,  {
            minDate : this.minValue,
            maxDate : this.maxValue,
            disabledDatesRE : this.ddMatch,
            disabledDatesText : this.disabledDatesText,
            disabledDays : this.disabledDays,
            disabledDaysText : this.disabledDaysText,
            format : this.format,
            minText : String.format(this.minText, this.formatDate(this.minValue)),
            maxText : String.format(this.maxText, this.formatDate(this.maxValue))
        });
        this.menu.on(Ext.apply({}, this.menuListeners, {
            scope:this
        }));
        this.menu.picker.setValue(this.getValue() || new Date());
        this.menu.show(this.el, "tl-bl?");
    },

    beforeBlur : function(){
        var v = this.parseDate(this.getRawValue());
        if(v){
            this.setValue(v);
        }
    }

});
Ext.reg('datefield', Ext.form.DateField);

Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, {

        defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},

    listClass: '',

    selectedClass: 'x-combo-selected',

    triggerClass : 'x-form-arrow-trigger',

    shadow:'sides',

    listAlign: 'tl-bl?',

    maxHeight: 300,

    minHeight: 90,

    triggerAction: 'query',

    minChars : 4,

    typeAhead: false,

    queryDelay: 500,

    pageSize: 0,

    selectOnFocus:false,

    queryParam: 'query',

    loadingText: 'Loading...',

    resizable: false,

    handleHeight : 8,

    editable: true,

    allQuery: '',

    mode: 'remote',

    minListWidth : 70,

    forceSelection:false,

    typeAheadDelay : 250,

    lazyInit : true,

    initComponent : function(){
        Ext.form.ComboBox.superclass.initComponent.call(this);
        this.addEvents(

            'expand',

            'collapse',

            'beforeselect',

            'select',

            'beforequery'
        );
        if(this.transform){
            this.allowDomMove = false;
            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];
                    var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
                    if(o.selected) {
                        this.value = value;
                    }
                    d.push([value, o.text]);
                }
                this.store = new Ext.data.SimpleStore({
                    'id': 0,
                    fields: ['value', 'text'],
                    data : d
                });
                this.valueField = 'value';
                this.displayField = 'text';
            }
            s.name = Ext.id();             if(!this.lazyRender){
                this.target = true;
                this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
                Ext.removeNode(s);                 this.render(this.el.parentNode);
            }else{
                Ext.removeNode(s);             }

        }
        this.selectedIndex = -1;
        if(this.mode == 'local'){
            if(this.initialConfig.queryDelay === undefined){
                this.queryDelay = 10;
            }
            if(this.initialConfig.minChars === undefined){
                this.minChars = 0;
            }
        }
    },

        onRender : function(ct, position){
        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);
            this.hiddenField.value =
                this.hiddenValue !== undefined ? this.hiddenValue :
                this.value !== undefined ? this.value : '';

                        this.el.dom.removeAttribute('name');
        }
        if(Ext.isGecko){
            this.el.dom.setAttribute('autocomplete', 'off');
        }

        if(!this.lazyInit){
            this.initList();
        }else{
            this.on('focus', this.initList, this, {single: true});
        }

        if(!this.editable){
            this.editable = true;
            this.setEditable(false);
        }
    },

    initList : function(){
        if(!this.list){
            var cls = 'x-combo-list';

            this.list = new Ext.Layer({
                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
            });

            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setWidth(lw);
            this.list.swallowEvent('mousewheel');
            this.assetHeight = 0;

            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.innerList.on('mouseover', this.onViewOver, this);
            this.innerList.on('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){

                this.tpl = '
      {' + this.displayField + '}
      ';
            }

            this.view = new Ext.DataView({
                applyTo: this.innerList,
                tpl: this.tpl,
                singleSelect: true,
                selectedClass: this.selectedClass,
                itemSelector: this.itemSelector || '.' + cls + '-item'
            });

            this.view.on('click', this.onViewClick, this);

            this.bindStore(this.store, true);

            if(this.resizable){
                this.resizer = new Ext.Resizable(this.list,  {
                   pinned:true, handles:'se'
                });
                this.resizer.on('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');
            }
        }
    },

        bindStore : function(store, initial){
        if(this.store && !initial){
            this.store.un('beforeload', this.onBeforeLoad, this);
            this.store.un('load', this.onLoad, this);
            this.store.un('loadexception', this.collapse, this);
            if(!store){
                this.store = null;
                if(this.view){
                    this.view.setStore(null);
                }
            }
        }
        if(store){
            this.store = Ext.StoreMgr.lookup(store);

            this.store.on('beforeload', this.onBeforeLoad, this);
            this.store.on('load', this.onLoad, this);
            this.store.on('loadexception', this.collapse, this);

            if(this.view){
                this.view.setStore(store);
            }
        }
    },

        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();
                this.delayedCheck = true;
                this.unsetDelayCheck.defer(10, this);
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                this.onViewClick(false);
                return true;
            },

            scope : this,

            doRelay : function(foo, bar, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                }
                return true;
            },

            forceKeyDown : true
        });
        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.editable !== false){
            this.el.on("keyup", this.onKeyUp, this);
        }
        if(this.forceSelection){
            this.on('blur', this.doForce, this);
        }
    },

    onDestroy : function(){
        if(this.view){
            this.view.el.removeAllListeners();
            this.view.el.remove();
            this.view.purgeListeners();
        }
        if(this.list){
            this.list.destroy();
        }
        this.bindStore(null);
        Ext.form.ComboBox.superclass.onDestroy.call(this);
    },

    unsetDelayCheck : function(){
        delete this.delayedCheck;
    },
        fireKey : function(e){
        if(e.isNavKeyPress() && !this.isExpanded() && !this.delayedCheck){
            this.fireEvent("specialkey", this, e);
        }
    },

        onResize: function(w, h){
        Ext.form.ComboBox.superclass.onResize.apply(this, arguments);
        if(this.list && this.listWidth === undefined){
            var lw = Math.max(w, this.minListWidth);
            this.list.setWidth(lw);
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
        }
    },

        onEnable: function(){
        Ext.form.ComboBox.superclass.onEnable.apply(this, arguments);
        if(this.hiddenField){
            this.hiddenField.disabled = false;
        }
    },

        onDisable: function(){
        Ext.form.ComboBox.superclass.onDisable.apply(this, arguments);
        if(this.hiddenField){
            this.hiddenField.disabled = true;
        }
    },

    setEditable : function(value){
        if(value == this.editable){
            return;
        }
        this.editable = value;
        if(!value){
            this.el.dom.setAttribute('readOnly', true);
            this.el.on('mousedown', this.onTriggerClick,  this);
            this.el.addClass('x-combo-noedit');
        }else{
            this.el.dom.setAttribute('readOnly', false);
            this.el.un('mousedown', this.onTriggerClick,  this);
            this.el.removeClass('x-combo-noedit');
        }
    },

        onBeforeLoad : function(){
        if(!this.hasFocus){
            return;
        }
        this.innerList.update(this.loadingText ?
               '
      '+this.loadingText+'
      ' : '');
        this.restrictHeight();
        this.selectedIndex = -1;
    },

        onLoad : function(){
        if(!this.hasFocus){
            return;
        }
        if(this.store.getCount() > 0){
            this.expand();
            this.restrictHeight();
            if(this.lastQuery == this.allQuery){
                if(this.editable){
                    this.el.dom.select();
                }
                if(!this.selectByValue(this.value, true)){
                    this.select(0, true);
                }
            }else{
                this.selectNext();
                if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
                    this.taTask.delay(this.typeAheadDelay);
                }
            }
        }else{
            this.onEmptyResults();
        }
            },

        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);
            }
        }
    },

        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);
        }
    },

    getValue : function(){
        if(this.valueField){
            return typeof this.value != 'undefined' ? this.value : '';
        }else{
            return Ext.form.ComboBox.superclass.getValue.call(this);
        }
    },

    clearValue : function(){
        if(this.hiddenField){
            this.hiddenField.value = '';
        }
        this.setRawValue('');
        this.lastSelectionText = '';
        this.applyEmptyText();
        this.value = '';
    },

    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(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = v;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    },

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

        onViewMove : function(e, t){
        this.inKeyMode = false;
    },

        onViewOver : function(e, t){
        if(this.inKeyMode){             return;
        }
        var item = this.view.findItemFromChild(t);
        if(item){
            var index = this.view.indexOf(item);
            this.select(index, false);
        }
    },

        onViewClick : function(doFocus){
        var index = this.view.getSelectedIndexes()[0];
        var r = this.store.getAt(index);
        if(r){
            this.onSelect(r, index);
        }
        if(doFocus !== false){
            this.el.focus();
        }
    },

        restrictHeight : function(){
        this.innerList.dom.style.height = '';
        var inner = this.innerList.dom;
        var pad = this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight;
        var h = Math.max(inner.clientHeight, inner.offsetHeight, inner.scrollHeight);
        var ha = this.getPosition()[1]-Ext.getBody().getScroll().top;
        var hb = Ext.lib.Dom.getViewHeight()-ha-this.getSize().height;
        var space = Math.max(ha, hb, this.minHeight || 0)-this.list.shadow.offset-pad-2;
        h = Math.min(h, space, this.maxHeight);

        this.innerList.setHeight(h);
        this.list.beginUpdate();
        this.list.setHeight(h+pad);
        this.list.alignTo(this.el, this.listAlign);
        this.list.endUpdate();
    },

        onEmptyResults : function(){
        this.collapse();
    },

    isExpanded : function(){
        return this.list && this.list.isVisible();
    },

    selectByValue : function(v, scrollIntoView){
        if(v !== undefined && v !== null){
            var r = this.findRecord(this.valueField || this.displayField, v);
            if(r){
                this.select(this.store.indexOf(r), scrollIntoView);
                return true;
            }
        }
        return false;
    },

    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);
            }
        }
    },

        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);
            }
        }
    },

        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);
            }
        }
    },

        onKeyUp : function(e){
        if(this.editable !== false && !e.isSpecialKey()){
            this.lastKey = e.getKey();
            this.dqTask.delay(this.queryDelay);
        }
    },

        validateBlur : function(){
        return !this.list || !this.list.isVisible();
    },

        initQuery : function(){
        this.doQuery(this.getRawValue());
    },

        doForce : function(){
        if(this.el.dom.value.length > 0){
            this.el.dom.value =
                this.lastSelectionText === undefined ? '' : this.lastSelectionText;
            this.applyEmptyText();
        }
    },

    doQuery : function(q, forceAll){
        if(q === undefined || q === null){
            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();
            }
        }
    },

        getParams : function(q){
        var p = {};
                if(this.pageSize){
            p.start = 0;
            p.limit = this.pageSize;
        }
        return p;
    },

    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);
    },

        collapseIf : function(e){
        if(!e.within(this.wrap) && !e.within(this.list)){
            this.collapse();
        }
    },

    expand : function(){
        if(this.isExpanded() || !this.hasFocus){
            return;
        }
        this.list.alignTo(this.wrap, this.listAlign);
        this.list.show();
        this.innerList.setOverflow('auto');         Ext.getDoc().on('mousewheel', this.collapseIf, this);
        Ext.getDoc().on('mousedown', this.collapseIf, this);
        this.fireEvent('expand', this);
    },

            onTriggerClick : function(){
        if(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();
        }
    }

});
Ext.reg('combo', Ext.form.ComboBox);

Ext.form.Checkbox = Ext.extend(Ext.form.Field,  {

    focusClass : undefined,

    fieldClass: "x-form-field",

    checked: false,

    defaultAutoCreate : { tag: "input", type: 'checkbox', autocomplete: "off"},

        initComponent : function(){
        Ext.form.Checkbox.superclass.initComponent.call(this);
        this.addEvents(

            'check'
        );
    },

        onResize : function(){
        Ext.form.Checkbox.superclass.onResize.apply(this, arguments);
        if(!this.boxLabel){
            this.el.alignTo(this.wrap, 'c-c');
        }
    },

        initEvents : function(){
        Ext.form.Checkbox.superclass.initEvents.call(this);
        this.el.on("click", this.onClick,  this);
        this.el.on("change", this.onClick,  this);
    },

        getResizeEl : function(){
        return this.wrap;
    },

        getPositionEl : function(){
        return this.wrap;
    },

    markInvalid : Ext.emptyFn,

    clearInvalid : Ext.emptyFn,

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

        onDestroy : function(){
        if(this.wrap){
            this.wrap.remove();
        }
        Ext.form.Checkbox.superclass.onDestroy.call(this);
    },

        initValue : Ext.emptyFn,

    getValue : function(){
        if(this.rendered){
            return this.el.dom.checked;
        }
        return false;
    },

        onClick : function(){
        if(this.el.dom.checked != this.checked){
            this.setValue(this.el.dom.checked);
        }
    },

    setValue : function(v){
        this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
        if(this.el && this.el.dom){
            this.el.dom.checked = this.checked;
            this.el.dom.defaultChecked = this.checked;
        }
        this.fireEvent("check", this, this.checked);
    }
});
Ext.reg('checkbox', Ext.form.Checkbox);

Ext.form.Radio = Ext.extend(Ext.form.Checkbox, {
    inputType: 'radio',

    markInvalid : Ext.emptyFn,

    clearInvalid : Ext.emptyFn,

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

        onClick : function(){
        if(this.el.dom.checked != this.checked){
            var p = this.el.up('form') || Ext.getBody();
            var els = p.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);
        }
    },

    setValue : function(v){
        if (typeof v == 'boolean') {
            Ext.form.Radio.superclass.setValue.call(this, v);
        } else {
            var r = this.el.up('form').child('input[name='+this.el.dom.name+'][value='+v+']', true);
            if (r){
                r.checked = true;
            };
        }
    }
});
Ext.reg('radio', Ext.form.Radio);

Ext.form.Hidden = Ext.extend(Ext.form.Field, {

    inputType : 'hidden',

    onRender : function(){
        Ext.form.Hidden.superclass.onRender.apply(this, arguments);
    },

    initEvents : function(){
        this.originalValue = this.getValue();
    },

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

Ext.form.BasicForm = function(el, config){
    Ext.apply(this, config);

    this.items = new Ext.util.MixedCollection(false, function(o){
        return o.id || (o.id = Ext.id());
    });
    this.addEvents(

        'beforeaction',

        'actionfailed',

        'actioncomplete'
    );

    if(el){
        this.initEl(el);
    }
    Ext.form.BasicForm.superclass.constructor.call(this);
};

Ext.extend(Ext.form.BasicForm, Ext.util.Observable, {

    timeout: 30,

        activeAction : null,

    trackResetOnLoad : false,

        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');
    },

    getEl: function(){
        return this.el;
    },

        onSubmit : function(e){
        e.stopEvent();
    },

        destroy: function() {
        this.items.each(function(f){
            Ext.destroy(f);
        });
        if(this.el){
            this.el.removeAllListeners();
            this.el.remove();
        }
        this.purgeListeners();
    },

    isValid : function(){
        var valid = true;
        this.items.each(function(f){
           if(!f.validate()){
               valid = false;
           }
        });
        return valid;
    },

    isDirty : function(){
        var dirty = false;
        this.items.each(function(f){
           if(f.isDirty()){
               dirty = true;
               return false;
           }
        });
        return dirty;
    },

    doAction : function(action, options){
        if(typeof action == 'string'){
            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;
    },

    submit : function(options){
        if(this.standardSubmit){
            var v = this.isValid();
            if(v){
                this.el.dom.submit();
            }
            return v;
        }
        this.doAction('submit', options);
        return this;
    },

    load : function(options){
        this.doAction('load', options);
        return 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;
    },

    loadRecord : function(record){
        this.setValues(record.data);
        return this;
    },

        beforeAction : function(action){
        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 || 'Please Wait...');
            }
        }
    },

        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);
        }
    },

    findField : function(id){
        var field = this.items.get(id);
        if(!field){
            this.items.each(function(f){
                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
                    field = f;
                    return false;
                }
            });
        }
        return field || null;
    },

    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(typeof errors[id] != 'function' && (field = this.findField(id))){
                    field.markInvalid(errors[id]);
                }
            }
        }
        return this;
    },

    setValues : function(values){
        if(Ext.isArray(values)){             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{             var field, id;
            for(id in values){
                if(typeof values[id] != 'function' && (field = this.findField(id))){
                    field.setValue(values[id]);
                    if(this.trackResetOnLoad){
                        field.originalValue = field.getValue();
                    }
                }
            }
        }
        return this;
    },

    getValues : function(asString){
        var fs = Ext.lib.Ajax.serializeForm(this.el.dom);
        if(asString === true){
            return fs;
        }
        return Ext.urlDecode(fs);
    },

    clearInvalid : function(){
        this.items.each(function(f){
           f.clearInvalid();
        });
        return this;
    },

    reset : function(){
        this.items.each(function(f){
            f.reset();
        });
        return this;
    },

    add : function(){
        this.items.addAll(Array.prototype.slice.call(arguments, 0));
        return this;
    },

    remove : function(field){
        this.items.remove(field);
        return this;
    },

    render : function(){
        this.items.each(function(f){
            if(f.isFormField && !f.rendered && document.getElementById(f.id)){                 f.applyToMarkup(f.id);
            }
        });
        return this;
    },

    applyToFields : function(o){
        this.items.each(function(f){
           Ext.apply(f, o);
        });
        return this;
    },

    applyIfToFields : function(o){
        this.items.each(function(f){
           Ext.applyIf(f, o);
        });
        return this;
    }
});

Ext.BasicForm = Ext.form.BasicForm;

Ext.FormPanel = Ext.extend(Ext.Panel, {

    buttonAlign:'center',

    minButtonWidth:75,

    labelAlign:'left',

    monitorValid : false,

    monitorPoll : 200,

    layout: 'form',

        initComponent :function(){
        this.form = this.createForm();

        Ext.FormPanel.superclass.initComponent.call(this);

        this.addEvents(

            'clientvalidation'
        );

        this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
    },

        createForm: function(){
        delete this.initialConfig.listeners;
        return new Ext.form.BasicForm(null, this.initialConfig);
    },

        initFields : function(){
        var f = this.form;
        var formPanel = this;
        var fn = function(c){
            if(c.doLayout && c != formPanel){
                Ext.applyIf(c, {
                    labelAlign: c.ownerCt.labelAlign,
                    labelWidth: c.ownerCt.labelWidth,
                    itemCls: c.ownerCt.itemCls
                });
                if(c.items){
                    c.items.each(fn);
                }
            }else if(c.isFormField){
                f.add(c);
            }
        }
        this.items.each(fn);
    },

        getLayoutTarget : function(){
        return this.form.el;
    },

    getForm : function(){
        return this.form;
    },

        onRender : function(ct, position){
        this.initFields();

        Ext.FormPanel.superclass.onRender.call(this, ct, position);
        var o = {
            tag: 'form',
            method : this.method || 'POST',
            id : this.formId || Ext.id()
        };
        if(this.fileUpload) {
            o.enctype = 'multipart/form-data';
        }
        this.form.initEl(this.body.createChild(o));
    },

        beforeDestroy: function(){
        Ext.FormPanel.superclass.beforeDestroy.call(this);
        Ext.destroy(this.form);
    },

        initEvents : function(){
        Ext.FormPanel.superclass.initEvents.call(this);
        this.items.on('remove', this.onRemove, this);
        this.items.on('add', this.onAdd, this);
        if(this.monitorValid){             this.startMonitoring();
        }
    },

        onAdd : function(ct, c) {
        if (c.isFormField) {
            this.form.add(c);
        }
    },

        onRemove : function(c) {
        if (c.isFormField) {
            Ext.destroy(c.container.up('.x-form-item'));
            this.form.remove(c);
        }
    },

    startMonitoring : function(){
        if(!this.bound){
            this.bound = true;
            Ext.TaskMgr.start({
                run : this.bindHandler,
                interval : this.monitorPoll || 200,
                scope: this
            });
        }
    },

    stopMonitoring : function(){
        this.bound = false;
    },

    load : function(){
        this.form.load.apply(this.form, arguments);
    },

        onDisable : function(){
        Ext.FormPanel.superclass.onDisable.call(this);
        if(this.form){
            this.form.items.each(function(){
                 this.disable();
            });
        }
    },

        onEnable : function(){
        Ext.FormPanel.superclass.onEnable.call(this);
        if(this.form){
            this.form.items.each(function(){
                 this.enable();
            });
        }
    },

        bindHandler : function(){
        if(!this.bound){
            return false;         }
        var valid = true;
        this.form.items.each(function(f){
            if(!f.isValid(true)){
                valid = false;
                return false;
            }
        });
        if(this.buttons){
            for(var i = 0, len = this.buttons.length; i < len; i++){
                var btn = this.buttons[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;

Ext.form.FieldSet = Ext.extend(Ext.Panel, {

    baseCls:'x-fieldset',

    layout: 'form',

    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 = 'x-fieldset-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.checkbox.on('click', this.onCheckClick, this);
        }
    },

    onCollapse : function(doAnim, animArg){
        if(this.checkbox){
            this.checkbox.dom.checked = false;
        }
        this.afterCollapse();

    },

    onExpand : function(doAnim, animArg){
        if(this.checkbox){
            this.checkbox.dom.checked = true;
        }
        this.afterExpand();
    },

    onCheckClick : function(){
        this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
    }

});
Ext.reg('fieldset', Ext.form.FieldSet);

Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, {

    enableFormat : true,

    enableFontSize : true,

    enableColors : true,

    enableAlignments : true,

    enableLists : true,

    enableSourceEdit : true,

    enableLinks : true,

    enableFont : true,

    createLinkText : 'Please enter the URL for the link:',

    defaultLinkValue : 'http:/'+'/',

    fontFamilies : [
        'Arial',
        'Courier New',
        'Tahoma',
        'Times New Roman',
        'Verdana'
    ],
    defaultFont: 'tahoma',

    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"
    },

    initComponent : function(){
        this.addEvents(

            'initialize',

            'activate',

            'beforesync',

            'beforepush',

            'sync',

            'push',

            'editmodechange'
        )
    },

    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('');
    },

    createToolbar : function(editor){

        function btn(id, toggle, handler){
            return {
                itemId : id,
                cls : 'x-btn-icon x-edit-'+id,
                enableToggle:toggle !== false,
                scope: editor,
                handler:handler||editor.relayBtnCmd,
                clickEvent:'mousedown',
                tooltip: editor.buttonTips[id] || undefined,
                tabIndex:-1
            };
        }

        var tb = new Ext.Toolbar({
            renderTo:this.wrap.dom.firstChild
        });

        tb.el.on('click', function(e){
            e.preventDefault();
        });

        if(this.enableFont && !Ext.isSafari){
            this.fontSelect = tb.el.createChild({
                tag:'select',
                cls:'x-font-select',
                html: this.createFontOptions()
            });
            this.fontSelect.on('change', function(){
                var font = this.fontSelect.dom.value;
                this.relayCmd('fontname', font);
                this.deferFocus();
            }, this);
            tb.add(
                this.fontSelect.dom,
                '-'
            );
        };

        if(this.enableFormat){
            tb.add(
                btn('bold'),
                btn('italic'),
                btn('underline')
            );
        };

        if(this.enableFontSize){
            tb.add(
                '-',
                btn('increasefontsize', false, this.adjustFont),
                btn('decreasefontsize', false, this.adjustFont)
            );
        };

        if(this.enableColors){
            tb.add(
                '-', {
                    itemId:'forecolor',
                    cls:'x-btn-icon x-edit-forecolor',
                    clickEvent:'mousedown',
                    tooltip: editor.buttonTips['forecolor'] || undefined,
                    tabIndex:-1,
                    menu : new Ext.menu.ColorMenu({
                        allowReselect: true,
                        focus: Ext.emptyFn,
                        value:'000000',
                        plain:true,
                        selectHandler: function(cp, color){
                            this.execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
                            this.deferFocus();
                        },
                        scope: this,
                        clickEvent:'mousedown'
                    })
                }, {
                    itemId:'backcolor',
                    cls:'x-btn-icon x-edit-backcolor',
                    clickEvent:'mousedown',
                    tooltip: editor.buttonTips['backcolor'] || undefined,
                    tabIndex:-1,
                    menu : new Ext.menu.ColorMenu({
                        focus: Ext.emptyFn,
                        value:'FFFFFF',
                        plain:true,
                        allowReselect: true,
                        selectHandler: 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.isSafari || Ext.isIE ? '#'+color : color);
                                this.deferFocus();
                            }
                        },
                        scope:this,
                        clickEvent:'mousedown'
                    })
                }
            );
        };

        if(this.enableAlignments){
            tb.add(
                '-',
                btn('justifyleft'),
                btn('justifycenter'),
                btn('justifyright')
            );
        };

        if(!Ext.isSafari){
            if(this.enableLinks){
                tb.add(
                    '-',
                    btn('createlink', false, this.createLink)
                );
            };

            if(this.enableLists){
                tb.add(
                    '-',
                    btn('insertorderedlist'),
                    btn('insertunorderedlist')
                );
            }
            if(this.enableSourceEdit){
                tb.add(
                    '-',
                    btn('sourceedit', true, function(btn){
                        this.toggleSourceEdit(btn.pressed);
                    })
                );
            }
        }

        this.tb = tb;
    },

    getDocMarkup : function(){
        return '';
    },

    getEditorBody : function(){
        return this.doc.body || this.doc.documentElement;
    },

    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){
            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.tb.items.each(function(item){
           if(item.itemId != 'sourceedit'){
                item.disable();
            }
        });

        var iframe = document.createElement('iframe');
        iframe.name = Ext.id();
        iframe.frameBorder = 'no';

        iframe.src=(Ext.SSL_SECURE_URL || "javascript:false");

        this.wrap.dom.appendChild(iframe);

        this.iframe = iframe;

        if(Ext.isIE){
            iframe.contentWindow.document.designMode = 'on';
            this.doc = iframe.contentWindow.document;
            this.win = iframe.contentWindow;
        } else {
            this.doc = (iframe.contentDocument || window.frames[iframe.name].document);
            this.win = window.frames[iframe.name];
            this.doc.designMode = 'on';
        }
        this.doc.open();
        this.doc.write(this.getDocMarkup())
        this.doc.close();

        var task = {
            run : function(){
                if(this.doc.body || this.doc.readyState == 'complete'){
                    Ext.TaskMgr.stop(task);
                    this.doc.designMode="on";
                    this.initEditor.defer(10, this);
                }
            },
            interval : 10,
            duration:10000,
            scope: this
        };
        Ext.TaskMgr.start(task);

        if(!this.width){
            this.setSize(this.el.getSize());
        }
    },

    onResize : function(w, h){
        Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
        if(this.el && this.iframe){
            if(typeof w == 'number'){
                var aw = w - this.wrap.getFrameWidth('lr');
                this.el.setWidth(this.adjustWidth('textarea', aw));
                this.iframe.style.width = aw + 'px';
            }
            if(typeof h == 'number'){
                var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
                this.el.setHeight(this.adjustWidth('textarea', ah));
                this.iframe.style.height = ah + 'px';
                if(this.doc){
                    this.getEditorBody().style.height = (ah - (this.iframePad*2)) + 'px';
                }
            }
        }
    },

    toggleSourceEdit : function(sourceEditMode){
        if(sourceEditMode === undefined){
            sourceEditMode = !this.sourceEditMode;
        }
        this.sourceEditMode = sourceEditMode === true;
        var btn = this.tb.items.get('sourceedit');
        if(btn.pressed !== this.sourceEditMode){
            btn.toggle(this.sourceEditMode);
            return;
        }
        if(this.sourceEditMode){
            this.tb.items.each(function(item){
                if(item.itemId != 'sourceedit'){
                    item.disable();
                }
            });
            this.syncValue();
            this.iframe.className = 'x-hidden';
            this.el.removeClass('x-hidden');
            this.el.dom.removeAttribute('tabIndex');
            this.el.focus();
        }else{
            if(this.initialized){
                this.tb.items.each(function(item){
                    item.enable();
                });
            }
            this.pushValue();
            this.iframe.className = '';
            this.el.addClass('x-hidden');
            this.el.dom.setAttribute('tabIndex', -1);
            this.deferFocus();
        }
        var lastSize = this.lastSize;
        if(lastSize){
            delete this.lastSize;
            this.setSize(lastSize);
        }
        this.fireEvent('editmodechange', this, this.sourceEditMode);
    },

    createLink : function(){
        var url = prompt(this.createLinkText, this.defaultLinkValue);
        if(url && url != 'http:/'+'/'){
            this.relayCmd('createlink', url);
        }
    },

    adjustSize : Ext.BoxComponent.prototype.adjustSize,

    getResizeEl : function(){
        return this.wrap;
    },

    getPositionEl : function(){
        return this.wrap;
    },

    initEvents : function(){
        this.originalValue = this.getValue();
    },

    markInvalid : Ext.emptyFn,

    clearInvalid : Ext.emptyFn,

    setValue : function(v){
        Ext.form.HtmlEditor.superclass.setValue.call(this, v);
        this.pushValue();
    },

    cleanHtml : function(html){
        html = String(html);
        if(html.length > 5){
            if(Ext.isSafari){
                html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
            }
        }
        if(html == ' '){
            html = '';
        }
        return html;
    },

    syncValue : function(){
        if(this.initialized){
            var bd = this.getEditorBody();
            var html = bd.innerHTML;
            if(Ext.isSafari){
                var bs = bd.getAttribute('style');
                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);
            }
        }
    },

    pushValue : function(){
        if(this.initialized){
            var v = this.el.dom.value;
            if(!this.activated && v.length < 1){
                v = ' ';
            }
            if(this.fireEvent('beforepush', this, v) !== false){
                this.getEditorBody().innerHTML = v;
                this.fireEvent('push', this, v);
            }
        }
    },

    deferFocus : function(){
        this.focus.defer(10, this);
    },

    focus : function(){
        if(this.win && !this.sourceEditMode){
            this.win.focus();
        }else{
            this.el.focus();
        }
    },

    initEditor : function(){
        var dbody = this.getEditorBody();
        var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
        ss['background-attachment'] = 'fixed';
        dbody.bgProperties = 'fixed';
        Ext.DomHelper.applyStyles(dbody, ss);
        Ext.EventManager.on(this.doc, {
            'mousedown': this.onEditorEvent,
            'dblclick': this.onEditorEvent,
            'click': this.onEditorEvent,
            'keyup': this.onEditorEvent,
            buffer:100,
            scope: this
        });
        if(Ext.isGecko){
            Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);
        }
        if(Ext.isIE || Ext.isSafari || Ext.isOpera){
            Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
        }
        this.initialized = true;

        this.fireEvent('initialize', this);
        this.pushValue();
    },

    onDestroy : function(){
        if(this.rendered){
            this.tb.items.each(function(item){
                if(item.menu){
                    item.menu.removeAll();
                    if(item.menu.el){
                        item.menu.el.destroy();
                    }
                }
                item.destroy();
            });
            this.wrap.dom.innerHTML = '';
            this.wrap.remove();
        }
    },

    onFirstFocus : function(){
        this.activated = true;
        this.tb.items.each(function(item){
           item.enable();
        });
        if(Ext.isGecko){
            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);
    },

    adjustFont: function(btn){
        var adjust = btn.itemId == 'increasefontsize' ? 1 : -1;

        var v = parseInt(this.doc.queryCommandValue('FontSize') || 2, 10);
        if(Ext.isSafari3 || Ext.isAir){

            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){
                adjust *= 2;
            }
            v = Math.max(1, v+adjust) + (Ext.isSafari ? 'px' : 0);
        }
        this.execCmd('FontSize', v);
    },

    onEditorEvent : function(e){
        this.updateToolbar();
    },

    updateToolbar: function(){

        if(!this.activated){
            this.onFirstFocus();
            return;
        }

        var btns = this.tb.items.map, doc = this.doc;

        if(this.enableFont && !Ext.isSafari){
            var name = (this.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.isSafari && this.enableLists){
            btns.insertorderedlist.toggle(doc.queryCommandState('insertorderedlist'));
            btns.insertunorderedlist.toggle(doc.queryCommandState('insertunorderedlist'));
        }

        Ext.menu.MenuMgr.hideAll();

        this.syncValue();
    },

    relayBtnCmd : function(btn){
        this.relayCmd(btn.itemId);
    },

    relayCmd : function(cmd, value){
        this.win.focus();
        this.execCmd(cmd, value);
        this.updateToolbar();
        this.deferFocus();
    },

    execCmd : function(cmd, value){
        this.doc.execCommand(cmd, false, value === undefined ? null : value);
        this.syncValue();
    },

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

    insertAtCursor : function(text){
        if(!this.activated){
            return;
        }
        if(Ext.isIE){
            this.win.focus();
            var r = this.doc.selection.createRange();
            if(r){
                r.collapse(true);
                r.pasteHTML(text);
                this.syncValue();
                this.deferFocus();
            }
        }else if(Ext.isGecko || Ext.isOpera){
            this.win.focus();
            this.execCmd('InsertHTML', text);
            this.deferFocus();
        }else if(Ext.isSafari){
            this.execCmd('InsertText', text);
            this.deferFocus();
        }
    },

    fixKeys : function(){
        if(Ext.isIE){
            return function(e){
                var k = e.getKey(), r;
                if(k == e.TAB){
                    e.stopEvent();
                    r = this.doc.selection.createRange();
                    if(r){
                        r.collapse(true);
                        r.pasteHTML('    ');
                        this.deferFocus();
                    }
                }else if(k == e.ENTER){
                    r = this.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.isSafari){
            return function(e){
                var k = e.getKey();
                if(k == e.TAB){
                    e.stopEvent();
                    this.execCmd('InsertText','\t');
                    this.deferFocus();
                }
             };
        }
    }(),

    getToolbar : function(){
        return this.tb;
    },

    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'
        }
    }

});
Ext.reg('htmleditor', Ext.form.HtmlEditor);

Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, {

    minValue : null,

    maxValue : null,

    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",

    increment: 15,

    mode: 'local',

    triggerAction: 'all',

    typeAhead: false,

    initComponent : function(){
        Ext.form.TimeField.superclass.initComponent.call(this);

        if(typeof this.minValue == "string"){
            this.minValue = this.parseDate(this.minValue);
        }
        if(typeof this.maxValue == "string"){
            this.maxValue = this.parseDate(this.maxValue);
        }

        if(!this.store){
            var min = this.parseDate(this.minValue);
            if(!min){
                min = new Date().clearTime();
            }
            var max = this.parseDate(this.maxValue);
            if(!max){
                max = new Date().clearTime().add('mi', (24 * 60) - 1);
            }
            var times = [];
            while(min <= max){
                times.push([min.dateFormat(this.format)]);
                min = min.add('mi', this.increment);
            }
            this.store = new Ext.data.SimpleStore({
                fields: ['text'],
                data : times
            });
            this.displayField = 'text';
        }
    },

    getValue : function(){
        var v = Ext.form.TimeField.superclass.getValue.call(this);
        return this.formatDate(this.parseDate(v)) || '';
    },

    setValue : function(value){
        Ext.form.TimeField.superclass.setValue.call(this, this.formatDate(this.parseDate(value)));
    },

    validateValue : Ext.form.DateField.prototype.validateValue,
    parseDate : Ext.form.DateField.prototype.parseDate,
    formatDate : Ext.form.DateField.prototype.formatDate,

    beforeBlur : function(){
        var v = this.parseDate(this.getRawValue());
        if(v){
            this.setValue(v.dateFormat(this.format));
        }
    }

});
Ext.reg('timefield', Ext.form.TimeField);
Ext.form.Label = Ext.extend(Ext.BoxComponent, {
    onRender : function(ct, position){
        if(!this.el){
            this.el = document.createElement('label');
            this.el.innerHTML = this.text ? Ext.util.Format.htmlEncode(this.text) : (this.html || '');
            if(this.forId){
                this.el.setAttribute('htmlFor', this.forId);
            }
        }
        Ext.form.Label.superclass.onRender.call(this, ct, position);
    }
});

Ext.reg('label', Ext.form.Label);

Ext.form.Action = function(form, options){
    this.form = form;
    this.options = options || {};
};

Ext.form.Action.CLIENT_INVALID = 'client';

Ext.form.Action.SERVER_INVALID = 'server';

Ext.form.Action.CONNECT_FAILURE = 'connect';

Ext.form.Action.LOAD_FAILURE = 'load';

Ext.form.Action.prototype = {

    type : 'default',

        run : function(options){

    },

        success : function(response){

    },

        handleResponse : function(response){

    },

        failure : function(response){
        this.response = response;
        this.failureType = Ext.form.Action.CONNECT_FAILURE;
        this.form.afterAction(this, false);
    },

        processResponse : function(response){
        this.response = response;
        if(!response.responseText){
            return true;
        }
        this.result = this.handleResponse(response);
        return this.result;
    },

        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 += (url.indexOf('?') != -1 ? '&' : '?') + p;
            }
        }
        return url;
    },

        getMethod : function(){
        return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
    },

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

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

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, {

    type : 'submit',

        run : function(){
        var o = this.options;
        var method = this.getMethod();
        var isPost = method == 'POST';
        if(o.clientValidation === false || this.form.isValid()){
            Ext.Ajax.request(Ext.apply(this.createCallback(o), {
                form:this.form.el.dom,
                url:this.getUrl(!isPost),
                method: method,
                params:isPost ? this.getParams() : null,
                isUpload: this.form.fileUpload
            }));

        }else if (o.clientValidation !== false){             this.failureType = Ext.form.Action.CLIENT_INVALID;
            this.form.afterAction(this, false);
        }
    },

        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);
    },

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

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, {
        type : 'load',

        run : function(){
        Ext.Ajax.request(Ext.apply(
                this.createCallback(this.options), {
                    method:this.getMethod(),
                    url:this.getUrl(false),
                    params:this.getParams()
        }));
    },

        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);
    },

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

Ext.form.Action.ACTION_TYPES = {
    'load' : Ext.form.Action.Load,
    'submit' : Ext.form.Action.Submit
};

Ext.form.VTypes = function(){
        var alpha = /^[a-zA-Z_]+$/;
    var alphanum = /^[a-zA-Z0-9_]+$/;
    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;
    var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;

        return {

        'email' : function(v){
            return email.test(v);
        },

        'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',

        'emailMask' : /[a-z0-9_\.\-@]/i,

        'url' : function(v){
            return url.test(v);
        },

        'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',

        'alpha' : function(v){
            return alpha.test(v);
        },

        'alphaText' : 'This field should only contain letters and _',

        'alphaMask' : /[a-z_]/i,

        'alphanum' : function(v){
            return alphanum.test(v);
        },

        'alphanumText' : 'This field should only contain letters, numbers and _',

        'alphanumMask' : /[a-z0-9_]/i
    };
}();

Ext.grid.GridPanel = Ext.extend(Ext.Panel, {

    ddText : "{0} selected row{1}",

    minColumnWidth : 25,

    trackMouseOver : true,

    enableDragDrop : false,

    enableColumnMove : true,

    enableColumnHide : true,

    enableHdMenu : true,

    stripeRows : false,

    autoExpandColumn : false,

    autoExpandMin : 50,

    autoExpandMax : 1000,

    view : null,

    loadMask : false,

    rendered : false,

    viewReady: false,

    stateEvents: ["columnmove", "columnresize", "sortchange"],

    initComponent : function(){
        Ext.grid.GridPanel.superclass.initComponent.call(this);

        this.autoScroll = false;
        this.autoWidth = false;

        if(Ext.isArray(this.columns)){
            this.colModel = new Ext.grid.ColumnModel(this.columns);
            delete this.columns;
        }

        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(

            "click",

            "dblclick",

            "contextmenu",

            "mousedown",

            "mouseup",

            "mouseover",

            "mouseout",

            "keypress",

            "keydown",

            "cellmousedown",

            "rowmousedown",

            "headermousedown",

            "cellclick",

            "celldblclick",

            "rowclick",

            "rowdblclick",

            "headerclick",

            "headerdblclick",

            "rowcontextmenu",

            "cellcontextmenu",

            "headercontextmenu",

            "bodyscroll",

            "columnresize",

            "columnmove",

            "sortchange"
        );
    },

    onRender : function(ct, position){
        Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);

        var c = this.body;

        this.el.addClass('x-grid-panel');

        var view = this.getView();
        view.init(this);

        c.on("mousedown", this.onMouseDown, this);
        c.on("click", this.onClick, this);
        c.on("dblclick", this.onDblClick, this);
        c.on("contextmenu", this.onContextMenu, this);
        c.on("keydown", this.onKeyDown, this);

        this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);

        this.getSelectionModel().init(this);
        this.view.render();
    },

    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.colModel.on('hiddenchange', this.saveState, this, {delay: 100});
    },

    applyState : function(state){
        var cm = this.colModel;
        var cs = state.columns;
        if(cs){
            for(var i = 0, len = cs.length; i < len; i++){
                var s = cs[i];
                var c = cm.getColumnById(s.id);
                if(c){
                    c.hidden = s.hidden;
                    c.width = s.width;
                    var oldIndex = cm.getIndexById(s.id);
                    if(oldIndex != i){
                        cm.moveColumn(oldIndex, i);
                    }
                }
            }
        }
        if(state.sort){
            this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);
        }
    },

    getState : function(){
        var o = {columns: []};
        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;
            }
        }
        var ss = this.store.getSortState();
        if(ss){
            o.sort = ss;
        }
        return o;
    },

    afterRender : function(){
        Ext.grid.GridPanel.superclass.afterRender.call(this);
        this.view.layout();
        this.viewReady = true;
    },

    reconfigure : function(store, colModel){
        if(this.loadMask){
            this.loadMask.destroy();
            this.loadMask = new Ext.LoadMask(this.bwrap,
                    Ext.apply({store:store}, this.initialConfig.loadMask));
        }
        this.view.bind(store, colModel);
        this.store = store;
        this.colModel = colModel;
        if(this.rendered){
            this.view.refresh(true);
        }
    },

    onKeyDown : function(e){
        this.fireEvent("keydown", e);
    },

    onDestroy : function(){
        if(this.rendered){
            if(this.loadMask){
                this.loadMask.destroy();
            }
            var c = this.body;
            c.removeAllListeners();
            this.view.destroy();
            c.update("");
        }
        this.colModel.purgeListeners();
        Ext.grid.GridPanel.superclass.onDestroy.call(this);
    },

    processEvent : function(name, e){
        this.fireEvent(name, e);
        var t = e.getTarget();
        var v = this.view;
        var header = v.findHeaderIndex(t);
        if(header !== false){
            this.fireEvent("header" + name, this, header, e);
        }else{
            var row = v.findRowIndex(t);
            var cell = v.findCellIndex(t);
            if(row !== false){
                this.fireEvent("row" + name, this, row, e);
                if(cell !== false){
                    this.fireEvent("cell" + name, this, row, cell, e);
                }
            }
        }
    },

    onClick : function(e){
        this.processEvent("click", e);
    },

    onMouseDown : function(e){
        this.processEvent("mousedown", e);
    },

    onContextMenu : function(e, t){
        this.processEvent("contextmenu", e);
    },

    onDblClick : function(e){
        this.processEvent("dblclick", e);
    },

    walkCells : function(row, col, step, fn, scope){
        var cm = this.colModel, clen = cm.getColumnCount();
        var 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;
    },

    getSelections : function(){
        return this.selModel.getSelections();
    },

    onResize : function(){
        Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);
        if(this.viewReady){
            this.view.layout();
        }
    },

    getGridEl : function(){
        return this.body;
    },

    stopEditing : function(){},

    getSelectionModel : function(){
        if(!this.selModel){
            this.selModel = new Ext.grid.RowSelectionModel(
                    this.disableSelection ? {selectRow: Ext.emptyFn} : null);
        }
        return this.selModel;
    },

    getStore : function(){
        return this.store;
    },

    getColumnModel : function(){
        return this.colModel;
    },

    getView : function(){
        if(!this.view){
            this.view = new Ext.grid.GridView(this.viewConfig);
        }
        return this.view;
    },

    getDragDropText : function(){
        var count = this.selModel.getCount();
        return String.format(this.ddText, count, count == 1 ? '' : 's');
    }

});
Ext.reg('grid', Ext.grid.GridPanel);

Ext.grid.GridView = function(config){
    Ext.apply(this, config);
        this.addEvents(

      "beforerowremoved",

      "beforerowsinserted",

      "beforerefresh",

      "rowremoved",

      "rowsinserted",

      "rowupdated",

      "refresh"
  );
    Ext.grid.GridView.superclass.constructor.call(this);
};

Ext.extend(Ext.grid.GridView, Ext.util.Observable, {

    scrollOffset: 19,

    autoFill: false,

    forceFit: false,

    sortClasses : ["sort-asc", "sort-desc"],

    sortAscText : "Sort Ascending",

    sortDescText : "Sort Descending",

    columnsText : "Columns",

        borderWidth: 2,

        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 && typeof t.compile == 'function' && !t.compiled){
                t.disableFormats = true;
                t.compile();
            }
        }

        this.templates = ts;

        this.tdClass = 'x-grid3-cell';
        this.cellSelector = 'td.x-grid3-cell';
        this.hdCls = 'x-grid3-hd';
        this.rowSelector = 'div.x-grid3-row';
        this.colRe = new RegExp("x-grid3-td-([^\\s]+)", "");
    },

        fly : function(el){
        if(!this._flyweight){
            this._flyweight = new Ext.Element.Flyweight(document.body);
        }
        this._flyweight.dom = el;
        return this._flyweight;
    },

        getEditorParent : function(ed){
        return this.scroller.dom;
    },

        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');
        }
        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]);
    },

        getRows : function(){
        return this.hasRows() ? this.mainBody.dom.childNodes : [];
    },

        findCell : function(el){
        if(!el){
            return false;
        }
        return this.fly(el).findParent(this.cellSelector, 3);
    },

        findCellIndex : function(el, requiredCls){
        var cell = this.findCell(el);
        if(cell && (!requiredCls || this.fly(cell).hasClass(requiredCls))){
            return this.getCellIndex(cell);
        }
        return false;
    },

        getCellIndex : function(el){
        if(el){
            var m = el.className.match(this.colRe);
            if(m && m[1]){
                return this.cm.getIndexById(m[1]);
            }
        }
        return false;
    },

        findHeaderCell : function(el){
        var cell = this.findCell(el);
        return cell && this.fly(cell).hasClass(this.hdCls) ? cell : null;
    },

        findHeaderIndex : function(el){
        return this.findCellIndex(el, this.hdCls);
    },

        findRow : function(el){
        if(!el){
            return false;
        }
        return this.fly(el).findParent(this.rowSelector, 10);
    },

        findRowIndex : function(el){
        var r = this.findRow(el);
        return r ? r.rowIndex : false;
    },

    getRow : function(row){
        return this.getRows()[row];
    },

    getCell : function(row, col){
        return this.getRow(row).getElementsByTagName('td')[col];
    },

    getHeaderCell : function(index){
      return this.mainHd.dom.getElementsByTagName('td')[index];
    },

        addRowClass : function(row, cls){
        var r = this.getRow(row);
        if(r){
            this.fly(r).addClass(cls);
        }
    },

        removeRowClass : function(row, cls){
        var r = this.getRow(row);
        if(r){
            this.fly(r).removeClass(cls);
        }
    },

        removeRow : function(row){
        Ext.removeNode(this.getRow(row));
    },

        removeRows : function(firstRow, lastRow){
        var bd = this.mainBody.dom;
        for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
            Ext.removeNode(bd.childNodes[firstRow]);
        }
    },

        getScrollState : function(){
        var sb = this.scroller.dom;
        return {left: sb.scrollLeft, top: sb.scrollTop};
    },

        restoreScroll : function(state){
        var sb = this.scroller.dom;
        sb.scrollLeft = state.left;
        sb.scrollTop = state.top;
    },

    scrollToTop : function(){
        this.scroller.dom.scrollTop = 0;
        this.scroller.dom.scrollLeft = 0;
    },

        syncScroll : function(){
      this.syncHeaderScroll();
      var mb = this.scroller.dom;
        this.grid.fireEvent("bodyscroll", mb.scrollLeft, mb.scrollTop);
    },

        syncHeaderScroll : function(){
        var mb = this.scroller.dom;
        this.innerHd.scrollLeft = mb.scrollLeft;
        this.innerHd.scrollLeft = mb.scrollLeft;     },

        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]);
    },

        updateAllColumnWidths : function(){
        var tw = this.getTotalWidth();
        var clen = this.cm.getColumnCount();
        var ws = [];
        for(var i = 0; i < clen; i++){
            ws[i] = this.getColumnWidth(i);
        }

        this.innerHd.firstChild.firstChild.style.width = tw;

        for(var i = 0; i < clen; i++){
            var hd = this.getHeaderCell(i);
            hd.style.width = ws[i];
        }

        var ns = this.getRows();
        for(var i = 0, len = ns.length; i < len; i++){
            ns[i].style.width = tw;
            ns[i].firstChild.style.width = tw;
            var row = ns[i].firstChild.rows[0];
            for(var j = 0; j < clen; j++){
                row.childNodes[j].style.width = ws[j];
            }
        }

        this.onAllColumnWidthsUpdated(ws, tw);
    },

        updateColumnWidth : function(col, width){
        var w = this.getColumnWidth(col);
        var tw = this.getTotalWidth();

        this.innerHd.firstChild.firstChild.style.width = tw;
        var hd = this.getHeaderCell(col);
        hd.style.width = w;

        var ns = this.getRows();
        for(var i = 0, len = ns.length; i < len; i++){
            ns[i].style.width = tw;
            ns[i].firstChild.style.width = tw;
            ns[i].firstChild.rows[0].childNodes[col].style.width = w;
        }

        this.onColumnWidthUpdated(col, w, tw);
    },

        updateColumnHidden : function(col, hidden){
        var tw = this.getTotalWidth();

        this.innerHd.firstChild.firstChild.style.width = tw;

        var display = hidden ? 'none' : '';

        var hd = this.getHeaderCell(col);
        hd.style.display = display;

        var ns = this.getRows();
        for(var i = 0, len = ns.length; i < len; i++){
            ns[i].style.width = tw;
            ns[i].firstChild.style.width = tw;
            ns[i].firstChild.rows[0].childNodes[col].style.display = display;
        }

        this.onColumnHiddenUpdated(col, hidden, tw);

        delete this.lastViewWidth;         this.layout();
    },

        doRender : function(cs, rs, ds, startRow, colCount, stripe){
        var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
        var tstyle = 'width:'+this.getTotalWidth()+';';
                var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
        for(var j = 0, len = rs.length; j < len; j++){
            r = rs[j]; cb = [];
            var rowIndex = (j+startRow);
            for(var i = 0; i < colCount; i++){
                c = cs[i];
                p.id = c.id;
                p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                p.attr = p.cellAttr = "";
                p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
                p.style = c.style;
                if(p.value == undefined || p.value === "") p.value = " ";
                if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
                    p.css += ' x-grid3-dirty-cell';
                }
                cb[cb.length] = ct.apply(p);
            }
            var alt = [];
            if(stripe && ((rowIndex+1) % 2 == 0)){
                alt[0] = "x-grid3-row-alt";
            }
            if(r.dirty){
                alt[1] = " x-grid3-dirty-row";
            }
            rp.cols = colCount;
            if(this.getRowClass){
                alt[2] = this.getRowClass(r, rowIndex, rp, ds);
            }
            rp.alt = alt.join(" ");
            rp.cells = cb.join("");
            buf[buf.length] =  rt.apply(rp);
        }
        return buf.join("");
    },

        processRows : function(startRow, skipStripe){
        if(this.ds.getCount() < 1){
            return;
        }
        skipStripe = skipStripe || !this.grid.stripeRows;
        startRow = startRow || 0;
        var rows = this.getRows();
        var cls = ' x-grid3-row-alt ';
        for(var i = startRow, len = rows.length; i < len; i++){
            var row = rows[i];
            row.rowIndex = i;
            if(!skipStripe){
                var isAlt = ((i+1) % 2 == 0);
                var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
                if(isAlt == hasAlt){
                    continue;
                }
                if(isAlt){
                    row.className += " x-grid3-row-alt";
                }else{
                    row.className = row.className.replace("x-grid3-row-alt", "");
                }
            }
        }
    },

        renderUI : function(){

        var header = this.renderHeaders();
        var body = this.templates.body.apply({rows:''});

        var html = this.templates.master.apply({
            body: body,
            header: header
        });

        var g = this.grid;

        g.getGridEl().dom.innerHTML = html;

        this.initElements();

        this.mainBody.dom.innerHTML = this.renderRows();
        this.processRows(0, true);

                Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
        this.mainHd.on("mouseover", this.handleHdOver, this);
        this.mainHd.on("mouseout", this.handleHdOut, this);
        this.mainHd.on("mousemove", this.handleHdMove, this);

        this.scroller.on('scroll', this.syncScroll,  this);
        if(g.enableColumnResize !== false){
            this.splitone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
        }

        if(g.enableColumnMove){
            this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
            this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
        }

        if(g.enableHdMenu !== false){
            if(g.enableColumnHide !== false){
                this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
                this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
                this.colMenu.on("itemclick", this.handleHdMenuClick, this);
            }
            this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
            this.hmenu.add(
                {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
                {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
            );
            if(g.enableColumnHide !== false){
                this.hmenu.add('-',
                    {id:"columns", text: this.columnsText, menu: this.colMenu, iconCls: 'x-cols-icon'}
                );
            }
            this.hmenu.on("itemclick", this.handleHdMenuClick, this);

                    }

        if(g.enableDragDrop || g.enableDrag){
            var dd = new Ext.grid.GridDragZone(g, {
                ddGroup : g.ddGroup || 'GridDD'
            });
        }

        this.updateHeaderSortState();

    },

        layout : function(){
        if(!this.mainBody){
            return;         }
        var g = this.grid;
        var c = g.getGridEl(), cm = this.cm,
                expandCol = g.autoExpandColumn,
                gv = this;

        var csize = c.getSize(true);
        var vw = csize.width;

        if(vw < 20 || csize.height < 20){             return;
        }

        if(g.autoHeight){
            this.scroller.dom.style.overflow = 'visible';
        }else{
            this.el.setSize(csize.width, csize.height);

            var hdHeight = this.mainHd.getHeight();
            var vh = csize.height - (hdHeight);

            this.scroller.setSize(vw, vh);
            if(this.innerHd){
                this.innerHd.style.width = (vw)+'px';
            }
        }
        if(this.forceFit){
            if(this.lastViewWidth != vw){
                this.fitColumns(false, false);
                this.lastViewWidth = vw;
            }
        }else {
            this.autoExpand();
            this.syncHeaderScroll();
        }
        this.onLayout(vw, vh);
    },

            onLayout : function(vw, vh){
            },

    onColumnWidthUpdated : function(col, w, tw){
            },

    onAllColumnWidthsUpdated : function(ws, tw){
            },

    onColumnHiddenUpdated : function(col, hidden, tw){
            },

    updateColumnText : function(col, text){
            },

    afterMove : function(colIndex){
            },

        init: function(grid){
        this.grid = grid;

        this.initTemplates();
        this.initData(grid.store, grid.colModel);
        this.initUI(grid);
    },

        getColumnId : function(index){
      return this.cm.getColumnId(index);
    },

        renderHeaders : function(){
        var cm = this.cm, ts = this.templates;
        var ct = ts.hcell;

        var cb = [], sb = [], p = {};

        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            p.id = cm.getColumnId(i);
            p.value = cm.getColumnHeader(i) || "";
            p.style = this.getColumnStyle(i, true);
            p.tooltip = this.getColumnTooltip(i);
            if(cm.config[i].align == 'right'){
                p.istyle = 'padding-right:16px';
            } else {
                delete p.istyle;
            }
            cb[cb.length] = ct.apply(p);
        }
        return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'});
    },

        getColumnTooltip : function(i){
        var tt = this.cm.getColumnTooltip(i);
        if(tt){
            if(Ext.QuickTips.isEnabled()){
                return 'ext:qtip="'+tt+'"';
            }else{
                return 'title="'+tt+'"';
            }
        }
        return "";
    },

        beforeUpdate : function(){
        this.grid.stopEditing(true);
    },

        updateHeaders : function(){
        this.innerHd.firstChild.innerHTML = this.renderHeaders();
    },

    focusRow : function(row){
        this.focusCell(row, 0, false);
    },

    focusCell : function(row, col, hscroll){
        var xy = this.ensureVisible(row, col, hscroll);
        this.focusEl.setXY(xy);
        if(Ext.isGecko){
            this.focusEl.focus();
        }else{
            this.focusEl.focus.defer(1, this.focusEl);
        }
    },

        ensureVisible : function(row, col, hscroll){
        if(typeof row != "number"){
            row = row.rowIndex;
        }
        if(!this.ds){
            return;
        }
        if(row < 0 || row >= this.ds.getCount()){
            return;
        }
        col = (col !== undefined ? col : 0);

        var rowEl = this.getRow(row), cellEl;
        if(!(hscroll === false && col === 0)){
            while(this.cm.isHidden(col)){
                col++;
            }
            cellEl = this.getCell(row, col);
        }
        if(!rowEl){
            return;
        }

        var c = this.scroller.dom;

        var ctop = 0;
        var p = rowEl, stop = this.el.dom;
        while(p && p != stop){
            ctop += p.offsetTop;
            p = p.offsetParent;
        }
        ctop -= this.mainHd.dom.offsetHeight;

        var cbot = ctop + rowEl.offsetHeight;

        var ch = c.clientHeight;
        var stop = parseInt(c.scrollTop, 10);
        var 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 cellEl ? Ext.fly(cellEl).getXY() : [c.scrollLeft, Ext.fly(rowEl).getY()];
    },

        insertRows : function(dm, firstRow, lastRow, isUpdate){
        if(!isUpdate && firstRow === 0 && lastRow == dm.getCount()-1){
            this.refresh();
        }else{
            if(!isUpdate){
                this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
            }
            var html = this.renderRows(firstRow, lastRow);
            var before = this.getRow(firstRow);
            if(before){
                Ext.DomHelper.insertHtml('beforeBegin', before, html);
            }else{
                Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
            }
            if(!isUpdate){
                this.fireEvent("rowsinserted", this, firstRow, lastRow);
                this.processRows(firstRow);
            }
        }
    },

        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);
        }
    },

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

        getColumnWidth : function(col){
        var w = this.cm.getColumnWidth(col);
        if(typeof w == 'number'){
            return (Ext.isBorderBox ? w : (w-this.borderWidth > 0 ? w-this.borderWidth:0)) + 'px';
        }
        return w;
    },

        getTotalWidth : function(){
        return this.cm.getTotalWidth()+'px';
    },

        fitColumns : function(preventRefresh, onlyExpand, omitColumn){
        var cm = this.cm, leftOver, dist, i;
        var tw = cm.getTotalWidth(false);
        var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset;

        if(aw < 20){             return;
        }
        var extra = aw - tw;

        if(extra === 0){
            return false;
        }

        var vc = cm.getColumnCount(true);
        var ac = vc-(typeof omitColumn == 'number' ? 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;
    },

        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.scrollOffset;
            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);
                    }
                }
            }
        }
    },

        getColumnData : function(){
                var cs = [], cm = this.cm, colCount = cm.getColumnCount();
        for(var i = 0; i < colCount; i++){
            var name = cm.getDataIndex(i);
            cs[i] = {
                name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name),
                renderer : cm.getRenderer(i),
                id : cm.getColumnId(i),
                style : this.getColumnStyle(i)
            };
        }
        return cs;
    },

        renderRows : function(startRow, endRow){
                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 = typeof endRow == "undefined"? ds.getCount()-1 : endRow;

                var rs = ds.getRange(startRow, endRow);

        return this.doRender(cs, rs, ds, startRow, colCount, stripe);
    },

        renderBody : function(){
        var markup = this.renderRows();
        return this.templates.body.apply({rows: markup});
    },

        refreshRow : function(record){
        var ds = this.ds, index;
        if(typeof record == 'number'){
            index = record;
            record = ds.getAt(index);
        }else{
            index = ds.indexOf(record);
        }
        var cls = [];
        this.insertRows(ds, index, index, true);
        this.getRow(index).rowIndex = index;
        this.onRemove(ds, record, index+1, true);
        this.fireEvent("rowupdated", this, index, record);
    },

    refresh : function(headersToo){
        this.fireEvent("beforerefresh", this);
        this.grid.stopEditing(true);

        var result = this.renderBody();
        this.mainBody.update(result);

        if(headersToo === true){
            this.updateHeaders();
            this.updateHeaderSortState();
        }
        this.processRows(0, true);
        this.layout();
        this.applyEmptyText();
        this.fireEvent("refresh", this);
    },

        applyEmptyText : function(){
        if(this.emptyText && !this.hasRows()){
            this.mainBody.update('
      ' + this.emptyText + '
      ');
        }
    },

        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);
        }
    },

        destroy : function(){
        if(this.colMenu){
            this.colMenu.removeAll();
            Ext.menu.MenuMgr.unregister(this.colMenu);
            this.colMenu.getEl().remove();
            delete this.colMenu;
        }
        if(this.hmenu){
            this.hmenu.removeAll();
            Ext.menu.MenuMgr.unregister(this.hmenu);
            this.hmenu.getEl().remove();
            delete this.hmenu;
        }
        if(this.grid.enableColumnMove){
            var dds = Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
            if(dds){
                for(var dd in dds){
                    if(!dds[dd].config.isTarget && dds[dd].dragElId){
                        var elid = dds[dd].dragElId;
                        dds[dd].unreg();
                        Ext.get(elid).remove();
                    } else if(dds[dd].config.isTarget){
                        dds[dd].proxyTop.remove();
                        dds[dd].proxyBottom.remove();
                        dds[dd].unreg();
                    }
                    if(Ext.dd.DDM.locationCache[dd]){
                        delete Ext.dd.DDM.locationCache[dd];
                    }
                }
                delete Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
            }
        }

        Ext.destroy(this.resizeMarker, this.resizeProxy);

        this.initData(null, null);
        Ext.EventManager.removeResizeListener(this.onWindowResize, this);
    },

        onDenyColumnHide : function(){

    },

        render : function(){

        var cm = this.cm;
        var colCount = cm.getColumnCount();

        if(this.autoFill){
            this.fitColumns(true, true);
        }else if(this.forceFit){
            this.fitColumns(true, false);
        }else if(this.grid.autoExpandColumn){
            this.autoExpand(true);
        }

        this.renderUI();
    },

        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(ds){
            ds.on("load", this.onLoad, this);
            ds.on("datachanged", this.onDataChange, this);
            ds.on("add", this.onAdd, this);
            ds.on("remove", this.onRemove, this);
            ds.on("update", this.onUpdate, this);
            ds.on("clear", this.onClear, this);
        }
        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);
            this.cm.un("columnlockchange", this.onColumnLock, this);
        }
        if(cm){
            cm.on("configchange", this.onColConfigChange, this);
            cm.on("widthchange", this.onColWidthChange, this);
            cm.on("headerchange", this.onHeaderChange, this);
            cm.on("hiddenchange", this.onHiddenChange, this);
            cm.on("columnmoved", this.onColumnMove, this);
            cm.on("columnlockchange", this.onColumnLock, this);
        }
        this.cm = cm;
    },

        onDataChange : function(){
        this.refresh();
        this.updateHeaderSortState();
    },

        onClear : function(){
        this.refresh();
    },

        onUpdate : function(ds, record){
        this.refreshRow(record);
    },

        onAdd : function(ds, records, index){
        this.insertRows(ds, index, index + (records.length-1));
    },

        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);
        }
    },

        onLoad : function(){
        this.scrollToTop();
    },

        onColWidthChange : function(cm, col, width){
        this.updateColumnWidth(col, width);
    },

        onHeaderChange : function(cm, col, text){
        this.updateHeaders();
    },

        onHiddenChange : function(cm, col, hidden){
        this.updateColumnHidden(col, hidden);
    },

        onColumnMove : function(cm, oldIndex, newIndex){
        this.indexMap = null;
        var s = this.getScrollState();
        this.refresh(true);
        this.restoreScroll(s);
        this.afterMove(newIndex);
    },

        onColConfigChange : function(){
        delete this.lastViewWidth;
        this.indexMap = null;
        this.refresh(true);
    },

        initUI : function(grid){
        grid.on("headerclick", this.onHeaderClick, this);

        if(grid.trackMouseOver){
            grid.on("mouseover", this.onRowOver, this);
          grid.on("mouseout", this.onRowOut, this);
      }
    },

        initEvents : function(){

    },

        onHeaderClick : function(g, index){
        if(this.headersDisabled || !this.cm.isSortable(index)){
            return;
        }
        g.stopEditing(true);
        g.store.sort(this.cm.getDataIndex(index));
    },

        onRowOver : function(e, t){
        var row;
        if((row = this.findRowIndex(t)) !== false){
            this.addRowClass(row, "x-grid3-row-over");
        }
    },

        onRowOut : function(e, t){
        var row;
        if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
            this.removeRowClass(row, "x-grid3-row-over");
        }
    },

        handleWheel : function(e){
        e.stopPropagation();
    },

        onRowSelect : function(row){
        this.addRowClass(row, "x-grid3-row-selected");
    },

        onRowDeselect : function(row){
        this.removeRowClass(row, "x-grid3-row-selected");
    },

        onCellSelect : function(row, col){
        var cell = this.getCell(row, col);
        if(cell){
            this.fly(cell).addClass("x-grid3-cell-selected");
        }
    },

        onCellDeselect : function(row, col){
        var cell = this.getCell(row, col);
        if(cell){
            this.fly(cell).removeClass("x-grid3-cell-selected");
        }
    },

        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.grid.fireEvent("columnresize", i, w);
    },

        handleHdMenuClick : function(item){
        var index = this.hdCtxIndex;
        var cm = this.cm, ds = this.ds;
        switch(item.id){
            case "asc":
                ds.sort(cm.getDataIndex(index), "ASC");
                break;
            case "desc":
                ds.sort(cm.getDataIndex(index), "DESC");
                break;
            default:
                index = cm.getIndexById(item.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;
    },

        isHideableColumn : function(c){
        return !c.hidden && !c.fixed;
    },

        beforeColMenuShow : function(){
        var cm = this.cm,  colCount = cm.getColumnCount();
        this.colMenu.removeAll();
        for(var i = 0; i < colCount; i++){
            if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
                this.colMenu.add(new Ext.menu.CheckItem({
                    id: "col-"+cm.getColumnId(i),
                    text: cm.getColumnHeader(i),
                    checked: !cm.isHidden(i),
                    hideOnClick:false,
                    disabled: cm.config[i].hideable === false
                }));
            }
        }
    },

        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?");
        }
    },

        handleHdOver : function(e, t){
        var hd = this.findHeaderCell(t);
        if(hd && !this.headersDisabled){
            this.activeHd = hd;
            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';
                }
            }
        }
    },

        handleHdMove : function(e, t){
        if(this.activeHd && !this.headersDisabled){
            var hw = this.splitHandleWidth || 5;
            var r = this.activeHdRegion;
            var x = e.getPageX();
            var ss = this.activeHd.style;
            if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){
                ss.cursor = Ext.isAir ? 'move' : Ext.isSafari ? 'e-resize' : 'col-resize';             }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
                ss.cursor = Ext.isAir ? 'move' : Ext.isSafari ? 'w-resize' : 'col-resize';
            }else{
                ss.cursor = '';
            }
        }
    },

        handleHdOut : function(e, t){
        var hd = this.findHeaderCell(t);
        if(hd && (!Ext.isIE || !e.within(hd, true))){
            this.activeHd = null;
            this.fly(hd).removeClass("x-grid3-hd-over");
            hd.style.cursor = '';
        }
    },

        hasRows : function(){
        var fc = this.mainBody.dom.firstChild;
        return fc && fc.className != 'x-grid-empty';
    },

        bind : function(d, c){
        this.initData(d, c);
    }
});

Ext.grid.GridView.SplitDragZone = 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;
};
Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, {

    b4StartDrag : function(x, y){
        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);
        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 t = this.view.findHeaderCell(e.getTarget());
        if(t){
            var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1];
            var exy = e.getXY(), ex = exy[0], ey = exy[1];
            var 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;
        var endX = Math.max(this.minX, e.getPageX());
        var diff = endX - this.startPos;
        v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
        setTimeout(function(){
            v.headersDisabled = false;
        }, 50);
    },

    autoOffset : function(){
        this.setDelta(0,0);
    }
});

Ext.grid.GroupingView = Ext.extend(Ext.grid.GridView, {

    hideGroupedColumn:false,

    showGroupName:true,

    startCollapsed:false,

    enableGrouping:true,

    enableGroupingMenu:true,

    enableNoGroups:true,

    emptyGroupText : '(None)',

    ignoreAdd: false,

    groupTextTpl : '{text}',

    gidSeed : 1000,

    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();
        this.endGroup = '
      ';
    },

    findGroup : function(el){
        return Ext.fly(el).up('.x-grid-group', this.mainBody.dom);
    },

    getGroups : function(){
        return this.hasRows() ? this.mainBody.dom.childNodes : [];
    },

    onAdd : function(){
        if(this.enableGrouping && !this.ignoreAdd){
            var ss = this.getScrollState();
            this.refresh();
            this.restoreScroll(ss);
        }else if(!this.enableGrouping){
            Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments);
        }
    },

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

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

    beforeMenuShow : function(){
        var field = this.getGroupField();
        var g = this.hmenu.items.get('groupBy');
        if(g){
            g.setDisabled(this.cm.config[this.hdCtxIndex].groupable === false);
        }
        var s = this.hmenu.items.get('showGroups');
        if(s){
            if (!!field){
                s.setDisabled(this.cm.config[this.hdCtxIndex].groupable === false)
            }
            s.setChecked(!!field);
        }
    },

    renderUI : function(){
        Ext.grid.GroupingView.superclass.renderUI.call(this);
        this.mainBody.on('mousedown', this.interceptMouse, this);

        if(this.enableGroupingMenu && this.hmenu){
            this.hmenu.add('-',{
                id:'groupBy',
                text: this.groupByText,
                handler: this.onGroupByClick,
                scope: this,
                iconCls:'x-group-by-icon'
            });
            if(this.enableNoGroups){
                this.hmenu.add({
                    id:'showGroups',
                    text: this.showGroupsText,
                    checked: true,
                    checkHandler: this.onShowGroupsClick,
                    scope: this
                });
            }
            this.hmenu.on('beforeshow', this.beforeMenuShow, this);
        }
    },

    onGroupByClick : function(){
        this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
        this.beforeMenuShow();
    },

    onShowGroupsClick : function(mi, checked){
        if(checked){
            this.onGroupByClick();
        }else{
            this.grid.store.clearGrouping();
        }
    },

    toggleGroup : function(group, expanded){
        this.grid.stopEditing(true);
        group = Ext.getDom(group);
        var gel = Ext.fly(group);
        expanded = expanded !== undefined ?
                expanded : gel.hasClass('x-grid-group-collapsed');

        this.state[gel.dom.id] = expanded;
        gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
    },

    toggleAllGroups : function(expanded){
        var groups = this.getGroups();
        for(var i = 0, len = groups.length; i < len; i++){
            this.toggleGroup(groups[i], expanded);
        }
    },

    expandAllGroups : function(){
        this.toggleAllGroups(true);
    },

    collapseAllGroups : function(){
        this.toggleAllGroups(false);
    },

    interceptMouse : function(e){
        var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
        if(hd){
            e.stopEvent();
            this.toggleGroup(hd.parentNode);
        }
    },

    getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){
        var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
        if(g === ''){
            g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
        }
        return g;
    },

    getGroupField : function(){
        return this.grid.store.getGroupState();
    },

    renderRows : function(){
        var groupField = this.getGroupField();
        var eg = !!groupField;

        if(this.hideGroupedColumn) {
            var colIndex = this.cm.findColumnIndex(groupField);
            if(!eg && this.lastGroupField !== undefined) {
                this.mainBody.update('');
                this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
                delete this.lastGroupField;
            }else if (eg && this.lastGroupField === undefined) {
                this.lastGroupField = groupField;
                this.cm.setHidden(colIndex, true);
            }else if (eg && this.lastGroupField !== undefined && 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);
    },

    doRender : function(cs, rs, ds, startRow, colCount, stripe){
        if(rs.length < 1){
            return '';
        }
        var groupField = this.getGroupField();
        var colIndex = this.cm.findColumnIndex(groupField);

        this.enableGrouping = !!groupField;

        if(!this.enableGrouping || this.isUpdating){
            return Ext.grid.GroupingView.superclass.doRender.apply(
                    this, arguments);
        }
        var gstyle = 'width:'+this.getTotalWidth()+';';

        var gidPrefix = this.grid.getGridEl().id;
        var cfg = this.cm.config[colIndex];
        var groupRenderer = cfg.groupRenderer || cfg.renderer;
        var prefix = this.showGroupName ?
                     (cfg.groupName || cfg.header)+': ' : '';

        var groups = [], curGroup, i, len, gid;
        for(i = 0, len = rs.length; i < len; i++){
            var rowIndex = startRow + i;
            var r = rs[i],
                gvalue = r.data[groupField],
                g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
            if(!curGroup || curGroup.group != g){
                gid = gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(g);

                var isCollapsed  = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed;
                var gcls = isCollapsed ? 'x-grid-group-collapsed' : '';
                curGroup = {
                    group: g,
                    gvalue: gvalue,
                    text: prefix + g,
                    groupId: gid,
                    startRow: rowIndex,
                    rs: [r],
                    cls: gcls,
                    style: gstyle
                };
                groups.push(curGroup);
            }else{
                curGroup.rs.push(r);
            }
            r._groupId = gid;
        }

        var buf = [];
        for(i = 0, len = groups.length; i < len; i++){
            var 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('');
    },

    getGroupId : function(value){
        var gidPrefix = this.grid.getGridEl().id;
        var groupField = this.getGroupField();
        var colIndex = this.cm.findColumnIndex(groupField);
        var cfg = this.cm.config[colIndex];
        var groupRenderer = cfg.groupRenderer || cfg.renderer;
        var gtext = this.getGroup(value, {data:{}}, groupRenderer, 0, colIndex, this.ds);
        return gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(value);
    },

    doGroupStart : function(buf, g, cs, ds, colCount){
        buf[buf.length] = this.startGroup.apply(g);
    },

    doGroupEnd : function(buf, g, cs, ds, colCount){
        buf[buf.length] = this.endGroup;
    },

    getRows : function(){
        if(!this.enableGrouping){
            return Ext.grid.GroupingView.superclass.getRows.call(this);
        }
        var r = [];
        var g, gs = this.getGroups();
        for(var i = 0, len = gs.length; i < len; i++){
            g = gs[i].childNodes[1].childNodes;
            for(var j = 0, jlen = g.length; j < jlen; j++){
                r[r.length] = g[j];
            }
        }
        return r;
    },

    updateGroupWidths : function(){
        if(!this.enableGrouping || !this.hasRows()){
            return;
        }
        var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.scrollOffset) +'px';
        var gs = this.getGroups();
        for(var i = 0, len = gs.length; i < len; i++){
            gs[i].firstChild.style.width = tw;
        }
    },

    onColumnWidthUpdated : function(col, w, tw){
        this.updateGroupWidths();
    },

    onAllColumnWidthsUpdated : function(ws, tw){
        this.updateGroupWidths();
    },

    onColumnHiddenUpdated : function(col, hidden, tw){
        this.updateGroupWidths();
    },

    onLayout : function(){
        this.updateGroupWidths();
    },

    onBeforeRowSelect : function(sm, rowIndex){
        if(!this.enableGrouping){
            return;
        }
        var row = this.getRow(rowIndex);
        if(row && !row.offsetParent){
            var g = this.findGroup(row);
            this.toggleGroup(g, true);
        }
    },

    groupByText: 'Group By This Field',

    showGroupsText: 'Show in Groups'
});

Ext.grid.GroupingView.GROUP_ID = 1000;

Ext.grid.HeaderDragZone = 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;
};
Ext.extend(Ext.grid.HeaderDragZone, Ext.dd.DragZone, {
    maxDragWidth: 120,
    getDragData : function(e){
        var t = Ext.lib.Event.getTarget(e);
        var h = this.view.findHeaderCell(t);
        if(h){
            return {ddel: h.firstChild, header:h};
        }
        return false;
    },

    onInitDrag : function(e){
        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(){
        var v = this.view;
        setTimeout(function(){
            v.headersDisabled = false;
        }, 50);
    },

    afterInvalidDrop : function(){
        var v = this.view;
        setTimeout(function(){
            v.headersDisabled = false;
        }, 50);
    }
});

Ext.grid.HeaderDropZone = function(grid, hd, hd2){
    this.grid = grid;
    this.view = grid.getView();

    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;

    Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom);
};
Ext.extend(Ext.grid.HeaderDropZone, Ext.dd.DropZone, {
    proxyOffsets : [-4, -9],
    fly: Ext.Element.fly,

    getTargetFromEvent : function(e){
        var t = Ext.lib.Event.getTarget(e);
        var 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);
        var r = Ext.lib.Dom.getRegion(n.firstChild);
        var 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";
        }
        var oldIndex = this.view.getCellIndex(h);
        var newIndex = this.view.getCellIndex(n);

        if(this.grid.colModel.isFixed(newIndex)){
            return false;
        }

        var locked = this.grid.colModel.isLocked(newIndex);

        if(pt == "after"){
            newIndex++;
        }
        if(oldIndex < newIndex){
            newIndex--;
        }
        if(oldIndex == newIndex && (locked == this.grid.colModel.isLocked(oldIndex))){
            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;
            var x = Ext.lib.Event.getPageX(e);
            var r = Ext.lib.Dom.getRegion(n.firstChild);
            var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before";
            var oldIndex = this.view.getCellIndex(h);
            var newIndex = this.view.getCellIndex(n);
            var locked = cm.isLocked(newIndex);
            if(pt == "after"){
                newIndex++;
            }
            if(oldIndex < newIndex){
                newIndex--;
            }
            if(oldIndex == newIndex && (locked == cm.isLocked(oldIndex))){
                return false;
            }
            cm.setLocked(oldIndex, locked, true);
            cm.moveColumn(oldIndex, newIndex);
            this.grid.fireEvent("columnmove", oldIndex, newIndex);
            return true;
        }
        return false;
    }
});

Ext.grid.GridView.ColumnDragZone = function(grid, hd){
    Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
    this.proxy.el.addClass('x-grid3-col-dd');
};

Ext.extend(Ext.grid.GridView.ColumnDragZone, Ext.grid.HeaderDragZone, {
    handleMouseDown : function(e){

    },

    callHandleMouseDown : function(e){
        Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
    }
});
Ext.grid.SplitDragZone = 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;
};
Ext.extend(Ext.grid.SplitDragZone, Ext.dd.DDProxy, {
    fly: Ext.Element.fly,

    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){
        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);
    }
});
Ext.grid.GridDragZone = function(grid, config){
    this.view = grid.getView();
    Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);
    if(this.view.lockedBody){
        this.setHandleElId(Ext.id(this.view.mainBody.dom));
        this.setOuterHandleElId(Ext.id(this.view.lockedBody.dom));
    }
    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",

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

    onInitDrag : function(e){
        var data = this.dragData;
        this.ddel.innerHTML = this.grid.getDragDropText();
        this.proxy.update(this.ddel);
            },

    afterRepair : function(){
        this.dragging = false;
    },

    getRepairXY : function(e, data){
        return false;
    },

    onEndDrag : function(data, e){
            },

    onValidDrop : function(dd, e, id){
                this.hideProxy();
    },

    beforeInvalidDrop : function(e, id){

    }
});

Ext.grid.ColumnModel = function(config){

    this.defaultWidth = 100;

    this.defaultSortable = false;

    if(config.columns){
        Ext.apply(this, config);
        this.setConfig(config.columns, true);
    }else{
        this.setConfig(config, true);
    }
    this.addEvents(

        "widthchange",

        "headerchange",

        "hiddenchange",

        "columnmoved",

        "columnlockchange",

        "configchange"
    );
    Ext.grid.ColumnModel.superclass.constructor.call(this);
};
Ext.extend(Ext.grid.ColumnModel, Ext.util.Observable, {

    getColumnId : function(index){
        return this.config[index].id;
    },

    setConfig : function(config, initial){
        if(!initial){
            delete this.totalWidth;
            for(var i = 0, len = this.config.length; i < len; i++){
                var c = this.config[i];
                if(c.editor){
                    c.editor.destroy();
                }
            }
        }
        this.config = config;
        this.lookup = {};

        for(var i = 0, len = config.length; i < len; i++){
            var c = config[i];
            if(typeof c.renderer == "string"){
                c.renderer = Ext.util.Format[c.renderer];
            }
            if(typeof c.id == "undefined"){
                c.id = i;
            }
            if(c.editor && c.editor.isFormField){
                c.editor = new Ext.grid.GridEditor(c.editor);
            }
            this.lookup[c.id] = c;
        }
        if(!initial){
            this.fireEvent('configchange', this);
        }
    },

    getColumnById : function(id){
        return this.lookup[id];
    },

    getIndexById : function(id){
        for(var i = 0, len = this.config.length; i < len; i++){
            if(this.config[i].id == id){
                return i;
            }
        }
        return -1;
    },

    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);
    },

    isLocked : function(colIndex){
        return this.config[colIndex].locked === true;
    },

    setLocked : function(colIndex, value, suppressEvent){
        if(this.isLocked(colIndex) == value){
            return;
        }
        this.config[colIndex].locked = value;
        if(!suppressEvent){
            this.fireEvent("columnlockchange", this, colIndex, value);
        }
    },

    getTotalLockedWidth : function(){
        var totalWidth = 0;
        for(var i = 0; i < this.config.length; i++){
            if(this.isLocked(i) && !this.isHidden(i)){
                this.totalWidth += this.getColumnWidth(i);
            }
        }
        return totalWidth;
    },

    getLockedCount : function(){
        for(var i = 0, len = this.config.length; i < len; i++){
            if(!this.isLocked(i)){
                return i;
            }
        }
    },

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

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

    isSortable : function(col){
        if(typeof this.config[col].sortable == "undefined"){
            return this.defaultSortable;
        }
        return this.config[col].sortable;
    },

    isMenuDisabled : function(col){
        return !!this.config[col].menuDisabled;
    },

    getRenderer : function(col){
        if(!this.config[col].renderer){
            return Ext.grid.ColumnModel.defaultRenderer;
        }
        return this.config[col].renderer;
    },

    setRenderer : function(col, fn){
        this.config[col].renderer = fn;
    },

    getColumnWidth : function(col){
        return this.config[col].width || this.defaultWidth;
    },

    setColumnWidth : function(col, width, suppressEvent){
        this.config[col].width = width;
        this.totalWidth = null;
        if(!suppressEvent){
             this.fireEvent("widthchange", this, col, width);
        }
    },

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

    getColumnHeader : function(col){
        return this.config[col].header;
    },

    setColumnHeader : function(col, header){
        this.config[col].header = header;
        this.fireEvent("headerchange", this, col, header);
    },

    getColumnTooltip : function(col){
            return this.config[col].tooltip;
    },

    setColumnTooltip : function(col, tooltip){
            this.config[col].tooltip = tooltip;
    },

    getDataIndex : function(col){
        return this.config[col].dataIndex;
    },

    setDataIndex : function(col, dataIndex){
        this.config[col].dataIndex = dataIndex;
    },

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

    isCellEditable : function(colIndex, rowIndex){
        return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false;
    },

    getCellEditor : function(colIndex, rowIndex){
        return this.config[colIndex].editor;
    },

    setEditable : function(col, editable){
        this.config[col].editable = editable;
    },

    isHidden : function(colIndex){
        return this.config[colIndex].hidden;
    },

    isFixed : function(colIndex){
        return this.config[colIndex].fixed;
    },

    isResizable : function(colIndex){
        return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true;
    },

    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);
        }
    },

    setEditor : function(col, editor){
        this.config[col].editor = editor;
    }
});

Ext.grid.ColumnModel.defaultRenderer = function(value){
    if(typeof value == "string" && value.length < 1){
        return " ";
    }
    return value;
};

Ext.grid.DefaultColumnModel = Ext.grid.ColumnModel;

Ext.grid.AbstractSelectionModel = function(){
    this.locked = false;
    Ext.grid.AbstractSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.grid.AbstractSelectionModel, Ext.util.Observable,  {

    init : function(grid){
        this.grid = grid;
        this.initEvents();
    },

    lock : function(){
        this.locked = true;
    },

    unlock : function(){
        this.locked = false;
    },

    isLocked : function(){
        return this.locked;
    }
});

Ext.grid.RowSelectionModel = 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(

        "selectionchange",

        "beforerowselect",

        "rowselect",

        "rowdeselect"
    );

    Ext.grid.RowSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.grid.RowSelectionModel, Ext.grid.AbstractSelectionModel,  {

    singleSelect : false,

        initEvents : function(){

        if(!this.grid.enableDragDrop && !this.grid.enableDrag){
            this.grid.on("rowmousedown", this.handleMouseDown, this);
        }else{             this.grid.on("rowclick", function(grid, rowIndex, e) {
                if(e.button === 0 && !e.shiftKey && !e.ctrlKey) {
                    this.selectRow(rowIndex, false);
                    grid.view.focusRow(rowIndex);
                }
            }, this);
        }

        this.rowNav = new Ext.KeyNav(this.grid.getGridEl(), {
            "up" : function(e){
                if(!e.shiftKey){
                    this.selectPrevious(e.shiftKey);
                }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.selectNext(e.shiftKey);
                }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
        });

        var view = this.grid.view;
        view.on("refresh", this.onRefresh, this);
        view.on("rowupdated", this.onRowUpdated, this);
        view.on("rowremoved", this.onRemove, this);
    },

        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);
        }
    },

        onRemove : function(v, index, r){
        if(this.selections.remove(r) !== false){
            this.fireEvent('selectionchange', this);
        }
    },

        onRowUpdated : function(v, index, r){
        if(this.isSelected(r)){
            v.onRowSelect(index);
        }
    },

    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);
        }
    },

    getCount : function(){
        return this.selections.length;
    },

    selectFirstRow : function(){
        this.selectRow(0);
    },

    selectLastRow : function(keepExisting){
        this.selectRow(this.grid.store.getCount() - 1, keepExisting);
    },

    selectNext : function(keepExisting){
        if(this.hasNext()){
            this.selectRow(this.last+1, keepExisting);
            this.grid.getView().focusRow(this.last);
            return true;
        }
        return false;
    },

    selectPrevious : function(keepExisting){
        if(this.hasPrevious()){
            this.selectRow(this.last-1, keepExisting);
            this.grid.getView().focusRow(this.last);
            return true;
        }
        return false;
    },

    hasNext : function(){
        return this.last !== false && (this.last+1) < this.grid.store.getCount();
    },

    hasPrevious : function(){
        return !!this.last;
    },

    getSelections : function(){
        return [].concat(this.selections.items);
    },

    getSelected : function(){
        return this.selections.itemAt(0);
    },

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

    clearSelections : function(fast){
        if(this.locked) 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;
    },

    selectAll : function(){
        if(this.locked) return;
        this.selections.clear();
        for(var i = 0, len = this.grid.store.getCount(); i < len; i++){
            this.selectRow(i, true);
        }
    },

    hasSelection : function(){
        return this.selections.length > 0;
    },

    isSelected : function(index){
        var r = typeof index == "number" ? this.grid.store.getAt(index) : index;
        return (r && this.selections.key(r.id) ? true : false);
    },

    isIdSelected : function(id){
        return (this.selections.key(id) ? true : false);
    },

        handleMouseDown : function(g, rowIndex, e){
        if(e.button !== 0 || this.isLocked()){
            return;
        };
        var view = this.grid.getView();
        if(e.shiftKey && this.last !== false){
            var last = this.last;
            this.selectRange(last, rowIndex, e.ctrlKey);
            this.last = 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);
            }
        }
    },

    selectRows : function(rows, keepExisting){
        if(!keepExisting){
            this.clearSelections();
        }
        for(var i = 0, len = rows.length; i < len; i++){
            this.selectRow(rows[i], true);
        }
    },

    selectRange : function(startRow, endRow, keepExisting){
        if(this.locked) return;
        if(!keepExisting){
            this.clearSelections();
        }
        if(startRow <= endRow){
            for(var i = startRow; i <= endRow; i++){
                this.selectRow(i, true);
            }
        }else{
            for(var i = startRow; i >= endRow; i--){
                this.selectRow(i, true);
            }
        }
    },

    deselectRange : function(startRow, endRow, preventViewNotify){
        if(this.locked) return;
        for(var i = startRow; i <= endRow; i++){
            this.deselectRow(i, preventViewNotify);
        }
    },

    selectRow : function(index, keepExisting, preventViewNotify){
        if(this.locked || (index < 0 || index >= this.grid.store.getCount())) 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);
        }
    },

    deselectRow : function(index, preventViewNotify){
        if(this.locked) 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);
        }
    },

        restoreLast : function(){
        if(this._last){
            this.last = this._last;
        }
    },

        acceptsNav : function(row, col, cm){
        return !cm.isHidden(col) && cm.isCellEditable(col, row);
    },

        onEditorKey : function(field, e){
        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
        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){
            e.stopEvent();
            ed.completeEdit();
            if(this.moveEditorOnEnter !== false){
                if(shift){
                    newCell = g.walkCells(ed.row - 1, ed.col, -1, this.acceptsNav, this);
                }else{
                    newCell = g.walkCells(ed.row + 1, ed.col, 1, this.acceptsNav, this);
                }
            }
        }else if(k == e.ESC){
            ed.cancelEdit();
        }
        if(newCell){
            g.startEditing(newCell[0], newCell[1]);
        }
    }
});

Ext.grid.CellSelectionModel = function(config){
    Ext.apply(this, config);

    this.selection = null;

    this.addEvents(

        "beforecellselect",

        "cellselect",

        "selectionchange"
    );

    Ext.grid.CellSelectionModel.superclass.constructor.call(this);
};

Ext.extend(Ext.grid.CellSelectionModel, Ext.grid.AbstractSelectionModel,  {

    initEvents : function(){
        this.grid.on("cellmousedown", this.handleMouseDown, this);
        this.grid.getGridEl().on(Ext.isIE ? "keydown" : "keypress", this.handleKeyDown, this);
        var view = this.grid.view;
        view.on("refresh", this.onViewChange, this);
        view.on("rowupdated", this.onRowUpdated, this);
        view.on("beforerowremoved", this.clearSelections, this);
        view.on("beforerowsinserted", this.clearSelections, this);
        if(this.grid.isEditor){
            this.grid.on("beforeedit", this.beforeEdit,  this);
        }
    },

        beforeEdit : function(e){
        this.select(e.row, e.column, false, true, e.record);
    },

        onRowUpdated : function(v, index, r){
        if(this.selection && this.selection.record == r){
            v.onCellSelect(index, this.selection.cell[1]);
        }
    },

        onViewChange : function(){
        this.clearSelections(true);
    },

    getSelectedCell : function(){
        return this.selection ? this.selection.cell : null;
    },

    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);
        }
    },

    hasSelection : function(){
        return this.selection ? true : false;
    },

    handleMouseDown : function(g, row, cell, e){
        if(e.button !== 0 || this.isLocked()){
            return;
        };
        this.select(row, cell);
    },

    select : function(rowIndex, colIndex, preventViewNotify, preventFocus,  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);
        }
    },

        isSelectable : function(rowIndex, colIndex, cm){
        return !cm.isHidden(colIndex);
    },

    handleKeyDown : function(e){
        if(!e.isNavKeyPress()){
            return;
        }
        var g = this.grid, s = this.selection;
        if(!s){
            e.stopEvent();
            var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
            if(cell){
                this.select(cell[0], cell[1]);
            }
            return;
        }
        var sm = this;
        var walk = function(row, col, step){
            return g.walkCells(row, col, step, sm.isSelectable,  sm);
        };
        var k = e.getKey(), r = s.cell[0], c = s.cell[1];
        var newCell;

        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);
                    e.stopEvent();
                    return;
                }
             break;
        };
        if(newCell){
            this.select(newCell[0], newCell[1]);
            e.stopEvent();
        }
    },

    acceptsNav : function(row, col, cm){
        return !cm.isHidden(col) && cm.isCellEditable(col, row);
    },

    onEditorKey : function(field, e){
        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
        if(k == e.TAB){
            if(e.shiftKey){
                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);
            }
            e.stopEvent();
        }else if(k == e.ENTER){
            ed.completeEdit();
            e.stopEvent();
        }else if(k == e.ESC){
            e.stopEvent();
            ed.cancelEdit();
        }
        if(newCell){
            g.startEditing(newCell[0], newCell[1]);
        }
    }
});

Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {

    clicksToEdit: 2,

    isEditor : true,

    detectEdit: false,

    autoEncode : false,

    trackMouseOver: false,

    initComponent : function(){
        Ext.grid.EditorGridPanel.superclass.initComponent.call(this);

        if(!this.selModel){
            this.selModel = new Ext.grid.CellSelectionModel();
        }

        this.activeEditor = null;

        this.addEvents(

            "beforeedit",

            "afteredit",

            "validateedit"
        );
    },

    initEvents : function(){
        Ext.grid.EditorGridPanel.superclass.initEvents.call(this);

        this.on("bodyscroll", this.stopEditing, this, [true]);

        if(this.clicksToEdit == 1){
            this.on("cellclick", this.onCellDblClick, this);
        }else {
            if(this.clicksToEdit == 'auto' && this.view.mainBody){
                this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
            }
            this.on("celldblclick", this.onCellDblClick, this);
        }
        this.getGridEl().addClass("xedit-grid");
    },

    onCellDblClick : function(g, row, col){
        this.startEditing(row, col);
    },

    onAutoEditClick : function(e, t){
        if(e.button !== 0){
            return;
        }
        var row = this.view.findRowIndex(t);
        var col = this.view.findCellIndex(t);
        if(row !== false && col !== false){
            this.stopEditing();
            if(this.selModel.getSelectedCell){
                var sc = this.selModel.getSelectedCell();
                if(sc && sc.cell[0] === row && sc.cell[1] === col){
                    this.startEditing(row, col);
                }
            }else{
                if(this.selModel.isSelected(row)){
                    this.startEditing(row, col);
                }
            }
        }
    },

    onEditComplete : function(ed, value, startValue){
        this.editing = false;
        this.activeEditor = null;
        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
        var r = ed.record;
        var field = this.colModel.getDataIndex(ed.col);
        value = this.postEditValue(value, startValue, r, field);
        if(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){
                r.set(field, e.value);
                delete e.cancel;
                this.fireEvent("afteredit", e);
            }
        }
        this.view.focusCell(ed.row, ed.col);
    },

    startEditing : function(row, col){
        this.stopEditing();
        if(this.colModel.isCellEditable(col, row)){
            this.view.ensureVisible(row, col, true);
            var r = this.store.getAt(row);
            var field = this.colModel.getDataIndex(col);
            var 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.rendered){
                    ed.render(this.view.getEditorParent(ed));
                }
                (function(){
                    ed.row = row;
                    ed.col = col;
                    ed.record = r;
                    ed.on("complete", this.onEditComplete, this, {single: true});
                    ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
                    this.activeEditor = ed;
                    var v = this.preEditValue(r, field);
                    ed.startEdit(this.view.getCell(row, col), v);
                }).defer(50, this);
            }
        }
    },

    preEditValue : function(r, field){
        return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(r.data[field]) : r.data[field];
    },

    postEditValue : function(value, originalValue, r, field){
        return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
    },

    stopEditing : function(cancel){
        if(this.activeEditor){
            this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
        }
        this.activeEditor = null;
    }
});
Ext.reg('editorgrid', Ext.grid.EditorGridPanel);
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
});

Ext.grid.PropertyRecord = Ext.data.Record.create([
    {name:'name',type:'string'}, 'value'
]);

Ext.grid.PropertyStore = 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);
};
Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
        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);
    },

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

        getProperty : function(row){
       return this.store.getAt(row);
    },

        isEditableValue: function(val){
        if(Ext.isDate(val)){
            return true;
        }else if(typeof val == 'object' || typeof val == 'function'){
            return false;
        }
        return true;
    },

        setValue : function(prop, value){
        this.source[prop] = value;
        this.store.getById(prop).set('value', value);
    },

        getSource : function(){
        return this.source;
    }
});

Ext.grid.PropertyColumnModel = function(grid, store){
    this.grid = grid;
    var g = Ext.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;
    this.bselect = Ext.DomHelper.append(document.body, {
        tag: 'select', cls: 'x-grid-editor x-hide-display', children: [
            {tag: 'option', value: 'true', html: 'true'},
            {tag: 'option', value: 'false', html: 'false'}
        ]
    });
    var f = Ext.form;

    var bfield = new f.Field({
        el:this.bselect,
        bselect : this.bselect,
        autoShow: true,
        getValue : function(){
            return this.bselect.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)
    };
    this.renderCellDelegate = this.renderCell.createDelegate(this);
    this.renderPropDelegate = this.renderProp.createDelegate(this);
};

Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
        nameText : 'Name',
    valueText : 'Value',
    dateFormat : 'm/j/Y',

        renderDate : function(dateVal){
        return dateVal.dateFormat(this.dateFormat);
    },

        renderBool : function(bVal){
        return bVal ? 'true' : 'false';
    },

        isCellEditable : function(colIndex, rowIndex){
        return colIndex == 1;
    },

        getRenderer : function(col){
        return col == 1 ?
            this.renderCellDelegate : this.renderPropDelegate;
    },

        renderProp : function(v){
        return this.getPropertyName(v);
    },

        renderCell : function(val){
        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);
    },

        getPropertyName : function(name){
        var pn = this.grid.propertyNames;
        return pn && pn[name] ? pn[name] : name;
    },

        getCellEditor : function(colIndex, rowIndex){
        var p = this.store.getProperty(rowIndex);
        var 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'];
        }
    }
});

Ext.grid.PropertyGrid = Ext.extend(Ext.grid.EditorGridPanel, {

        enableColumnMove:false,
    stripeRows:false,
    trackMouseOver: false,
    clicksToEdit:1,
    enableHdMenu : false,
    viewConfig : {
        forceFit:true
    },

        initComponent : function(){
        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(

            'beforepropertychange',

            'propertychange'
        );
        this.cm = cm;
        this.ds = store.store;
        Ext.grid.PropertyGrid.superclass.initComponent.call(this);

        this.selModel.on('beforecellselect', function(sm, rowIndex, colIndex){
            if(colIndex === 0){
                this.startEditing.defer(200, this, [rowIndex, 1]);
                return false;
            }
        }, this);
    },

        onRender : function(){
        Ext.grid.PropertyGrid.superclass.onRender.apply(this, arguments);

        this.getGridEl().addClass('x-props-grid');
    },

        afterRender: function(){
        Ext.grid.PropertyGrid.superclass.afterRender.apply(this, arguments);
        if(this.source){
            this.setSource(this.source);
        }
    },

    setSource : function(source){
        this.propStore.setSource(source);
    },

    getSource : function(){
        return this.propStore.getSource();
    }
});

Ext.grid.RowNumberer = function(config){
    Ext.apply(this, config);
    if(this.rowspan){
        this.renderer = this.renderer.createDelegate(this);
    }
};

Ext.grid.RowNumberer.prototype = {

    header: "",

    width: 23,

    sortable: false,

    fixed:true,
    menuDisabled:true,
    dataIndex: '',
    id: 'numberer',
    rowspan: undefined,

    renderer : function(v, p, record, rowIndex){
        if(this.rowspan){
            p.cellAttr = 'rowspan="'+this.rowspan+'"';
        }
        return rowIndex+1;
    }
};

Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {

    header: '

      ',

    width: 20,

    sortable: false,

    menuDisabled:true,
    fixed:true,
    dataIndex: '',
    id: 'checker',

    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);
    },

    onMouseDown : function(e, t){
        if(e.button === 0 && t.className == 'x-grid3-row-checker'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            if(row){
                var index = row.rowIndex;
                if(this.isSelected(index)){
                    this.deselectRow(index);
                }else{
                    this.selectRow(index, true);
                }
            }
        }
    },

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

    renderer : function(v, p, record){
        return '

      ';
    }
});

Ext.LoadMask = function(el, config){
    this.el = Ext.get(el);
    Ext.apply(this, config);
    if(this.store){
        this.store.on('beforeload', this.onBeforeLoad, this);
        this.store.on('load', this.onLoad, this);
        this.store.on('loadexception', this.onLoad, this);
        this.removeMask = Ext.value(this.removeMask, false);
    }else{
        var um = this.el.getUpdater();
        um.showLoadIndicator = false;         um.on('beforeupdate', this.onBeforeLoad, this);
        um.on('update', this.onLoad, this);
        um.on('failure', this.onLoad, this);
        this.removeMask = Ext.value(this.removeMask, true);
    }
};

Ext.LoadMask.prototype = {

    msg : 'Loading...',

    msgCls : 'x-mask-loading',

    disabled: false,

    disable : function(){
       this.disabled = true;
    },

    enable : function(){
        this.disabled = false;
    },

        onLoad : function(){
        this.el.unmask(this.removeMask);
    },

        onBeforeLoad : function(){
        if(!this.disabled){
            this.el.mask(this.msg, this.msgCls);
        }
    },

    show: function(){
        this.onBeforeLoad();
    },

    hide: function(){
        this.onLoad();
    },

        destroy : function(){
        if(this.store){
            this.store.un('beforeload', this.onBeforeLoad, this);
            this.store.un('load', this.onLoad, this);
            this.store.un('loadexception', 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);
        }
    }
};

Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {

    baseCls : 'x-progress',

    waitTimer : null,

    initComponent : function(){
        Ext.ProgressBar.superclass.initComponent.call(this);
        this.addEvents(

            "update"
        );
    },

    onRender : function(ct, position){
        Ext.ProgressBar.superclass.onRender.call(this, ct, position);

        var tpl = new Ext.Template(
            '
      ',
                '
      ',
                    '
      ',
                        '
      ',
                            '

      ',
                        '
      ',
                    '
      ',
                    '
      ',
                        '

      ',
                    '
      ',
                '
      ',
            '
      '
        );

        if(position){
            this.el = tpl.insertBefore(position, {cls: this.baseCls}, true);
        }else{
            this.el = 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){

            this.textEl = Ext.get(this.textEl);
            delete this.textTopEl;
        }else{

            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);
        }
        if(this.value){
            this.updateProgress(this.value, this.text);
        }else{
            this.updateText(this.text);
        }
        this.setSize(this.width || 'auto', 'auto');
        this.progressBar.setHeight(inner.offsetHeight);
    },

    updateProgress : function(value, text){
        this.value = value || 0;
        if(text){
            this.updateText(text);
        }
        var w = Math.floor(value*this.el.dom.firstChild.offsetWidth);
        this.progressBar.setWidth(w);
        if(this.textTopEl){

            this.textTopEl.removeClass('x-hidden').setWidth(w);
        }
        this.fireEvent('update', this, value, text);
        return this;
    },

    wait : function(o){
        if(!this.waitTimer){
            var scope = this;
            o = o || {};
            this.waitTimer = Ext.TaskMgr.start({
                run: function(i){
                    var inc = o.increment || 10;
                    this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*.01);
                },
                interval: o.interval || 1000,
                duration: o.duration,
                onStop: function(){
                    if(o.fn){
                        o.fn.apply(o.scope || this);
                    }
                    this.reset();
                },
                scope: scope
            });
        }
        return this;
    },

    isWaiting : function(){
        return this.waitTimer != null;
    },

    updateText : function(text){
        this.text = text || ' ';
        this.textEl.update(this.text);
        return 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);
        }
        return this;
    },

    reset : function(hide){
        this.updateProgress(0);
        if(this.textTopEl){
            this.textTopEl.addClass('x-hidden');
        }
        if(this.waitTimer){
            this.waitTimer.onStop = null;
            Ext.TaskMgr.stop(this.waitTimer);
            this.waitTimer = null;
        }
        if(hide === true){
            this.hide();
        }
        return this;
    }
});
Ext.reg('progress', Ext.ProgressBar);
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 tabs = new Ext.TabPanel({
        activeTab: 0,
        border: false,
        tabPosition: 'bottom',
        items: [{
            title: 'Debug Console',
            layout:'border',
            items: [logView, scriptPanel]
        },{
            title: 'DOM Inspector',
            layout:'border',
            items: [tree]
        }]
    });

    cp = new Ext.Panel({
        id: 'x-debug-browser',
        title: 'Console',
        collapsible: true,
        animCollapse: false,
        style: 'position:absolute;left:0;bottom:0;',
        height:200,
        logView: logView,
        layout: 'fit',

        tools:[{
            id: 'close',
            handler: function(){
                cp.destroy();
                cp = null;
                Ext.EventManager.removeResizeListener(handleResize);
            }
        }],

        items: tabs
    });

    cp.render(document.body);

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

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

        this.body.insertHtml('beforeend', markup);
        this.body.scrollTo('top', 100000);
    },

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

                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){                     return false;
                }
            }
            cn.select();
            var a = cn.ui.anchor;
            treeEl.dom.scrollTop = Math.max(0 ,a.offsetTop-10);
                        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();
        };

        this.root = this.setRootNode(new Ext.tree.TreeNode('Ext'));

        hnode = this.root.appendChild(new Ext.debug.HtmlNode(
                document.getElementsByTagName('html')[0]
        ));

    }
});

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;         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(){
                    },

        highlight : function(){
                    },

        frame : function(){
            this.htmlNode.style.border = '1px solid #0000ff';
                    },

        unframe : function(){
                        this.htmlNode.style.border = '';
        }
    });

    return HtmlNode;
}();


The source code

/*
 * 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);
                pub.headers = null;
            }
        }

        // private
        function createExceptionObject(tId, callbackArg, isAbort, isTimeout) {
            return {
                tId : tId,
                status : isAbort ? -1 : 0,
                statusText : isAbort ? 'transaction aborted' : 'communication failure',
                    isAbort: true,
                    isTimeout: true,
                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;

            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,
                status : conn.status,
                statusText : 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) {
            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.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.isObject(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),
                                                          (opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified) ? 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 : {},
            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;
                    if (isTimeout) {
                        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

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

            if(colorRE.test(attr)){
                val = [];

                Ext.each(start, function(v, 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);
                    Ext.each(start, function(item, i){
                        end[i] = item + end[i];
                    });
                }
                ra.start = start;
                ra.end = end;
            }
        }
    });
})();

(function() {
        // Scroll Animation
    var EXTLIB = Ext.lib;
    EXTLIB.Anim.scroll = function(el, args, duration, easing, cb, scope) {
        return EXTLIB.Anim.run(el, args, duration, easing, cb, scope, EXTLIB.Scroll);
    }

    EXTLIB.Scroll = function(el, attributes, duration, method) {
        if(el){
            EXTLIB.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
        }
    };

    Ext.extend(EXTLIB.Scroll, EXTLIB.ColorAnim);

    var superclass = EXTLIB.Scroll.superclass,
        SCROLL = 'scroll';

    Ext.apply(EXTLIB.Scroll.prototype, {

        doMethod : function(attr, start, end) {
            var val,
                me = this,
                curFrame = me.curFrame,
                totalFrames = me.totalFrames;

            if(attr == SCROLL){
                val = [me.method(curFrame, start[0], end[0] - start[0], totalFrames),
                       me.method(curFrame, start[1], end[1] - start[1], totalFrames)];
            }else{
                val = superclass.doMethod.call(me, attr, start, end);
            }
            return val;
        },

        getAttr : function(attr) {
            var me = this;

            if (attr == SCROLL) {
                return [me.el.scrollLeft, me.el.scrollTop];
            }else{
                return superclass.getAttr.call(me, attr);
            }
        },

        setAttr : function(attr, val, unit) {
            var me = this;

            if(attr == SCROLL){
                me.el.scrollLeft = val[0];
                me.el.scrollTop = val[1];
            }else{
                superclass.setAttr.call(me, attr, val, unit);
            }
        }
    });
})();


The source code

(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 = [];
                    Ext.each(start, function(v, i){
                        end[i] = v + by[i];
                    });
                }else{
                    end = start + by;
                }
            }

            Ext.apply(ra, {
                start: start,
                end: end,
                unit: isset(unit) ? unit : me.getDefaultUnit(attr)
            });
        },

        init: function(el, attributes, duration, method) {
            var me = this,
                actualFrames = 0,
                mgr = EXTLIB.AnimMgr;

            Ext.apply(me, {
                isAnimated: false,
                startTime: null,
                el: Ext.getDom(el),
                attributes: attributes || {},
                duration: duration || 1,
                method: method || EXTLIB.Easing.easeNone,
                useSec: true,
                curFrame: 0,
                totalFrames: mgr.fps,
                runAttrs: {},
                animate: function(){
                    var me = this,
                        d = me.duration;

                    if(me.isAnimated){
                        return false;
                    }

                    me.curFrame = 0;
                    me.totalFrames = me.useSec ? Math.ceil(mgr.fps * d) : d;
                    mgr.registerElement(me);
                },

                stop: function(finish){
                    var me = this;

                    if(finish){
                        me.curFrame = me.totalFrames;
                        me._onTween.fire();
                    }
                    mgr.stop(me);
                }
            });

            var onStart = function(){
                var me = this,
                    attr;

                me.onStart.fire();
                me.runAttrs = {};
                for(attr in this.attributes){
                    this.setRunAttr(attr);
                }

                me.isAnimated = true;
                me.startTime = now();
                actualFrames = 0;
            };

            var onTween = function(){
                var me = this;

                me.onTween.fire({
                    duration: now() - me.startTime,
                    curFrame: me.curFrame
                });

                var ra = me.runAttrs;
                for (var attr in ra) {
                    this.setAttr(attr, me.doMethod(attr, ra[attr].start, ra[attr].end), ra[attr].unit);
                }

                ++actualFrames;
            };

            var onComplete = function() {
                var me = this,
                    actual = (now() - me.startTime) / 1000,
                    data = {
                        duration: actual,
                        frames: actualFrames,
                        fps: actualFrames / actual
                    };

                me.isAnimated = false;
                actualFrames = 0;
                me.onComplete.fire(data);
            };

            me.onStart = new Ext.util.Event(me);
            me.onTween = new Ext.util.Event(me);
            me.onComplete = new Ext.util.Event(me);
            (me._onStart = new Ext.util.Event(me)).addListener(onStart);
            (me._onTween = new Ext.util.Event(me)).addListener(onTween);
            (me._onComplete = new Ext.util.Event(me)).addListener(onComplete);
        }
    };

    Ext.lib.AnimMgr = new function() {
        var me = this,
            thread = null,
            queue = [],
            tweenCount = 0;

        Ext.apply(me, {
            fps: 1000,
            delay: 1,
            registerElement: function(tween){
                queue.push(tween);
                ++tweenCount;
                tween._onStart.fire();
                me.start();
            },

            unRegister: function(tween, index){
                tween._onComplete.fire();
                index = index || getIndex(tween);
                if (index != -1) {
                    queue.splice(index, 1);
                }

                if (--tweenCount <= 0) {
                    me.stop();
                }
            },

            start: function(){
                if(thread === null){
                    thread = setInterval(me.run, me.delay);
                }
            },

            stop: function(tween){
                if(!tween){
                    clearInterval(thread);
                    for(var i = 0, len = queue.length; i < len; ++i){
                        if(queue[0].isAnimated){
                            me.unRegister(queue[0], 0);
                        }
                    }

                    queue = [];
                    thread = null;
                    tweenCount = 0;
                }else{
                    me.unRegister(tween);
                }
            },

            run: function(){
                var tf;
                Ext.each(queue, function(tween){
                    if(tween && tween.isAnimated){
                        tf = tween.totalFrames;
                        if(tween.curFrame < tf || tf === null){
                            ++tween.curFrame;
                            if(tween.useSec){
                                correctFrame(tween);
                            }
                            tween._onTween.fire();
                        }else{
                            me.stop(tween);
                        }
                    }
                }, me);
            }
        });

        var getIndex = function(anim) {
            var out = -1;
            Ext.each(queue, function(item, idx){
                if(item == anim){
                    out = idx;
                    return false;
                }
            });
            return out;
        };

        var correctFrame = function(tween) {
            var frames = tween.totalFrames,
                frame = tween.curFrame,
                duration = tween.duration,
                expected = (frame * duration * 1000 / frames),
                elapsed = (now() - tween.startTime),
                tweak = 0;

            if(elapsed < duration * 1000){
                tweak = Math.round((elapsed / expected - 1) * frame);
            }else{
                tweak = frames - (frame + 1);
            }
            if(tweak > 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

(function(){
    var libFlyweight;

    function fly(el) {
        if (!libFlyweight) {
            libFlyweight = new Ext.Element.Flyweight();
        }
        libFlyweight.dom = el;
        return libFlyweight;
    }


The source code

Ext.lib.Dom.getRegion = function(el) {
    return Ext.lib.Region.getRegion(el);
};


The source code

(function(){
    var doc = document,
        isCSS1 = doc.compatMode == "CSS1Compat",
        MAX = Math.max,
        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 = [b.left + scroll.left, 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

    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

Ext.lib.Event = function() {
    var loadComplete = false,
        listeners = [],
        unloadListeners = [],
        retryCount = 0,
        onAvailStack = [],
        _interval,
        locked = false,
        win = window,
        doc = document,

        // constants
        POLL_RETRYS = 200,
        POLL_INTERVAL = 20,
        EL = 0,
        TYPE = 1,
        FN = 2,
        WFN = 3,
        OBJ = 3,
        ADJ_SCOPE = 4,
        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;
        }();

    var isXUL = Ext.isGecko ? function(node){
        return Object.prototype.toString.call(node) == '[object XULElement]';
    } : function(){};

    var isTextNode = Ext.isGecko ? function(node){
        try{
            return node.nodeType == 3;
        }catch(e) {
            return false;
        }

    } : function(node){
        return node.nodeType == 3;
    };

    function checkRelatedTarget(e) {
        var related = pub.getRelatedTarget(e);
        return !(isXUL(related) || elContains(e.currentTarget,related));
    }

    function elContains(parent, child) {
       if(parent && parent.firstChild){
         while(child) {
            if(child === parent) {
                return true;
            }
            try {
                child = child.parentNode;
            } catch(e) {
                // In FF if you mouseout an text input element
                // thats inside a div sometimes it randomly throws
                // Permission denied to get property HTMLDivElement.parentNode
                // See https://bugzilla.mozilla.org/show_bug.cgi?id=208427

                return false;
            }
            if(child && (child.nodeType != 1)) {
                child = null;
            }
          }
        }
        return false;
    }

    // private
    function _getCacheIndex(el, eventName, fn) {
        var index = -1;
        Ext.each(listeners, function (v,i) {
            if(v && v[FN] == fn && v[EL] == el && v[TYPE] == eventName) {
                index = i;
            }
        });
        return index;
    }

    // private
    function _tryPreloadAttach() {
        var ret = false,
            notAvail = [],
            element,
            tryAgain = !loadComplete || (retryCount > 0);

        if (!locked) {
            locked = true;

            Ext.each(onAvailStack, function (v,i,a){
                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[i] = null;
                    } 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 =  {
        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();
        },

        addListener: function(el, eventName, fn) {
            var ret;
            el = Ext.getDom(el);
            if (el && fn) {
                if (UNLOAD == eventName) {
                    ret = !!(unloadListeners[unloadListeners.length] = [el, eventName, fn]);
                } else {
                    listeners.push([el, eventName, fn, ret = doAdd(el, eventName, fn, false)]);
                }
            }
            return !!ret;
        },

        removeListener: function(el, eventName, fn) {
            var ret = false,
                index,
                cacheItem;

            el = Ext.getDom(el);

            if(!fn) {
                ret = this.purgeElement(el, false, eventName);
            } else if (UNLOAD == eventName) {
                Ext.each(unloadListeners, function(v, i, a) {
                    if( v && v[0] == el && v[1] == eventName && v[2] == fn) {
                        unloadListeners.splice(i, 1);
                        ret = true;
                    }
                });
            } else {
                index = arguments[3] || _getCacheIndex(el, eventName, fn);
                cacheItem = listeners[index];

                if (el && cacheItem) {
                    doRemove(el, eventName, cacheItem[WFN], false);
                    cacheItem[WFN] = cacheItem[FN] = null;
                    listeners.splice(index, 1);
                    ret = true;
                }
            }
            return ret;
        },

        getTarget : function(ev) {
            ev = ev.browserEvent || ev;
            return this.resolveTextNode(ev.target || ev.srcElement);
        },

        resolveTextNode : function(node) {
            return node && !isXUL(node) && isTextNode(node) ? 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)];
        },

// Is this useful?  Removing to save space unless use case exists.
//             getTime: function(ev) {
//                 ev = ev.browserEvent || ev;
//                 if (!ev.time) {
//                     var t = new Date().getTime();
//                     try {
//                         ev.time = t;
//                     } catch(ex) {
//                         return t;
//                     }
//                 }

//                 return ev.time;
//             },

        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() {},

        _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);
            }
        },

        purgeElement : function(el, recurse, eventName) {
            var me = this;
            Ext.each( me.getListeners(el, eventName), function(v){
                if(v){
                    me.removeListener(el, v.type, v.fn);
                }
            });

            if (recurse && el && el.childNodes) {
                Ext.each(el.childNodes, function(v){
                    me.purgeElement(v, recurse, eventName);
                });
            }
        },

        getListeners : function(el, eventName) {
            var me = this,
                results = [],
                searchLists;

            if (eventName){
                searchLists = eventName == UNLOAD ? unloadListeners : listeners;
            }else{
                searchLists = listeners.concat(unloadListeners);
            }

            Ext.each(searchLists, function(v, i){
                if (v && v[EL] == el && (!eventName || eventName == v[TYPE])) {
                    results.push({
                                type:   v[TYPE],
                                fn:     v[FN],
                                obj:    v[OBJ],
                                adjust: v[ADJ_SCOPE],
                                index:  i
                            });
                }
            });

            return results.length ? results : null;
        },

        _unload : function(e) {
             var EU = Ext.lib.Event,
                i,
                j,
                l,
                len,
                index,
                scope;

            Ext.each(unloadListeners, function(v) {
                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){}
                }
            });

            unloadListeners = null;

            if(listeners && (j = listeners.length)){
                while(j){
                    if((l = listeners[index = --j])){
                        EU.removeListener(l[EL], l[TYPE], l[FN], index);
                    }
                }
                //EU.clearCache();
            }

            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

    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

    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

/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext = {version: '2.0.1'};

window["undefined"] = window["undefined"];

Ext.apply = function(o, c, defaults){
    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;
    var ua = navigator.userAgent.toLowerCase();

    var isStrict = document.compatMode == "CSS1Compat",
        isOpera = ua.indexOf("opera") > -1,
        isSafari = (/webkit|khtml/).test(ua),
        isSafari3 = isSafari && ua.indexOf('webkit/5') != -1,
        isIE = !isOpera && ua.indexOf("msie") > -1,
        isIE7 = !isOpera && ua.indexOf("msie 7") > -1,
        isGecko = !isSafari && ua.indexOf("gecko") > -1,
        isBorderBox = isIE && !isStrict,
        isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
        isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
        isAir = (ua.indexOf("adobeair") != -1),
        isLinux = (ua.indexOf("linux") != -1),
        isSecure = window.location.href.toLowerCase().indexOf("https") === 0;

    if(isIE && !isIE7){
        try{
            document.execCommand("BackgroundImageCache", false, true);
        }catch(e){}
    }

    Ext.apply(Ext, {

        isStrict : isStrict,

        isSecure : isSecure,

        isReady : false,

        enableGarbageCollector : true,

        enableListenerCollection:false,

        SSL_SECURE_URL : "javascript:false",

        BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif",

        emptyFn : function(){},

        applyIf : function(o, c){
            if(o && c){
                for(var p in c){
                    if(typeof o[p] == "undefined"){ o[p] = c[p]; }
                }
            }
            return o;
        },

        addBehaviors : function(o){
            if(!Ext.isReady){
                Ext.onReady(function(){
                    Ext.addBehaviors(o);
                });
                return;
            }
            var cache = {};
            for(var b in o){
                var parts = b.split('@');
                if(parts[1]){
                    var s = parts[0];
                    if(!cache[s]){
                        cache[s] = Ext.select(s);
                    }
                    cache[s].on(parts[1], o[b]);
                }
            }
            cache = null;
        },

        id : function(el, prefix){
            prefix = prefix || "ext-gen";
            el = Ext.getDom(el);
            var id = prefix + (++idSeed);
            return el ? (el.id ? el.id : (el.id = id)) : id;
        },

        extend : function(){

            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            var oc = Object.prototype.constructor;

            return function(sb, sp, overrides){
                if(typeof sp == 'object'){
                    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.override = io;
                Ext.override(sb, overrides);
                return sb;
            };
        }(),

        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;
                for(var method in overrides){
                    p[method] = overrides[method];
                }
            }
        },

        namespace : function(){
            var a=arguments, o=null, i, j, d, rt;
            for (i=0; i= 0) {
                    cacheItem = listeners[index];
                }

                if (!el || !cacheItem) {
                    return false;
                }

                this.doRemove(el, eventName, cacheItem[this.WFN], false);

                delete listeners[index][this.WFN];
                delete listeners[index][this.FN];
                listeners.splice(index, 1);

                return true;

            },

            getTarget: function(ev, resolveTextNode) {
                ev = ev.browserEvent || ev;
                var t = ev.target || ev.srcElement;
                return this.resolveTextNode(t);
            },

            resolveTextNode: function(node) {
                if (Ext.isSafari && node && 3 == node.nodeType) {
                    return node.parentNode;
                } else {
                    return node;
                }
            },

            getPageX: function(ev) {
                ev = ev.browserEvent || ev;
                var x = ev.pageX;
                if (!x && 0 !== x) {
                    x = ev.clientX || 0;

                    if (Ext.isIE) {
                        x += this.getScroll()[1];
                    }
                }

                return x;
            },

            getPageY: function(ev) {
                ev = ev.browserEvent || ev;
                var y = ev.pageY;
                if (!y && 0 !== y) {
                    y = ev.clientY || 0;

                    if (Ext.isIE) {
                        y += this.getScroll()[0];
                    }
                }

                return y;
            },

            getXY: function(ev) {
                ev = ev.browserEvent || ev;
                return [this.getPageX(ev), this.getPageY(ev)];
            },

            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);
            },

            getTime: function(ev) {
                ev = ev.browserEvent || ev;
                if (!ev.time) {
                    var t = new Date().getTime();
                    try {
                        ev.time = t;
                    } catch(ex) {
                        this.lastError = ex;
                        return t;
                    }
                }

                return ev.time;
            },

            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) {
                var ev = e || window.event;
                if (!ev) {
                    var c = this.getEvent.caller;
                    while (c) {
                        ev = c.arguments[0];
                        if (ev && Event == ev.constructor) {
                            break;
                        }
                        c = c.caller;
                    }
                }
                return ev;
            },

            getCharCode: function(ev) {
                ev = ev.browserEvent || ev;
                return ev.charCode || ev.keyCode || 0;
            },

            _getCacheIndex: function(el, eventName, fn) {
                for (var i = 0,len = listeners.length; i < len; ++i) {
                    var li = listeners[i];
                    if (li &&
                        li[this.FN] == fn &&
                        li[this.EL] == el &&
                        li[this.TYPE] == eventName) {
                        return i;
                    }
                }

                return -1;
            },

            elCache: {},

            getEl: function(id) {
                return document.getElementById(id);
            },

            clearCache: function() {
            },

            _load: function(e) {
                loadComplete = true;
                var EU = Ext.lib.Event;

                if (Ext.isIE) {
                    EU.doRemove(window, "load", EU._load);
                }
            },

            _tryPreloadAttach: function() {

                if (this.locked) {
                    return false;
                }

                this.locked = true;

                var tryAgain = !loadComplete;
                if (!tryAgain) {
                    tryAgain = (retryCount > 0);
                }

                var notAvail = [];
                for (var i = 0,len = onAvailStack.length; i < len; ++i) {
                    var item = onAvailStack[i];
                    if (item) {
                        var el = this.getEl(item.id);

                        if (el) {
                            if (!item.checkReady ||
                                loadComplete ||
                                el.nextSibling ||
                                (document && document.body)) {

                                var scope = el;
                                if (item.override) {
                                    if (item.override === true) {
                                        scope = item.obj;
                                    } else {
                                        scope = item.override;
                                    }
                                }
                                item.fn.call(scope, item.obj);
                                onAvailStack[i] = null;
                            }
                        } else {
                            notAvail.push(item);
                        }
                    }
                }

                retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;

                if (tryAgain) {

                    this.startInterval();
                } else {
                    clearInterval(this._interval);
                    this._interval = null;
                }

                this.locked = false;

                return true;

            },

            purgeElement: function(el, recurse, eventName) {
                var elListeners = this.getListeners(el, eventName);
                if (elListeners) {
                    for (var i = 0,len = elListeners.length; i < len; ++i) {
                        var l = elListeners[i];
                        this.removeListener(el, l.type, l.fn);
                    }
                }

                if (recurse && el && el.childNodes) {
                    for (i = 0,len = el.childNodes.length; i < len; ++i) {
                        this.purgeElement(el.childNodes[i], recurse, eventName);
                    }
                }
            },

            getListeners: function(el, eventName) {
                var results = [], searchLists;
                if (!eventName) {
                    searchLists = [listeners, unloadListeners];
                } else if (eventName == "unload") {
                    searchLists = [unloadListeners];
                } else {
                    searchLists = [listeners];
                }

                for (var j = 0; j < searchLists.length; ++j) {
                    var searchList = searchLists[j];
                    if (searchList && searchList.length > 0) {
                        for (var i = 0,len = searchList.length; i < len; ++i) {
                            var l = searchList[i];
                            if (l && l[this.EL] === el &&
                                (!eventName || eventName === l[this.TYPE])) {
                                results.push({
                                    type:   l[this.TYPE],
                                    fn:     l[this.FN],
                                    obj:    l[this.OBJ],
                                    adjust: l[this.ADJ_SCOPE],
                                    index:  i
                                });
                            }
                        }
                    }
                }

                return (results.length) ? results : null;
            },

            _unload: function(e) {

                var EU = Ext.lib.Event, i, j, l, len, index;

                for (i = 0,len = unloadListeners.length; i < len; ++i) {
                    l = unloadListeners[i];
                    if (l) {
                        var scope = window;
                        if (l[EU.ADJ_SCOPE]) {
                            if (l[EU.ADJ_SCOPE] === true) {
                                scope = l[EU.OBJ];
                            } else {
                                scope = l[EU.ADJ_SCOPE];
                            }
                        }
                        l[EU.FN].call(scope, EU.getEvent(e), l[EU.OBJ]);
                        unloadListeners[i] = null;
                        l = null;
                        scope = null;
                    }
                }

                unloadListeners = null;

                if (listeners && listeners.length > 0) {
                    j = listeners.length;
                    while (j) {
                        index = j - 1;
                        l = listeners[index];
                        if (l) {
                            EU.removeListener(l[EU.EL], l[EU.TYPE],
                                    l[EU.FN], index);
                        }
                        j = j - 1;
                    }
                    l = null;

                    EU.clearCache();
                }

                EU.doRemove(window, "unload", EU._unload);

            },

            getScroll: function() {
                var dd = document.documentElement, db = document.body;
                if (dd && (dd.scrollTop || dd.scrollLeft)) {
                    return [dd.scrollTop, dd.scrollLeft];
                } else if (db) {
                    return [db.scrollTop, db.scrollLeft];
                } else {
                    return [0, 0];
                }
            },

            doAdd: function () {
                if (window.addEventListener) {
                    return function(el, eventName, fn, capture) {
                        el.addEventListener(eventName, fn, (capture));
                    };
                } else if (window.attachEvent) {
                    return function(el, eventName, fn, capture) {
                        el.attachEvent("on" + eventName, fn);
                    };
                } else {
                    return function() {
                    };
                }
            }(),

            doRemove: function() {
                if (window.removeEventListener) {
                    return function (el, eventName, fn, capture) {
                        el.removeEventListener(eventName, fn, (capture));
                    };
                } else if (window.detachEvent) {
                    return function (el, eventName, fn) {
                        el.detachEvent("on" + eventName, fn);
                    };
                } else {
                    return function() {
                    };
                }
            }()
        };

    }();

    var E = Ext.lib.Event;
    E.on = E.addListener;
    E.un = E.removeListener;
    if (document && document.body) {
        E._load();
    } else {
        E.doAdd(window, "load", E._load);
    }
    E.doAdd(window, "unload", E._unload);
    E._tryPreloadAttach();

    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)){
                            this.initHeader(h, hs[h], false);
                        }
                    }
                }
                if(options.xmlData){
                    this.initHeader('Content-Type', 'text/xml', false);
                    method = 'POST';
                    data = options.xmlData;
                }else if(options.jsonData){
                    this.initHeader('Content-Type', 'text/javascript', false);
                    method = 'POST';
                    data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
                }
            }

            return this.asyncRequest(method, uri, cb, data);
        },

        serializeForm : function(form) {
            if(typeof form == 'string') {
                form = (document.getElementById(form) || document.forms[form]);
            }

            var el, name, val, disabled, data = '', hasSubmit = false;
            for (var i = 0; i < form.elements.length; i++) {
                el = form.elements[i];
                disabled = form.elements[i].disabled;
                name = form.elements[i].name;
                val = form.elements[i].value;

                if (!disabled && name){
                    switch (el.type)
                            {
                        case 'select-one':
                        case 'select-multiple':
                            for (var j = 0; j < el.options.length; j++) {
                                if (el.options[j].selected) {
                                    if (Ext.isIE) {
                                        data += encodeURIComponent(name) + '=' + encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
                                    }
                                    else {
                                        data += encodeURIComponent(name) + '=' + encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
                                    }
                                }
                            }
                            break;
                        case 'radio':
                        case 'checkbox':
                            if (el.checked) {
                                data += encodeURIComponent(name) + '=' + encodeURIComponent(val) + '&';
                            }
                            break;
                        case 'file':

                        case undefined:

                        case 'reset':

                        case 'button':

                            break;
                        case 'submit':
                            if(hasSubmit == false) {
                                data += encodeURIComponent(name) + '=' + encodeURIComponent(val) + '&';
                                hasSubmit = true;
                            }
                            break;
                        default:
                            data += encodeURIComponent(name) + '=' + encodeURIComponent(val) + '&';
                            break;
                    }
                }
            }
            data = data.substr(0, data.length - 1);
            return data;
        },

        headers:{},

        hasHeaders:false,

        useDefaultHeader:true,

        defaultPostHeader:'application/x-www-form-urlencoded',

        useDefaultXhrHeader:true,

        defaultXhrHeader:'XMLHttpRequest',

        hasDefaultHeaders:true,

        defaultHeaders:{},

        poll:{},

        timeout:{},

        pollInterval:50,

        transactionId:0,

        setProgId:function(id)
        {
            this.activeX.unshift(id);
        },

        setDefaultPostHeader:function(b)
        {
            this.useDefaultHeader = b;
        },

        setDefaultXhrHeader:function(b)
        {
            this.useDefaultXhrHeader = b;
        },

        setPollingInterval:function(i)
        {
            if (typeof i == 'number' && isFinite(i)) {
                this.pollInterval = i;
            }
        },

        createXhrObject:function(transactionId)
        {
            var obj,http;
            try
            {

                http = new XMLHttpRequest();

                obj = { conn:http, tId:transactionId };
            }
            catch(e)
            {
                for (var i = 0; i < this.activeX.length; ++i) {
                    try
                    {

                        http = new ActiveXObject(this.activeX[i]);

                        obj = { conn:http, tId:transactionId };
                        break;
                    }
                    catch(e) {
                    }
                }
            }
            finally
            {
                return obj;
            }
        },

        getConnectionObject:function()
        {
            var o;
            var tId = this.transactionId;

            try
            {
                o = this.createXhrObject(tId);
                if (o) {
                    this.transactionId++;
                }
            }
            catch(e) {
            }
            finally
            {
                return o;
            }
        },

        asyncRequest:function(method, uri, callback, postData)
        {
            var o = this.getConnectionObject();

            if (!o) {
                return null;
            }
            else {
                o.conn.open(method, uri, true);

                if (this.useDefaultXhrHeader) {
                    if (!this.defaultHeaders['X-Requested-With']) {
                        this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
                    }
                }

                if(postData && this.useDefaultHeader){
                    this.initHeader('Content-Type', this.defaultPostHeader);
                }

                 if (this.hasDefaultHeaders || this.hasHeaders) {
                    this.setHeader(o);
                }

                this.handleReadyState(o, callback);
                o.conn.send(postData || null);

                return o;
            }
        },

        handleReadyState:function(o, callback)
        {
            var oConn = this;

            if (callback && callback.timeout) {
                this.timeout[o.tId] = window.setTimeout(function() {
                    oConn.abort(o, callback, true);
                }, callback.timeout);
            }

            this.poll[o.tId] = window.setInterval(
                    function() {
                        if (o.conn && o.conn.readyState == 4) {
                            window.clearInterval(oConn.poll[o.tId]);
                            delete oConn.poll[o.tId];

                            if (callback && callback.timeout) {
                                window.clearTimeout(oConn.timeout[o.tId]);
                                delete oConn.timeout[o.tId];
                            }

                            oConn.handleTransactionResponse(o, callback);
                        }
                    }
                    , this.pollInterval);
        },

        handleTransactionResponse:function(o, callback, isAbort)
        {

            if (!callback) {
                this.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) {
                responseObject = this.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 = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
                        if (callback.failure) {
                            if (!callback.scope) {
                                callback.failure(responseObject);
                            }
                            else {
                                callback.failure.apply(callback.scope, [responseObject]);
                            }
                        }
                        break;
                    default:
                        responseObject = this.createResponseObject(o, callback.argument);
                        if (callback.failure) {
                            if (!callback.scope) {
                                callback.failure(responseObject);
                            }
                            else {
                                callback.failure.apply(callback.scope, [responseObject]);
                            }
                        }
                }
            }

            this.releaseObject(o);
            responseObject = null;
        },

        createResponseObject:function(o, callbackArg)
        {
            var obj = {};
            var headerObj = {};

            try
            {
                var headerStr = o.conn.getAllResponseHeaders();
                var header = headerStr.split('\n');
                for (var i = 0; i < header.length; i++) {
                    var delimitPos = header[i].indexOf(':');
                    if (delimitPos != -1) {
                        headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
                    }
                }
            }
            catch(e) {
            }

            obj.tId = o.tId;
            obj.status = o.conn.status;
            obj.statusText = o.conn.statusText;
            obj.getResponseHeader = headerObj;
            obj.getAllResponseHeaders = headerStr;
            obj.responseText = o.conn.responseText;
            obj.responseXML = o.conn.responseXML;

            if (typeof callbackArg !== undefined) {
                obj.argument = callbackArg;
            }

            return obj;
        },

        createExceptionObject:function(tId, callbackArg, isAbort)
        {
            var COMM_CODE = 0;
            var COMM_ERROR = 'communication failure';
            var ABORT_CODE = -1;
            var ABORT_ERROR = 'transaction aborted';

            var obj = {};

            obj.tId = tId;
            if (isAbort) {
                obj.status = ABORT_CODE;
                obj.statusText = ABORT_ERROR;
            }
            else {
                obj.status = COMM_CODE;
                obj.statusText = COMM_ERROR;
            }

            if (callbackArg) {
                obj.argument = callbackArg;
            }

            return obj;
        },

        initHeader:function(label, value, isDefault)
        {
            var headerObj = (isDefault) ? this.defaultHeaders : this.headers;

            if (headerObj[label] === undefined) {
                headerObj[label] = value;
            }
            else {

                headerObj[label] = value + "," + headerObj[label];
            }

            if (isDefault) {
                this.hasDefaultHeaders = true;
            }
            else {
                this.hasHeaders = true;
            }
        },

        setHeader:function(o)
        {
            if (this.hasDefaultHeaders) {
                for (var prop in this.defaultHeaders) {
                    if (this.defaultHeaders.hasOwnProperty(prop)) {
                        o.conn.setRequestHeader(prop, this.defaultHeaders[prop]);
                    }
                }
            }

            if (this.hasHeaders) {
                for (var prop in this.headers) {
                    if (this.headers.hasOwnProperty(prop)) {
                        o.conn.setRequestHeader(prop, this.headers[prop]);
                    }
                }
                this.headers = {};
                this.hasHeaders = false;
            }
        },

        resetDefaultHeaders:function() {
            delete this.defaultHeaders;
            this.defaultHeaders = {};
            this.hasDefaultHeaders = false;
        },

        abort:function(o, callback, isTimeout)
        {
            if (this.isCallInProgress(o)) {
                o.conn.abort();
                window.clearInterval(this.poll[o.tId]);
                delete this.poll[o.tId];
                if (isTimeout) {
                    delete this.timeout[o.tId];
                }

                this.handleTransactionResponse(o, callback, true);

                return true;
            }
            else {
                return false;
            }
        },

        isCallInProgress:function(o)
        {

            if (o.conn) {
                return o.conn.readyState != 4 && o.conn.readyState != 0;
            }
            else {

                return false;
            }
        },

        releaseObject:function(o)
        {

            o.conn = null;

            o = null;
        },

        activeX:[
        'MSXML2.XMLHTTP.3.0',
        'MSXML2.XMLHTTP',
        'Microsoft.XMLHTTP'
        ]

    };

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

    Ext.lib.Anim = {
        scroll : function(el, args, duration, easing, cb, scope) {
            return this.run(el, args, duration, easing, cb, scope, Ext.lib.Scroll);
        },

        motion : function(el, args, duration, easing, cb, scope) {
            return this.run(el, args, duration, easing, cb, scope, Ext.lib.Motion);
        },

        color : function(el, args, duration, easing, cb, scope) {
            return this.run(el, args, duration, easing, cb, scope, Ext.lib.ColorAnim);
        },

        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() {
                Ext.callback(cb, scope);
            });
            return anim;
        }
    };

    function fly(el) {
        if (!libFlyweight) {
            libFlyweight = new Ext.Element.Flyweight();
        }
        libFlyweight.dom = el;
        return libFlyweight;
    }

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

    Ext.lib.AnimBase = function(el, attributes, duration, method) {
        if (el) {
            this.init(el, attributes, duration, method);
        }
    };

    Ext.lib.AnimBase.prototype = {

        toString: function() {
            var el = this.getEl();
            var id = el.id || el.tagName;
            return ("Anim " + id);
        },

        patterns: {
            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
        },

        doMethod: function(attr, start, end) {
            return this.method(this.currentFrame, start, end - start, this.totalFrames);
        },

        setAttribute: function(attr, val, unit) {
            if (this.patterns.noNegatives.test(attr)) {
                val = (val > 0) ? val : 0;
            }

            Ext.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
        },

        getAttribute: function(attr) {
            var el = this.getEl();
            var val = fly(el).getStyle(attr);

            if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
                return parseFloat(val);
            }

            var a = this.patterns.offsetAttribute.exec(attr) || [];
            var pos = !!( a[3] );
            var box = !!( a[2] );

            if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
                val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
            } else {
                val = 0;
            }

            return val;
        },

        getDefaultUnit: function(attr) {
            if (this.patterns.defaultUnit.test(attr)) {
                return 'px';
            }

            return '';
        },

        animateX : function(callback, scope) {
            var f = function() {
                this.onComplete.removeListener(f);
                if (typeof callback == "function") {
                    callback.call(scope || this, this);
                }
            };
            this.onComplete.addListener(f, this);
            this.animate();
        },

        setRuntimeAttribute: function(attr) {
            var start;
            var end;
            var attributes = this.attributes;

            this.runtimeAttributes[attr] = {};

            var isset = function(prop) {
                return (typeof prop !== 'undefined');
            };

            if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
                return false;
            }

            start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);

            if (isset(attributes[attr]['to'])) {
                end = attributes[attr]['to'];
            } else if (isset(attributes[attr]['by'])) {
                if (start.constructor == Array) {
                    end = [];
                    for (var i = 0, len = start.length; i < len; ++i) {
                        end[i] = start[i] + attributes[attr]['by'][i];
                    }
                } else {
                    end = start + attributes[attr]['by'];
                }
            }

            this.runtimeAttributes[attr].start = start;
            this.runtimeAttributes[attr].end = end;

            this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
        },

        init: function(el, attributes, duration, method) {

            var isAnimated = false;

            var startTime = null;

            var actualFrames = 0;

            el = Ext.getDom(el);

            this.attributes = attributes || {};

            this.duration = duration || 1;

            this.method = method || Ext.lib.Easing.easeNone;

            this.useSeconds = true;

            this.currentFrame = 0;

            this.totalFrames = Ext.lib.AnimMgr.fps;

            this.getEl = function() {
                return el;
            };

            this.isAnimated = function() {
                return isAnimated;
            };

            this.getStartTime = function() {
                return startTime;
            };

            this.runtimeAttributes = {};

            this.animate = function() {
                if (this.isAnimated()) {
                    return false;
                }

                this.currentFrame = 0;

                this.totalFrames = ( this.useSeconds ) ? Math.ceil(Ext.lib.AnimMgr.fps * this.duration) : this.duration;

                Ext.lib.AnimMgr.registerElement(this);
            };

            this.stop = function(finish) {
                if (finish) {
                    this.currentFrame = this.totalFrames;
                    this._onTween.fire();
                }
                Ext.lib.AnimMgr.stop(this);
            };

            var onStart = function() {
                this.onStart.fire();

                this.runtimeAttributes = {};
                for (var attr in this.attributes) {
                    this.setRuntimeAttribute(attr);
                }

                isAnimated = true;
                actualFrames = 0;
                startTime = new Date();
            };

            var onTween = function() {
                var data = {
                    duration: new Date() - this.getStartTime(),
                    currentFrame: this.currentFrame
                };

                data.toString = function() {
                    return (
                            'duration: ' + data.duration +
                            ', currentFrame: ' + data.currentFrame
                            );
                };

                this.onTween.fire(data);

                var runtimeAttributes = this.runtimeAttributes;

                for (var attr in runtimeAttributes) {
                    this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
                }

                actualFrames += 1;
            };

            var onComplete = function() {
                var actual_duration = (new Date() - startTime) / 1000 ;

                var data = {
                    duration: actual_duration,
                    frames: actualFrames,
                    fps: actualFrames / actual_duration
                };

                data.toString = function() {
                    return (
                            'duration: ' + data.duration +
                            ', frames: ' + data.frames +
                            ', fps: ' + data.fps
                            );
                };

                isAnimated = false;
                actualFrames = 0;
                this.onComplete.fire(data);
            };

            this._onStart = new Ext.util.Event(this);
            this.onStart = new Ext.util.Event(this);
            this.onTween = new Ext.util.Event(this);
            this._onTween = new Ext.util.Event(this);
            this.onComplete = new Ext.util.Event(this);
            this._onComplete = new Ext.util.Event(this);
            this._onStart.addListener(onStart);
            this._onTween.addListener(onTween);
            this._onComplete.addListener(onComplete);
        }
    };

    Ext.lib.AnimMgr = new function() {

        var thread = null;

        var queue = [];

        var tweenCount = 0;

        this.fps = 1000;

        this.delay = 1;

        this.registerElement = function(tween) {
            queue[queue.length] = tween;
            tweenCount += 1;
            tween._onStart.fire();
            this.start();
        };

        this.unRegister = function(tween, index) {
            tween._onComplete.fire();
            index = index || getIndex(tween);
            if (index != -1) {
                queue.splice(index, 1);
            }

            tweenCount -= 1;
            if (tweenCount <= 0) {
                this.stop();
            }
        };

        this.start = function() {
            if (thread === null) {
                thread = setInterval(this.run, this.delay);
            }
        };

        this.stop = function(tween) {
            if (!tween) {
                clearInterval(thread);

                for (var i = 0, len = queue.length; i < len; ++i) {
                    if (queue[0].isAnimated()) {
                        this.unRegister(queue[0], 0);
                    }
                }

                queue = [];
                thread = null;
                tweenCount = 0;
            }
            else {
                this.unRegister(tween);
            }
        };

        this.run = function() {
            for (var i = 0, len = queue.length; i < len; ++i) {
                var tween = queue[i];
                if (!tween || !tween.isAnimated()) {
                    continue;
                }

                if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
                {
                    tween.currentFrame += 1;

                    if (tween.useSeconds) {
                        correctFrame(tween);
                    }
                    tween._onTween.fire();
                }
                else {
                    Ext.lib.AnimMgr.stop(tween, i);
                }
            }
        };

        var getIndex = function(anim) {
            for (var i = 0, len = queue.length; i < len; ++i) {
                if (queue[i] == anim) {
                    return i;
                }
            }
            return -1;
        };

        var correctFrame = function(tween) {
            var frames = tween.totalFrames;
            var frame = tween.currentFrame;
            var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
            var elapsed = (new Date() - tween.getStartTime());
            var tweak = 0;

            if (elapsed < tween.duration * 1000) {
                tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
            } else {
                tweak = frames - (frame + 1);
            }
            if (tweak > 0 && isFinite(tweak)) {
                if (tween.currentFrame + tweak >= frames) {
                    tweak = frames - (frame + 1);
                }

                tween.currentFrame += tweak;
            }
        };
    };

    Ext.lib.Bezier = new function() {

        this.getPosition = function(points, t) {
            var n = points.length;
            var tmp = [];

            for (var i = 0; i < n; ++i) {
                tmp[i] = [points[i][0], points[i][1]];
            }

            for (var j = 1; j < n; ++j) {
                for (i = 0; i < n - j; ++i) {
                    tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
                    tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
                }
            }

            return [ tmp[0][0], tmp[0][1] ];

        };
    };
    (function() {

        Ext.lib.ColorAnim = function(el, attributes, duration, method) {
            Ext.lib.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
        };

        Ext.extend(Ext.lib.ColorAnim, Ext.lib.AnimBase);

        var Y = Ext.lib;
        var superclass = Y.ColorAnim.superclass;
        var proto = Y.ColorAnim.prototype;

        proto.toString = function() {
            var el = this.getEl();
            var id = el.id || el.tagName;
            return ("ColorAnim " + id);
        };

        proto.patterns.color = /color$/i;
        proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
        proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
        proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
        proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/;

        proto.parseColor = function(s) {
            if (s.length == 3) {
                return s;
            }

            var c = this.patterns.hex.exec(s);
            if (c && c.length == 4) {
                return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
            }

            c = this.patterns.rgb.exec(s);
            if (c && c.length == 4) {
                return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
            }

            c = this.patterns.hex3.exec(s);
            if (c && c.length == 4) {
                return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
            }

            return null;
        };

        proto.getAttribute = function(attr) {
            var el = this.getEl();
            if (this.patterns.color.test(attr)) {
                var val = fly(el).getStyle(attr);

                if (this.patterns.transparent.test(val)) {
                    var parent = el.parentNode;
                    val = fly(parent).getStyle(attr);

                    while (parent && this.patterns.transparent.test(val)) {
                        parent = parent.parentNode;
                        val = fly(parent).getStyle(attr);
                        if (parent.tagName.toUpperCase() == 'HTML') {
                            val = '#fff';
                        }
                    }
                }
            } else {
                val = superclass.getAttribute.call(this, attr);
            }

            return val;
        };

        proto.doMethod = function(attr, start, end) {
            var val;

            if (this.patterns.color.test(attr)) {
                val = [];
                for (var i = 0, len = start.length; i < len; ++i) {
                    val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
                }

                val = 'rgb(' + Math.floor(val[0]) + ',' + Math.floor(val[1]) + ',' + Math.floor(val[2]) + ')';
            }
            else {
                val = superclass.doMethod.call(this, attr, start, end);
            }

            return val;
        };

        proto.setRuntimeAttribute = function(attr) {
            superclass.setRuntimeAttribute.call(this, attr);

            if (this.patterns.color.test(attr)) {
                var attributes = this.attributes;
                var start = this.parseColor(this.runtimeAttributes[attr].start);
                var end = this.parseColor(this.runtimeAttributes[attr].end);

                if (typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined') {
                    end = this.parseColor(attributes[attr].by);

                    for (var i = 0, len = start.length; i < len; ++i) {
                        end[i] = start[i] + end[i];
                    }
                }

                this.runtimeAttributes[attr].start = start;
                this.runtimeAttributes[attr].end = end;
            }
        };
    })();

    Ext.lib.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;
        },

        easeBoth: function (t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t + b;
            }

            return -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) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t * t * t + b;
            }

            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        },

        elasticIn: function (t, b, c, d, a, p) {
            if (t == 0) {
                return b;
            }
            if ((t /= d) == 1) {
                return b + c;
            }
            if (!p) {
                p = d * .3;
            }

            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            }
            else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }

            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },

        elasticOut: function (t, b, c, d, a, p) {
            if (t == 0) {
                return b;
            }
            if ((t /= d) == 1) {
                return b + c;
            }
            if (!p) {
                p = d * .3;
            }

            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            }
            else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }

            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        },

        elasticBoth: function (t, b, c, d, a, p) {
            if (t == 0) {
                return b;
            }

            if ((t /= d / 2) == 2) {
                return b + c;
            }

            if (!p) {
                p = d * (.3 * 1.5);
            }

            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            }
            else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }

            if (t < 1) {
                return -.5 * (a * Math.pow(2, 10 * (t -= 1)) *
                              Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            }
            return a * Math.pow(2, -10 * (t -= 1)) *
                   Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        },

        backIn: function (t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },

        backOut: function (t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },

        backBoth: function (t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 1.70158;
            }

            if ((t /= d / 2 ) < 1) {
                return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            }
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        },

        bounceIn: function (t, b, c, d) {
            return c - Ext.lib.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) {
            if (t < d / 2) {
                return Ext.lib.Easing.bounceIn(t * 2, 0, c, d) * .5 + b;
            }
            return Ext.lib.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    };

    (function() {
        Ext.lib.Motion = function(el, attributes, duration, method) {
            if (el) {
                Ext.lib.Motion.superclass.constructor.call(this, el, attributes, duration, method);
            }
        };

        Ext.extend(Ext.lib.Motion, Ext.lib.ColorAnim);

        var Y = Ext.lib;
        var superclass = Y.Motion.superclass;
        var proto = Y.Motion.prototype;

        proto.toString = function() {
            var el = this.getEl();
            var id = el.id || el.tagName;
            return ("Motion " + id);
        };

        proto.patterns.points = /^points$/i;

        proto.setAttribute = function(attr, val, unit) {
            if (this.patterns.points.test(attr)) {
                unit = unit || 'px';
                superclass.setAttribute.call(this, 'left', val[0], unit);
                superclass.setAttribute.call(this, 'top', val[1], unit);
            } else {
                superclass.setAttribute.call(this, attr, val, unit);
            }
        };

        proto.getAttribute = function(attr) {
            if (this.patterns.points.test(attr)) {
                var val = [
                        superclass.getAttribute.call(this, 'left'),
                        superclass.getAttribute.call(this, 'top')
                        ];
            } else {
                val = superclass.getAttribute.call(this, attr);
            }

            return val;
        };

        proto.doMethod = function(attr, start, end) {
            var val = null;

            if (this.patterns.points.test(attr)) {
                var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
                val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
            } else {
                val = superclass.doMethod.call(this, attr, start, end);
            }
            return val;
        };

        proto.setRuntimeAttribute = function(attr) {
            if (this.patterns.points.test(attr)) {
                var el = this.getEl();
                var attributes = this.attributes;
                var start;
                var control = attributes['points']['control'] || [];
                var end;
                var i, len;

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

                if (isset(attributes['points']['from'])) {
                    Ext.lib.Dom.setXY(el, attributes['points']['from']);
                }
                else {
                    Ext.lib.Dom.setXY(el, Ext.lib.Dom.getXY(el));
                }

                start = this.getAttribute('points');

                if (isset(attributes['points']['to'])) {
                    end = translateValues.call(this, attributes['points']['to'], start);

                    var pageXY = Ext.lib.Dom.getXY(this.getEl());
                    for (i = 0,len = control.length; i < len; ++i) {
                        control[i] = translateValues.call(this, control[i], start);
                    }

                } else if (isset(attributes['points']['by'])) {
                    end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];

                    for (i = 0,len = control.length; i < len; ++i) {
                        control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
                    }
                }

                this.runtimeAttributes[attr] = [start];

                if (control.length > 0) {
                    this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
                }

                this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
            }
            else {
                superclass.setRuntimeAttribute.call(this, attr);
            }
        };

        var translateValues = function(val, start) {
            var pageXY = Ext.lib.Dom.getXY(this.getEl());
            val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];

            return val;
        };

        var isset = function(prop) {
            return (typeof prop !== 'undefined');
        };
    })();

    (function() {
        Ext.lib.Scroll = function(el, attributes, duration, method) {
            if (el) {
                Ext.lib.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
            }
        };

        Ext.extend(Ext.lib.Scroll, Ext.lib.ColorAnim);

        var Y = Ext.lib;
        var superclass = Y.Scroll.superclass;
        var proto = Y.Scroll.prototype;

        proto.toString = function() {
            var el = this.getEl();
            var id = el.id || el.tagName;
            return ("Scroll " + id);
        };

        proto.doMethod = function(attr, start, end) {
            var val = null;

            if (attr == 'scroll') {
                val = [
                        this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
                        this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
                        ];

            } else {
                val = superclass.doMethod.call(this, attr, start, end);
            }
            return val;
        };

        proto.getAttribute = function(attr) {
            var val = null;
            var el = this.getEl();

            if (attr == 'scroll') {
                val = [ el.scrollLeft, el.scrollTop ];
            } else {
                val = superclass.getAttribute.call(this, attr);
            }

            return val;
        };

        proto.setAttribute = function(attr, val, unit) {
            var el = this.getEl();

            if (attr == 'scroll') {
                el.scrollLeft = val[0];
                el.scrollTop = val[1];
            } else {
                superclass.setAttribute.call(this, attr, val, unit);
            }
        };
    })();

})();


The source code

Ext.BLANK_IMAGE_URL = 'images/s.gif';

tx = {data:{}, ui: {}};

// work around for broken cross frame Dates in Safari
function fixDate(d){
    return d ? new Date(d.getTime()) : d;
}

function fixDateMember(o, name){
    if(o[name]){
        o[name] = new Date(o[name].getTime());
    }
}


The source code

// Asbtract base class for SqlDB classes
Ext.data.SqlDB = function(config){
    Ext.apply(this, config);
    Ext.data.SqlDB.superclass.constructor.call(this);

    this.addEvents({
        open : true,
        close: true
    });
};

Ext.extend(Ext.data.SqlDB, Ext.util.Observable, {
    maxResults: 10000,
    openState : false,

    // abstract methods
    open : function(file, cb, scope){
    },

    close : function(){
    },

    exec : function(sql, cb, scope){
    },

    execBy : function(sql, args, cb, scope){
    },

    query : function(sql, cb, scope){
    },

    queryBy : function(sql, args, cb, scope){
    },

    // protected/inherited method
    isOpen : function(){
        return this.openState;
    },

    getTable : function(name, keyName){
        return new Ext.data.SqlDB.Table(this, name, keyName);
    },

    createTable : function(o){
        var tableName = o.name;
        var keyName = o.key;
        var fs = o.fields;
        var cb = o.callback;
        var scope = o.scope;
        if(!(fs instanceof Array)){ // Ext fields collection
            fs = fs.items;
        }
        var buf = [];
        for(var i = 0, len = fs.length; i < len; i++){
            var f = fs[i], s = f.name;
            switch(f.type){
                case "int":
                case "bool":
                case "boolean":
                    s += ' INTEGER';
                    break;
                case "float":
                    s += ' REAL';
                    break;
                default:
                    s += ' TEXT';
            }
            if(f.allowNull === false || f.name == keyName){
                s += ' NOT NULL';
            }
            if(f.name == keyName){
                s += ' PRIMARY KEY';
            }
            if(f.unique === true){
                s += ' UNIQUE';
            }

            buf[buf.length] = s;
        }
        var sql = ['CREATE TABLE IF NOT EXISTS ', tableName, ' (', buf.join(','), ')'].join('');
        this.exec(sql, cb, scope);
    }
});

Ext.data.SqlDB.getInstance = function(db, config){
    if(window.htmlControl){ // air
        return new Ext.data.AirDB(config);
    } else { // gears
        return new Ext.data.GearsDB(config);
    }
};

Ext.data.SqlDB.Table = function(conn, name, keyName){
    this.conn = conn;
    this.name = name;
    this.keyName = keyName;
};

Ext.data.SqlDB.Table.prototype = {
    update : function(o, cb, scope){
        var clause = this.keyName + " = :" + this.keyName;
        this.updateBy(o, clause, {}, cb, scope);
    },

    updateBy : function(o, clause, args, cb, scope){
        var sql = "UPDATE " + this.name + " set ";
        var fs = [], a = [];
        for(var key in o){
            if(o.hasOwnProperty(key)){
                fs[fs.length] = key + ' = ?';
                a[a.length] = o[key];
            }
        }
        for(var key in args){
            if(args.hasOwnProperty(key)){
                a[a.length] = args[key];
            }
        }
        sql = [sql, fs.join(','), ' WHERE ', clause].join('');
        this.conn.execBy(sql, a, cb, scope);
    },

    insert : function(o, cb, scope){
        var sql = "INSERT into " + this.name + " ";
        var fs = [], vs = [], a = [];
        for(var key in o){
            if(o.hasOwnProperty(key)){
                fs[fs.length] = key;
                vs[vs.length] = '?';
                a[a.length] = o[key];
            }
        }
        sql = [sql, '(', fs.join(','), ') VALUES (', vs.join(','), ')'].join('');
        this.conn.execBy(sql, a, cb, scope);
    },

    select : function(clause, cb, scope){
        this.selectBy(clause, null, cb, scope);
    },

    selectBy : function(clause, args, cb, scope){
        var sql = "select * from " + this.name;
        if(clause){
            sql += ' ' + clause;
        }
        args = args || {};
        this.conn.queryBy(sql, args, cb, scope);
    },

    remove : function(clause, cb, scope){
        this.deleteBy(clause, null, cb, scope);
    },

    removeBy : function(clause, args, cb, scope){
        var sql = "delete from " + this.name;
        if(clause){
            sql += ' where ' + clause;
        }
        args = args || {};
        this.conn.execBy(sql, args, cb, scope);
    }
};

Ext.data.SqlDB.Proxy = function(conn, table, keyName, store){
    Ext.data.SqlDB.Proxy.superclass.constructor.call(this);
    this.conn = conn;
    this.table = this.conn.getTable(table, keyName);
    this.store = store;

    this.store.on('add', this.onAdd, this);
    this.store.on('update', this.onUpdate, this);
    this.store.on('remove', this.onRemove, this);
};

Ext.extend(Ext.data.SqlDB.Proxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg){
        if(!this.conn.isOpen()){ // assume that the connection is in the process of opening
            this.conn.on('open', function(){
                this.load(params, reader, callback, scope, arg);
            }, this, {single:true});
            return;
        };
        if(this.fireEvent("beforeload", this, params, reader, callback, scope, arg) !== false){
            var clause = params.where || '';
            var args = params.args || [];
            var group = params.groupBy;
            var sort = params.sort;
            var dir = params.dir;

            if(group || sort){
                clause += ' ORDER BY ';
                if(group && group != sort){
                    clause += group + ' ASC, ';
                }
                clause += sort + ' ' + (dir || 'ASC');
            }

            this.table.selectBy(clause, args,
                    this.onLoad.createDelegate(this, [{callback:callback, scope:scope, arg:arg, reader: reader}], 0));
        }else{
            callback.call(scope||this, null, arg, false);
        }
    },

    onLoad : function(trans, rs, e, stmt){
        if(rs === false){
            this.fireEvent("loadexception", this, null, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        var result = trans.reader.readRecords(rs);
        this.fireEvent("load", this, rs, trans.arg);
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    },

    processData : function(o){
        var fs = this.store.fields;
        var r = {};
        for(var key in o){
            var f = fs.key(key), v = o[key];
            if(f){
                if(f.type == 'date'){
                    r[key] = v ? v.format('Y-m-d H:i:s') : '';
                }else if(f.type == 'boolean'){
                    r[key] = v ? 1 : 0;
                }else{
                    r[key] = v;
                }
            }
        }
        return r;
    },

    onUpdate : function(ds, record){
        var changes = record.getChanges();
        var kn = this.table.keyName;
        this.table.updateBy(this.processData(changes), kn + ' = ?', [record.data[kn]]);
        record.commit(true);
    },

    onAdd : function(ds, records, index){
        for(var i = 0, len = records.length; i < len; i++){
            this.table.insert(this.processData(records[i].data));
        }
    },

    onRemove : function(ds, record, index){
        var kn = this.table.keyName;
        this.table.removeBy(kn + ' = ?', [record.data[kn]]);
    }
});


The source code

Ext.data.GearsDB = Ext.extend(Ext.data.SqlDB, {
    // abstract methods
    open : function(db, cb, scope){
        this.conn = google.gears.factory.create('beta.database', '1.0');
        this.conn.open(db);
        this.openState = true;
        Ext.callback(cb, scope, [this]);
        this.fireEvent('open', this);
    },

    close : function(){
        this.conn.close();
        this.fireEvent('close', this);
    },

    exec : function(sql, cb, scope){
        this.conn.execute(sql).close();
        Ext.callback(cb, scope, [true]);
    },

    execBy : function(sql, args, cb, scope){
        this.conn.execute(sql, args).close();
        Ext.callback(cb, scope, [true]);
    },

    query : function(sql, cb, scope){
        var rs = this.conn.execute(sql);
        var r = this.readResults(rs);
        Ext.callback(cb, scope, [r]);
        return r;
    },

    queryBy : function(sql, args, cb, scope){
        var rs = this.conn.execute(sql, args);
        var r = this.readResults(rs);
        Ext.callback(cb, scope, [r]);
        return r;
    },

    readResults : function(rs){
        var r = [];
        if(rs){
            var c = rs.fieldCount();
            // precache field names
            var fs = [];
            for(var i = 0; i < c; i++){
                fs[i] = rs.fieldName(i);
            }
            // read the data
            while(rs.isValidRow()){
                var o = {};
                for(var i = 0; i < c; i++){
                    o[fs[i]] = rs.field(i);
                }
                r[r.length] = o;
                rs.next();
            }
            rs.close();
        }
        return r;
    },

    // protected/inherited method
    isOpen : function(){
        return this.openState;
    },

    getTable : function(name, keyName){
        return new Ext.data.SqlDB.Table(this, name, keyName);
    }
});


The source code

/*
 * 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

/**
 * 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

/**
 * 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

/**
 * 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

/*
 * 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

/*
 * German translation
 * By schmidetzki and humpdi
 * 04-07-2007
 * Updated by wm003 10-31-2007
 */

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.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"
   });
}

if(Ext.form.DateField){
   Ext.apply(Ext.form.DateField.prototype, {
      disabledDaysText  : "nicht erlaubt",
      disabledDatesText : "nicht erlaubt",
      minText           : "Das Datum in diesem Feld muß nach dem {0} liegen",
      maxText           : "Das Datum in diesem Feld muß vor dem {0} liegen",
      invalidText       : "{0} ist kein valides Datum - es muß im Format {1} eingegeben werden",
      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       : "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'
    });
}

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

/**
 * 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

/**
 * 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.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.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"
  });
}

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

/**
 * 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.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"
  });
}

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

/*
 * 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

/*
 * 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

/**
 * 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

﻿/*
 * 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

﻿/*
 * 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

/**
 * 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

/*
 * 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

﻿
/**
 * 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

/**
 * 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

/*
 * 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

/*
 * 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

/**
 * 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

/**
 * 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

/**
 * 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

/*
 * 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

/**
 * 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

/**
 *
 * 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

/**
 *
 * 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

/**
 * 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

/*
 * 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

/**
 * 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 formado "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

﻿
/**
 * Ext 2.2.0 - Portuguese/Portugal (pt_PT) Translation
 * by Nuno Franco da Costa - francodacosta.com
 * translated from ext-lang-en.js
 * 11 Nov 2008
 */

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 "utilizaor@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, numeros 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

/**
 * 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

﻿/*
 * 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

/**
 * 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

/**
 * 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

/*
 * 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

﻿/*
 * 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

/**
 * 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

/**
 * 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

/**
 * 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

﻿/*
 * Ukrainian translation
 * By zlatko (utf-8 encoding)
 * 3 October 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     : "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

﻿
/**
 * 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

/*
 * Simplified Chinese translation
 * By DavidHu
 * 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 = "输入值非法";
}

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          : '下月 (Control+Right)',
      prevText          : '上月 (Control+Left)',
      monthYearText     : '选择一个月 (Control+Up/Down 来改变年)',
      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"',
      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 : "y年m月d日"
   });
}

if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
   Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
      splitTip            : "拖动来改变尺寸.",
      collapsibleSplitTip : "拖动来改变尺寸. 双击隐藏."
   });
}


The source code

﻿/*
 * 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

/**
 * @class Ext
 */

Ext.ns("Ext.grid", "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;

    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 ?
                            '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);
        },

/**
         * 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 Object.prototype.toString.apply(v) === '[object Date]';
        },

/**
         * 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(v === null || typeof v == 'boolean'? 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;
            }
        },

        // 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} The destination object.
         * @param {Object} The source object.
         * @param {Array/String} 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(typeof names == 'string'){
                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 Ext.sum(arr) / arr.length;
        },

/**
         * 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 {Anything} ... 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 && typeof v[methodName] == "function") {
                    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(typeof o.length == 'number' && typeof o.item == 'function') {
                    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 of the passed fcn (Defaults to scope of original function or 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

// 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.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,
        //assume it's not null and not an array
        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 ((v.nextNode || v.item) && Ext.isNumber(v.length));
        },
        ua = navigator.userAgent.toLowerCase(),
        check = function(r){
            return r.test(ua);
        },
        DOC = document,
        isStrict = DOC.compatMode == "CSS1Compat",
        isOpera = check(/opera/),
        isChrome = check(/chrome/),
        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 (defaults to javascript:false).
         * @type String
         */
        SSL_SECURE_URL : 'javascript:false',

/**
         * 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 after uncaching an element (defaults to false).
         * Note: this only happens if {@link #enableGarbageCollector} is true.
         * @type Boolean
         */
        enableListenerCollection : 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.isEmpty(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){
            return (el = Ext.getDom(el) || {}).id = el.id || (prefix || "ext-gen") + (++idSeed);
        },

/**
         * Extends one class with another class and optionally overrides members with the passed literal. This class
         * also adds the function "override()" to the class that can be used to override
         * members on an instance.
         * *

         * This function also supports a 2-argument call in which the subclass's constructor is
         * not passed as an argument. In this form, the parameters are as follows:

         *

         *
  • superclass
         *
    The class being extended
    •
         *
  • overrides
         *
    A literal with members which are copied into the subclass's
         * prototype, and are therefore shared among 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.
    •
         *

         * For example, to create a subclass of the Ext GridPanel:
         *

MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
    constructor: function(config) {
        // Your preprocessing here
        MyGridPanel.superclass.constructor.apply(this, arguments);
        // Your postprocessing here
    },

    yourMethod: function() {
        // etc.
    }
});

         *

         * @param {Function} subclass The class inheriting the functionality
         * @param {Function} superclass The class being extended
         * @param {Object} overrides (optional) A literal with members which are copied into the subclass's
         * prototype, and are therefore shared between all instances of the new class.
         * @return {Function} The subclass constructor.
         * @method extend
         */
        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){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.toString != origclass.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
         * @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 undef, buf = [], key, e = encodeURIComponent;

            for(key in o){
                undef = !Ext.isDefined(o[key]);
                Ext.each(undef ? key : o[key], function(val, i){
                    buf.push("&", e(key), "=", (val != key || !undef) ? 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){
            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, which handles 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 appended string
         */
        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 = [];
                    Ext.each(a, function(v) {
                        res.push(v);
                    });
                    return res.slice(i || 0, j || res.length);
                } :
                function(a, i, j){
                    return Array.prototype.slice.call(a, i || 0, j || a.length);
                }
        }(),

/**
         * Iterates an array calling the passed function with each item, stopping if your function returns false. If the
         * passed array is not really an array, your function is called once with it.
         * The supplied function is called with (Object item, Number index, Array allItems).
         * @param {Array/NodeList/Mixed} array
         * @param {Function} fn
         * @param {Object} scope
         */
        each: function(array, fn, scope){
            if(Ext.isEmpty(array, true)){
                return;
            }
            if(!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)
         *

         * When iterating an object, the supplied function is called with each key-value pair in
         * the object.
    •
         *

         * @param {Object} scope The scope to call the supplied function with, defaults to
         * the specified object
         */
        iterate : function(obj, fn, scope){
            if(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]) === false){
                            return;
                        };
                    }
                }
            }
        },

/**
         * Return the dom node for the passed String (id), dom node, or Ext.Element.
         * 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){
            if(!el || !DOC){
                return null;
            }
            return el.dom ? el.dom : (Ext.isString(el) ? DOC.getElementById(el) : 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.  The body node will be ignored if passed in.
         * @param {HTMLElement} node The node to remove
         */
        removeNode : isIE ? function(){
            var d;
            return function(n){
                if(n && n.tagName != 'BODY'){
                    d = d || DOC.createElement('div');
                    d.appendChild(n);
                    d.innerHTML = '';
                }
            }
        }() : function(n){
            if(n && n.parentNode && n.tagName != 'BODY'){
                n.parentNode.removeChild(n);
            }
        },

/**
         *
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 object is a JavaScript array, otherwise false.
         * @param {Object} object The object to test
         * @return {Boolean}
         */
        isArray : function(v){
            return toString.apply(v) === '[object Array]';
        },

/**
         * Returns true if the passed object is a JavaScript Object, otherwise false.
         * @param {Object} object The object to test
         * @return {Boolean}
         */
        isObject : function(v){
            return v && typeof v == "object";
        },

/**
         * Returns true if the passed object 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 object is a JavaScript Function, otherwise false.
         * @param {Object} object The object to test
         * @return {Boolean}
         */
        isFunction : function(v){
            return toString.apply(v) === '[object Function]';
        },

/**
         * Returns true if the passed object is a number. Returns false for non-finite numbers.
         * @param {Object} v The object to test
         * @return {Boolean}
         */
        isNumber: function(v){
            return typeof v === 'number' && isFinite(v);
        },

/**
         * Returns true if the passed object is a string.
         * @param {Object} v The object to test
         * @return {Boolean}
         */
        isString: function(v){
            return typeof v === 'string';
        },

/**
         * Returns true if the passed object is a boolean.
         * @param {Object} v The object to test
         * @return {Boolean}
         */
        isBoolean: function(v){
            return typeof v === 'boolean';
        },

/**
         * Returns true if the passed object is not undefined.
         * @param {Object} v The object 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
     * @method namespace
     */
    Ext.ns = Ext.namespace;
})();

Ext.ns("Ext", "Ext.util", "Ext.lib", "Ext.data");

/**
 * @class Function
 * These functions are available on every Function object (any JavaScript function).
 */
Ext.apply(Function.prototype, {

/**
     * Creates an interceptor function. The passed fcn 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 fcn 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 of the passed fcn (Defaults to scope of original function or 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} obj (optional) The object for which the scope is set
     * @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} obj (optional) The object for which the scope is set
     * @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
     * @return {Number} The index of o in the array (or -1 if it is not found)
     */
    indexOf : function(o){
        for (var i = 0, len = this.length; i < len; i++){
            if(this[i] == o){
                return i;
            }
        }
        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

FeedGrid = function(viewer, config) {
    this.viewer = viewer;
    Ext.apply(this, config);

    this.store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'feed-proxy.php'
        }),

        reader: new Ext.data.XmlReader(
            {record: 'item'},
            ['title', 'author', {name:'pubDate', type:'date'}, 'link', 'description', 'content']
        )
    });
    this.store.setDefaultSort('pubDate', "DESC");

    this.columns = [{
        id: 'title',
        header: "Title",
        dataIndex: 'title',
        sortable:true,
        width: 420,
        renderer: this.formatTitle
      },{
        header: "Author",
        dataIndex: 'author',
        width: 100,
        hidden: true,
        sortable:true
      },{
        id: 'last',
        header: "Date",
        dataIndex: 'pubDate',
        width: 150,
        renderer:  this.formatDate,
        sortable:true
    }];

    FeedGrid.superclass.constructor.call(this, {
        region: 'center',
        id: 'topic-grid',
        loadMask: {msg:'Loading Feed...'},

        sm: new Ext.grid.RowSelectionModel({
            singleSelect:true
        }),

        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : this.applyRowClass
        }
    });

    this.on('rowcontextmenu', this.onContextClick, this);
};

Ext.extend(FeedGrid, Ext.grid.GridPanel, {

    onContextClick : function(grid, index, e){
        if(!this.menu){ // create context menu on first right click
            this.menu = new Ext.menu.Menu({
                id:'grid-ctx',
                items: [{
                    text: 'View in new tab',
                    iconCls: 'new-tab',
                    scope:this,
                    handler: function(){
                        this.viewer.openTab(this.ctxRecord);
                    }
                },{
                    iconCls: 'new-win',
                    text: 'Go to Post',
                    scope:this,
                    handler: function(){
                        window.open(this.ctxRecord.data.link);
                    }
                },'-',{
                    iconCls: 'refresh-icon',
                    text:'Refresh',
                    scope:this,
                    handler: function(){
                        this.ctxRow = null;
                        this.store.reload();
                    }
                }]
            });
            this.menu.on('hide', this.onContextHide, this);
        }
        e.stopEvent();
        if(this.ctxRow){
            Ext.fly(this.ctxRow).removeClass('x-node-ctx');
            this.ctxRow = null;
        }
        this.ctxRow = this.view.getRow(index);
        this.ctxRecord = this.store.getAt(index);
        Ext.fly(this.ctxRow).addClass('x-node-ctx');
        this.menu.showAt(e.getXY());
    },

    onContextHide : function(){
        if(this.ctxRow){
            Ext.fly(this.ctxRow).removeClass('x-node-ctx');
            this.ctxRow = null;
        }
    },

    loadFeed : function(url) {
        this.store.baseParams = {
            feed: url
        };
        this.store.load();
    },

    togglePreview : function(show){
        this.view.showPreview = show;
        this.view.refresh();
    },

    // within this function "this" is actually the GridView
    applyRowClass: function(record, rowIndex, p, ds) {
        if (this.showPreview) {
            var xf = Ext.util.Format;
            p.body = '
' + xf.ellipsis(xf.stripTags(record.data.description), 200) + '
';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    },

    formatDate : function(date) {
        if (!date) {
            return '';
        }
        var now = new Date();
        var d = now.clearTime(true);
        var notime = date.clearTime(true).getTime();
        if (notime == d.getTime()) {
            return 'Today ' + date.dateFormat('g:i a');
        }
        d = d.add('d', -6);
        if (d.getTime() <= notime) {
            return date.dateFormat('D g:i a');
        }
        return date.dateFormat('n/j g:i a');
    },

    formatTitle: function(value, p, record) {
        return String.format(
                '
{0}{1}
',
                value, record.data.author, record.id, record.data.forumid
                );
    }
});

Ext.reg('appfeedgrid', FeedGrid);


The source code

FeedPanel = function() {
    FeedPanel.superclass.constructor.call(this, {
        id:'feed-tree',
        region:'west',
        title:'Feeds',
        split:true,
        width: 225,
        minSize: 175,
        maxSize: 400,
        collapsible: true,
        margins:'0 0 5 5',
        cmargins:'0 5 5 5',
        rootVisible:false,
        lines:false,
        autoScroll:true,
        root: new Ext.tree.TreeNode('My Feeds'),
        collapseFirst:false,
        tbar: [{
            iconCls:'add-feed',
            text:'Add Feed',
            handler: this.showWindow,
            scope: this
        },{
            id:'delete',
            iconCls:'delete-icon',
            text:'Remove',
            handler: function(){
                var s = this.getSelectionModel().getSelectedNode();
                if(s){
                    this.removeFeed(s.attributes.url);
                }
            },
            scope: this
        }]
    });

    this.feeds = this.root.appendChild(
        new Ext.tree.TreeNode({
            text:'My Feeds',
            cls:'feeds-node',
            expanded:true
        })
    );

    this.getSelectionModel().on({
        'beforeselect' : function(sm, node){
             return node.isLeaf();
        },
        'selectionchange' : function(sm, node){
            if(node){
                this.fireEvent('feedselect', node.attributes);
            }
            this.getTopToolbar().items.get('delete').setDisabled(!node);
        },
        scope:this
    });

    this.addEvents({feedselect:true});

    this.on('contextmenu', this.onContextMenu, this);
};

Ext.extend(FeedPanel, Ext.tree.TreePanel, {

    onContextMenu : function(node, e){
        if(!this.menu){ // create context menu on first right click
            this.menu = new Ext.menu.Menu({
                id:'feeds-ctx',
                items: [{
                    id:'load',
                    iconCls:'load-icon',
                    text:'Load Feed',
                    scope: this,
                    handler:function(){
                        this.ctxNode.select();
                    }
                },{
                    text:'Remove',
                    iconCls:'delete-icon',
                    scope: this,
                    handler:function(){
                        this.ctxNode.ui.removeClass('x-node-ctx');
                        this.removeFeed(this.ctxNode.attributes.url);
                        this.ctxNode = null;
                    }
                },'-',{
                    iconCls:'add-feed',
                    text:'Add Feed',
                    handler: this.showWindow,
                    scope: this
                }]
            });
            this.menu.on('hide', this.onContextHide, this);
        }
        if(this.ctxNode){
            this.ctxNode.ui.removeClass('x-node-ctx');
            this.ctxNode = null;
        }
        if(node.isLeaf()){
            this.ctxNode = node;
            this.ctxNode.ui.addClass('x-node-ctx');
            this.menu.items.get('load').setDisabled(node.isSelected());
            this.menu.showAt(e.getXY());
        }
    },

    onContextHide : function(){
        if(this.ctxNode){
            this.ctxNode.ui.removeClass('x-node-ctx');
            this.ctxNode = null;
        }
    },

    showWindow : function(btn){
        if(!this.win){
            this.win = new FeedWindow();
            this.win.on('validfeed', this.addFeed, this);
        }
        this.win.show(btn);
    },

    selectFeed: function(url){
        this.getNodeById(url).select();
    },

    removeFeed: function(url){
        var node = this.getNodeById(url);
        if(node){
            node.unselect();
            Ext.fly(node.ui.elNode).ghost('l', {
                callback: node.remove, scope: node, duration: .4
            });
        }
    },

    addFeed : function(attrs, inactive, preventAnim){
        var exists = this.getNodeById(attrs.url);
        if(exists){
            if(!inactive){
                exists.select();
                exists.ui.highlight();
            }
            return;
        }
        Ext.apply(attrs, {
            iconCls: 'feed-icon',
            leaf:true,
            cls:'feed',
            id: attrs.url
        });
        var node = new Ext.tree.TreeNode(attrs);
        this.feeds.appendChild(node);
        if(!inactive){
            if(!preventAnim){
                Ext.fly(node.ui.elNode).slideIn('l', {
                    callback: node.select, scope: node, duration: .4
                });
            }else{
                node.select();
            }
        }
        return node;
    },

    // prevent the default context menu when you miss the node
    afterRender : function(){
        FeedPanel.superclass.afterRender.call(this);
        this.el.on('contextmenu', function(e){
            e.preventDefault();
        });
    }
});

Ext.reg('appfeedpanel', FeedPanel);


The source code

FeedViewer = {};

Ext.onReady(function(){
    Ext.QuickTips.init();

    Ext.state.Manager.setProvider(new Ext.state.SessionProvider({state: Ext.appState}));

    var tpl = Ext.Template.from('preview-tpl', {
        compiled:true,
        getBody : function(v, all){
            return Ext.util.Format.stripScripts(v || all.description);
        }
    });
    FeedViewer.getTemplate = function(){
        return tpl;
    }

    var feeds = new FeedPanel();
    var mainPanel = new MainPanel();

    feeds.on('feedselect', function(feed){
        mainPanel.loadFeed(feed);
    });

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            new Ext.BoxComponent({ // raw element
                region:'north',
                el: 'header',
                height:32
            }),
            feeds,
            mainPanel
         ]
    });

    // add some default feeds
    feeds.addFeed({
        url:'http://feeds.feedburner.com/extblog',
        text: 'ExtJS.com Blog'
    }, false, true);

    feeds.addFeed({
        url:'http://extjs.com/forum/external.php?type=RSS2',
        text: 'ExtJS.com Forums'
    }, true);

    feeds.addFeed({
        url:'http://feeds.feedburner.com/ajaxian',
        text: 'Ajaxian'
    }, true);

    Ext.get('header').on('click', function() {
        viewport.focus();
    });

    feeds.focus();
});

// This is a custom event handler passed to preview panels so link open in a new windw
FeedViewer.LinkInterceptor = {
    render: function(p){
        p.body.on({
            'mousedown': function(e, t){ // try to intercept the easy way
                t.target = '_blank';
            },
            'click': function(e, t){ // if they tab + enter a link, need to do it old fashioned way
                if(String(t.target).toLowerCase() != '_blank'){
                    e.stopEvent();
                    window.open(t.href);
                }
            },
            delegate:'a'
        });
    }
};


The source code

FeedWindow = function() {
    this.feedUrl = new Ext.form.ComboBox({
        id: 'feed-url',
        fieldLabel: 'Enter the URL of the feed to add',
        emptyText: 'http://example.com/blog/feed',
        width: 450,
        validationEvent: false,
        validateOnBlur: false,
        msgTarget: 'under',
        triggerAction: 'all',
        displayField: 'url',
        mode: 'local',

        listeners:{
            valid: this.syncShadow,
            invalid: this.syncShadow,
            scope: this
        },
        tpl: new Ext.XTemplate(
                '
',
                '{url}{text}',
                '
',
                '
'),
        store: new Ext.data.ArrayStore({
            fields: ['url', 'text'],
            data : this.defaultFeeds
        })
    });

    this.form = new Ext.FormPanel({
        labelAlign:'top',
        items:this.feedUrl,
        border: false,
        bodyStyle:'background:transparent;padding:10px;'
    });

    FeedWindow.superclass.constructor.call(this, {
        title: 'Add Feed',
        iconCls: 'feed-icon',
        id: 'add-feed-win',
        autoHeight: true,
        width: 500,
        resizable: false,
        plain:true,
        modal: true,
        y: 100,
        autoScroll: true,
        closeAction: 'hide',

        buttons:[{
            text: 'Add Feed!',
            handler: this.onAdd,
            scope: this
        },{
            text: 'Cancel',
            handler: this.hide.createDelegate(this, [])
        }],

        items: this.form
    });

    this.addEvents({add:true});
}

Ext.extend(FeedWindow, Ext.Window, {
    defaultFeeds : [
        ['http://www.divergingpath.com/rss.cfm?mode=full', 'Aaron Conran\'s Blog'],
        ['http://feeds.yuiblog.com/YahooUserInterfaceBlog',  'Yahoo! UI Blog'],
        ['http://feeds.feedburner.com/jquery/', 'jQuery Blog'],
        ['http://sports.yahoo.com/nba/rss.xml', 'NBA News'],
        ['http://feeds.dzone.com/dzone/frontpage', 'DZone.com']
    ],

    show : function(){
        if(this.rendered){
            this.feedUrl.setValue('');
        }
        FeedWindow.superclass.show.apply(this, arguments);
    },

    onAdd: function() {
        this.el.mask('Validating Feed...', 'x-mask-loading');
        var url = this.feedUrl.getValue();
        Ext.Ajax.request({
            url: 'feed-proxy.php',
            params: {feed: url},
            success: this.validateFeed,
            failure: this.markInvalid,
            scope: this,
            feedUrl: url
        });
    },

    markInvalid : function(){
        this.feedUrl.markInvalid('The URL specified is not a valid RSS2 feed.');
        this.el.unmask();
    },

    validateFeed : function(response, options){
        var dq = Ext.DomQuery;
        var url = options.feedUrl;

        try{
            var xml = response.responseXML;
            var channel = xml.getElementsByTagName('channel')[0];
            if(channel){
                var text = dq.selectValue('title', channel, url);
                var description = dq.selectValue('description', channel, 'No description available.');
                this.el.unmask();
                this.hide();

                return this.fireEvent('validfeed', {
                    url: url,
                    text: text,
                    description: description
                });
            }
        }catch(e){
        }
        this.markInvalid();
    }
});


The source code

// A DropZone which cooperates with DragZones whose dragData contains
// a "field" property representing a form Field. Fields may be dropped onto
// grid data cells containing a matching data type.
Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, {
    constructor: function(){},

//  Call the DropZone constructor using the View's scrolling element
//  only after the grid has been rendered.
    init: function(grid) {
        if (grid.rendered) {
            this.grid = grid;
            this.view = grid.getView();
            this.store = grid.getStore();
            Ext.ux.CellFieldDropZone.superclass.constructor.call(this, this.view.scroller);
        } else {
            grid.on('render', this.init, this);
        }
    },

//  Scroll the main configured Element when we drag close to the edge
    containerScroll: true,

    getTargetFromEvent: function(e) {
//      Ascertain whether the mousemove is within a grid cell
        var t = e.getTarget(this.view.cellSelector);
        if (t) {

//          We *are* within a grid cell, so ask the View exactly which one,
//          Extract data from the Model to create a target object for
//          processing in subsequent onNodeXXXX methods. Note that the target does
//          not have to be a DOM element. It can be whatever the noNodeXXX methods are
//          programmed to expect.
            var rowIndex = this.view.findRowIndex(t);
            var columnIndex = this.view.findCellIndex(t);
            if ((rowIndex !== false) && (columnIndex !== false)) {
                return {
                    node: t,
                    record: this.store.getAt(rowIndex),
                    fieldName: this.grid.getColumnModel().getDataIndex(columnIndex)
                }
            }
        }
    },

//  On Node enter, see if it is valid for us to drop the field on that type of column.
    onNodeEnter: function(target, dd, e, dragData) {
        delete this.dropOK;
        if (!target) {
            return;
        }

//      Check that a field is being dragged.
        var f = dragData.field;
        if (!f) {
            return;
        }

//      Check whether the data type of the column being dropped on accepts the
//      dragged field type. If so, set dropOK flag, and highlight the target node.
        var type = target.record.fields.get(target.fieldName).type;
        switch (type) {
            case 'float':
            case 'int':
                if (!f.isXType('numberfield')) {
                    return;
                }
                break;
            case 'date':
                if (!f.isXType('datefield')) {
                    return;
                }
                break;
            case 'boolean':
                if (!f.isXType('checkbox')) {
                    return;
                }
        }
        this.dropOK = true;
        Ext.fly(target.node).addClass('x-drop-target-active');
    },

//  Return the class name to add to the drag proxy. This provides a visual indication
//  of drop allowed or not allowed.
    onNodeOver: function(target, dd, e, dragData) {
        return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
    },

//   nhighlight the target node.
    onNodeOut: function(target, dd, e, dragData) {
        Ext.fly(target.node).removeClass('x-drop-target-active');
    },

//  Process the drop event if we have previously ascertained that a drop is OK.
    onNodeDrop: function(target, dd, e, dragData) {
        if (this.dropOK) {
            target.record.set(target.fieldName, dragData.field.getValue());
            return true;
        }
    }
});

//  A class which makes Fields within a Panel draggable.
//  the dragData delivered to a coooperating DropZone's methods contains
//  the dragged Field in the property "field".
Ext.ux.PanelFieldDragZone = Ext.extend(Ext.dd.DragZone, {
    constructor: function(){},

//  Call the DRagZone's constructor. The Panel must have been rendered.
    init: function(panel) {
        if (panel.nodeType) {
            Ext.ux.PanelFieldDragZone.superclass.init.apply(this, arguments);
        } else {
            if (panel.rendered) {
                Ext.ux.PanelFieldDragZone.superclass.constructor.call(this, panel.getEl());
                var i = Ext.fly(panel.getEl()).select('input');
                i.unselectable();
            } else {
                panel.on('afterlayout', this.init, this, {single: true});
            }
        }
    },

    scroll: false,

//  On mousedown, we ascertain whether it is on one of our draggable Fields.
//  If so, we collect data about the draggable object, and return a drag data
//  object which contains our own data, plus a "ddel" property which is a DOM
//  node which provides a "view" of the dragged data.
    getDragData: function(e) {
        var t = e.getTarget('input');
        if (t) {
            e.stopEvent();

//          Ugly code to "detach" the drag gesture from the input field.
//          Without this, Opera never changes the mouseover target from the input field
//          even when dragging outside of the field - it just keeps selecting.
            if (Ext.isOpera) {
                Ext.fly(t).on('mousemove', function(e1){
                    t.style.visibility = 'hidden';
                    (function(){
                        t.style.visibility = '';
                    }).defer(1);
                }, null, {single:true});
            }

//          Get the data we are dragging: the Field
//          create a ddel for the drag proxy to display
            var f = Ext.getCmp(t.id);
            var d = document.createElement('div');
            d.className = 'x-form-text';
            d.appendChild(document.createTextNode(t.value));
            Ext.fly(d).setWidth(f.getEl().getWidth());
            return {
                field: f,
                ddel: d
            };
        }
    },

//  The coordinates to slide the drag proxy back to on failed drop.
    getRepairXY: function() {
        return this.dragData.field.getEl().getXY();
    }
});

Ext.onReady(function(){

    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'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '' + val + '';
        }else if(val < 0){
            return '' + val + '';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '' + val + '%';
        }else if(val < 0){
            return '' + val + '%';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.ArrayStore({
        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);

    var helpWindow = new Ext.Window({
        title: 'Source code',
        width: 920,
        height: 500,
        closeAction: 'hide',
        bodyCfg: {tag: 'textarea', readonly: true},
        bodyStyle: {
            backgroundColor: 'white',
            margin: '0px',
            border: '0px none'
        },
        listeners: {
            render: function(w) {
                Ext.Ajax.request({
                    url: 'field-to-grid-dd.js',
                    success: function(r) {
                        w.body.dom.value = r.responseText;
                    }
                });
            }
        }
    });

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        plugins: new Ext.ux.CellFieldDropZone(),
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Array Grid',
        bbar: new Ext.PagingToolbar({
            buttons: [{
                text: 'View Source',
                handler: function() {
                    helpWindow.show();
                }
            }],
            store: store,
            pageSize: 25
        })
    });

    grid.render('grid-example');
    grid.getSelectionModel().selectFirstRow();

    var f = new Ext.Panel({
        frame: true,
        layout: 'form',
        width: 600,
        plugins: new Ext.ux.PanelFieldDragZone(),
        style: {
            'margin-top': '10px'
        },
        labelWidth: 150,
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Drag this text',
            value: 'test'
        },{
            xtype: 'numberfield',
            fieldLabel: 'Drag this number',
            value: '1.2'
        },{
            xtype: 'datefield',
            fieldLabel: 'Drag this date',
            value: new Date()
        }],
        renderTo: Ext.getBody()
    });
});


The source code

/**
 * @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,  {

/**
     * @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 {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 error text should display.  Should be one of the following values
     * (defaults to 'qtip'):
     *
Value         Description
-----------   ----------------------------------------------------------------------
qtip          Display a quick tip when the user hovers over the field
title         Display a default browser title attribute popup
under         Add a block div beneath the field containing the error text
side          Add an error icon to the right of the field with a popup on hover
[element id]  Add the error text 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,

    // private
    isFormField : true,

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

        var type = this.el.dom.type;
        if(type){
            if(type == 'password'){
                type = 'text';
            }
            this.el.addClass('x-form-'+type);
        }
        if(this.readOnly){
            this.el.dom.readOnly = true;
        }
        if(this.tabIndex !== undefined){
            this.el.dom.setAttribute('tabIndex', this.tabIndex);
        }

        this.el.addClass([this.fieldClass, this.cls]);
    },

    // private
    getItemCt : function(){
        return this.el.up('.x-form-item', 4);
    },

    // 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);
    },

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

        // fix weird FF/Win editor issue when changing OS window focus
        var o = this.inEditor && Ext.isWindows && Ext.isGecko ? {buffer:10} : null;
        this.mon(this.el, 'blur', this.onBlur, this, o);
    },

    // private
    onFocus : function(){
        if(this.focusClass){
            this.el.addClass(this.focusClass);
        }
        if(!this.hasFocus){
            this.hasFocus = true;
            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);
    },

/**
     * Returns whether or not the field value is currently valid
     * @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;
    },

    // protected - should be overridden by subclasses if necessary to prepare raw values for validation
    processValue : function(value){
        return value;
    },

    // private
    // Subclasses should provide the validation implementation by overriding this
    validateValue : function(value){
        return true;
    },

/**
     * Mark this field as invalid, using {@link #msgTarget} to determine how to display the error and
     * applying {@link #invalidClass} to the field's element.
     * @param {String} msg (optional) The validation message (defaults to {@link #invalidText})
     */
    markInvalid : function(msg){
        if(!this.rendered || this.preventMark){ // not rendered
            return;
        }
        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.fireEvent('invalid', this, msg);
    },

/**
     * Clear any invalid styles/messages for this field
     */
    clearInvalid : function(){
        if(!this.rendered || this.preventMark){ // not rendered
            return;
        }
        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.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
    },

    // private
    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.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(''));
    },

    // private
    adjustSize : function(w, h){
        var s = Ext.form.Field.superclass.adjustSize.call(this, w, h);
        s.width = this.adjustWidth(this.el.dom.tagName, s.width);
        if(this.offsetCt){
            var ct = this.getItemCt();
            s.width -= ct.getFrameWidth('lr');
            s.height -= ct.getFrameWidth('tb');
        }
        return s;
    },

    // private
    adjustWidth : function(tag, w){
        if(typeof w == 'number' && (Ext.isIE && (Ext.isIE6 || !Ext.isStrict)) && /input|textarea/i.test(tag) && !this.inEditor){
            return w - 3;
        }
        return w;
    }

/**
     * @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.errorEl.setWidth(elp.getWidth(true)-20);
            }
            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();
                if(!elp){ // field has no container el
                    field.el.dom.title = msg;
                    return;
                }
                field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
            }
            field.alignErrorIcon();
            field.errorIcon.dom.qtip = msg;
            field.errorIcon.dom.qclass = 'x-form-invalid-tip';
            field.errorIcon.show();
            field.on('resize', field.alignErrorIcon, field);
        },
        clear: function(field){
            field.el.removeClass(field.invalidClass);
            if(field.errorIcon){
                field.errorIcon.dom.qtip = '';
                field.errorIcon.hide();
                field.un('resize', field.alignErrorIcon, field);
            }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

/**
 * @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 = 'x-fieldset-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 {String} tabTip
     * @hide
     */

/**
     * @cfg {Boolean} titleCollapse
     * @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

Ext.onReady(function(){

    Ext.QuickTips.init();

    var msg = function(title, msg){
        Ext.Msg.show({
            title: title,
            msg: msg,
            minWidth: 200,
            modal: true,
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        });
    };

    var fibasic = new Ext.ux.form.FileUploadField({
        renderTo: 'fi-basic',
        width: 400
    });

    new Ext.Button({
        text: 'Get File Path',
        renderTo: 'fi-basic-btn',
        handler: function(){
            var v = fibasic.getValue();
            msg('Selected File', v && v != '' ? v : 'None');
        }
    });

    var fbutton = new Ext.ux.form.FileUploadField({
        renderTo: 'fi-button',
        buttonOnly: true,
        listeners: {
            'fileselected': function(fb, v){
                var el = Ext.fly('fi-button-msg');
                el.update('Selected: '+v);
                if(!el.isVisible()){
                    el.slideIn('t', {
                        duration: .2,
                        easing: 'easeIn',
                        callback: function(){
                            el.highlight();
                        }
                    });
                }else{
                    el.highlight();
                }
            }
        }
    });

    var fp = new Ext.FormPanel({
        renderTo: 'fi-form',
        fileUpload: true,
        width: 500,
        frame: true,
        title: 'File Upload Form',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Name'
        },{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'photo-path',
            buttonText: '',
            buttonCfg: {
                iconCls: 'upload-icon'
            }
        }],
        buttons: [{
            text: 'Save',
            handler: function(){
                if(fp.getForm().isValid()){
                    fp.getForm().submit({
                        url: 'file-upload.php',
                        waitMsg: 'Uploading your photo...',
                        success: function(fp, o){
                            msg('Success', 'Processed file "'+o.result.file+'" on the server');
                        }
                    });
                }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });

});


The source code

/**
 * @class Ext.air.FileProvider
 * @extends Ext.state.Provider
 *
 * An Ext state provider implementation for Adobe AIR that stores state in the application
 * storage directory.
 *
 * @constructor
 * @param {Object} config
 */
Ext.air.FileProvider = function(config){
    Ext.air.FileProvider.superclass.constructor.call(this);

    this.defaultState = {
        mainWindow : {
            width:780,
            height:580,
            x:10,
            y:10
        }
    };

    Ext.apply(this, config);
    this.state = this.readState();

    var provider = this;
    air.NativeApplication.nativeApplication.addEventListener('exiting', function(){
        provider.saveState();
    });
};

Ext.extend(Ext.air.FileProvider, Ext.state.Provider, {

/**
     * @cfg {String} file
     * The file name to use for the state file in the application storage directory
     */
    file: 'extstate.data',

/**
     * @cfg {Object} defaultState
     * The default state if no state file can be found
     */
    // private
    readState : function(){
        var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
        if(!stateFile.exists){
            return this.defaultState || {};
        }

        var stream = new air.FileStream();
        stream.open(stateFile, air.FileMode.READ);

        var stateData = stream.readObject();
        stream.close();

        return stateData || this.defaultState || {};
    },

    // private
    saveState : function(name, value){
        var stateFile = air.File.applicationStorageDirectory.resolvePath(this.file);
        var stream = new air.FileStream();
        stream.open(stateFile, air.FileMode.WRITE);
        stream.writeObject(this.state);
        stream.close();
    }
});


The source code

Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.FileUploadField
 * @extends Ext.form.TextField
 * Creates a file upload field.
 * @xtype fileuploadfield
 */
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {

/**
     * @cfg {String} buttonText The button text to display on the upload button (defaults to
     * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
     * value will be used instead if available.
     */
    buttonText: 'Browse...',

/**
     * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
     * text field (defaults to false).  If true, all inherited TextField members will still be available.
     */
    buttonOnly: false,

/**
     * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
     * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
     */
    buttonOffset: 3,

/**
     * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
     */

    // private
    readOnly: true,

/**
     * @hide
     * @method autoSize
     */
    autoSize: Ext.emptyFn,

    // private
    initComponent: function(){
        Ext.ux.form.FileUploadField.superclass.initComponent.call(this);

        this.addEvents(

/**
             * @event fileselected
             * Fires when the underlying file input field's value has changed from the user
             * selecting a new file from the system file selection dialog.
             * @param {Ext.ux.form.FileUploadField} this
             * @param {String} value The file value returned by the underlying file input field
             */
            'fileselected'
        );
    },

    // private
    onRender : function(ct, position){
        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);

        this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
        this.el.addClass('x-form-file-text');
        this.el.dom.removeAttribute('name');

        this.fileInput = this.wrap.createChild({
            id: this.getFileInputId(),
            name: this.name||this.getId(),
            cls: 'x-form-file',
            tag: 'input',
            type: 'file',
            size: 1
        });

        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
            text: this.buttonText
        });
        this.button = new Ext.Button(Ext.apply(btnCfg, {
            renderTo: this.wrap,
            cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
        }));

        if(this.buttonOnly){
            this.el.hide();
            this.wrap.setWidth(this.button.getEl().getWidth());
        }

        this.fileInput.on('change', function(){
            var v = this.fileInput.dom.value;
            this.setValue(v);
            this.fireEvent('fileselected', this, v);
        }, this);
    },

    // private
    getFileInputId: function(){
        return this.id + '-file';
    },

    // private
    onResize : function(w, h){
        Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);

        this.wrap.setWidth(w);

        if(!this.buttonOnly){
            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
            this.el.setWidth(w);
        }
    },

    // private
    onDestroy: function(){
        Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
        Ext.destroy(this.fileInput, this.button, this.wrap);
    },

    // private
    preFocus : Ext.emptyFn,

    // private
    getResizeEl : function(){
        return this.wrap;
    },

    // private
    getPositionEl : function(){
        return this.wrap;
    },

    // private
    alignErrorIcon : function(){
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    }

});

Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;


The source code

/**
 * @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,

    // private
    onLayout : function(ct, target){
        Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
        if(!this.container.collapsed){
            var sz = (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getViewSize() : target.getStyleSize();
            this.setItemSize(this.activeItem || ct.items.itemAt(0), sz);
        }
    },

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

/**
 * @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.45'.
     */
    flashVersion : '9.0.45',

/**
     * @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 {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('initialize');
    },

    onRender : function(){
        Ext.FlashComponent.superclass.onRender.apply(this, arguments);

        var params = {
            allowScriptAccess: 'always',
            bgcolor: this.backgroundColor,
            wmode: this.wmode
        }, vars = {
            allowedDomain: document.location.hostname,
            elementID: this.getId(),
            eventHandler: 'Ext.FlashEventProxy.onEvent'
        };

        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

(function(){
Ext.ns('Ext.a11y');

Ext.a11y.Frame = Ext.extend(Object, {
    initialized: false,

    constructor: function(size, color){
        this.setSize(size || 1);
        this.setColor(color || '15428B');
    },

    init: function(){
        if (!this.initialized) {
            this.sides = [];

            var s, i;

            this.ct = Ext.DomHelper.append(document.body, {
                cls: 'x-a11y-focusframe'
            }, true);

            for (i = 0; i < 4; i++) {
                s = Ext.DomHelper.append(this.ct, {
                    cls: 'x-a11y-focusframe-side',
                    style: 'background-color: #' + this.color
                }, true);
                s.visibilityMode = Ext.Element.DISPLAY;
                this.sides.push(s);
            }

            this.frameTask = new Ext.util.DelayedTask(function(el){
                var newEl = Ext.get(el);
                if (newEl != this.curEl) {
                    var w = newEl.getWidth();
                    var h = newEl.getHeight();
                    this.sides[0].show().setSize(w, this.size).anchorTo(el, 'tl', [0, -1]);
                    this.sides[2].show().setSize(w, this.size).anchorTo(el, 'bl', [0, -1]);
                    this.sides[1].show().setSize(this.size, h).anchorTo(el, 'tr', [-1, 0]);
                    this.sides[3].show().setSize(this.size, h).anchorTo(el, 'tl', [-1, 0]);
                    this.curEl = newEl;
                }
            }, this);

            this.unframeTask = new Ext.util.DelayedTask(function(){
                if (this.initialized) {
                    this.sides[0].hide();
                    this.sides[1].hide();
                    this.sides[2].hide();
                    this.sides[3].hide();
                    this.curEl = null;
                }
            }, this);
            this.initialized = true;
        }
    },

    frame: function(el){
        this.init();
        this.unframeTask.cancel();
        this.frameTask.delay(2, false, false, [el]);
    },

    unframe: function(){
        this.init();
        this.unframeTask.delay(2);
    },

    setSize: function(size){
        this.size = size;
    },

    setColor: function(color){
        this.color = color;
    }
});

Ext.a11y.FocusFrame = new Ext.a11y.Frame(2, '15428B');
Ext.a11y.RelayFrame = new Ext.a11y.Frame(1, '6B8CBF');

Ext.a11y.Focusable = Ext.extend(Ext.util.Observable, {
    constructor: function(el, relayTo, noFrame, frameEl){
        Ext.a11y.Focusable.superclass.constructor.call(this);

        this.addEvents('focus', 'blur', 'left', 'right', 'up', 'down', 'esc', 'enter', 'space');

        if (el instanceof Ext.Component) {
            this.el = el.el;
            this.setComponent(el);
        }
        else {
            this.el = Ext.get(el);
            this.setComponent(null);
        }

        this.setRelayTo(relayTo)
        this.setNoFrame(noFrame);
        this.setFrameEl(frameEl);

        this.init();

        Ext.a11y.FocusMgr.register(this);
    },

    init: function(){
        this.el.dom.tabIndex = '1';
        this.el.addClass('x-a11y-focusable');
        this.el.on({
            focus: this.onFocus,
            blur: this.onBlur,
            keydown: this.onKeyDown,
            scope: this
        });
    },

    setRelayTo: function(relayTo){
        this.relayTo = relayTo ? Ext.a11y.FocusMgr.get(relayTo) : null;
    },

    setNoFrame: function(noFrame){
        this.noFrame = (noFrame === true) ? true : false;
    },

    setFrameEl: function(frameEl){
        this.frameEl = frameEl && Ext.get(frameEl) || this.el;
    },

    setComponent: function(cmp){
        this.component = cmp || null;
    },

    onKeyDown: function(e, t){
        var k = e.getKey(), SK = Ext.a11y.Focusable.SpecialKeys, ret, tf;

        tf = (t !== this.el.dom) ? Ext.a11y.FocusMgr.get(t, true) : this;
        if (!tf) {
            // this can happen when you are on a focused item within a panel body
            // that is not a Ext.a11y.Focusable
            tf = Ext.a11y.FocusMgr.get(Ext.fly(t).parent('.x-a11y-focusable'));
        }

        if (SK[k] !== undefined) {
            ret = this.fireEvent(SK[k], e, t, tf, this);
        }
        if (ret === false || this.fireEvent('keydown', e, t, tf, this) === false) {
            e.stopEvent();
        }
    },

    focus: function(){
        this.el.dom.focus();
    },

    blur: function(){
        this.el.dom.blur();
    },

    onFocus: function(e, t){
        this.el.addClass('x-a11y-focused');
        if (this.relayTo) {
            this.relayTo.el.addClass('x-a11y-focused-relay');
            if (!this.relayTo.noFrame) {
                Ext.a11y.FocusFrame.frame(this.relayTo.frameEl);
            }
            if (!this.noFrame) {
                Ext.a11y.RelayFrame.frame(this.frameEl);
            }
        }
        else {
            if (!this.noFrame) {
                Ext.a11y.FocusFrame.frame(this.frameEl);
            }
        }

        this.fireEvent('focus', e, t, this);
    },

    onBlur: function(e, t){
        if (this.relayTo) {
            this.relayTo.el.removeClass('x-a11y-focused-relay');
            Ext.a11y.RelayFrame.unframe();
        }
        this.el.removeClass('x-a11y-focused');
        Ext.a11y.FocusFrame.unframe();
        this.fireEvent('blur', e, t, this);
    },

    destroy: function(){
        this.el.un('keydown', this.onKeyDown);
        this.el.un('focus', this.onFocus);
        this.el.un('blur', this.onBlur);
        this.el.removeClass('x-a11y-focusable');
        this.el.removeClass('x-a11y-focused');
        if (this.relayTo) {
            this.relayTo.el.removeClass('x-a11y-focused-relay');
        }
    }
});

Ext.a11y.FocusItem = Ext.extend(Object, {
    constructor: function(el, enableTabbing){
        Ext.a11y.FocusItem.superclass.constructor.call(this);

        this.el = Ext.get(el);
        this.fi = new Ext.a11y.Focusable(el);
        this.fi.setComponent(this);

        this.fi.on('tab', this.onTab, this);

        this.enableTabbing = enableTabbing === true ? true : false;
    },

    getEnterItem: function(){
        if (this.enableTabbing) {
            var items = this.getFocusItems();
            if (items && items.length) {
                return items[0];
            }
        }
    },

    getFocusItems: function(){
        if (this.enableTabbing) {
            return this.el.query('a, button, input, select');
        }
        return null;
    },

    onTab: function(e, t){
        var items = this.getFocusItems(), i;

        if (items && items.length && (i = items.indexOf(t)) !== -1) {
            if (e.shiftKey && i > 0) {
                e.stopEvent();
                items[i - 1].focus();
                Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
                return;
            }
            else
                if (!e.shiftKey && i < items.length - 1) {
                    e.stopEvent();
                    items[i + 1].focus();
                    Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
                    return;
                }
        }
    },

    focus: function(){
        if (this.enableTabbing) {
            var items = this.getFocusItems();
            if (items && items.length) {
                items[0].focus();
                Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
                return;
            }
        }
        this.fi.focus();
    },

    blur: function(){
        this.fi.blur();
    }
});

Ext.a11y.FocusMgr = function(){
    var all = new Ext.util.MixedCollection();

    return {
        register: function(f){
            all.add(f.el && Ext.id(f.el), f);
        },

        unregister: function(f){
            all.remove(f);
        },

        get: function(el, noCreate){
            return all.get(Ext.id(el)) || (noCreate ? false : new Ext.a11y.Focusable(el));
        },

        all: all
    }
}();

Ext.a11y.Focusable.SpecialKeys = {};
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.LEFT] = 'left';
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.RIGHT] = 'right';
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.DOWN] = 'down';
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.UP] = 'up';
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ESC] = 'esc';
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ENTER] = 'enter';
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.SPACE] = 'space';
Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.TAB] = 'tab';

// we use the new observeClass method to fire our new initFocus method on components
Ext.util.Observable.observeClass(Ext.Component);
Ext.Component.on('render', function(cmp){
    cmp.initFocus();
    cmp.initARIA();
});
Ext.override(Ext.Component, {
    initFocus: Ext.emptyFn,
    initARIA: Ext.emptyFn
});

Ext.override(Ext.Container, {
    isFocusable: true,
    noFocus: false,

    // private
    initFocus: function(){
        if (!this.fi && !this.noFocus) {
            this.fi = new Ext.a11y.Focusable(this);
        }
        this.mon(this.fi, {
            focus: this.onFocus,
            blur: this.onBlur,
            tab: this.onTab,
            enter: this.onEnter,
            esc: this.onEsc,
            scope: this
        });

        if (this.hidden) {
            this.isFocusable = false;
        }

        this.on('show', function(){
            this.isFocusable = true;
        }, this);
        this.on('hide', function(){
            this.isFocusable = false;
        }, this);
    },

    focus: function(){
        this.fi.focus();
    },

    blur: function(){
        this.fi.blur();
    },

    enter: function(){
        var eitem = this.getEnterItem();
        if (eitem) {
            eitem.focus();
        }
    },

    onFocus: Ext.emptyFn,
    onBlur: Ext.emptyFn,

    onTab: function(e, t, tf){
        var rf = tf.relayTo || tf;
        if (rf.component && rf.component !== this) {
            e.stopEvent();
            var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);
            item.focus();
        }
    },

    onEnter: function(e, t, tf){
        // check to see if enter is pressed while "on" the panel
        if (tf.component && tf.component === this) {
            e.stopEvent();
            this.enter();
        }
        e.stopPropagation();
    },

    onEsc: function(e, t){
        e.preventDefault();

        // check to see if esc is pressed while "inside" the panel
        // or while "on" the panel
        if (t === this.el.dom) {
            // "on" the panel, check if this panel has an owner panel and focus that
            // we dont stop the event in this case so that this same check will be
            // done for this ownerCt
            if (this.ownerCt) {
                this.ownerCt.focus();
            }
        }
        else {
            // we were inside the panel when esc was pressed,
            // so go back "on" the panel
            if (this.ownerCt && this.ownerCt.isFocusable) {
                var si = this.ownerCt.getFocusItems();

                if (si && si.getCount() > 1) {
                    e.stopEvent();
                }
            }
            this.focus();
        }
    },

    getFocusItems: function(){
        return this.items &&
        this.items.filterBy(function(o){
            return o.isFocusable;
        }) ||
        null;
    },

    getEnterItem: function(){
        var ci = this.getFocusItems(), length = ci ? ci.getCount() : 0;

        if (length === 1) {
            return ci.first().getEnterItem && ci.first().getEnterItem() || ci.first();
        }
        else
            if (length > 1) {
                return ci.first();
            }
    },

    getNextFocus: function(current){
        var items = this.getFocusItems(), next = current, i = items.indexOf(current), length = items.getCount();

        if (i === length - 1) {
            next = items.first();
        }
        else {
            next = items.get(i + 1);
        }
        return next;
    },

    getPreviousFocus: function(current){
        var items = this.getFocusItems(), prev = current, i = items.indexOf(current), length = items.getCount();

        if (i === 0) {
            prev = items.last();
        }
        else {
            prev = items.get(i - 1);
        }
        return prev;
    },

    getFocusable : function() {
        return this.fi;
    }
});

Ext.override(Ext.Panel, {

/**
     * @cfg {Boolean} enableTabbing true to enable tabbing. Default is false.
     */
    getFocusItems: function(){
        // items gets all the items inside the body
        var items = Ext.Panel.superclass.getFocusItems.call(this), bodyFocus = null;

        if (!items) {
            items = new Ext.util.MixedCollection();
            this.bodyFocus = this.bodyFocus || new Ext.a11y.FocusItem(this.body, this.enableTabbing);
            items.add('body', this.bodyFocus);
        }
        // but panels can also have tbar, bbar, fbar
        if (this.tbar && this.topToolbar) {
            items.insert(0, this.topToolbar);
        }
        if (this.bbar && this.bottomToolbar) {
            items.add(this.bottomToolbar);
        }
        if (this.fbar) {
            items.add(this.fbar);
        }

        return items;
    }
});

Ext.override(Ext.TabPanel, {
    // private
    initFocus: function(){
        Ext.TabPanel.superclass.initFocus.call(this);
        this.mon(this.fi, {
            left: this.onLeft,
            right: this.onRight,
            scope: this
        });
    },

    onLeft: function(e){
        if (!this.activeTab) {
            return;
        }
        e.stopEvent();
        var prev = this.items.itemAt(this.items.indexOf(this.activeTab) - 1);
        if (prev) {
            this.setActiveTab(prev);
        }
        return false;
    },

    onRight: function(e){
        if (!this.activeTab) {
            return;
        }
        e.stopEvent();
        var next = this.items.itemAt(this.items.indexOf(this.activeTab) + 1);
        if (next) {
            this.setActiveTab(next);
        }
        return false;
    }
});

Ext.override(Ext.tree.TreeNodeUI, {
    // private
    focus: function(){
        this.node.getOwnerTree().bodyFocus.focus();
    }
});

Ext.override(Ext.tree.TreePanel, {
    // private
    afterRender : function(){
        Ext.tree.TreePanel.superclass.afterRender.call(this);
        this.root.render();
        if(!this.rootVisible){
            this.root.renderChildren();
        }
        this.bodyFocus = new Ext.a11y.FocusItem(this.body.down('.x-tree-root-ct'));
        this.bodyFocus.fi.setFrameEl(this.body);
    }
});

Ext.override(Ext.grid.GridPanel, {
    initFocus: function(){
        Ext.grid.GridPanel.superclass.initFocus.call(this);
        this.bodyFocus = new Ext.a11y.FocusItem(this.view.focusEl);
        this.bodyFocus.fi.setFrameEl(this.body);
    }
});

Ext.override(Ext.Button, {
    isFocusable: true,
    noFocus: false,

    initFocus: function(){
        Ext.Button.superclass.initFocus.call(this);
        this.fi = this.fi || new Ext.a11y.Focusable(this.btnEl, null, null, this.el);
        this.fi.setComponent(this);

        this.mon(this.fi, {
            focus: this.onFocus,
            blur: this.onBlur,
            scope: this
        });

        if (this.menu) {
            this.mon(this.fi, 'down', this.showMenu, this);
            this.on('menuhide', this.focus, this);
        }

        if (this.hidden) {
            this.isFocusable = false;
        }

        this.on('show', function(){
            this.isFocusable = true;
        }, this);
        this.on('hide', function(){
            this.isFocusable = false;
        }, this);
    },

    focus: function(){
        this.fi.focus();
    },

    blur: function(){
        this.fi.blur();
    },

    onFocus: function(){
        if (!this.disabled) {
            this.el.addClass("x-btn-focus");
        }
    },

    onBlur: function(){
        this.el.removeClass("x-btn-focus");
    }
});

Ext.override(Ext.Toolbar, {
    initFocus: function(){
        Ext.Toolbar.superclass.initFocus.call(this);
        this.mon(this.fi, {
            left: this.onLeft,
            right: this.onRight,
            scope: this
        });

        this.on('focus', this.onButtonFocus, this, {
            stopEvent: true
        });
    },

    addItem: function(item){
        Ext.Toolbar.superclass.add.apply(this, arguments);
        if (item.rendered && item.fi !== undefined) {
            item.fi.setRelayTo(this.el);
            this.relayEvents(item.fi, ['focus']);
        }
        else {
            item.on('render', function(){
                if (item.fi !== undefined) {
                    item.fi.setRelayTo(this.el);
                    this.relayEvents(item.fi, ['focus']);
                }
            }, this, {
                single: true
            });
        }
        return item;
    },

    onFocus: function(){
        var items = this.getFocusItems();
        if (items && items.getCount() > 0) {
            if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
                this.lastFocus.focus();
            }
            else {
                items.first().focus();
            }
        }
    },

    onButtonFocus: function(e, t, tf){
        this.lastFocus = tf.component || null;
    },

    onLeft: function(e, t, tf){
        e.stopEvent();
        this.getPreviousFocus(tf.component).focus();
    },

    onRight: function(e, t, tf){
        e.stopEvent();
        this.getNextFocus(tf.component).focus();
    },

    getEnterItem: Ext.emptyFn,
    onTab: Ext.emptyFn,
    onEsc: Ext.emptyFn
});

Ext.override(Ext.menu.BaseItem, {
    initFocus: function(){
        this.fi = new Ext.a11y.Focusable(this, this.parentMenu && this.parentMenu.el || null, true);
    }
});

Ext.override(Ext.menu.Menu, {
    initFocus: function(){
        this.fi = new Ext.a11y.Focusable(this);
        this.focusEl = this.fi;
    }
});

Ext.a11y.WindowMgr = new Ext.WindowGroup();

Ext.apply(Ext.WindowMgr, {
    bringToFront: function(win){
        Ext.a11y.WindowMgr.bringToFront.call(this, win);
        if (win.modal) {
            win.enter();
        }
        else {
            win.focus();
        }
    }
});

Ext.override(Ext.Window, {
    initFocus: function(){
        Ext.Window.superclass.initFocus.call(this);
        this.on('beforehide', function(){
            Ext.a11y.RelayFrame.unframe();
            Ext.a11y.FocusFrame.unframe();
        });
    }
});

Ext.override(Ext.form.Field, {
    isFocusable: true,
    noFocus: false,

    initFocus: function(){
        this.fi = this.fi || new Ext.a11y.Focusable(this, null, true);

        Ext.form.Field.superclass.initFocus.call(this);

        if (this.hidden) {
            this.isFocusable = false;
        }

        this.on('show', function(){
            this.isFocusable = true;
        }, this);
        this.on('hide', function(){
            this.isFocusable = false;
        }, this);
    }
});

Ext.override(Ext.FormPanel, {
    initFocus: function(){
        Ext.FormPanel.superclass.initFocus.call(this);
        this.on('focus', this.onFieldFocus, this, {
            stopEvent: true
        });
    },

    // private
    createForm: function(){
        delete this.initialConfig.listeners;
        var form = new Ext.form.BasicForm(null, this.initialConfig);
        form.afterMethod('add', this.formItemAdd, this);
        return form;
    },

    formItemAdd: function(item){
        item.on('render', function(field){
            field.fi.setRelayTo(this.el);
            this.relayEvents(field.fi, ['focus']);
        }, this, {
            single: true
        });
    },

    onFocus: function(){
        var items = this.getFocusItems();
        if (items && items.getCount() > 0) {
            if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
                this.lastFocus.focus();
            }
            else {
                items.first().focus();
            }
        }
    },

    onFieldFocus: function(e, t, tf){
        this.lastFocus = tf.component || null;
    },

    onTab: function(e, t, tf){
        if (tf.relayTo.component === this) {
            var item = e.shiftKey ? this.getPreviousFocus(tf.component) : this.getNextFocus(tf.component);

            if (item) {
                ev.stopEvent();
                item.focus();
                return;
            }
        }
        Ext.FormPanel.superclass.onTab.apply(this, arguments);
    },

    getNextFocus: function(current){
        var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();

        return (i < length - 1) ? items.get(i + 1) : false;
    },

    getPreviousFocus: function(current){
        var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();

        return (i > 0) ? items.get(i - 1) : false;
    }
});

Ext.override(Ext.Viewport, {
    initFocus: function(){
        Ext.Viewport.superclass.initFocus.apply(this);
        this.mon(Ext.get(document), 'focus', this.focus, this);
        this.mon(Ext.get(document), 'blur', this.blur, this);
        this.fi.setNoFrame(true);
    },

    onTab: function(e, t, tf, f){
        e.stopEvent();

        if (tf === f) {
            items = this.getFocusItems();
            if (items && items.getCount() > 0) {
                items.first().focus();
            }
        }
        else {
            var rf = tf.relayTo || tf;
            var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);
            item.focus();
        }
    }
});

})();


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

//   Define the Grid data and create the Grid
    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'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    var ds = new Ext.data.Store({
        reader: new Ext.data.ArrayReader({}, [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'pctChange', type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},

//          Rating dependent upon performance 0 = best, 2 = worst
            {name: 'rating', type: 'int', convert: function(v, rec) {
                   if (rec[3] < 0) return 2;
                   if (rec[3] < 1) return 1;
                   return 0;
               }
            }
        ])
    });
    ds.loadData(myData);

    // example of custom renderer function
    function italic(value){
        return '' + value + '';
    }

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '' + val + '';
        }else if(val < 0){
            return '' + val + '';
        }
        return val;
    }
    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '' + val + '%';
        }else if(val < 0){
            return '' + val + '%';
        }
        return val;
    }

    // render rating as "A", "B" or "C" depending upon numeric value.
    function rating(v) {
        if (v == 0) return "A"
        if (v == 1) return "B"
        if (v == 2) return "C"
    }

    // the DefaultColumnModel expects this blob to define columns. It can be extended to provide
    // custom or reusable ColumnModels
    var colModel = new Ext.grid.ColumnModel([
        {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
        {header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: "Change", width: 55, sortable: true, renderer: change, dataIndex: 'change'},
        {header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
        {header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: 'rating'}
    ]);

    bd.createChild({tag: 'h2', html: 'Using a Grid with a Form'});

/*
 *    Here is where we create the Form
 */
    var gridForm = new Ext.FormPanel({
        id: 'company-form',
        frame: true,
        labelAlign: 'left',
        title: 'Company data',
        bodyStyle:'padding:5px',
        width: 750,
        layout: 'column',    // Specifies that the items will now be arranged in columns
        items: [{
            columnWidth: 0.60,
            layout: 'fit',
            items: {
                xtype: 'grid',
                ds: ds,
                cm: colModel,
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true,
                    listeners: {
                        rowselect: function(sm, row, rec) {
                            Ext.getCmp("company-form").getForm().loadRecord(rec);
                        }
                    }
                }),
                autoExpandColumn: 'company',
                height: 350,
                title:'Company Data',
                border: true,
                listeners: {
                    render: function(g) {
                        g.getSelectionModel().selectRow(0);
                    },
                    delay: 10 // Allow rows to be rendered.
                }
            }
        },{
            columnWidth: 0.4,
            xtype: 'fieldset',
            labelWidth: 90,
            title:'Company details',
            defaults: {width: 140, border:false},    // Default config options for child items
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: false,
            style: {
                "margin-left": "10px", // when you add custom margin in IE 6...
                "margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"  // you have to adjust for it somewhere else
            },
            items: [{
                fieldLabel: 'Name',
                name: 'company'
            },{
                fieldLabel: 'Price',
                name: 'price'
            },{
                fieldLabel: '% Change',
                name: 'pctChange'
            },{
                xtype: 'datefield',
                fieldLabel: 'Last Updated',
                name: 'lastChange'
            }, {
                xtype: 'panel',
                layout: 'table',
                layoutConfig: {
                    columns: 4
                },
                anchor: '100%',
                defaults: {
                    border: false,
                    layout: 'form',
                    labelWidth: 15,
                    style: {
                        paddingRight: '10px'
                    }
                },

// A radio group: A setValue on any of the following 'radio' inputs using the numeric
// 'rating' field checks the radio instance which has the matching inputValue.
                items: [{
                    cellCls: 'x-form-item',
                    xtype: 'label',
                    text: 'Rating',
                       width: 98
                }, {
                    items: {
                        xtype: 'radio',
                        name: 'rating',
                        inputValue: '0',
                        fieldLabel: 'A'
                    }
                }, {
                    items: {
                        xtype: 'radio',
                        name: 'rating',
                        inputValue: '1',
                        fieldLabel: 'B'
                    }
                }, {
                    items: {
                        xtype: 'radio',
                        name: 'rating',
                        inputValue: '2',
                        fieldLabel: 'C'
                    }
                }]
            }]
        }],
        renderTo: bd
    });

    //  Create Panel view code. Ignore.
    createCodePanel('form-grid.js', 'View code to create this Form');
});


The source code

/**
 * @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);
            }if(c.isFieldWrap){
                Ext.applyIf(c, {
                    labelAlign: c.ownerCt.labelAlign,
                    labelWidth: c.ownerCt.labelWidth,
                    itemCls: c.ownerCt.itemCls
                });
                f.add(c.field);
            }else if(c.doLayout && c != formPanel){
                Ext.applyIf(c, {
                    labelAlign: c.ownerCt.labelAlign,
                    labelWidth: c.ownerCt.labelWidth,
                    itemCls: c.ownerCt.itemCls
                });
                //each check required for check/radio groups.
                if(c.items && c.items.each){
                    c.items.each(fn, this);
                }
            }
        };
        this.items.each(fn, this);
    },

    // 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();
        Ext.FormPanel.superclass.beforeDestroy.call(this);
        /*
         * Clear the items here to prevent them being destroyed again.
         * Don't move this behaviour to BasicForm because it can be used
         * on it's own.
         */
        this.form.items.clear();
        Ext.destroy(this.form);
    },

    // 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);
        this.on('remove', this.onRemove, this);
        this.on('add', this.onAdd, this);
        if(this.monitorValid){ // initialize after render
            this.startMonitoring();
        }
    },

    // private
    onAdd : function(ct, 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) {
            Ext.applyIf(c, {
                labelAlign: c.ownerCt.labelAlign,
                labelWidth: c.ownerCt.labelWidth,
                itemCls: c.ownerCt.itemCls
            });
            this.form.add.apply(this.form, c.findBy(this.isField));
        }
    },

    // private
    onRemove : function(ct, c) {
        // If a single form Field, remove it
        if (this.isField(c)) {
            Ext.destroy(c.container.up('.x-form-item'));
            this.form.remove(c);
        // If a Container, remove any Fields it might contain
        } else if (c.findByType) {
            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

/**
 * @class Ext.util.Format
 * Reusable data formatting functions
 * @singleton
 */
Ext.util.Format = function(){
    var trimRe = /^\s+|\s+$/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);
                    var 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('.');
            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 '-$' + 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);
            };
        },

        // private
        stripTagsRE : /<\/?[^>]+>/gi,

/**
         * 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(this.stripTagsRE, "");
        },

        stripScriptsRe : /(?:)((\n|\r|.)*?)(?:<\/script>)/ig,

/**
         * 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(this.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();
            if(hasComma){
                psplit = fnum.split('.');

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

            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 v === undefined || v === null ? '' : v.replace(/\n/g, '
');
        }
    }
}();


The source code

/**
 * @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
     */

    // 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){
            this.labelStyle = "display:none";
            this.elementStyle = "padding-left:0;";
            this.labelAdjust = 0;
        }else{
            this.labelSeparator = ct.labelSeparator || this.labelSeparator;
            ct.labelWidth = ct.labelWidth || 100;
            if(typeof ct.labelWidth == 'number'){
                var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
                this.labelAdjust = ct.labelWidth+pad;
                this.labelStyle = "width:"+ct.labelWidth+"px;";
                this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
            }
            if(ct.labelAlign == 'top'){
                this.labelStyle = "width:auto;";
                this.labelAdjust = 0;
                this.elementStyle = "padding-left:0;";
            }
        }
    },

    //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.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
            var args = this.getTemplateArgs(c);
            if(typeof position == 'number'){
                position = target.dom.childNodes[position] || null;
            }
            if(position){
                this.fieldTpl.insertBefore(position, args);
            }else{
                this.fieldTpl.append(target, args);
            }
            c.render('x-form-el-'+c.id);
        }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 '')
    •
     *
  • {@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 field The {@link Field Ext.form.Field} being rendered.
     * @return 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,
            labelStyle: field.labelStyle||this.labelStyle||'',
            elementStyle: this.elementStyle||'',
            labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator),
            itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
            clearCls: field.clearCls || 'x-form-clear-left'
        };
    },

    // private
    adjustWidthAnchor : function(value, comp){
        return value - (comp.isFormField || comp.fieldLabel  ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
    },

    // private
    isValidParent : function(c, target){
        return true;
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;


The source code

Ext.onReady(function(){

    var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-remote.php'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'post_id'
        }, [
            {name: 'title', mapping: 'topic_title'},
            {name: 'topicId', mapping: 'topic_id'},
            {name: 'author', mapping: 'author'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
            {name: 'excerpt', mapping: 'post_text'}
        ])
    });

    // Custom rendering Template
    var resultTpl = new Ext.XTemplate(
        '
',
            '
{lastPost:date("M j, Y")}
by {author}{title}
',
            '{excerpt}',
        '
'
    );

    var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'title',
        typeAhead: false,
        loadingText: 'Searching...',
        width: 570,
        pageSize:10,
        hideTrigger:true,
        tpl: resultTpl,
        applyTo: 'search',
        itemSelector: 'div.search-item',
        onSelect: function(record){ // override default onSelect to do redirect
            window.location =
                String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
        }
    });
});


The source code

var Forum = {};

//////////////////////////////////////////////////////////////////////////////////////////////
// The data store for topics
Forum.TopicStore = function(){
    Forum.TopicStore.superclass.constructor.call(this, {
        remoteSort: true,

        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-browse-remote.php'
        }),

        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'threadid'
        }, [
            'title', 'forumtitle', 'forumid', 'author',
            {name: 'replycount', type: 'int'},
            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
            'lastposter', 'excerpt'
        ])
    });

    this.setDefaultSort('lastpost', 'desc');
};
Ext.extend(Forum.TopicStore, Ext.data.Store, {
    loadForum : function(forumId){
        this.baseParams = {
            forumId: forumId
        };
        this.load({
            params: {
                start:0,
                limit:25
            }
        });
    }
});

//////////////////////////////////////////////////////////////////////////////////////////////

// some renderers
Forum.Renderers = {
    topic : function(value, p, record){
        return String.format(
                '
{0}{1}
',
                value, record.data.author, record.id, record.data.forumid);
    },

    lastPost : function(value, p, r){
        return String.format('{0}
by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
    }
};

//////////////////////////////////////////////////////////////////////////////////////////////

Forum.SearchView = function(search){

    this.preview = new Ext.Panel({
        region:'south',
        height:250,
        title:'View Message',
        split:true
    });

    this.store = new Ext.data.Store({
        remoteSort: true,
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-browse-remote.php'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'post_id'
        }, [
            {name: 'postId', mapping: 'post_id'},
            {name: 'title', mapping: 'topic_title'},
            {name: 'topicId', mapping: 'topic_id'},
            {name: 'author', mapping: 'author'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
            {name: 'excerpt', mapping: 'post_text'}
        ])
    });
    this.store.setDefaultSort('lastpost', 'desc');

    this.grid = new Ext.grid.GridPanel({
        region:'center',

        store: this.store,

        cm: new Ext.grid.ColumnModel([{
           id: 'topic',
           header: "Post Title",
           dataIndex: 'title',
           width: 420,
           renderer: Forum.Renderers.topic
        },{
           id: 'last',
           header: "Date Posted",
           dataIndex: 'lastpost',
           width: 150,
           renderer: Ext.util.Format.dateRenderer('M j, Y, g:i a')
        }]),

        sm: new Ext.grid.RowSelectionModel({
            singleSelect:true
        }),

        trackMouseOver:false,

        loadMask: {msg:'Searching...'},

        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, ds){
                if(this.showPreview){
                    p.body = '
'+record.data.excerpt+'
';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: ds,
            displayInfo: true,
            displayMsg: 'Displaying results {0} - {1} of {2}',
            emptyMsg: "No results to display"
        })
    });

    Forum.SearchView.superclass.constructor.call(this, {
        layout:'border',
        title:'Search: '+Ext.util.Format.htmlEncode('"'+search+'"'),
        items:[ this.grid, this.preview ]
     });

    this.store.baseParams = {
        query: search
    };

    this.store.load({params:{start:0, limit: 25}});
};

Ext.extend(Forum.SearchView, Ext.Panel);

Ext.onReady(function(){

    Ext.QuickTips.init();

    var ds = new Forum.TopicStore();

    var cm = new Ext.grid.ColumnModel([{
           id: 'topic',
           header: "Topic",
           dataIndex: 'title',
           width: 420,
           renderer: Forum.Renderers.topic
        },{
           header: "Author",
           dataIndex: 'author',
           width: 100,
           hidden: true
        },{
           header: "Replies",
           dataIndex: 'replycount',
           width: 70,
           align: 'right'
        },{
           id: 'last',
           header: "Last Post",
           dataIndex: 'lastpost',
           width: 150,
           renderer: Forum.Renderers.lastPost
        }]);

    cm.defaultSortable = true;

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            new Ext.BoxComponent({ // raw
                region:'north',
                el: 'header',
                height:32
            }),
            new Ext.tree.TreePanel({
                id:'forum-tree',
                region:'west',
                title:'Forums',
                split:true,
                width: 325,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'0 0 5 5',
                loader: new Forum.TreeLoader(),
                rootVisible:false,
                lines:false,
                autoScroll:true,
                root: new Ext.tree.AsyncTreeNode({
                          text: 'Forums',
                          expanded:true
                      })
            }),
            new Ext.TabPanel({
                id:'main-tabs',
                activeTab:0,
                region:'center',
                margins:'0 5 5 0',
                resizeTabs:true,
                tabWidth:150,
                items: {
                    id:'main-view',
                    layout:'border',
                    title:'Loading...',
                    items:[
                        new Ext.grid.GridPanel({
                            region:'center',
                            id:'topic-grid',
                            store: ds,
                            cm: cm,
                            sm:new Ext.grid.RowSelectionModel({
                                singleSelect:true,
                                listeners: {
                                    selectionchange: function(sel){
                                        var rec = sel.getSelected();
                                        if(rec){
                                            Ext.getCmp('preview').body.update('' + rec.get('title') + '

Post details here.');
                                        }
                                    }
                                }
                            }),
                            trackMouseOver:false,
                            loadMask: {msg:'Loading Topics...'},
                            viewConfig: {
                                forceFit:true,
                                enableRowBody:true,
                                showPreview:true,
                                getRowClass : function(record, rowIndex, p, ds){
                                    if(this.showPreview){
                                        p.body = '
'+record.data.excerpt+'
';
                                        return 'x-grid3-row-expanded';
                                    }
                                    return 'x-grid3-row-collapsed';
                                }
                            },
                            tbar:[
                                {
                                    text:'New Topic',
                                    iconCls: 'new-topic',
                                    handler:function(){alert('Not implemented.');}
                                },
                                '-',
                                {
                                    pressed: true,
                                    enableToggle:true,
                                    text:'Preview Pane',
                                    tooltip: {title:'Preview Pane',text:'Show or hide the Preview Pane'},
                                    iconCls: 'preview',
                                    toggleHandler: togglePreview
                                },
                                ' ',
                                {
                                    pressed: true,
                                    enableToggle:true,
                                    text:'Summary',
                                    tooltip: {title:'Post Summary',text:'View a short summary of each post in the list'},
                                    iconCls: 'summary',
                                    toggleHandler: toggleDetails
                                }
                            ],
                            bbar: new Ext.PagingToolbar({
                                pageSize: 25,
                                store: ds,
                                displayInfo: true,
                                displayMsg: 'Displaying topics {0} - {1} of {2}',
                                emptyMsg: "No topics to display"
                            })
                        }), {
                            id:'preview',
                            region:'south',
                            height:250,
                            title:'View Topic',
                            split:true,
                            bodyStyle: 'padding: 10px; font-family: Arial; font-size: 12px;'
                        }
                     ]
                 }
              })
         ]
    });

    var tree = Ext.getCmp('forum-tree');
    tree.on('append', function(tree, p, node){
       if(node.id == 40){
           node.select.defer(100, node);
       }
    });
    var sm = tree.getSelectionModel();
    sm.on('beforeselect', function(sm, node){
         return node.isLeaf();
    });
    sm.on('selectionchange', function(sm, node){
        ds.loadForum(node.id);
        Ext.getCmp('main-view').setTitle(node.text);
    });

     var searchStore = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-browse-remote.php'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'threadid'
        }, [
            'title', 'author',
            {name: 'lastpost', type: 'date', dateFormat: 'timestamp'}
        ])
    });

    // Custom rendering Template
    var resultTpl = new Ext.XTemplate(
        '',
            '
{title} by {author}
',
        ''
    );

    var search = new Ext.form.ComboBox({
        store: searchStore,
        applyTo: 'search',
        displayField:'title',
        typeAhead: false,
        loadingText: 'Searching...',
        width: 200,
        pageSize:10,
        listWidth:550,
        hideTrigger:true,
        tpl: resultTpl,
        minChars:3,
        emptyText:'Quick Search',
        onSelect: function(record){ // override default onSelect to do redirect
            window.location =
                String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
        }
    });
    // apply it to the exsting input element
    //search.applyTo('search');

    function toggleDetails(btn, pressed){
        var view = Ext.getCmp('topic-grid').getView();
        view.showPreview = pressed;
        view.refresh();
    }

    function togglePreview(btn, pressed){
        var preview = Ext.getCmp('preview');
        preview[pressed ? 'show' : 'hide']();
        preview.ownerCt.doLayout();
    }
});

Forum.TreeLoader = function(){
    Forum.TreeLoader.superclass.constructor.call(this);
    this.proxy = new Ext.data.ScriptTagProxy({
        url : this.dataUrl
    });
};
Ext.extend(Forum.TreeLoader, Ext.tree.TreeLoader, {
    dataUrl: 'http://extjs.com/forum/forums-remote.php',
    requestData : function(node, cb){
        this.proxy.request('read', null, {}, {
            readRecords : function(o){
                return o;
            }
        }, this.addNodes, this, {node:node, cb:cb});
    },

    addNodes : function(o, arg){
        var node = arg.node;
        for(var i = 0, len = o.length; i < len; i++){
            var n = this.createNode(o[i]);
            if(n){
                node.appendChild(n);
            }
        }
        arg.cb(this, node);
    }
});


The source code

Ext.onReady(function(){
    var btn = Ext.get("create-grid");
    btn.on("click", function(){
        btn.dom.disabled = true;

        // create the grid
        var grid = new Ext.ux.grid.TableGrid("the-table", {
            stripeRows: true // stripe alternate rows
        });
        grid.render();
    }, false, {
        single: true
    }); // run once
});


The source code

(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 of the {@link #callback} function
 *
 * @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:{
                            visbility: HIDDEN,
                            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 = this;
        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){
            wrap.parentNode.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,
            notConcurrent = !o.concurrent;
        if(o.afterStyle){
            fly(dom).setStyle(o.afterStyle);
        }
        if(o.afterCls){
            fly(dom).addClass(o.afterCls);
        }
        if(o.remove == TRUE){
            fly(dom).remove();
        }
        if(notConcurrent){
            getQueue(id).shift();
        }
        if(o.callback){
            o.callback.call(o.scope, fly(dom));
        }
        if(notConcurrent){
            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

// Copyright 2007 Google Inc. All Rights Reserved.
//
// Sets up google.gears.*, which is *the only* supported way to access Gears.
//
// Circumvent this file at your own risk!
//
// In the future, Gears may automatically define google.gears.* without this
// file. Gears may use these objects to transparently fix bugs and compatibility
// issues. Applications that use the code below will continue to work seamlessly
// when that happens.

(function() {
  // We are already defined. Hooray!
  if (window.google && google.gears) {
    return;
  }

  var factory = null;

  // Firefox
  if (typeof GearsFactory != 'undefined') {
    factory = new GearsFactory();
  } else {
    // IE
    try {
      factory = new ActiveXObject('Gears.Factory');
    } catch (e) {
      // Safari
      if (navigator.mimeTypes["application/x-googlegears"]) {
        factory = document.createElement("object");
        factory.style.display = "none";
        factory.width = 0;
        factory.height = 0;
        factory.type = "application/x-googlegears";
        document.documentElement.appendChild(factory);
      }
    }
  }

  // *Do not* define any objects if Gears is not installed. This mimics the
  // behavior of Gears defining the objects in the future.
  if (!factory) {
    return;
  }

  // Now set up the objects, being careful not to overwrite anything.
  if (!window.google) {
    window.google = {};
  }

  if (!google.gears) {
    google.gears = {factory: factory};
  }
})();

if (!window.google || !google.gears) {
    location.href = "http://gears.google.com/?action=install&message=Google%20Gears%20is%20required%20for%20this%20application" +
                "&return="+window.location.href;
}


The source code

(function(){
    var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'];
    var firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'];
    var lastLen = lasts.length, firstLen = firsts.length;

    Ext.ux.getRandomInt = function(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    Ext.ux.generateName = function(){
        var name = firsts[Ext.ux.getRandomInt(0, firstLen-1)] + ' ' + lasts[Ext.ux.getRandomInt(0, lastLen-1)];
        if(Ext.ux.generateName.usedNames[name]){
            return Ext.ux.generateName();
        }
        Ext.ux.generateName.usedNames[name] = true;
        return name;
    }
    Ext.ux.generateName.usedNames = {};

})();


The source code

Ext.onReady(function(){

    var mapwin;
    var button = Ext.get('show-btn');

    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!mapwin){

            mapwin = new Ext.Window({
                layout: 'fit',
                title: 'GMap Window',
                closeAction: 'hide',
                width:400,
                height:400,
                x: 40,
                y: 60,
                items: {
                    xtype: 'gmappanel',
                    region: 'center',
                    zoomLevel: 14,
                    gmapType: 'map',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    setCenter: {
                        geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                        marker: {title: 'Fenway Park'}
                    },
                    markers: [{
                        lat: 42.339641,
                        lng: -71.094224,
                        marker: {title: 'Boston Museum of Fine Arts'},
                        listeners: {
                            click: function(e){
                                Ext.Msg.alert('Its fine', 'and its art.');
                            }
                        }
                    },{
                        lat: 42.339419,
                        lng: -71.09077,
                        marker: {title: 'Northeastern University'}
                    }]
                }
            });

        }

        mapwin.show();

    });

 });


The source code

/**
 * @class Ext.ux.GMapPanel
 * @extends Ext.Panel
 * @author Shea Frederick
 */
Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
    initComponent : function(){

        var defConfig = {
            plain: true,
            zoomLevel: 3,
            yaw: 180,
            pitch: 0,
            zoom: 0,
            gmapType: 'map',
            border: false
        };

        Ext.applyIf(this,defConfig);

        Ext.ux.GMapPanel.superclass.initComponent.call(this);

    },
    afterRender : function(){

        var wh = this.ownerCt.getSize();
        Ext.applyIf(this, wh);

        Ext.ux.GMapPanel.superclass.afterRender.call(this);

        if (this.gmapType === 'map'){
            this.gmap = new GMap2(this.body.dom);
        }

        if (this.gmapType === 'panorama'){
            this.gmap = new GStreetviewPanorama(this.body.dom);
        }

        if (typeof this.addControl == 'object' && this.gmapType === 'map') {
            this.gmap.addControl(this.addControl);
        }

        if (typeof this.setCenter === 'object') {
            if (typeof this.setCenter.geoCodeAddr === 'string'){
                this.geoCodeLookup(this.setCenter.geoCodeAddr);
            }else{
                if (this.gmapType === 'map'){
                    var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
                    this.gmap.setCenter(point, this.zoomLevel);
                }
                if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
                    this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
                }
            }
            if (this.gmapType === 'panorama'){
                this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
            }
        }

        GEvent.bind(this.gmap, 'load', this, function(){
            this.onMapReady();
        });

    },
    onMapReady : function(){
        this.addMarkers(this.markers);
        this.addMapControls();
        this.addOptions();
    },
    onResize : function(w, h){

        if (typeof this.getMap() == 'object') {
            this.gmap.checkResize();
        }

        Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);

    },
    setSize : function(width, height, animate){

        if (typeof this.getMap() == 'object') {
            this.gmap.checkResize();
        }

        Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);

    },
    getMap : function(){

        return this.gmap;

    },
    getCenter : function(){

        return this.getMap().getCenter();

    },
    getCenterLatLng : function(){

        var ll = this.getCenter();
        return {lat: ll.lat(), lng: ll.lng()};

    },
    addMarkers : function(markers) {

        if (Ext.isArray(markers)){
            for (var i = 0; i < markers.length; i++) {
                var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
                this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
            }
        }

    },
    addMarker : function(point, marker, clear, center, listeners){

        Ext.applyIf(marker,G_DEFAULT_ICON);

        if (clear === true){
            this.getMap().clearOverlays();
        }
        if (center === true) {
            this.getMap().setCenter(point, this.zoomLevel);
        }

        var mark = new GMarker(point,marker);
        if (typeof listeners === 'object'){
            for (evt in listeners) {
                GEvent.bind(mark, evt, this, listeners[evt]);
            }
        }
        this.getMap().addOverlay(mark);

    },
    addMapControls : function(){

        if (this.gmapType === 'map') {
            if (Ext.isArray(this.mapControls)) {
                for(i=0;i
Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
                }else{
                    point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
                    if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
                        this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
                    }
                }
            }
        }

    }

});

Ext.reg('gmappanel', Ext.ux.GMapPanel);


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xg = Ext.grid;

    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 1
    ////////////////////////////////////////////////////////////////////////////////////////
    // row expander
    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '
Company: {company}

',
            '
Summary: {desc}
'
        )
    });

    var grid1 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({
            defaults: {
                width: 20,
                sortable: true
            },
            columns: [
                expander,
                {id:'company',header: "Company", width: 40, dataIndex: 'company'},
                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", dataIndex: 'change'},
                {header: "% Change", dataIndex: 'pctChange'},
                {header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]
        }),
        viewConfig: {
            forceFit:true
        },
        columnLines: true,
        width: 600,
        height: 300,
        plugins: expander,
        collapsible: true,
        animCollapse: false,
        title: 'Expander Rows, Collapse and Force Fit',
        iconCls: 'icon-grid',
        renderTo: document.body
    });

    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 2
    ////////////////////////////////////////////////////////////////////////////////////////
    var sm = new xg.CheckboxSelectionModel();
    var grid2 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
            columns: [
                sm,
                {id:'company',header: "Company", width: 200, dataIndex: 'company'},
                {header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", dataIndex: 'change'},
                {header: "% Change", dataIndex: 'pctChange'},
                {header: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]
        }),
        sm: sm,
        columnLines: true,
        width:600,
        height:300,
        frame:true,
        title:'Framed with Checkbox Selection and Horizontal Scrolling',
        iconCls:'icon-grid',
        renderTo: document.body
    });

    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 3
    ////////////////////////////////////////////////////////////////////////////////////////
    var grid3 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel([
            new xg.RowNumberer(),
            {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
            {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),
        viewConfig: {
            forceFit:true
        },
        columnLines: true,
        width:600,
        height:300,
        title:'Grid with Numbered Rows and Force Fit',
        iconCls:'icon-grid',
        renderTo: document.body
    });

    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 4
    ////////////////////////////////////////////////////////////////////////////////////////
    var sm2 = new xg.CheckboxSelectionModel({
        listeners: {
            // On selection change, set enabled state of the removeButton
            // which was placed into the GridPanel using the ref config
            selectionchange: function(sm) {
                if (sm.getCount()) {
                    grid4.removeButton.enable();
                } else {
                    grid4.removeButton.disable();
                }
            }
        }
    });
    var grid4 = new xg.GridPanel({
        id:'button-grid',
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel([
            sm2,
            {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
            {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),
        sm: sm2,

        viewConfig: {
            forceFit:true
        },
        columnLines: true,

        // inline buttons
        buttons: [{text:'Save'},{text:'Cancel'}],
        buttonAlign:'center',

        // inline toolbars
        tbar:[{
            text:'Add Something',
            tooltip:'Add a new row',
            iconCls:'add'
        }, '-', {
            text:'Options',
            tooltip:'Blah blah blah blaht',
            iconCls:'option'
        },'-',{
            text:'Remove Something',
            tooltip:'Remove the selected item',
            iconCls:'remove',

            // Place a reference in the GridPanel
            ref: '../removeButton',
            disabled: true
        }],

        width:600,
        height:300,
        frame:true,
        title:'Support for standard Panel features such as framing, buttons and toolbars',
        iconCls:'icon-grid',
        renderTo: document.body
    });
});

// Array data for the grids
Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
    ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
    ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
    ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
    ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
    ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
    Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.

Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}


The source code

/**
 * @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

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

/**
 * @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 #columns}: [
        {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
        {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: 'Change', width: 120, sortable: true, dataIndex: 'change'},
        {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'},
        // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
        {header: 'Last Updated', width: 135, sortable: true, 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 hiding of columns with the header context 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']
     *

     *
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'],

/**
     * @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 {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 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 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 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 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'
        );
    },

    // private
    onRender : function(ct, position){
        Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);

        var c = this.body;

        this.el.addClass('x-grid-panel');

        var view = this.getView();
        view.init(this);

        this.mon(c, {
            mousedown: this.onMouseDown,
            click: this.onClick,
            dblclick: this.onDblClick,
            contextmenu: this.onContextMenu,
            keydown: this.onKeyDown,
            scope: this
        });

        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress']);

        this.getSelectionModel().init(this);
        this.view.render();
    },

    // 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;
        var cs = state.columns;
        if(cs){
            for(var i = 0, len = cs.length; i < len; i++){
                var s = cs[i];
                var c = cm.getColumnById(s.id);
                if(c){
                    c.hidden = s.hidden;
                    c.width = s.width;
                    var oldIndex = cm.getIndexById(s.id);
                    if(oldIndex != i){
                        cm.moveColumn(oldIndex, i);
                    }
                }
            }
        }
        if(state.sort && this.store){
            this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);
        }
        delete state.columns;
        delete state.sort;
        Ext.grid.GridPanel.superclass.applyState.call(this, state);
    },

    getState : function(){
        var o = {columns: []};
        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(this.store){
            var ss = this.store.getSortState();
            if(ss){
                o.sort = ss;
            }
        }
        return o;
    },

    // private
    afterRender : function(){
        Ext.grid.GridPanel.superclass.afterRender.call(this);
        this.view.layout();
        if(this.deferRowRender){
            this.view.afterRender.defer(10, this.view);
        }else{
            this.view.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){
        if(this.loadMask){
            this.loadMask.destroy();
            this.loadMask = new Ext.LoadMask(this.bwrap,
                    Ext.apply({}, {store:store}, this.initialConfig.loadMask));
        }
        this.view.initData(store, colModel);
        this.store = store;
        this.colModel = colModel;
        if(this.rendered){
            this.view.refresh(true);
        }
        this.fireEvent('reconfigure', this, store, colModel);
    },

    // private
    onKeyDown : function(e){
        this.fireEvent('keydown', e);
    },

    // private
    onDestroy : function(){
        if(this.rendered){
            var c = this.body;
            c.removeAllListeners();
            c.update('');
            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.fireEvent(name, e);
        var t = e.getTarget();
        var v = this.view;
        var header = v.findHeaderIndex(t);
        if(header !== false){
            this.fireEvent('header' + name, this, header, e);
        }else{
            var row = v.findRowIndex(t);
            var cell = v.findCellIndex(t);
            if(row !== false){
                this.fireEvent('row' + name, this, row, e);
                if(cell !== false){
                    this.fireEvent('cell' + name, this, row, cell, 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();
        var 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;
    },

    // private
    onResize : function(){
        Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);
        if(this.viewReady){
            this.view.layout();
        }
    },

/**
     * 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

/**
 * @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 = 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);
};

Ext.extend(Ext.grid.GridView, 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 19 pixels).
     */
    scrollOffset : 19,

/**
     * @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 {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',

    // private
    firstRowCls: 'x-grid3-row-first',
    lastRowCls: 'x-grid3-row-last',
    rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g,

    /* -------------------------------- 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 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 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 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;
    },

    // 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
    doRender : function(cs, rs, ds, startRow, colCount, stripe){
        var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
        var tstyle = 'width:'+this.getTotalWidth()+';';
        // buffers
        var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
        for(var j = 0, len = rs.length; j < len; j++){
            r = rs[j]; cb = [];
            var rowIndex = (j+startRow);
            for(var i = 0; i < colCount; i++){
                c = cs[i];
                p.id = c.id;
                p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                p.attr = p.cellAttr = "";
                p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
                p.style = c.style;
                if(Ext.isEmpty(p.value)){
                    p.value = " ";
                }
                if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
                    p.css += ' x-grid3-dirty-cell';
                }
                cb[cb.length] = ct.apply(p);
            }
            var alt = [];
            if(stripe && ((rowIndex+1) % 2 === 0)){
                alt[0] = "x-grid3-row-alt";
            }
            if(r.dirty){
                alt[1] = " x-grid3-dirty-row";
            }
            rp.cols = colCount;
            if(this.getRowClass){
                alt[2] = this.getRowClass(r, rowIndex, rp, ds);
            }
            rp.alt = alt.join(" ");
            rp.cells = cb.join("");
            buf[buf.length] =  rt.apply(rp);
        }
        return buf.join("");
    },

    // private
    processRows : function(startRow, skipStripe){
        if(!this.ds || this.ds.getCount() < 1){
            return;
        }
        var rows = this.getRows();
        skipStripe = skipStripe || !this.grid.stripeRows;
        startRow = startRow || 0;
        Ext.each(rows, function(row, idx){
            row.rowIndex = idx;
            row.className = row.className.replace(this.rowClsRe, ' ');
            if (!skipStripe && (idx + 1) % 2 === 0) {
                row.className += ' x-grid3-row-alt';
            }
        });
        // add first/last-row classes
        if(startRow === 0){
            Ext.fly(rows[0]).addClass(this.firstRowCls);
        }
        Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
    },

    afterRender : function(){
        if(!this.ds || !this.cm){
            return;
        }
        this.mainBody.dom.innerHTML = this.renderRows() || ' ';
        this.processRows(0, true);

        if(this.deferEmptyText !== true){
            this.applyEmptyText();
        }
    },

    // private
    renderUI : function(){

        var header = this.renderHeaders();
        var body = this.templates.body.apply({rows:' '});

        var html = this.templates.master.apply({
            body: body,
            header: header,
            ostyle: 'width:'+this.getOffsetWidth()+';',
            bstyle: 'width:'+this.getTotalWidth()+';'
        });

        var g = this.grid;

        g.getGridEl().dom.innerHTML = html;

        this.initElements();

        // get mousedowns early
        Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
        this.mainHd.on({
            scope: this,
            mouseover: this.handleHdOver,
            mouseout: this.handleHdOut,
            mousemove: this.handleHdMove
        });

        this.scroller.on('scroll', this.syncScroll,  this);
        if(g.enableColumnResize !== false){
            this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
        }

        if(g.enableColumnMove){
            this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
            this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
        }

        if(g.enableHdMenu !== false){
            this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
            this.hmenu.add(
                {itemId:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
                {itemId:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
            );
            if(g.enableColumnHide !== false){
                this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
                this.colMenu.on({
                    scope: this,
                    beforeshow: this.beforeColMenuShow,
                    itemclick: this.handleHdMenuClick
                });
                this.hmenu.add('-', {
                    itemId:"columns",
                    hideOnClick: false,
                    text: this.columnsText,
                    menu: this.colMenu,
                    iconCls: 'x-cols-icon'
                });
            }
            this.hmenu.on("itemclick", this.handleHdMenuClick, this);
        }

        if(g.trackMouseOver){
            this.mainBody.on({
                scope: this,
                mouseover: this.onRowOver,
                mouseout: this.onRowOut
            });
        }

        if(g.enableDragDrop || g.enableDrag){
            this.dragZone = new Ext.grid.GridDragZone(g, {
                ddGroup : g.ddGroup || 'GridDD'
            });
        }

        this.updateHeaderSortState();

    },

    // private
    layout : function(){
        if(!this.mainBody){
            return; // not rendered
        }
        var g = this.grid;
        var c = g.getGridEl();
        var csize = c.getSize(true);
        var vw = csize.width;

        if(!g.hideHeaders && (vw < 20 || csize.height < 20)){ // display: none?
            return;
        }

        if(g.autoHeight){
            this.scroller.dom.style.overflow = 'visible';
            if(Ext.isWebKit){
                this.scroller.dom.style.position = 'static';
            }
        }else{
            this.el.setSize(csize.width, csize.height);

            var hdHeight = this.mainHd.getHeight();
            var vh = csize.height - (hdHeight);

            this.scroller.setSize(vw, vh);
            if(this.innerHd){
                this.innerHd.style.width = (vw)+'px';
            }
        }
        if(this.forceFit){
            if(this.lastViewWidth != vw){
                this.fitColumns(false, false);
                this.lastViewWidth = vw;
            }
        }else {
            this.autoExpand();
            this.syncHeaderScroll();
        }
        this.onLayout(vw, vh);
    },

    // template functions for subclasses and plugins
    // these functions include precalculated values
    onLayout : function(vw, vh){
        // do nothing
    },

    onColumnWidthUpdated : function(col, w, tw){
        //template method
    },

    onAllColumnWidthsUpdated : function(ws, tw){
        //template method
    },

    onColumnHiddenUpdated : function(col, hidden, tw){
        // template method
    },

    updateColumnText : function(col, text){
        // template method
    },

    afterMove : function(colIndex){
        // template method
    },

    /* ----------------------------------- Core Specific -------------------------------------------*/
    // private
    init : function(grid){
        this.grid = grid;

        this.initTemplates();
        this.initData(grid.store, grid.colModel);
        this.initUI(grid);
    },

    // private
    getColumnId : function(index){
      return this.cm.getColumnId(index);
    },

    // private
    getOffsetWidth : function() {
        return (this.cm.getTotalWidth() + this.scrollOffset) + 'px';
    },

    // private
    renderHeaders : function(){
        var cm = this.cm,
            ts = this.templates,
            ct = ts.hcell,
            cb = [],
            p = {},
            len = cm.getColumnCount(),
            last = len - 1;

        for(var i = 0; i < len; i++){
            p.id = cm.getColumnId(i);
            p.value = cm.getColumnHeader(i) || "";
            p.style = this.getColumnStyle(i, true);
            p.tooltip = this.getColumnTooltip(i);
            p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
            if(cm.config[i].align == 'right'){
                p.istyle = 'padding-right:16px';
            } else {
                delete p.istyle;
            }
            cb[cb.length] = ct.apply(p);
        }
        return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'});
    },

    // private
    getColumnTooltip : function(i){
        var tt = this.cm.getColumnTooltip(i);
        if(tt){
            if(Ext.QuickTips.isEnabled()){
                return 'ext:qtip="'+tt+'"';
            }else{
                return 'title="'+tt+'"';
            }
        }
        return "";
    },

    // private
    beforeUpdate : function(){
        this.grid.stopEditing(true);
    },

    // private
    updateHeaders : function(){
        this.innerHd.firstChild.innerHTML = this.renderHeaders();
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
    },

/**
     * 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));
            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;

        var cbot = ctop + rowEl.offsetHeight,
            ch = c.clientHeight,
            sbot = stop + ch;

        stop = parseInt(c.scrollTop, 10);

        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.refresh();
        }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 ? 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.scrollOffset;

        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.scrollOffset;
            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
    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),
                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
    applyEmptyText : function(){
        if(this.emptyText && !this.hasRows()){
            this.mainBody.update('
' + this.emptyText + '
');
        }
    },

    // private
    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
    destroy : function(){
        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;
        }
        if(this.grid.enableColumnMove){
            var dds = Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
            if(dds){
                for(var dd in dds){
                    if(!dds[dd].config.isTarget && dds[dd].dragElId){
                        var elid = dds[dd].dragElId;
                        dds[dd].unreg();
                        Ext.get(elid).remove();
                    } else if(dds[dd].config.isTarget){
                        dds[dd].proxyTop.remove();
                        dds[dd].proxyBottom.remove();
                        dds[dd].unreg();
                    }
                    if(Ext.dd.DDM.locationCache[dd]){
                        delete Ext.dd.DDM.locationCache[dd];
                    }
                }
                delete Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
            }
        }

        if(this.dragZone){
            this.dragZone.unreg();
        }

        Ext.fly(this.innerHd).removeAllListeners();
        Ext.removeNode(this.innerHd);

        Ext.destroy(this.resizeMarker, this.resizeProxy, this.focusEl, this.mainBody,
                    this.scroller, this.mainHd, this.mainWrap, this.dragZone,
                    this.splitZone, this.columnDrag, this.columnDrop);

        this.initData(null, null);
        Ext.EventManager.removeResizeListener(this.onWindowResize, this);
        this.purgeListeners();
    },

    // 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(){
        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;
        var cm = this.cm, ds = this.ds;
        switch(item.itemId){
            case "asc":
                ds.sort(cm.getDataIndex(index), "ASC");
                break;
            case "desc":
                ds.sort(cm.getDataIndex(index), "DESC");
                break;
            default:
                index = cm.getIndexById(item.itemId.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 && !c.fixed;
    },

    // private
    beforeColMenuShow : function(){
        var cm = this.cm,  colCount = cm.getColumnCount();
        this.colMenu.removeAll();
        for(var i = 0; i < colCount; i++){
            if(cm.config[i].fixed !== true && 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.activeHd = hd;
            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){
        if(this.activeHd && !this.headersDisabled){
            var hw = this.splitHandleWidth || 5;
            var r = this.activeHdRegion;
            var x = e.getPageX();
            var ss = this.activeHd.style;
            if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){
                ss.cursor = 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)){
                ss.cursor = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';
            }else{
                ss.cursor = '';
            }
        }
    },

    // private
    handleHdOut : function(e, t){
        var hd = this.findHeaderCell(t);
        if(hd && (!Ext.isIE || !e.within(hd, true))){
            this.activeHd = 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 = 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;
};
Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, {

    b4StartDrag : function(x, y){
        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);
        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 t = this.view.findHeaderCell(e.getTarget());
        if(t){
            var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1];
            var exy = e.getXY(), ex = exy[0];
            var 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;
        var endX = Math.max(this.minX, e.getPageX());
        var diff = endX - this.startPos;
        v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff);
        setTimeout(function(){
            v.headersDisabled = false;
        }, 50);
    },

    autoOffset : function(){
        this.setDelta(0,0);
    }
});


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xg = Ext.grid;

    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

    var grid = new xg.GridPanel({
        store: new Ext.data.GroupingStore({
            reader: reader,
            data: xg.dummyData,
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        }),

        columns: [
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
            {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            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
    });
});

// Array data for the grids
Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
    ['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
    ['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
    ['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
    ['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
    ['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
    ['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
    ['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
    ['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
    ['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
    ['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
    ['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
    Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.

Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}


The source code

/**
 * @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 proved the data model for
 * a grouped GridPanel.
 * @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){
        Ext.data.GroupingStore.superclass.constructor.call(this, config);
        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;
            }
            var lo = this.lastOptions;
            if(lo && lo.params){
                delete lo.params.groupBy;
            }
            this.reload();
        }else{
            this.applySort();
            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
        }
        this.groupField = field;
        this.groupDir = direction;
        this.applyGroupField();
        if(this.groupOnSort){
            this.sort(field, direction);
            return;
        }
        if(this.remoteGroup){
            this.reload();
        }else{
            var si = this.sortInfo || {};
            if(si.field != field || si.direction != direction){
                this.applySort();
            }else{
                this.sortData(field, direction);
            }
            this.fireEvent('datachanged', this);
        }
    },

    // private
    applyGroupField: function(){
        if(this.remoteGroup){
            if(!this.baseParams){
                this.baseParams = {};
            }
            this.baseParams.groupBy = this.groupField;
            this.baseParams.groupDir = this.groupDir;
        }
    },

    // private
    applySort : function(){
        Ext.data.GroupingStore.superclass.applySort.call(this);
        if(!this.groupOnSort && !this.remoteGroup){
            var gs = this.getGroupState();
            if(gs && (gs != this.sortInfo.field || this.groupDir != this.sortInfo.direction)){
                this.sortData(this.groupField, this.groupDir);
            }
        }
    },

    // private
    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
    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

/**
 * @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 {Function} groupRenderer This property must be configured in the {@link Ext.grid.Column} for
     * each column.
     */

    // private
    gidSeed : 1000,

    // 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();
        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(){
        if(this.enableGrouping && !this.ignoreAdd){
            var ss = this.getScrollState();
            this.refresh();
            this.restoreScroll(ss);
        }else if(!this.enableGrouping){
            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.getGroupField(), 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);
        }
    },

    // private
    onGroupByClick : function(){
        this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
        this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups
    },

    // private
    onShowGroupsClick : function(mi, checked){
        if(checked){
            this.onGroupByClick();
        }else{
            this.grid.store.clearGrouping();
        }
    },

/**
     * 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){
        this.grid.stopEditing(true);
        group = Ext.getDom(group);
        var gel = Ext.fly(group);
        expanded = expanded !== undefined ?
                expanded : gel.hasClass('x-grid-group-collapsed');

        this.state[gel.dom.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 = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
        }
        return g;
    },

    // private
    getGroupField : function(){
        return this.grid.store.getGroupState();
    },

    // private
    afterRender : function(){
        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);
            if(!eg && this.lastGroupField !== undefined) {
                this.mainBody.update('');
                this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
                delete this.lastGroupField;
            }else if (eg && this.lastGroupField === undefined) {
                this.lastGroupField = groupField;
                this.cm.setHidden(colIndex, true);
            }else if (eg && this.lastGroupField !== undefined && 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 '';
        }
        var groupField = this.getGroupField(),
            colIndex = this.cm.findColumnIndex(groupField),
            g;

        this.enableGrouping = !!groupField;

        if(!this.enableGrouping || this.isUpdating){
            return Ext.grid.GroupingView.superclass.doRender.apply(
                    this, arguments);
        }
        var gstyle = 'width:'+this.getTotalWidth()+';';

        var gidPrefix = this.grid.getGridEl().id;
        var cfg = this.cm.config[colIndex];
        var groupRenderer = cfg.groupRenderer || cfg.renderer;
        var prefix = this.showGroupName ?
                     (cfg.groupName || cfg.header)+': ' : '';

        var 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 = gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(g);
                   // if state is defined use it, however state is in terms of expanded
                // so negate it, otherwise use the default.
                var isCollapsed  = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed;
                var gcls = isCollapsed ? 'x-grid-group-collapsed' : '';
                curGroup = {
                    group: g,
                    gvalue: gvalue,
                    text: prefix + g,
                    groupId: gid,
                    startRow: rowIndex,
                    rs: [r],
                    cls: gcls,
                    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 gidPrefix = this.grid.getGridEl().id;
        var groupField = this.getGroupField();
        var colIndex = this.cm.findColumnIndex(groupField);
        var cfg = this.cm.config[colIndex];
        var groupRenderer = cfg.groupRenderer || cfg.renderer;
        var gtext = this.getGroup(value, {data:{}}, groupRenderer, 0, colIndex, this.ds);
        return gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(value);
    },

    // 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.enableGrouping){
            return Ext.grid.GroupingView.superclass.getRows.call(this);
        }
        var r = [];
        var g, gs = this.getGroups();
        for(var i = 0, len = gs.length; i < len; i++){
            g = gs[i].childNodes[1].childNodes;
            for(var j = 0, jlen = g.length; j < jlen; j++){
                r[r.length] = g[j];
            }
        }
        return r;
    },

    // private
    updateGroupWidths : function(){
        if(!this.enableGrouping || !this.hasRows()){
            return;
        }
        var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.scrollOffset) +'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){
        if(!this.enableGrouping){
            return;
        }
        var row = this.getRow(rowIndex);
        if(row && !row.offsetParent){
            var g = this.findGroup(row);
            this.toggleGroup(g, true);
        }
    }
});
// private
Ext.grid.GroupingView.GROUP_ID = 1000;


The source code

Ext.ns('Ext.ux.grid');

/**
 * @class Ext.ux.grid.GroupSummary
 * @extends Ext.util.Observable
 * A GridPanel plugin that enables dynamic column calculations and a dynamically
 * updated grouped summary row.
 */
Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {

/**
     * @cfg {Function} summaryRenderer Renderer example:

summaryRenderer: function(v, params, data){
    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
},
     *

     */

/**
     * @cfg {String} summaryType (Optional) The type of
     * calculation to be used for the column.  For options available see
     * {@link #Calculations}.
     */

    constructor : function(config){
        Ext.apply(this, config);
        Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
    },
    init : function(grid){
        this.grid = grid;
        this.cm = grid.getColumnModel();
        this.view = grid.getView();

        var v = this.view;
        v.doGroupEnd = this.doGroupEnd.createDelegate(this);

        v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
        v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
        v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
        v.afterMethod('onUpdate', this.doUpdate, this);
        v.afterMethod('onRemove', this.doRemove, this);

        if(!this.rowTpl){
            this.rowTpl = new Ext.Template(
                '
',
                '',
                    '{cells}',
                '
'
            );
            this.rowTpl.disableFormats = true;
        }
        this.rowTpl.compile();

        if(!this.cellTpl){
            this.cellTpl = new Ext.Template(
                '',
                '
{value}
',
                " "
            );
            this.cellTpl.disableFormats = true;
        }
        this.cellTpl.compile();
    },

/**
     * Toggle the display of the summary row on/off
     * @param {Boolean} visible true to show the summary, false to hide the summary.
     */
    toggleSummaries : function(visible){
        var el = this.grid.getGridEl();
        if(el){
            if(visible === undefined){
                visible = el.hasClass('x-grid-hide-summary');
            }
            el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
        }
    },

    renderSummary : function(o, cs){
        cs = cs || this.view.getColumnData();
        var cfg = this.cm.config;

        var buf = [], c, p = {}, cf, last = cs.length-1;
        for(var i = 0, len = cs.length; i < len; i++){
            c = cs[i];
            cf = cfg[i];
            p.id = c.id;
            p.style = c.style;
            p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
            if(cf.summaryType || cf.summaryRenderer){
                p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
            }else{
                p.value = '';
            }
            if(p.value == undefined || p.value === "") p.value = " ";
            buf[buf.length] = this.cellTpl.apply(p);
        }

        return this.rowTpl.apply({
            tstyle: 'width:'+this.view.getTotalWidth()+';',
            cells: buf.join('')
        });
    },

    /**
     * @private
     * @param {Object} rs
     * @param {Object} cs
     */
    calculate : function(rs, cs){
        var data = {}, r, c, cfg = this.cm.config, cf;
        for(var j = 0, jlen = rs.length; j < jlen; j++){
            r = rs[j];
            for(var i = 0, len = cs.length; i < len; i++){
                c = cs[i];
                cf = cfg[i];
                if(cf.summaryType){
                    data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
                }
            }
        }
        return data;
    },

    doGroupEnd : function(buf, g, cs, ds, colCount){
        var data = this.calculate(g.rs, cs);
        buf.push('', this.renderSummary({data: data}, cs), '');
    },

    doWidth : function(col, w, tw){
        var gs = this.view.getGroups(), s;
        for(var i = 0, len = gs.length; i < len; i++){
            s = gs[i].childNodes[2];
            s.style.width = tw;
            s.firstChild.style.width = tw;
            s.firstChild.rows[0].childNodes[col].style.width = w;
        }
    },

    doAllWidths : function(ws, tw){
        var gs = this.view.getGroups(), s, cells, wlen = ws.length;
        for(var i = 0, len = gs.length; i < len; i++){
            s = gs[i].childNodes[2];
            s.style.width = tw;
            s.firstChild.style.width = tw;
            cells = s.firstChild.rows[0].childNodes;
            for(var j = 0; j < wlen; j++){
                cells[j].style.width = ws[j];
            }
        }
    },

    doHidden : function(col, hidden, tw){
        var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
        for(var i = 0, len = gs.length; i < len; i++){
            s = gs[i].childNodes[2];
            s.style.width = tw;
            s.firstChild.style.width = tw;
            s.firstChild.rows[0].childNodes[col].style.display = display;
        }
    },

    // Note: requires that all (or the first) record in the
    // group share the same group value. Returns false if the group
    // could not be found.
    refreshSummary : function(groupValue){
        return this.refreshSummaryById(this.view.getGroupId(groupValue));
    },

    getSummaryNode : function(gid){
        var g = Ext.fly(gid, '_gsummary');
        if(g){
            return g.down('.x-grid3-summary-row', true);
        }
        return null;
    },

    refreshSummaryById : function(gid){
        var g = document.getElementById(gid);
        if(!g){
            return false;
        }
        var rs = [];
        this.grid.store.each(function(r){
            if(r._groupId == gid){
                rs[rs.length] = r;
            }
        });
        var cs = this.view.getColumnData();
        var data = this.calculate(rs, cs);
        var markup = this.renderSummary({data: data}, cs);

        var existing = this.getSummaryNode(gid);
        if(existing){
            g.removeChild(existing);
        }
        Ext.DomHelper.append(g, markup);
        return true;
    },

    doUpdate : function(ds, record){
        this.refreshSummaryById(record._groupId);
    },

    doRemove : function(ds, record, index, isUpdate){
        if(!isUpdate){
            this.refreshSummaryById(record._groupId);
        }
    },

/**
     * Show a message in the summary row.
     *

grid.on('afteredit', function(){
    var groupValue = 'Ext Forms: Field Anchoring';
    summary.showSummaryMsg(groupValue, 'Updating Summary...');
});
     *

     * @param {String} groupValue
     * @param {String} msg Text to use as innerHTML for the summary row.
     */
    showSummaryMsg : function(groupValue, msg){
        var gid = this.view.getGroupId(groupValue);
        var node = this.getSummaryNode(gid);
        if(node){
            node.innerHTML = '
' + msg + '
';
        }
    }
});

//backwards compat
Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;

/**
 * Calculation types for summary row:

 *
  • sum :
    •
 *
  • count :
    •
 *
  • max :
    •
 *
  • min :
    •
 *
  • average :
    •
 *

 *
Custom calculations may be implemented.  An example of
 * custom summaryType=totalCost:

// define a custom summary function
Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
    return v + (record.data.estimate * record.data.rate);
};
 *

 * @property Calculations
 */

Ext.ux.grid.GroupSummary.Calculations = {
    'sum' : function(v, record, field){
        return v + (record.data[field]||0);
    },

    'count' : function(v, record, field, data){
        return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
    },

    'max' : function(v, record, field, data){
        var v = record.data[field];
        var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
        return v > max ? (data[field+'max'] = v) : max;
    },

    'min' : function(v, record, field, data){
        var v = record.data[field];
        var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
        return v < min ? (data[field+'min'] = v) : min;
    },

    'average' : function(v, record, field, data){
        var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
        var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
        return t === 0 ? 0 : t / c;
    }
};
Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;

/**
 * @class Ext.ux.grid.HybridSummary
 * @extends Ext.ux.grid.GroupSummary
 * Adds capability to specify the summary data for the group via json as illustrated here:
 *

{
    data: [
        {
            projectId: 100,     project: 'House',
            taskId:    112, description: 'Paint',
            estimate:    6,        rate:     150,
            due:'06/24/2007'
        },
        ...
    ],

    summaryData: {
        'House': {
            description: 14, estimate: 9,
                   rate: 99, due: new Date(2009, 6, 29),
                   cost: 999
        }
    }
}
 *

 *
 */
Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
    /**
     * @private
     * @param {Object} rs
     * @param {Object} cs
     */
    calculate : function(rs, cs){
        var gcol = this.view.getGroupField();
        var gvalue = rs[0].data[gcol];
        var gdata = this.getSummaryData(gvalue);
        return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
    },

/**
     *

grid.on('afteredit', function(){
    var groupValue = 'Ext Forms: Field Anchoring';
    summary.showSummaryMsg(groupValue, 'Updating Summary...');
    setTimeout(function(){ // simulate server call
        // HybridSummary class implements updateSummaryData
        summary.updateSummaryData(groupValue,
            // create data object based on configured dataIndex
            {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
    }, 2000);
});
     *

     * @param {String} groupValue
     * @param {Object} data data object
     * @param {Boolean} skipRefresh (Optional) Defaults to false
     */
    updateSummaryData : function(groupValue, data, skipRefresh){
        var json = this.grid.store.reader.jsonData;
        if(!json.summaryData){
            json.summaryData = {};
        }
        json.summaryData[groupValue] = data;
        if(!skipRefresh){
            this.refreshSummary(groupValue);
        }
    },

/**
     * Returns the summaryData for the specified groupValue or null.
     * @param {String} groupValue
     * @return {Object} summaryData
     */
    getSummaryData : function(groupValue){
        var json = this.grid.store.reader.jsonData;
        if(json && json.summaryData){
            return json.summaryData[groupValue];
        }
        return null;
    }
});

//backwards compat
Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;


The source code

Ext.ux.GroupTab = Ext.extend(Ext.Container, {
    mainItem: 0,

    expanded: true,

    deferredRender: true,

    activeTab: null,

    idDelimiter: '__',

    headerAsText: false,

    frame: false,

    hideBorders: true,

    initComponent: function(config){
        Ext.apply(this, config);
        this.frame = false;

        Ext.ux.GroupTab.superclass.initComponent.call(this);

        this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');

        this.setLayout(new Ext.layout.CardLayout({
            deferredRender: this.deferredRender
        }));

        if (!this.stack) {
            this.stack = Ext.TabPanel.AccessStack();
        }

        this.initItems();

        this.on('beforerender', function(){
            this.groupEl = this.ownerCt.getGroupEl(this);
        }, this);

        this.on('add', this.onAdd, this, {
            target: this
        });
        this.on('remove', this.onRemove, this, {
            target: this
        });

        if (this.mainItem !== undefined) {
            var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
            delete this.mainItem;
            this.setMainItem(item);
        }
    },

/**
     * 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
     */
    setActiveTab : function(item){
        item = this.getComponent(item);
        if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
            return;
        }
        if(!this.rendered){
            this.activeTab = item;
            return;
        }
        if(this.activeTab != item){
            if(this.activeTab && this.activeTab != this.mainItem){
                var oldEl = this.getTabEl(this.activeTab);
                if(oldEl){
                    Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
                }
                this.activeTab.fireEvent('deactivate', this.activeTab);
            }
            var el = this.getTabEl(item);
            Ext.fly(el).addClass('x-grouptabs-strip-active');
            this.activeTab = item;
            this.stack.add(item);

            this.layout.setActiveItem(item);
            if(this.layoutOnTabChange && item.doLayout){
                item.doLayout();
            }
            if(this.scrolling){
                this.scrollToTab(item, this.animScroll);
            }

            item.fireEvent('activate', item);
            this.fireEvent('tabchange', this, item);
        }
    },

    getTabEl: function(item){
        if (item == this.mainItem) {
            return this.groupEl;
        }
        return Ext.TabPanel.prototype.getTabEl.call(this, item);
    },

    onRender: function(ct, position){
        Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);

        this.strip = Ext.fly(this.groupEl).createChild({
            tag: 'ul',
            cls: 'x-grouptabs-sub'
        });

        this.tooltip = new Ext.ToolTip({
           target: this.groupEl,
           delegate: 'a.x-grouptabs-text',
           trackMouse: true,
           renderTo: document.body,
           listeners: {
               beforeshow: function(tip) {
                   var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
                       ? this.mainItem
                       : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);

                   if(!item.tabTip) {
                       return false;
                   }
                   tip.body.dom.innerHTML = item.tabTip;
               },
               scope: this
           }
        });

        if (!this.itemTpl) {
            var tt = new Ext.Template('
  • ', '{text}', '
    • ');
            tt.disableFormats = true;
            tt.compile();
            Ext.ux.GroupTab.prototype.itemTpl = tt;
        }

        this.items.each(this.initTab, this);
    },

    afterRender: function(){
        Ext.ux.GroupTab.superclass.afterRender.call(this);

        if (this.activeTab !== undefined) {
            var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
            delete this.activeTab;
            this.setActiveTab(item);
        }
    },

    // private
    initTab: function(item, index){
        var before = this.strip.dom.childNodes[index];
        var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

        if (item === this.mainItem) {
            item.tabEl = this.groupEl;
            p.cls += ' x-grouptabs-main-item';
        }

        var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);

        item.tabEl = item.tabEl || el;

        item.on('disable', this.onItemDisabled, this);
        item.on('enable', this.onItemEnabled, this);
        item.on('titlechange', this.onItemTitleChanged, this);
        item.on('iconchange', this.onItemIconChanged, this);
        item.on('beforeshow', this.onBeforeShowItem, this);
    },

    setMainItem: function(item){
        item = this.getComponent(item);
        if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
            return;
        }

        this.mainItem = item;
    },

    getMainItem: function(){
        return this.mainItem || null;
    },

    // private
    onBeforeShowItem: function(item){
        if (item != this.activeTab) {
            this.setActiveTab(item);
            return false;
        }
    },

    // private
    onAdd: function(gt, item, index){
        if (this.rendered) {
            this.initTab.call(this, item, index);
        }
    },

    // private
    onRemove: function(tp, item){
        Ext.destroy(Ext.get(this.getTabEl(item)));
        this.stack.remove(item);
        item.un('disable', this.onItemDisabled, this);
        item.un('enable', this.onItemEnabled, this);
        item.un('titlechange', this.onItemTitleChanged, this);
        item.un('iconchange', this.onItemIconChanged, this);
        item.un('beforeshow', this.onBeforeShowItem, this);
        if (item == this.activeTab) {
            var next = this.stack.next();
            if (next) {
                this.setActiveTab(next);
            }
            else if (this.items.getCount() > 0) {
                this.setActiveTab(0);
            }
            else {
                this.activeTab = null;
            }
        }
    },

    // 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
    onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
    onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,

    // private
    onItemTitleChanged: function(item){
        var el = this.getTabEl(item);
        if (el) {
            Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
        }
    },

    //private
    onItemIconChanged: function(item, iconCls, oldCls){
        var el = this.getTabEl(item);
        if (el) {
            Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
        }
    },

    beforeDestroy: function(){
        Ext.TabPanel.prototype.beforeDestroy.call(this);
        this.tooltip.destroy();
    }
});

Ext.reg('grouptab', Ext.ux.GroupTab);


The source code

Ext.ns('Ext.ux');

Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
    tabPosition: 'left',

    alternateColor: false,

    alternateCls: 'x-grouptabs-panel-alt',

    defaultType: 'grouptab',

    deferredRender: false,

    activeGroup : null,

    initComponent: function(){
        Ext.ux.GroupTabPanel.superclass.initComponent.call(this);

        this.addEvents(
            'beforegroupchange',
            'groupchange'
        );
        this.elements = 'body,header';
        this.stripTarget = 'header';

        this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';

        this.addClass('x-grouptabs-panel');

        if (this.tabStyle && this.tabStyle != '') {
            this.addClass('x-grouptabs-panel-' + this.tabStyle);
        }

        if (this.alternateColor) {
            this.addClass(this.alternateCls);
        }

        this.on('beforeadd', function(gtp, item, index){
            this.initGroup(item, index);
        });
    },

    initEvents : function() {
        this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
    },

    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-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});

        var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

        this.header.addClass('x-grouptabs-panel-header');
        this.bwrap.addClass('x-grouptabs-bwrap');
        this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');

        if (!this.itemTpl) {
            var tt = new Ext.Template(
                '
  • ',
                '',
                '',
                '{text}',
                '
    • '
            );
            tt.disableFormats = true;
            tt.compile();
            Ext.ux.GroupTabPanel.prototype.itemTpl = tt;
        }

        this.items.each(this.initGroup, this);
    },

    afterRender: function(){
        Ext.ux.GroupTabPanel.superclass.afterRender.call(this);

        this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
            cls: 'x-tab-joint'
        });

        this.addClass('x-tab-panel-' + this.tabPosition);
        this.header.setWidth(this.tabWidth);

        if (this.activeGroup !== undefined) {
            var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
            delete this.activeGroup;
            this.setActiveGroup(group);
            group.setActiveTab(group.getMainItem());
        }
    },

    getGroupEl : Ext.TabPanel.prototype.getTabEl,

    // private
    findTargets: function(e){
        var item = null;
        var itemEl = e.getTarget('li', this.strip);
        if (itemEl) {
            item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
            if (item.disabled) {
                return {
                    expand: null,
                    item: null,
                    el: null
                };
            }
        }
        return {
            expand: e.getTarget('.x-grouptabs-expand', this.strip),
            isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
            item: item,
            el: itemEl
        };
    },

    // private
    onStripMouseDown: function(e){
        if (e.button != 0) {
            return;
        }
        e.preventDefault();
        var t = this.findTargets(e);
        if (t.expand) {
            this.toggleGroup(t.el);
        }
        else if (t.item) {
            if(t.isGroup) {
                t.item.setActiveTab(t.item.getMainItem());
            }
            else {
                t.item.ownerCt.setActiveTab(t.item);
            }
        }
    },

    expandGroup: function(groupEl){
        if(groupEl.isXType) {
            groupEl = this.getGroupEl(groupEl);
        }
        Ext.fly(groupEl).addClass('x-grouptabs-expanded');
    },

    toggleGroup: function(groupEl){
        if(groupEl.isXType) {
            groupEl = this.getGroupEl(groupEl);
        }
        Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
        this.syncTabJoint();
    },

    syncTabJoint: function(groupEl){
        if (!this.tabJoint) {
            return;
        }

        groupEl = groupEl || this.getGroupEl(this.activeGroup);
        if(groupEl) {
            this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);

            var y = Ext.isGecko2 ? 0 : 1;
            if (this.tabPosition == 'left'){
                this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
            }
            else {
                this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
            }
        }
        else {
            this.tabJoint.hide();
        }
    },

    getActiveTab : function() {
        if(!this.activeGroup) return null;
        return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
    },

    onResize: function(){
        Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
        this.syncTabJoint();
    },

    createCorner: function(el, pos){
        return Ext.fly(el).createChild({
            cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
        });
    },

    initGroup: function(group, index){
        var before = this.strip.dom.childNodes[index];
        var p = this.getTemplateArgs(group);
        if (index === 0) {
            p.cls += ' x-tab-first';
        }
        p.cls += ' x-grouptabs-main';
        p.text = group.getMainItem().title;

        var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);

        var tl = this.createCorner(el, 'top-' + this.tabPosition);
        var bl = this.createCorner(el, 'bottom-' + this.tabPosition);

        if (group.expanded) {
            this.expandGroup(el);
        }

        if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
            bl.setLeft('-10px');
            bl.setBottom('-5px');
            tl.setLeft('-10px');
            tl.setTop('-5px');
        }

        this.mon(group, 'changemainitem', this.onGroupChangeMainItem, this);
        this.mon(group, 'beforetabchange', this.onGroupBeforeTabChange, this);
    },

    setActiveGroup : function(group) {
        group = this.getComponent(group);
        if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){
            return;
        }
        if(!this.rendered){
            this.activeGroup = group;
            return;
        }
        if(this.activeGroup != group){
            if(this.activeGroup){
                var oldEl = this.getGroupEl(this.activeGroup);
                if(oldEl){
                    Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
                }
                this.activeGroup.fireEvent('deactivate', this.activeTab);
            }

            var groupEl = this.getGroupEl(group);
            Ext.fly(groupEl).addClass('x-grouptabs-strip-active');

            this.activeGroup = group;
            this.stack.add(group);

            this.layout.setActiveItem(group);
            this.syncTabJoint(groupEl);

            group.fireEvent('activate', group);
            this.fireEvent('groupchange', this, group);
        }
    },

    onGroupBeforeTabChange: function(group, newTab, oldTab){
        if(group !== this.activeGroup || newTab !== oldTab) {
            this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
        }

        this.expandGroup(this.getGroupEl(group));
        this.setActiveGroup(group);
    },

    getFrameHeight: function(){
        var h = this.el.getFrameWidth('tb');
        h += (this.tbar ? this.tbar.getHeight() : 0) +
        (this.bbar ? this.bbar.getHeight() : 0);

        return h;
    },

    adjustBodyWidth: function(w){
        return w - this.tabWidth;
    }
});

Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);


The source code

Ext.onReady(function() {
    Ext.QuickTips.init();

    // create some portlet tools using built in Ext tool ids
    var tools = [{
        id:'gear',
        handler: function(){
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    },{
        id:'close',
        handler: function(e, target, panel){
            panel.ownerCt.remove(panel, true);
        }
    }];

    var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            xtype: 'grouptabpanel',
            tabWidth: 130,
            activeGroup: 0,
            items: [{
                mainItem: 1,
                items: [{
                    title: 'Tickets',
                    layout: 'fit',
                    iconCls: 'x-icon-tickets',
                    tabTip: 'Tickets tabtip',
                    style: 'padding: 10px;',
                    items: [new SampleGrid([0,1,2,3,4])]
                },
                {
                    xtype: 'portal',
                    title: 'Dashboard',
                    tabTip: 'Dashboard tabtip',
                    items:[{
                        columnWidth:.33,
                        style:'padding:10px 0 10px 10px',
                        items:[{
                            title: 'Grid in a Portlet',
                            layout:'fit',
                            tools: tools,
                            items: new SampleGrid([0, 2, 3])
                        },{
                            title: 'Another Panel 1',
                            tools: tools,
                            html: Ext.example.shortBogusMarkup
                        }]
                    },{
                        columnWidth:.33,
                        style:'padding:10px 0 10px 10px',
                        items:[{
                            title: 'Panel 2',
                            tools: tools,
                            html: Ext.example.shortBogusMarkup
                        },{
                            title: 'Another Panel 2',
                            tools: tools,
                            html: Ext.example.shortBogusMarkup
                        }]
                    },{
                        columnWidth:.33,
                        style:'padding:10px',
                        items:[{
                            title: 'Panel 3',
                            tools: tools,
                            html: Ext.example.shortBogusMarkup
                        },{
                            title: 'Another Panel 3',
                            tools: tools,
                            html: Ext.example.shortBogusMarkup
                        }]
                    }]
                }, {
                    title: 'Subscriptions',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Subscriptions tabtip',
                    style: 'padding: 10px;',
                    layout: 'fit',
                    items: [{
                        xtype: 'tabpanel',
                        activeTab: 1,
                        items: [{
                            title: 'Nested Tabs',
                            html: Ext.example.shortBogusMarkup
                        }]
                    }]
                }, {
                    title: 'Users',
                    iconCls: 'x-icon-users',
                    tabTip: 'Users tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }]
            }, {
                expanded: true,
                items: [{
                    title: 'Configuration',
                    iconCls: 'x-icon-configuration',
                    tabTip: 'Configuration tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }, {
                    title: 'Email Templates',
                    iconCls: 'x-icon-templates',
                    tabTip: 'Templates tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }]
            }]
        }]
    });
});


The source code

Ext.onReady(function(){
    var win;
    var button = Ext.get('show-btn');

    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                applyTo:'hello-win',
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,

                items: new Ext.TabPanel({
                    applyTo: 'hello-tabs',
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:false
                }),

                buttons: [{
                    text:'Submit',
                    disabled:true
                },{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });
});


The source code

/**
 * @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

/**
 * @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 = ['
',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 callback scope
         */
        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('ready', '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

/**
 * @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 ​ (Zero-width space),   (Non-breaking space) in Opera and IE6).
     */
    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 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
            };
        }

        // build the toolbar
        var tb = new Ext.Toolbar({
            renderTo:this.wrap.dom.firstChild
        });

        // stop form submits
        this.mon(tb.el, 'click', function(e){
            e.preventDefault();
        });

        if(this.enableFont && !Ext.isSafari2){
            this.fontSelect = tb.el.createChild({
                tag:'select',
                cls:'x-font-select',
                html: this.createFontOptions()
            });
            this.mon(this.fontSelect, 'change', function(){
                var font = this.fontSelect.dom.value;
                this.relayCmd('fontname', font);
                this.deferFocus();
            }, this);

            tb.add(
                this.fontSelect.dom,
                '-'
            );
        }

        if(this.enableFormat){
            tb.add(
                btn('bold'),
                btn('italic'),
                btn('underline')
            );
        }

        if(this.enableFontSize){
            tb.add(
                '-',
                btn('increasefontsize', false, this.adjustFont),
                btn('decreasefontsize', false, this.adjustFont)
            );
        }

        if(this.enableColors){
            tb.add(
                '-', {
                    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){
            tb.add(
                '-',
                btn('justifyleft'),
                btn('justifycenter'),
                btn('justifyright')
            );
        }

        if(!Ext.isSafari2){
            if(this.enableLinks){
                tb.add(
                    '-',
                    btn('createlink', false, this.createLink)
                );
            }

            if(this.enableLists){
                tb.add(
                    '-',
                    btn('insertorderedlist'),
                    btn('insertunorderedlist')
                );
            }
            if(this.enableSourceEdit){
                tb.add(
                    '-',
                    btn('sourceedit', true, function(btn){
                        this.toggleSourceEdit(!this.sourceEditMode);
                    })
                );
            }
        }

        this.tb = tb;
    },

/**
     * 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).
     */
    getDocMarkup : function(){
        return '';
    },

    // private
    getEditorBody : function(){
        return this.doc.body || this.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);
        // is this needed?
        // this.tb.doLayout();

        this.createIFrame();

        if(!this.width){
            var sz = this.el.getSize();
            this.setSize(sz.width, this.height || sz.height);
        }
    },

    createIFrame: function(){
        var iframe = document.createElement('iframe');
        iframe.name = Ext.id();
        iframe.frameBorder = '0';
        iframe.src = Ext.isIE ? Ext.SSL_SECURE_URL : "javascript:;";
        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);
        this.doc = this.getDoc();
        this.win = this.getWin();

        this.doc.open();
        this.doc.write(this.getDocMarkup());
        this.doc.close();

        var task = { // must defer to wait for browser to be ready
            run : function(){
                if(this.doc.body || this.doc.readyState == 'complete'){
                    Ext.TaskMgr.stop(task);
                    this.doc.designMode="on";
                    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 || String(doc.designMode).toLowerCase() != 'on'){
                this.initFrame();
            }
        }
    },

    disableItems: function(disabled){
        if(this.fontSelect){
            this.fontSelect.dom.disabled = disabled;
        }
        this.tb.items.each(function(item){
            if(item.itemId != 'sourceedit'){
                item.setDisabled(disabled);
            }
        });
    },

    // private
    onResize : function(w, h){
        Ext.form.HtmlEditor.superclass.onResize.apply(this, arguments);
        if(this.el && this.iframe){
            if(typeof w == 'number'){
                var aw = w - this.wrap.getFrameWidth('lr');
                this.el.setWidth(this.adjustWidth('textarea', aw));
                this.tb.setWidth(aw);
                this.iframe.style.width = Math.max(aw, 0) + 'px';
            }
            if(typeof h == 'number'){
                var ah = h - this.wrap.getFrameWidth('tb') - this.tb.el.getHeight();
                this.el.setHeight(this.adjustWidth('textarea', ah));
                this.iframe.style.height = Math.max(ah, 0) + 'px';
                if(this.doc){
                    this.getEditorBody().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){
        if(sourceEditMode === undefined){
            sourceEditMode = !this.sourceEditMode;
        }
        this.sourceEditMode = sourceEditMode === true;
        var btn = this.tb.items.get('sourceedit');
        if(btn.pressed !== this.sourceEditMode){
            btn.toggle(this.sourceEditMode);
            if(!btn.xtbHidden){
                return;
            }
        }
        if(this.sourceEditMode){
            this.disableItems(true);
            this.syncValue();
            this.iframe.className = 'x-hidden';
            this.el.removeClass('x-hidden');
            this.el.dom.removeAttribute('tabIndex');
            this.el.focus();
        }else{
            if(this.initialized){
                this.disableItems(false);
            }
            this.pushValue();
            this.iframe.className = '';
            this.el.addClass('x-hidden');
            this.el.dom.setAttribute('tabIndex', -1);
            this.deferFocus();
        }
        var lastSize = this.lastSize;
        if(lastSize){
            delete this.lastSize;
            this.setSize(lastSize);
        }
        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 (for BoxComponent)
    adjustSize : Ext.BoxComponent.prototype.adjustSize,

    // private (for BoxComponent)
    getResizeEl : function(){
        return this.wrap;
    },

    // private (for BoxComponent)
    getPositionEl : function(){
        return this.wrap;
    },

    // 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(html.length > 5){
            if(Ext.isWebKit){ // strip safari nonsense
                html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
            }
        }
        if(html == this.defaultValue){
            html = '';
        }
        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
                    var d = this.doc,
                        mode = d.designMode.toLowerCase();

                    d.designMode = mode.toggle('on', 'off');
                    d.designMode = mode;
                }
                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();
            var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
            ss['background-attachment'] = 'fixed'; // w3c
            dbody.bgProperties = 'fixed'; // ie

            Ext.DomHelper.applyStyles(dbody, ss);

            if(this.doc){
                try{
                    Ext.EventManager.removeAll(this.doc);
                }catch(e){}
            }

            this.doc = this.getDoc();

            Ext.EventManager.on(this.doc, {
                'mousedown': this.onEditorEvent,
                'dblclick': this.onEditorEvent,
                'click': this.onEditorEvent,
                'keyup': this.onEditorEvent,
                buffer:100,
                scope: this
            });

            if(Ext.isGecko){
                Ext.EventManager.on(this.doc, 'keypress', this.applyCommand, this);
            }
            if(Ext.isIE || Ext.isWebKit || Ext.isOpera){
                Ext.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
            }
            this.initialized = true;
            this.fireEvent('initialize', this);
            this.doc.editorInitialized = true;
            this.pushValue();
        }catch(e){}
    },

    // private
    onDestroy : function(){
        if(this.monitorTask){
            Ext.TaskMgr.stop(this.monitorTask);
        }
        if(this.rendered){
            Ext.destroy(this.tb);
            if(this.wrap){
                this.wrap.dom.innerHTML = '';
                this.wrap.remove();
            }
        }
        if(this.el){
            this.el.removeAllListeners();
            this.el.remove();
        }

        if(this.doc){
            try{
                Ext.EventManager.removeAll(this.doc);
                for (var prop in this.doc){
                   delete this.doc[prop];
                }
            }catch(e){}
        }
        this.purgeListeners();
    },

    // private
    onFirstFocus : function(){
        this.activated = true;
        this.disableItems(false);
        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.itemId == 'increasefontsize' ? 1 : -1;

        var v = parseInt(this.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.activated){
            this.onFirstFocus();
            return;
        }

        var btns = this.tb.items.map, doc = this.doc;

        if(this.enableFont && !Ext.isSafari2){
            var name = (this.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.itemId);
    },

/**
     * 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){
        this.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 r = this.doc.selection.createRange();
            if(r){
                r.collapse(true);
                r.pasteHTML(text);
                this.syncValue();
                this.deferFocus();
            }
        }else if(Ext.isGecko || Ext.isOpera){
            this.win.focus();
            this.execCmd('InsertHTML', text);
            this.deferFocus();
        }else if(Ext.isWebKit){
            this.execCmd('InsertText', text);
            this.deferFocus();
        }
    },

    // private
    fixKeys : function(){ // load time branching for fastest keydown performance
        if(Ext.isIE){
            return function(e){
                var k = e.getKey(), r;
                if(k == e.TAB){
                    e.stopEvent();
                    r = this.doc.selection.createRange();
                    if(r){
                        r.collapse(true);
                        r.pasteHTML('    ');
                        this.deferFocus();
                    }
                }else if(k == e.ENTER){
                    r = this.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();
                }
             };
        }
    }(),

/**
     * 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

/**
 * @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, beforesave, etc).  The connection url will be nullified
    // after each request as well.  Url is always re-defined during doRequest.
    this.conn.url = null;

    this.useAjax = !conn || !conn.events;

    //private.  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, {

/**
     * @cfg {Boolean} restful
     *
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 (defaults to false).

     *
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}.

     *
Some MVC (e.g., Ruby on Rails, Merb and Django) support this style of 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).
    •
     *

     *
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'
}
     */

/**
     * 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;
            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 in which to call the callback
     * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
     */
    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
        };
        // Sample the request data:  If it's an object, then it hasn't been json-encoded yet.
        // Transmit data using jsonData config of Ext.Ajax.request
        if (typeof(params[reader.meta.root]) === 'object') {
            o.jsonData = params;
        } else {
            o.params = params || {};
        }
        // Set the connection url.  If this.conn.url is not null here,
        // the user may have overridden the url during a beforeaction event-handler.
        // this.conn.url is nullified after each request.
        if (this.conn.url === null) {
            this.conn.url = this.buildUrl(action, rs);
        }
        else if (this.restful === true && rs instanceof Ext.data.Record && !rs.phantom) {
            this.conn.url += '/' + rs.id;
        }
        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
                //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.
                    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
     * @private
     */
    onRead : function(action, o, response) {
        var result;
        try {
            result = o.reader.read(response);
        }catch(e){
            // @deprecated: fire old loadexception for backwards-compat.
            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.
            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);
        }
        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
     * @private
     */
    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[reader.meta.successProperty] === false) {
            this.fireEvent('exception', this, 'remote', action, o, res, rs);
        } else {
            this.fireEvent('write', this, action, res[reader.meta.root], res, rs, o.request.arg);
        }
        o.request.callback.call(o.request.scope, res[reader.meta.root], res, res[reader.meta.successProperty]);
    },

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

Imgorg.ImageDv = Ext.extend(Ext.DataView,{
    tpl: new Ext.XTemplate(
        '',
        '
',
        '

',
        '{filename:ellipsis(15)}
',
        ''
    ),

    initComponent: function() {
        Ext.apply(this, {
            itemSelector: 'div.thumb-wrap',
            style: 'overflow:auto',
            multiSelect: true,
            overClass: 'x-view-over',
            emptyText: 'No images to display',
            plugins: [new Ext.DataView.DragSelector({
                dragSafe: true
            }), new Ext.DataView.LabelEditor({
                allowBlank: false,
                alignment: 'c-c',
                dataIndex: 'filename'
            })],
            store: new Ext.data.DirectStore({
                directFn: Imgorg.ss.Images.load,
                root: '',
                fields: ['filename', 'url', 'id', 'size']
            })
        });

        this.addEvents('viewitem');
        Imgorg.ImageDv.superclass.initComponent.call(this);
        this.on({// hacks to force the labeleditor to stop editing when we get a click elsewhere
            click: function() {
                this.plugins[1].completeEdit();
            },
            containerclick: function(dv, e) {
                this.plugins[1].completeEdit();
            },
            contextmenu: this.onContextMenu,
            containercontextmenu: this.onContextMenu,
            scope: this
        });
        this.store.on('update', this.syncRename, this);
    },

    afterRender: function() {
        Imgorg.ImageDv.superclass.afterRender.call(this);
        this.el.unselectable(); // messy if they can select the text of the file names
    },

    onContextMenu: function(e, node) {
        e.stopEvent();
        if(!this.contMenu) {
            this.contMenu = new Ext.menu.Menu({
                items: [{
                    text: 'View in Tab(s)',
                    handler: function() {
                        this.fireEvent('viewitem', this, node);
                    },
                    scope: this
                },{
                    text: 'Add to Album',
                    handler: this.selectAlbum,
                    scope: this
                },{
                    text: 'Tag',
                    handler: this.tag,
                    scope: this
                },{
                    text: 'Remove',
                    handler: this.removeImages,
                    scope: this
                }]
            });
        }
        this.currentNode = node;
        this.contMenu.showAt(e.getXY());
    },

    selectAlbum: function() {
        if (!this.albumWin) {
            this.albumWin = new Imgorg.AlbumWin();
        }
        this.albumWin.selectedRecords = this.getSelectedRecords();
        this.albumWin.show(this.currentNode);
    },

    tag: function() {
        Imgorg.TagWin.selectedRecords = this.getSelectedRecords();
        Imgorg.TagWin.show(this.currentNode);
    },

    syncRename: function(store, rec, op) {
        if (op == 'edit') {
            Imgorg.ss.Images.rename({image: rec.data.id, name: rec.data.filename, url: rec.data.url});
        }
    },

    removeImages: function() {
        var recs = this.getSelectedRecords();
        var imageIds = [];
        for (var i = 0;i < recs.length;i++) {
            imageIds.push(recs[i].data.id);
            this.store.remove(recs[i]);
        }
        Imgorg.ss.Images.remove({images: imageIds});
    }
});
Ext.reg('img-dv', Imgorg.ImageDv);


The source code

Imgorg.ImagePanel = Ext.extend(Ext.Panel,{
    closable: true,
    border: false,
    tagTpl: new Ext.XTemplate(
        '
Tags
',
        '',
            '
{text}
',
        ''
    ),
    albumTpl: new Ext.XTemplate(
        '
Album
',
        '',
            '
{text}
',
        ''
    ),
    infoTpl: new Ext.XTemplate(
        '
File Info
',
        '
Filename: {FileName}
',
        '
Size: {FileSize:fileSize}
',
        '
Height: {[values["COMPUTED"].Height]}
',
        '
Width: {[values["COMPUTED"].Width]}
'
    ),
    initComponent: function() {
        Ext.apply(this,{
            layout: 'border',
            items: [{
                border: false,
                region: 'center',
                html: '

',
                autoScroll: true
            },{
                border: false,
                region: 'east',
                itemId: 'image-properties',
                width: 250,
                title: 'Properties',
                collapsible: true,
                style: 'border-left: 1px solid #99BBE8'
            }]
        });
        Imgorg.ImagePanel.superclass.initComponent.call(this);
    },

    afterRender: function() {
        Imgorg.ImagePanel.superclass.afterRender.call(this);
        Imgorg.ss.Images.getInfo({image: this.imageData.id}, this.onGetInfo, this);
        Imgorg.ss.Albums.getAlbums({image: this.imageData.id}, this.onGetAlbums,this);
        Imgorg.ss.Tags.getTags({image: this.imageData.id}, this.onGetTags, this);
    },

    onGetInfo: function(data, resp) {
        var prop = this.getComponent('image-properties');
        this.infoTpl.append(prop.body, data)
    },

    onGetTags: function(data, resp) {
        var prop = this.getComponent('image-properties');
        this.tagTpl.append(prop.body, data);
    },

    onGetAlbums: function(data, resp) {
        var prop = this.getComponent('image-properties');
        this.albumTpl.append(prop.body, data);
    }
});
Ext.reg('img-panel',Imgorg.ImagePanel);


The source code

Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
    minWidth: 80,
    title: 'All Photos',

    initComponent: function() {
        this.tfId = 'tag-filter-'+Ext.id();

        var sliderValue = 0;
        var p = Ext.state.Manager.getProvider();
        if (p) {
            sliderValue = Ext.num(p.get('sliderValue'), 0);
        }

        Ext.apply(this,{
            layout:'fit',
            cls: 'images-view',
            items:Ext.apply({
                xtype: 'img-dv',
                itemId: 'imgorg-dv'
            },this.dvConfig||{}),
            bbar:['Tags:',{
                xtype: 'img-tagmulticombo',
                id: this.tfId,
                listeners: {
                    select: function(combo, record, idx) {
                        var vals = combo.getValue();
                        this.tagFilter(vals);
                        return true;
                    },
                    clearall: function(combo) {
                        this.clearFilter();
                    },
                    scope: this
                }
            },'->',{
                xtype: 'slider',
                itemId: 'size-slider',
                width: 200,
                style: 'margin-right:20px;',
                value: sliderValue,
                plugins: new Ext.ux.SliderTip({
                    getText: function(slider){
                        return String.format('{0}%', 100+slider.getValue()*3);
                    }
                }),
                listeners: {
                    change: this.onChange,
                    scope: this
                }
            }]
        });
        Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
        this.on('activate', this.onActivate, this);
    },

    afterRender: function() {
        Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
        this.view = this.getComponent('imgorg-dv');
        (function() {
            this.dragZone = new ImageDragZone(this.view, {
                containerScroll:true,
                ddGroup: 'organizerDD'
            });
        }).defer(100, this);
    },

    onActivate: function() {
        this.reload();
        var p = Ext.state.Manager.getProvider();
        if (p) {
            sliderValue = Ext.num(p.get('sliderValue'), 0);
            var slider = this.getBottomToolbar().getComponent('size-slider');
            slider.setValue(sliderValue);
            this.onChange(slider);
        }
    },

    onChange: function(slider, e) {
        var p = Ext.state.Manager.getProvider();
        if (p) {
            p.set('sliderValue', slider.getValue());
        }
        Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
    },

    tagFilter: function(vals) {
        if (this.view.store.lastOptions.params) {
            var album = this.view.store.lastOptions.params.album;
        }

        this.view.store.load({
            params: {
                tags: vals,
                album: album
            }
        });
    },

    clearFilter: function() {
        var album = this.view.store.lastOptions.params.album;
        this.view.store.load({
            params: {
                album: album
            }
        });
        Ext.getCmp(this.tfId).reset();
    },

    albumFilter: function(album) {
        this.getComponent('imgorg-dv').store.load({
            params: {
                album: album.id
            }
        });
    },

    reload: function() {
        this.view.store.reload();
    }
});
Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);

ImageDragZone = function(view, config){
    this.view = view;
    ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(ImageDragZone, Ext.dd.DragZone, {
    // We don't want to register our image elements, so let's
    // override the default registry lookup to fetch the image
    // from the event instead
    getDragData : function(e){
        var target = e.getTarget('.thumb-wrap');
        if(target){
            var view = this.view;
            if(!view.isSelected(target)){
                view.onClick(e);
            }
            var selNodes = view.getSelectedNodes();
            var dragData = {
                nodes: selNodes
            };
            if(selNodes.length == 1){
                dragData.ddel = target;
                dragData.single = true;
            }else{
                var div = document.createElement('div'); // create the multi element drag "ghost"
                div.className = 'multi-proxy';
                for(var i = 0, len = selNodes.length; i < len; i++){
                    div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
                    if((i+1) % 3 == 0){
                        div.appendChild(document.createElement('br'));
                    }
                }
                var count = document.createElement('div'); // selected image count
                count.innerHTML = i + ' images selected';
                div.appendChild(count);

                dragData.ddel = div;
                dragData.multi = true;
            }
            return dragData;
        }
        return false;
    },

    // this method is called by the TreeDropZone after a node drop
    // to get the new tree node (there are also other way, but this is easiest)
    getTreeNode : function(){
        var treeNodes = [];
        var nodeData = this.view.getRecords(this.dragData.nodes);
        for(var i = 0, len = nodeData.length; i < len; i++){
            var data = nodeData[i].data;
            treeNodes.push(new Ext.tree.TreeNode({
                text: data.name,
                icon: '../view/'+data.url,
                data: data,
                leaf:true,
                cls: 'image-node'
            }));
        }
        return treeNodes;
    },

    // the default action is to "highlight" after a bad drop
    // but since an image can't be highlighted, let's frame it
    afterRepair:function(){
        for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
            Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
        }
        this.dragging = false;
    },

    // override the default repairXY with one offset for the margins and padding
    getRepairXY : function(e){
        if(!this.dragData.multi){
            var xy = Ext.Element.fly(this.dragData.ddel).getXY();
            xy[0]+=3;xy[1]+=3;
            return xy;
        }
        return false;
    }
});


The source code

tx.Importer = function(){
    function chooseFile(callback){
        var file = new air.File(air.File.documentsDirectory.nativePath);
        var filter = new air.FileFilter("Tasks XML File", "*.xml");

        file.addEventListener('select', function(e){
            doImport(e.target, callback);
        });

        file.browseForOpen('Open', [filter]);
    }

    /*
     * This import function used to be clean and simple. The addition of asynchronous import and
     * a progress bar changed that quickly. :)
     */
    function doImport(file, callback){

        Ext.Msg.progress('Import', 'Reading file...');

        var listTable = tx.data.conn.getTable('list', 'listId');
        var taskTable = tx.data.conn.getTable('task', 'taskId');
        var taskCount = 0;
        var visibleIndex = 0;
        var doUpdate = true;
        var f = String.format;

        function getProgress(index){
            if(taskCount > 0){
                return (.8 * index) / taskCount;
            }else{
                return .8;
            }
        }

        function readFile(){
            var stream = new air.FileStream();
            stream.open(file, air.FileMode.READ);
            var xml = stream.readUTFBytes(stream.bytesAvailable);
            stream.close();

            Ext.Msg.updateProgress(.1, 'Parsing...');
            parse.defer(10, null, [xml]);
        }

        function parse(xml){
            try {
                var doc = new runtime.flash.xml.XMLDocument();
                doc.ignoreWhite = true;
                doc.parseXML(xml);

                var lists = doc.firstChild.childNodes;
                var count = lists.length;

                for (var i = 0; i < count; i++) {
                    taskCount += lists[i].childNodes.length;
                }
                Ext.Msg.updateProgress(.15, '', 'Loading Tasks...');
                loadLists(lists, 0);
            }catch(e){
                air.trace(e);
                alert('An error occured while trying to import the selected file.');
            }
        }

        function loadLists(lists, index){
            if(index < lists.length){
                var list = lists[index];
                listTable.save(list.attributes);
                nextTask(list.childNodes, 0, lists, index);
            }
            else {
                Ext.Msg.updateProgress(1, '', 'Completing import...');
                callback.defer(10);
            }
        }

        function nextTask(tasks, index, lists, listIndex){
            if(index < tasks.length){
                Ext.Msg.updateProgress(
                    getProgress(++visibleIndex),
                    f('{0} of {1}', visibleIndex, taskCount)
                );
                loadTasks.defer(250, window, [tasks, index, lists, listIndex]);
            }
            else {
                loadLists(lists, ++listIndex);
            }
        }

        function loadTasks(tasks, index, lists, listIndex){
            taskTable.save(tasks[index].attributes);
            nextTask(tasks, ++index, lists, listIndex);
        }

        readFile.defer(10);
    }

    this.doImport = function(callback){
        chooseFile(callback);
    }
};


The source code

Ext.ns('Ext.samples');

(function() {

SamplePanel = Ext.extend(Ext.DataView, {
    autoHeight   : true,
    frame        : true,
    cls          : 'demos',
    itemSelector : 'dd',
    overClass    : 'over',
    tpl          : new Ext.XTemplate(
        '
',
            '',
            '
{title}
',
            '
',
                '',
                    '
  ',
                        '
{text}',
                            '',
                                ' (New)',
                            '',
                            '',
                                ' (Updated)',
                            '',
                            '',
                                ' (Experimental)',
                            '',
                        '
{desc}
',
                    '
',
                '',
            '
',
            '',
        '
', {
         isExperimental: function(status){
             return status == 'experimental';
         },
         isNew: function(status){
             return status == 'new';
         },
         isUpdated: function(status){
             return status == 'updated';
         }
    }),

    onClick : function(e){
        var group = e.getTarget('h2', 3, true);
        if(group){
            group.up('div').toggleClass('collapsed');
        }else {
            var t = e.getTarget('dd', 5, true);
            if(t && !e.getTarget('a', 2)){
                var url = t.getAttributeNS('ext', 'url');
                window.open(url);
            }
        }
        return SamplePanel.superclass.onClick.apply(this, arguments);
    }
});
Ext.samples.SamplePanel = SamplePanel;
Ext.reg('samplespanel', Ext.samples.SamplePanel);
})();

Ext.onReady(function(){

// Instantiate Ext.App instance
    App = new Ext.App({});

    var catalog = Ext.samples.samplesCatalog;

    for(var i = 0, c; c = catalog[i]; i++){
        c.id = 'sample-' + i;
    }

    var store = new Ext.data.JsonStore({
        idProperty : 'id',
        fields     : ['id', 'title', 'samples'],
        data       : catalog
    });

    var panel = new Ext.Panel({
        frame      : true,
        renderTo   : 'all-demos',
        height     : 300,
        autoScroll : true,
        items      : new SamplePanel({
            store : store
        })
    });

    var tpl = new Ext.XTemplate(
        '
  • {title:stripTags}
    • '
    );
    tpl.overwrite('sample-menu', catalog);

    Ext.select('#sample-spacer').remove();

    var headerEl  = Ext.get('hd'),
        footerEl  = Ext.get('ft'),
        bodyEl    = Ext.get('bd'),
        sideBoxEl = bodyEl.child('div[class=side-box]'),
        titleEl   = bodyEl.child('h3:first-child');

    var doResize = function() {
        var windowHeight = Ext.getDoc().getViewSize().height;

        var footerHeight  = footerEl.getHeight() + footerEl.getMargins().top,
            titleElHeight = titleEl.getHeight() + titleEl.getMargins().top,
            brElHeight    = bodyEl.child('br').getHeight(),
            headerHeight  = headerEl.getHeight() + titleElHeight + brElHeight;

        var warnEl = Ext.get('fb');
        var warnHeight = warnEl ? warnEl.getHeight() : 0;

        var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
        var sideBoxHeight = sideBoxEl.getHeight();

        panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
    }

    // Resize on demand
    Ext.EventManager.onWindowResize(doResize);

    var firebugWarning = function () {
        var cp = new Ext.state.CookieProvider();

        if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
            var tpl = new Ext.Template(
                '
    Warning:  Firebug is known to cause performance issues with Ext JS. [ Hide ]
    '
            );
            var newEl = tpl.insertFirst('all-demos');

            Ext.fly('hideWarning').on('click', function() {
                Ext.fly(newEl).slideOut('t',{remove:true});
                cp.set('hideFBWarning', true);
                doResize();
            });
            Ext.fly(newEl).slideIn();
            doResize();
        }
    }

    var hideMask = function () {
        Ext.get('loading').remove();
        Ext.fly('loading-mask').fadeOut({
            remove:true,
            callback : firebugWarning
        });
    }

    hideMask.defer(250);
    doResize();

});


The source code

/**
 * @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 = function(config){
    Ext.menu.Item.superclass.constructor.call(this, config);
    if(this.menu){
        this.menu = Ext.menu.MenuMgr.get(this.menu);
    }
};
Ext.extend(Ext.menu.Item, 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',

    // 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');
        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){
            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

/*
 * Note that this control will most likely remain as an example, and not as a core Ext form
 * control.  However, the API will be changing in a future release and so should not yet be
 * treated as a final, stable API at this time.
 */

/**
 * @class Ext.ux.form.ItemSelector
 * @extends Ext.form.Field
 * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
 *
 *  @history
 *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
 *
 * @constructor
 * Create a new ItemSelector
 * @param {Object} config Configuration options
 * @xtype itemselector
 */
Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
    hideNavIcons:false,
    imagePath:"",
    iconUp:"up2.gif",
    iconDown:"down2.gif",
    iconLeft:"left2.gif",
    iconRight:"right2.gif",
    iconTop:"top2.gif",
    iconBottom:"bottom2.gif",
    drawUpIcon:true,
    drawDownIcon:true,
    drawLeftIcon:true,
    drawRightIcon:true,
    drawTopIcon:true,
    drawBotIcon:true,
    delimiter:',',
    bodyStyle:null,
    border:false,
    defaultAutoCreate:{tag: "div"},

/**
     * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
     */
    multiselects:null,

    initComponent: function(){
        Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
        this.addEvents({
            'rowdblclick' : true,
            'change' : true
        });
    },

    onRender: function(ct, position){
        Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);

        // Internal default configuration for both multiselects
        var msConfig = [{
            legend: 'Available',
            draggable: true,
            droppable: true,
            width: 100,
            height: 100
        },{
            legend: 'Selected',
            droppable: true,
            draggable: true,
            width: 100,
            height: 100
        }];

        this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
        this.fromMultiselect.on('dblclick', this.onRowDblClick, this);

        this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
        this.toMultiselect.on('dblclick', this.onRowDblClick, this);

        var p = new Ext.Panel({
            bodyStyle:this.bodyStyle,
            border:this.border,
            layout:"table",
            layoutConfig:{columns:3}
        });

        p.add(this.fromMultiselect);
        var icons = new Ext.Panel({header:false});
        p.add(icons);
        p.add(this.toMultiselect);
        p.render(this.el);
        icons.el.down('.'+icons.bwrapCls).remove();

        // ICON HELL!!!
        if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
            this.imagePath+="/";
        this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
        this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
        this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
        this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
        this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
        this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
        var el=icons.getEl();
        this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
        el.createChild({tag: 'br'});
        this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
        this.toTopIcon.on('click', this.toTop, this);
        this.upIcon.on('click', this.up, this);
        this.downIcon.on('click', this.down, this);
        this.toBottomIcon.on('click', this.toBottom, this);
        this.addIcon.on('click', this.fromTo, this);
        this.removeIcon.on('click', this.toFrom, this);
        if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
        if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
        if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
        if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
        if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
        if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }

        var tb = p.body.first();
        this.el.setWidth(p.body.first().getWidth());
        p.body.removeClass();

        this.hiddenName = this.name;
        var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
        this.hiddenField = this.el.createChild(hiddenTag);
    },

    doLayout: function(){
        if(this.rendered){
            this.fromMultiselect.fs.doLayout();
            this.toMultiselect.fs.doLayout();
        }
    },

    afterRender: function(){
        Ext.ux.form.ItemSelector.superclass.afterRender.call(this);

        this.toStore = this.toMultiselect.store;
        this.toStore.on('add', this.valueChanged, this);
        this.toStore.on('remove', this.valueChanged, this);
        this.toStore.on('load', this.valueChanged, this);
        this.valueChanged(this.toStore);
    },

    toTop : function() {
        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
        var records = [];
        if (selectionsArray.length > 0) {
            selectionsArray.sort();
            for (var i=0; i-1; i--) {
                record = records[i];
                this.toMultiselect.view.store.remove(record);
                this.toMultiselect.view.store.insert(0, record);
                selectionsArray.push(((records.length - 1) - i));
            }
        }
        this.toMultiselect.view.refresh();
        this.toMultiselect.view.select(selectionsArray);
    },

    toBottom : function() {
        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
        var records = [];
        if (selectionsArray.length > 0) {
            selectionsArray.sort();
            for (var i=0; i 0) {
            for (var i=0; i= 0) {
                    this.toMultiselect.view.store.remove(record);
                    this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
                    newSelectionsArray.push(selectionsArray[i] - 1);
                }
            }
            this.toMultiselect.view.refresh();
            this.toMultiselect.view.select(newSelectionsArray);
        }
    },

    down : function() {
        var record = null;
        var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
        selectionsArray.sort();
        selectionsArray.reverse();
        var newSelectionsArray = [];
        if (selectionsArray.length > 0) {
            for (var i=0; i 0) {
            for (var i=0; i 0) {
            for (var i=0; i


The source code

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){
        p = Ext.getDom(p);
        c = Ext.getDom(c);
        if (!p || !c) {return false;}

        if(p.contains && !Ext.isSafari) {
            return p.contains(c);
        }else if(p.compareDocumentPosition) {
            return !!(p.compareDocumentPosition(c) & 16);
        }else{
            var parent = c.parentNode;
            while (parent) {
                if (parent == p) {
                    return true;
                }
                else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
                    return false;
                }
                parent = parent.parentNode;
            }
            return false;
        }
    },

    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: function(node) {
        if (node && 3 == node.nodeType) {
            return node.parentNode;
        } else {
            return 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, {
                    responseText: xhr.responseText,
                    responseXML : xhr.responseXML,
                    argument: cb.argument
                });
            }else if(cb.success){
                cb.success.call(cb.scope||window, {
                    responseText: xhr.responseText,
                    responseXML : xhr.responseXML,
                    argument: cb.argument
                });
            }
         };
    };
    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;
                    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

/**
 * @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(typeof o == "undefined" || o === null){
                return "null";
            }else if(Ext.isArray(o)){
                return encodeArray(o);
            }else if(Object.prototype.toString.apply(o) === '[object Date]'){
                return Ext.util.JSON.encodeDate(o);
            }else if(typeof o == "string"){
                return encodeString(o);
            }else if(typeof o == "number"){
                return isFinite(o) ? String(o) : "null";
            }else if(typeof o == "boolean"){
                return String(o);
            }else {
                var a = ["{"], b, i, v;
                for (i in o) {
                    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("");
        };

    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

/**
 * @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

/**
 * @class Ext.data.JsonReader
 * @extends Ext.data.DataReader
 *
Data reader class to create an Array of {@link Ext.data.Record} objects from a JSON response
 * based on mappings in a provided {@link Ext.data.Record} constructor.

 *
Example code:

 *

var Employee = Ext.data.Record.create([
    {name: 'firstname'},                  // map the Record's "firstname" field to the row object's key of the same name
    {name: 'job', mapping: 'occupation'}  // map the Record's "job" field to the row object's "occupation" key
]);
var myReader = new Ext.data.JsonReader(
    {                             // The metadata property, with configuration options:
        totalProperty: "results", //   the property which contains the total dataset size (optional)
        root: "rows",             //   the property which contains an Array of record data objects
        idProperty: "id"          //   the property within each row object that provides an ID for the record (optional)
    },
    Employee  // {@link Ext.data.Record} constructor that provides mapping for JSON object
);

 *
This would consume a JSON data object of the form:

{
    results: 2,  // Reader's configured totalProperty
    rows: [      // Reader's configured root
        { id: 1, firstname: 'Bill', occupation: 'Gardener' },         // a row object
        { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' }  // another row object
    ]
}

 *
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.

 *
The metaData property in the JSON data object may 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 user-defined properties needed
    •
 *

 *
To use this facility to send the same data as the example above (without having to code the creation
 * of the Record constructor), 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: {
        idProperty: 'id',
        root: 'rows',
        totalProperty: 'results',
        fields: [
            {name: 'name'},
            {name: 'job', mapping: 'occupation'}
        ],
        sortInfo: {field: 'name', direction:'ASC'}, // used by store to set its sortInfo
        foo: 'bar' // custom property
    },
    results: 2,
    rows: [ // an Array
        { 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
        { 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
    ]
}

 * @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} 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} 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.
 * @cfg {String} idProperty [id] Name of the property within a row object that contains a record identifier value.  Defaults to id
 * @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 || {};

    // default idProperty, successProperty & totalProperty -> "id", "success", "total"
    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);
    },

    // private function a store will implement
    onMetaChange : function(meta, recordType, o){

    },

    /**
     * @ignore
     */
    simpleAccess: function(obj, subsc) {
        return obj[subsc];
    },

    /**
     * @ignore
     */
    getJsonAccessor: function(){
        var re = /[\[\.]/;
        return function(expr) {
            try {
                return(re.test(expr)) ?
                new Function("obj", "return obj." + expr) :
                function(obj){
                    return obj[expr];
                };
            } catch(e){}
            return Ext.emptyFn;
        };
    }(),

    /**
     * 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){
            delete this.ef;
            this.meta = o.metaData;
            this.recordType = Ext.data.Record.create(o.metaData.fields);
            this.onMetaChange(this.meta, this.recordType, o);
        }
        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;
            }
        }

        var records = [];
        for(var i = 0; i < c; i++){
            var n = root[i];
            var record = new Record(this.extractValues(n, fi, fl), this.getId(n));
            record.json = n;
            records[i] = record;
        }
        return {
            success : success,
            records : records,
            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.getJsonAccessor(s.totalProperty);
        }
        if(s.successProperty) {
            this.getSuccess = this.getJsonAccessor(s.successProperty);
        }
        this.getRoot = s.root ? this.getJsonAccessor(s.root) : function(p){return p;};
        if (s.id || s.idProperty) {
            var g = this.getJsonAccessor(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.getJsonAccessor(map));
        }
        this.ef = ef;
    },

    // private extractValues
    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;
    },

    /**
     * Decode a json response from server.
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Object} response
     */
    readResponse : function(action, response) {
        var o = (response.responseText !== undefined) ? Ext.decode(response.responseText) : response;
        if(!o) {
            throw new Ext.data.JsonReader.Error('response');
        }
        if (Ext.isEmpty(o[this.meta.successProperty])) {
            throw new Ext.data.JsonReader.Error('successProperty-response', this.meta.successProperty);
        }
        // TODO, separate empty and undefined exceptions.
        if (action === Ext.data.Api.actions.create) {
            if (Ext.isEmpty(o[this.meta.root])) {
                throw new Ext.data.JsonReader.Error('root-emtpy', this.meta.root);
            }
            else if (o[this.meta.root] === undefined) {
                throw new Ext.data.JsonReader.Error('root-undefined-response', this.meta.root);
            }
        }

        return o;
    }
});

/**
 * @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-response': '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.',
        '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-emtpy': '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

/**
 * @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

/**
 * @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 = function(config) {
    Ext.data.JsonWriter.superclass.constructor.call(this, config);

    // careful to respect "returnJson", renamed to "encode"
    // TODO: remove after v3 final release
    if (this.returnJson != undefined) {
        this.encode = this.returnJson;
    }
}
Ext.extend(Ext.data.JsonWriter, Ext.data.DataWriter, {

/**
     * @cfg {Boolean} returnJson Deprecated.  Use {@link Ext.data.JsonWriter#encode} instead.
     */
    returnJson : undefined,

/**
     * @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
     */
    encode : true,

/**
     * Final action of a write event.  Apply the written data-object to params.
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Record[]} rs
     * @param {Object} http params
     * @param {Object} data object populated according to DataReader meta-data "root" and "idProperty"
     */
    render : function(action, rs, params, data) {
        Ext.apply(params, data);

        if (this.encode === true) { // <-- @deprecated returnJson
            if (Ext.isArray(rs) && data[this.meta.idProperty]) {
                params[this.meta.idProperty] = Ext.encode(params[this.meta.idProperty]);
            }
            params[this.meta.root] = Ext.encode(params[this.meta.root]);
        }
    },

/**
     * createRecord
     * @protected
     * @param {Ext.data.Record} rec
     */
    createRecord : function(rec) {
       var data = this.toHash(rec);
       delete data[this.meta.idProperty];
       return data;
    },

/**
     * updateRecord
     * @protected
     * @param {Ext.data.Record} rec
     */
    updateRecord : function(rec) {
        return this.toHash(rec);

    },

/**
     * destroyRecord
     * @protected
     * @param {Ext.data.Record} rec
     */
    destroyRecord : function(rec) {
        return rec.id;
    }
});


The source code

/**
 * @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 of the function
     */
    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

/**
 * @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
    prepareEvent : function(e){
        var k = e.getKey();
        var h = this.keyToHandler[k];
        if(Ext.isSafari2 && h && k >= 37 && k <= 40){
            e.stopEvent();
        }
    },

    // 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"
    },

/**
     * Enable this KeyNav
     */
    enable: function(){
        if(this.disabled){
            // ie won't do special keys on keypress, no one else will repeat keys with keydown
            // the EventObject will normalize Safari automatically
            if(this.isKeydown()){
                this.el.on("keydown", this.relay,  this);
            }else{
                this.el.on("keydown", this.prepareEvent,  this);
                this.el.on("keypress", this.relay,  this);
            }
            this.disabled = false;
        }
    },

/**
     * Disable this KeyNav
     */
    disable: function(){
        if(!this.disabled){
            if(this.isKeydown()){
                this.el.un("keydown", this.relay, this);
            }else{
                this.el.un("keydown", this.prepareEvent, this);
                this.el.un("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

/**
 * @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

/* This file is automaticly generated by create_language_js.py */

// some data used in the examples
Ext.namespace('Ext.exampledata');

// TODO: complete and sort the list
Ext.exampledata.languages = [
    ['af', 'Afrikaans', 'ISO-8859-2'],
    ['bg', 'Bulgarian', 'utf-8'],
    ['ca', 'Catalonian', 'ascii'],
    ['hr', 'Croatian', 'utf-8'],
    ['cs', 'Czech', 'utf-8'],
    ['da', 'Danish', 'utf-8'],
    ['nl', 'Dutch', 'ascii'],
    ['en', 'English', 'ascii'],
    ['en_UK', 'English (UK)', 'ascii'],
    ['fa', 'Farsi (Persian)', 'utf-8'],
    ['fr_CA', 'France (Canadian)', 'UTF-8'],
    ['fr', 'France (France)', 'UTF-8'],
    ['de', 'German', 'utf-8'],
    ['el_GR', 'Greek', 'utf-8'],
    ['gr', 'Greek (Old Version)', 'utf-8'],
    ['he', 'Hebrew', 'windows-1255'],
    ['hu', 'Hungarian', 'utf-8'],
    ['id', 'Indonesian', 'ascii'],
    ['it', 'Italian', 'ascii'],
    ['ja', 'Japanese', 'utf-8'],
    ['ko', 'Korean', 'utf-8'],
    ['lv', 'Latvian', 'utf-8'],
    ['lt', 'Lithuanian', 'utf-8'],
    ['mk', 'Macedonia', 'utf-8'],
    ['no', 'Norwegian', 'utf-8'],
    ['pl', 'Polish', 'utf-8'],
    ['pt_BR', 'Portuguese/Brazil', 'ascii'],
    ['ro', 'Romanian', 'utf-8'],
    ['ru', 'Russian', 'UTF-8'],
    ['sr_RS', 'Serbian Cyrillic', 'UTF-8'],
    ['sr', 'Serbian Latin', 'utf-8'],
    ['zh_CN', 'Simplified Chinese', 'utf-8'],
    ['sk', 'Slovak', 'utf-8'],
    ['sl', 'Slovenian', 'utf-8'],
    ['es', 'Spanish/Latin American', 'utf-8'],
    ['sv_SE', 'Swedish', 'utf-8'],
    ['th', 'Thailand', 'utf-8'],
    ['zh_TW', 'Traditional Chinese', 'UTF-8'],
    ['tr', 'Turkish', 'utf-8'],
    ['ukr', 'Ukrainian', 'UTF-8'],
    ['vn', 'Vietnamese', 'UTF-8']
];


The source code

/**
 * @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 sw = this.shadow;
        if(!this.updating && this.isVisible() && (sw || this.useShim)){
            var sh = this.getShim();

            var w = this.getWidth(),
                h = this.getHeight();

            var l = this.getLeft(true),
                t = this.getTop(true);

            if(sw && !this.shadowDisabled){
                if(doShow && !sw.isVisible()){
                    sw.show(this);
                }else{
                    sw.realign(l, t, w, h);
                }
                if(sh){
                    if(doShow){
                       sh.show();
                    }
                    // fit the shim behind the shadow, so it is shimmed too
                    var a = sw.adjusts, s = sh.dom.style;
                    s.left = (Math.min(l, l+a.l))+'px';
                    s.top = (Math.min(t, t+a.t))+'px';
                    s.width = (w+a.w)+'px';
                    s.height = (h+a.h)+'px';
                }
            }else if(sh){
                if(doShow){
                   sh.show();
                }
                sh.setSize(w, h);
                sh.setLeftTop(l, t);
            }

        }
    },

    // private
    destroy : function(){
        this.hideShim();
        if(this.shadow){
            this.shadow.hide();
        }
        this.removeAllListeners();
        Ext.removeNode(this.dom);
        Ext.Element.uncache(this.id);
    },

    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

//
// This is the main layout definition.
//
Ext.onReady(function(){

    Ext.QuickTips.init();

    // This is an inner body element within the Details panel created to provide a "slide in" effect
    // on the panel body without affecting the body's box itself.  This element is created on
    // initial use and cached in this var for subsequent access.
    var detailEl;

    // This is the main content center region that will contain each example layout panel.
    // It will be implemented as a CardLayout since it will contain multiple panels with
    // only one being visible at any given time.
    var contentPanel = {
        id: 'content-panel',
        region: 'center', // this is what makes this panel into a region within the containing layout
        layout: 'card',
        margins: '2 5 5 0',
        activeItem: 0,
        border: false,
        items: [
            // from basic.js:
            start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
            // from custom.js:
            rowLayout, centerLayout,
            // from combination.js:
            absoluteForm, tabsNestedLayouts
        ]
    };

    // Go ahead and create the TreePanel now so that we can use it below
    var treePanel = new Ext.tree.TreePanel({
        id: 'tree-panel',
        title: 'Sample Layouts',
        region:'north',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,

        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,

        loader: new Ext.tree.TreeLoader({
            dataUrl:'tree-data.json'
        }),

        root: new Ext.tree.AsyncTreeNode()
    });

    // Assign the changeLayout function to be called on tree node click.
    treePanel.on('click', function(n){
        var sn = this.selModel.selNode || {}; // selNode is null on initial selection
        if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node
            Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
            if(!detailEl){
                var bd = Ext.getCmp('details-panel').body;
                bd.update('').setStyle('background','#fff');
                detailEl = bd.createChild(); //create default empty div
            }
            detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
        }
    });

    // This is the Details panel that contains the description for each example layout.
    var detailsPanel = {
        id: 'details-panel',
        title: 'Details',
        region: 'center',
        bodyStyle: 'padding-bottom:15px;background:#eee;',
        autoScroll: true,
        html: '
When you select a layout from the tree, additional details will display here.
'
    };

    // Finally, build the main layout once all the pieces are ready.  This is also a good
    // example of putting together a full-screen BorderLayout within a Viewport.
    new Ext.Viewport({
        layout: 'border',
        title: 'Ext Layout Browser',
        items: [{
            xtype: 'box',
            region: 'north',
            applyTo: 'header',
            height: 30
        },{
            layout: 'border',
            id: 'layout-browser',
            region:'west',
            border: false,
            split:true,
            margins: '2 0 5 5',
            width: 275,
            minSize: 100,
            maxSize: 500,
            items: [treePanel, detailsPanel]
        },
            contentPanel
        ],
        renderTo: Ext.getBody()
    });
});


The source code

Ext.onReady(function(){

    Ext.state.Manager.setProvider(
            new Ext.state.SessionProvider({state: Ext.appState}));

    var button = Ext.get('show-btn');

    button.on('click', function(){

        // tabs for the center
        var tabs = new Ext.TabPanel({
            region: 'center',
            margins:'3 3 3 0',
            activeTab: 0,
            defaults:{autoScroll:true},

            items:[{
                title: 'Bogus Tab',
                html: Ext.example.bogusMarkup
            },{
                title: 'Another Tab',
                html: Ext.example.bogusMarkup
            },{
                title: 'Closable Tab',
                html: Ext.example.bogusMarkup,
                closable:true
            }]
        });

        // Panel for the west
        var nav = new Ext.Panel({
            title: 'Navigation',
            region: 'west',
            split: true,
            width: 200,
            collapsible: true,
            margins:'3 0 3 3',
            cmargins:'3 3 3 3'
        });

        var win = new Ext.Window({
            title: 'Layout Window',
            closable:true,
            width:600,
            height:350,
            //border:false,
            plain:true,
            layout: 'border',

            items: [nav, tabs]
        });

        win.show(this);
    });
});


The source code

Ext.onReady(function(){

    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.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}',
            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)');
    });
});


The source code

ListLoader = function(config){
    Ext.apply(this, config);
};

Ext.extend(ListLoader, Ext.util.Observable, {
    keyAttribute: 'id',
    keyField: 'parentId',

    load: function(node, callback){
        var key = this.keyField;
        var v = node.attributes[this.keyAttribute];
        var rs = this.store.queryBy(function(r){
            return r.data[key] === v;
        });
        node.beginUpdate();
        for (var i = 0, d = rs.items, len = d.length; i < len; i++) {
            var n = this.createNode(d[i]);
            if (n) {
                node.appendChild(n);
            }
        }
        node.endUpdate();
        if(typeof callback == "function"){
            callback(this, node);
        }
    },

    createNode : function(record){
        var d = record.data, n;
        if(d.isFolder){
            n = new Ext.tree.AsyncTreeNode({
                loader: this,
                id: record.id,
                text: d.listName,
                leaf: false,
                iconCls: 'icon-folder',
                editable: true,
                expanded: true,
                isFolder: true
            });
        }else{
            n = new Ext.tree.TreeNode({
                id: record.id,
                text: d.listName,
                leaf: true,
                iconCls: 'icon-list',
                editable: true
            });
        }
        return n;
    }
});


The source code

// Implementation class for created the tree powered form field
ListSelector = Ext.extend(Ext.ux.TreeSelector, {
    maxHeight:200,
    listenForLoad: false,
    initComponent : function(){

        this.tree = new Ext.tree.TreePanel({
            animate:false,
            border:false,
            width: this.treeWidth || 180,
            autoScroll:true,
            useArrows:true,
            selModel: new Ext.tree.ActivationModel(),
            loader : new ListLoader({store: this.store})
        });

        var root = new Ext.tree.AsyncTreeNode({
            text: 'All Lists',
            id: 'root',
            leaf: false,
            iconCls: 'icon-folder',
            expanded: true,
            isFolder: true
        });
        this.tree.setRootNode(root);

        this.tree.on('render', function(){
            this.store.bindTree(this.tree);
        }, this);

        ListSelector.superclass.initComponent.call(this);

        // selecting folders is not allowed, so filter them
        this.tree.getSelectionModel().on('beforeselect', this.beforeSelection, this);

        // if being rendered before the store is loaded, reload when it is loaded
        if(this.listenForLoad) {
            this.store.on('load', function(){
                root.reload();
            }, this, {
                single: true
            });
        }
    },

    beforeSelection : function(tree, node){
        if(node && node.attributes.isFolder){
            node.toggle();
            return false;
        }
    }
});


The source code

tx.data.ListStore = Ext.extend(Ext.data.Store, {
    constructor: function(){
        tx.data.ListStore.superclass.constructor.call(this, {
            sortInfo:{field: 'listName', direction: "ASC"},
            reader: new Ext.data.JsonReader({
                id: 'listId',
                fields: tx.data.List
            })
        });
        this.boundTrees = {};
        this.conn = tx.data.conn;
        this.proxy = new Ext.sql.Proxy(tx.data.conn, 'list', 'listId', this);
    },

    getName : function(id){
        var l = this.data.map[id];
        return l ? l.data.listName : '';
    },

    addList : function(name, id, isFolder, parentId){
        var l = this.findList(name);
        if(!l){
            var id = id || Ext.uniqueId();
            l = new tx.data.List({listId: id, listName: name, isFolder: isFolder === true, parentId: parentId || 'root'}, id);
            this.add(l);
        }
        return l;
    },

    newList : function(isFolder, parentId){
        var i = 1;
        var text = isFolder ? 'New Folder ' : 'New List ';
        while(this.findList(text + i)){
            i++;
        }
        return this.addList(text + i, undefined, isFolder, parentId);
    },

    findList : function(name){
        var d = this.data;
        for(var i = 0, len = d.length; i < len; i++){
            if(d.items[i].data.listName === name){
                return d.items[i];
            }
        }
        return null;
    },

    loadDemoLists: function(){
        this.addList('Personal', 'personal', true, 'root');
        this.addList('Family', 'family', false, 'personal');
        this.addList('Bills', 'bills', false, 'personal');
        this.addList('Fun', 'fun', false, 'personal');
        this.addList('Other Stuff', 'personal-misc', false, 'personal');
        this.addList('Work', 'work', true, 'root');
        this.addList('Ext 2.x', 'ext2', false, 'work');
        this.addList('Ext 1.x', 'ext1', false, 'work');
        this.addList('Meetings', 'meetings', false, 'work');
        this.addList('Miscellaneous', 'work-misc', false, 'work');
    },

    bindTree : function(tree){
        this.boundTrees[tree.id] = {
            add: function(ls, records){
                var pnode = tree.getNodeById(records[0].data.parentId);
                if(pnode){
                    pnode.reload();
                }
            },

            remove: function(ls, record){
                var node = tree.getNodeById(record.id);
                if(node && node.parentNode){
                    node.parentNode.removeChild(node);
                }
            },

            update: function(ls, record){
                var node = tree.getNodeById(record.id);
                if(node){
                    node.setText(record.data.listName);
                }
            }
        };

        this.on(this.boundTrees[tree.id]);
    },

    unbindTree : function(tree){
        var h = this.boundTrees[tree.id];
        if (h) {
            this.un('add', h.add);
            this.un('remove', h.remove);
            this.un('update', h.update);
        }
    },

    prepareTable : function(){
        try{
        this.createTable({
            name: 'list',
            key: 'listId',
            fields: tx.data.List.prototype.fields
        });
        }catch(e){console.log(e);}
    }
});


The source code

ListTree = function(config){
    ListTree.superclass.constructor.call(this, Ext.apply({
        id:'list-tree',
        animate:false,
        //rootVisible:false,
        region:'west',
        width:200,
        split:true,
        title:'My Lists',
        autoScroll:true,
        margins: '3 0 3 3',
        cmargins: '3 3 3 3',
        useArrows:true,
        collapsible:true,
        minWidth:120
    }, config));

    this.on('contextmenu', this.onContextMenu, this);
}
Ext.extend(ListTree, Ext.tree.TreePanel, {

    initComponent : function(){
        this.bbar = [
            tx.actions.newList,
            tx.actions.deleteList,
            '-',
            tx.actions.newFolder,
            tx.actions.deleteFolder
        ];

        this.loader = new ListLoader({
            store: tx.data.lists
        });
        ListTree.superclass.initComponent.call(this);

        var root = new Ext.tree.AsyncTreeNode({
            text: 'All Lists',
            id: 'root',
            leaf: false,
            iconCls: 'icon-folder',
            expanded: true,
            isFolder: true,
            editable: false
        });
        this.setRootNode(root);

        this.editor = new Ext.tree.TreeEditor(this, {
            allowBlank:false,
            blankText:'A name is required',
            selectOnFocus:true
        });
        this.editor.shadow = false;

        this.editor.on('beforecomplete', function(ed, value, startValue){
            var node = ed.editNode;
            value = Ext.util.Format.htmlEncode(value);
            var r = this.store.getById(node.id);
            r.set('listName', value);
            //ed.editing = false;
            //ed.hide();
            //return false;
        }, this);

        this.sorter = new Ext.tree.TreeSorter(this, {
            folderSort: true
        });
    },

    getActiveFolderId : function(){
        var sm = this.selModel;
        var n = sm.getSelectedNode();
        if(n){
            return n.attributes.isFolder ? n.id : n.attributes.parentId;
        }
        return 'root';
    },

    onContextMenu : function(node, e){
        if(!this.menu){ // create context menu on first right click
            this.menu = new Ext.menu.Menu({
                id:'lists-ctx',
                listWidth: 200,
                items: [{
                    iconCls:'icon-edit',
                    text:'New Task',
                    scope: this,
                    handler:function(){
                        this.ctxNode.select();
                        tx.actions.newTask.execute();
                    }
                },{
                    iconCls:'icon-list-new',
                    text:'New List',
                    scope: this,
                    handler:function(){
                        this.ctxNode.select();
                        tx.actions.newList.execute();
                    }
                },{
                    iconCls:'icon-folder-new',
                    text:'New Folder',
                    scope: this,
                    handler:function(){
                        this.ctxNode.select();
                        tx.actions.newFolder.execute();
                    }
                },'-',{
                    text:'Delete',
                    iconCls:'icon-list-delete',
                    scope: this,
                    handler:function(){
                        this.removeList(this.ctxNode);
                    }
                }]
            });
            this.menu.on('hide', this.onContextHide, this);
        }
        if(this.ctxNode){
            this.ctxNode.ui.removeClass('x-node-ctx');
            this.ctxNode = null;
        }
        this.ctxNode = node;
        this.ctxNode.ui.addClass('x-node-ctx');

        this.menu.items.get(1).setVisible(!!node.attributes.isFolder);
        this.menu.items.get(2).setVisible(!!node.attributes.isFolder);
        this.menu.items.get(0).setVisible(!node.attributes.isFolder);

        this.menu.showAt(e.getXY());
    },

    onContextHide : function(){
        if(this.ctxNode){
            this.ctxNode.ui.removeClass('x-node-ctx');
            this.ctxNode = null;
        }
    },

    startEdit : function(node, select){
        if(typeof node == 'string'){
            node = this.getNodeById(node);
        }
        if(select === true){
            node.select();
        }
        var ed = this.editor;
        setTimeout(function(){
            ed.editNode = node;
            ed.startEdit(node.ui.textNode);
        }, 10);
    },

    removeList : function(s){
        if (s && s.attributes.editable) {
            Ext.Msg.confirm('Confirm', 'Are you sure you want to delete "' + Ext.util.Format.htmlEncode(s.text) + '"?', function(btn){
                if (btn == 'yes') {
                    if (s.nextSibling) {
                        s.nextSibling.select();
                    }
                    else
                        if (s.previousSibling) {
                            s.previousSibling.select();
                        }
                    s.parentNode.removeChild(s);
                    tx.data.lists.remove(this.store.getById(s.id));
                    tx.data.tasks.removeList(s.id);
                }
            }, this);
        }
    }
});


The source code

/**
 * @class Ext.ListView
 * @extends Ext.DataView
 *
Ext.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.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.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
     * 19 pixels)
     */
    scrollOffset : 19,

/**
     * @cfg {Boolean/Object} columnResize
     * Specify true or specify a configuration object for {@link Ext.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.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.
     */

    initComponent : function(){
        if(this.columnResize){
            this.colResizer = new Ext.ListView.ColumnResizer(this.colResizer);
            this.colResizer.init(this);
        }
        if(this.columnSort){
            this.colSorter = new Ext.ListView.Sorter(this.columnSort);
            this.colSorter.init(this);
        }
        if(!this.internalTpl){
            this.internalTpl = new Ext.XTemplate(
                '
',
                    '',
                    '
',
                        '{header}',
                    '
',
                    '',
                    '
',
                '
',
                '
',
                '
'
            );
        }
        if(!this.tpl){
            this.tpl = new Ext.XTemplate(
                '',
                    '
',
                        '',
                        '
',
                            '{[values.tpl.apply(parent)]}',
                        '
',
                        '',
                        '
',
                    '
',
                ''
            );
        };
        var cs = this.columns, allocatedWidth = 0, colsWithWidth = 0, len = cs.length;
        for(var i = 0; i < len; i++){
            var c = cs[i];
            if(!c.tpl){
                c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
            }else if(Ext.isString(c.tpl)){
                c.tpl = new Ext.XTemplate(c.tpl);
            }
            c.align = c.align || 'left';
            if(Ext.isNumber(c.width)){
                c.width *= 100;
                allocatedWidth += c.width;
                colsWithWidth++;
            }
        }
        // auto calculate missing column widths
        if(colsWithWidth < len){
            var remaining = len - colsWithWidth;
            if(allocatedWidth < 100){
                var perCol = ((100-allocatedWidth) / remaining);
                for(var j = 0; j < len; j++){
                    var c = cs[j];
                    if(!Ext.isNumber(c.width)){
                        c.width = perCol;
                    }
                }
            }
        }
        Ext.ListView.superclass.initComponent.call(this);
    },

    onRender : function(){
        Ext.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.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 - this.scrollOffset;
            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 == 'number')){
            bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
        }
    },

    updateIndexes : function(){
        Ext.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 + '%';
        }
    }
});

Ext.reg('listview', Ext.ListView);


The source code

/**
 * @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('beforeload', this.onBeforeLoad, this);
        this.store.on('load', this.onLoad, this);
        this.store.on('exception', this.onLoad, this);
        this.removeMask = Ext.value(this.removeMask, false);
    }else{
        var um = this.el.getUpdater();
        um.showLoadIndicator = false; // disable the default indicator
        um.on('beforeupdate', this.onBeforeLoad, this);
        um.on('update', this.onLoad, this);
        um.on('failure', this.onLoad, this);
        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

// Initialize the state provider
Ext.state.Manager.setProvider(new Ext.air.FileProvider({
    file: 'tasks.state',
    // if first time running
    defaultState : {
        mainWindow : {
            width:780,
            height:580,
            x:10,
            y:10
        },
        defaultReminder: 480
    }
}));

Ext.onReady(function(){
    Ext.QuickTips.init();

    // maintain window state automatically
    var win = new Ext.air.NativeWindow({
        id: 'mainWindow',
        instance: window.nativeWindow,
        minimizeToTray: true,
        trayIcon: 'ext-air/resources/icons/extlogo16.png',
        trayTip: 'Simple Tasks',
        trayMenu : [{
            text: 'Open Simple Tasks',
            handler: function(){
                win.activate();
            }
        }, '-', {
            text: 'Exit',
            handler: function(){
                air.NativeApplication.nativeApplication.exit();
            }
        }]
    });

    tx.data.conn.open('tasks.db');

    var grid = new TaskGrid();
    var selections = grid.getSelectionModel();

    // Shared actions used by Ext toolbars, menus, etc.
    var actions = {
        newTask: new Ext.Action({
            text: 'New Task',
            iconCls: 'icon-active',
            tooltip: 'New Task',
            handler: function(){
                taskHeader.ntTitle.focus();
            }
        }),

        deleteTask: new Ext.Action({
            itemText: 'Delete',
            iconCls: 'icon-delete-task',
            tooltip: 'Delete Task',
            disabled: true,
            handler: function(){
                Ext.Msg.confirm('Confirm', 'Are you sure you want to delete the selected task(s)?', function(btn){
                    if (btn == 'yes') {
                        selections.each(function(s){
                            tx.data.tasks.remove(s);
                        });
                    }
                });
            }
        }),

        complete: new Ext.Action({
            itemText: 'Mark Complete',
            iconCls: 'icon-mark-complete',
            tooltip: 'Mark Complete',
            disabled: true,
            handler: function(){
                selections.each(function(s){
                    s.set('completed', true);
                });
                tx.data.tasks.applyFilter();
            }
        }),

        active: new Ext.Action({
            itemText: 'Mark Active',
            tooltip: 'Mark Active',
            iconCls: 'icon-mark-active',
            disabled: true,
            handler: function(){
                selections.each(function(s){
                    s.set('completed', false);
                });
                tx.data.tasks.applyFilter();
            }
        }),

        newList: new Ext.Action({
            itemText: 'New List',
            tooltip: 'New List',
            iconCls: 'icon-list-new',
            handler: function(){
                var id = tx.data.lists.newList(false, tree.getActiveFolderId()).id;
                tree.startEdit(id, true);
            }
        }),

        deleteList: new Ext.Action({
            itemText: 'Delete',
            tooltip: 'Delete List',
            iconCls: 'icon-list-delete',
            disabled: true,
            handler: function(){
                tree.removeList(tree.getSelectionModel().getSelectedNode());
            }
        }),

        newFolder: new Ext.Action({
            itemText: 'New Folder',
            tooltip: 'New Folder',
            iconCls: 'icon-folder-new',
            handler: function(){
                var id = tx.data.lists.newList(true, tree.getActiveFolderId()).id;
                tree.startEdit(id, true);
            }
        }),

        deleteFolder: new Ext.Action({
            itemText: 'Delete',
            tooltip: 'Delete Folder',
            iconCls: 'icon-folder-delete',
            disabled: true,
            handler: function(s){
                tree.removeList(tree.getSelectionModel().getSelectedNode());
            }
        }),

        quit : new Ext.Action({
            text: 'Exit',
            handler: function(){
                air.NativeApplication.nativeApplication.exit();
            }
        }),

        pasteAsTask : new Ext.Action({
            itemText: 'Paste as New Task',
            tooltip: 'Paste as New Task',
            iconCls: 'icon-paste-new',
            handler: function(){
                if(air.Clipboard.generalClipboard.hasFormat(air.ClipboardFormats.TEXT_FORMAT)){
                    var text = air.Clipboard.generalClipboard.getData(air.ClipboardFormats.TEXT_FORMAT);
                    tx.data.tasks.addTask({
                        taskId: Ext.uniqueId(),
                        title: Ext.util.Format.htmlEncode(text.replace(/[\n\r]/g, '')),
                        dueDate: new Date(),
                        description: '',
                        listId: tx.data.getActiveListId(),
                        completed: false,
                        reminder: ''
                    });
                }else{
                    Ext.Msg.alert('Warning', 'Could not create task. The clipboard is empty.');
                }
            }
        })
    };
    tx.actions = actions;

    var menus = Ext.air.SystemMenu;

    menus.add('File', [
        actions.newTask,
        actions.newList,
        actions.newFolder,
        '-',{
            text:'Import...',
            handler: function(){
                var importer = new tx.Importer();
                importer.doImport(function(){
                    tx.data.lists.load();
                    root.reload();
                    loadList('root');
                    Ext.Msg.hide();
                });
            }
        },{
            text:'Export...',
            handler: function(){
                new tx.Exporter();
            }
        },
        '-',
        actions.quit
    ]);

    menus.add('Edit', [
        actions.pasteAsTask
    ]);

    var viewMenu = menus.add('View', [{
        text: 'All Tasks',
        checked: true,
        handler: function(){
            Ext.getCmp('filter').setActiveItem(0);
        }
    },{
        text: 'Active Tasks',
        checked: false,
        handler: function(){
            Ext.getCmp('filter').setActiveItem(1);
        }
    },{
        text: 'Completed Tasks',
        checked: false,
        handler: function(){
            Ext.getCmp('filter').setActiveItem(2);
        }
    }]);

    menus.add('Help', [{
        text: 'About',
        handler: function(){
            Ext.air.NativeWindowManager.getAboutWindow().activate();
        }
    }]);

    var tree = new ListTree({
        actions: actions,
        store: tx.data.lists
    });

    var root = tree.getRootNode();

    var listSm = tree.getSelectionModel();

    tx.data.lists.bindTree(tree);
    tx.data.lists.on('update', function(){
        tx.data.tasks.applyGrouping();
        if(grid.titleNode){
            grid.setTitle(grid.titleNode.text);
        }
    });

    var tb = new Ext.Toolbar({
        region:'north',
        id:'main-tb',
        height:26,
        items: [{
                xtype:'splitbutton',
                iconCls:'icon-edit',
                text:'New',
                handler: actions.newTask.initialConfig.handler,
                menu: [actions.newTask, actions.newList, actions.newFolder]
            },'-',
            actions.deleteTask,
            actions.complete,
            actions.active,
            '-',
            actions.pasteAsTask,
            '->',{
                xtype:'switch',
                id:'filter',
                activeItem:0,
                items: [{
                    tooltip:'All Tasks',
                    filter: 'all',
                    iconCls:'icon-all',
                    menuIndex: 0
                },{
                    tooltip:'Active Tasks',
                    filter: false,
                    iconCls:'icon-active',
                    menuIndex: 1
                },{
                    tooltip:'Completed Tasks',
                    filter: true,
                    iconCls:'icon-complete',
                    menuIndex: 2
                }],
                listeners: {
                    change: function(btn, item){
                        tx.data.tasks.applyFilter(item.filter);
                        for (var i = 0; i < 3; i++) {
                            viewMenu.items[i].checked = item.menuIndex === i;
                        }
                    },
                    delay: 10 // delay gives user instant click feedback before filtering tasks
                }
            }, ' ', ' ', ' '
        ]
    });

    var viewport = new Ext.Viewport({
        layout:'border',
        items: [tb, tree, grid]
    });

    grid.on('keydown', function(e){
         if(e.getKey() == e.DELETE && !grid.editing){
             actions.deleteTask.execute();
         }
    });

    tree.el.on('keydown', function(e){
         if(e.getKey() == e.DELETE && !tree.editor.editing){
             actions.deleteList.execute();
         }
    });

    selections.on('selectionchange', function(sm){
        var disabled = sm.getCount() < 1;
        actions.complete.setDisabled(disabled);
        actions.active.setDisabled(disabled);
        actions.deleteTask.setDisabled(disabled);
    });

    var taskHeader = new TaskHeader(grid);

    win.show();
    win.instance.activate();

    tx.data.tasks.init();

    tree.root.select();

    var loadList = function(listId){
        var node = tree.getNodeById(listId);
        if(node && !node.isSelected()){
            node.select();
            return;
        }
        actions.deleteList.setDisabled(!node || !node.attributes.editable);
        actions.deleteFolder.setDisabled(!node || node.attributes.editable === false || !node.attributes.isFolder);
        if(node){
            if (node.attributes.isFolder) {
                var lists = [];
                node.cascade(function(n){
                    if (!n.attributes.isFolder) {
                        lists.push(n.attributes.id);
                    }
                });
                tx.data.tasks.loadList(lists);
            }
            else {
                tx.data.tasks.loadList(node.id);
            }
            grid.titleNode = node;
            grid.setTitle(node.text);
            grid.setIconClass(node.attributes.iconCls);
        }
    }

    listSm.on('selectionchange', function(t, node){
        loadList(node ? node.id : null);
    });

    root.reload();

    if(Ext.state.Manager.get('defaultReminder') === undefined){
        Ext.state.Manager.set('defaultReminder', 9 * 60); // default to 9am
    }

    win.on('closing', function(){
        Ext.air.NativeWindowManager.closeAll();
    });

    tx.ReminderManager.init();

    grid.body.on('dragover', function(e){
        if(e.hasFormat(Ext.air.DragType.TEXT)){
            e.preventDefault();
        }
    });

    grid.body.on('drop', function(e){
        if(e.hasFormat(Ext.air.DragType.TEXT)){
            var text = e.getData(Ext.air.DragType.TEXT);
            try{
                // from outlook
                if(text.indexOf("Subject\t") != -1){
                    var tasks = text.split("\n");
                    for(var i = 1, len = tasks.length; i < len; i++){
                        var data = tasks[i].split("\t");
                        var list = tx.data.lists.findList(data[2]);
                        tx.data.tasks.addTask({
                            taskId: Ext.uniqueId(),
                            title: Ext.util.Format.htmlEncode(data[0]),
                            dueDate: Date.parseDate(data[1], 'D n/j/Y') || '',
                            description: '',
                            listId: list ? list.id : tx.data.getActiveListId(),
                            completed: false,
                            reminder: ''
                        });
                    }
                }else{
                    tx.data.tasks.addTask({
                        taskId: Ext.uniqueId(),
                        title: Ext.util.Format.htmlEncode(text),
                        dueDate: new Date(),
                        description: '',
                        listId: tx.data.getActiveListId(),
                        completed: false,
                        reminder: ''
                    });
                }
            }catch(e){
                air.trace('An error occured trying to import drag drop tasks.');
            }
        }
    });
});


The source code

MainPanel = function(){
    this.preview = new Ext.Panel({
        id: 'preview',
        region: 'south',
        cls:'preview',
        autoScroll: true,
        listeners: FeedViewer.LinkInterceptor,

        tbar: [{
            id:'tab',
            text: 'View in New Tab',
            iconCls: 'new-tab',
            disabled:true,
            handler : this.openTab,
            scope: this
        },
        '-',
        {
            id:'win',
            text: 'Go to Post',
            iconCls: 'new-win',
            disabled:true,
            scope: this,
            handler : function(){
                window.open(this.gsm.getSelected().data.link);
            }
        }],

        clear: function(){
            this.body.update('');
            var items = this.topToolbar.items;
            items.get('tab').disable();
            items.get('win').disable();
        }
    });

    this.grid = new FeedGrid(this, {
        tbar:[{
            text:'Open All',
            tooltip: {title:'Open All',text:'Opens all item in tabs'},
            iconCls: 'tabs',
            handler: this.openAll,
            scope:this
        },
        '-',
        {
            split:true,
            text:'Reading Pane',
            tooltip: {title:'Reading Pane',text:'Show, move or hide the Reading Pane'},
            iconCls: 'preview-bottom',
            handler: this.movePreview.createDelegate(this, []),
            menu:{
                id:'reading-menu',
                cls:'reading-menu',
                width:100,
                items: [{
                    text:'Bottom',
                    checked:true,
                    group:'rp-group',
                    checkHandler:this.movePreview,
                    scope:this,
                    iconCls:'preview-bottom'
                },{
                    text:'Right',
                    checked:false,
                    group:'rp-group',
                    checkHandler:this.movePreview,
                    scope:this,
                    iconCls:'preview-right'
                },{
                    text:'Hide',
                    checked:false,
                    group:'rp-group',
                    checkHandler:this.movePreview,
                    scope:this,
                    iconCls:'preview-hide'
                }]
            }
        },
        '-',
        {
            pressed: true,
            enableToggle:true,
            text:'Summary',
            tooltip: {title:'Post Summary',text:'View a short summary of each item in the list'},
            iconCls: 'summary',
            scope:this,
            toggleHandler: function(btn, pressed){
                this.grid.togglePreview(pressed);
            }
        }]
    });

    MainPanel.superclass.constructor.call(this, {
        id:'main-tabs',
        activeTab:0,
        region:'center',
        margins:'0 5 5 0',
        resizeTabs:true,
        tabWidth:150,
        minTabWidth: 120,
        enableTabScroll: true,
        plugins: new Ext.ux.TabCloseMenu(),
        items: {
            id:'main-view',
            layout:'border',
            title:'Loading...',
            hideMode:'offsets',
            items:[
                this.grid, {
                id:'bottom-preview',
                layout:'fit',
                items:this.preview,
                height: 250,
                split: true,
                border:false,
                region:'south'
            }, {
                id:'right-preview',
                layout:'fit',
                border:false,
                region:'east',
                width:350,
                split: true,
                hidden:true
            }]
        }
    });

    this.gsm = this.grid.getSelectionModel();

    this.gsm.on('rowselect', function(sm, index, record){
        FeedViewer.getTemplate().overwrite(this.preview.body, record.data);
        var items = this.preview.topToolbar.items;
        items.get('tab').enable();
        items.get('win').enable();
    }, this, {buffer:250});

    this.grid.store.on('beforeload', this.preview.clear, this.preview);
    this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);

    this.grid.on('rowdblclick', this.openTab, this);
};

Ext.extend(MainPanel, Ext.TabPanel, {

    loadFeed : function(feed){
        this.grid.loadFeed(feed.url);
        Ext.getCmp('main-view').setTitle(feed.text);
    },

    movePreview : function(m, pressed){
        if(!m){ // cycle if not a menu item click
            var items = Ext.menu.MenuMgr.get('reading-menu').items.items;
            var b = items[0], r = items[1], h = items[2];
            if(b.checked){
                r.setChecked(true);
            }else if(r.checked){
                h.setChecked(true);
            }else if(h.checked){
                b.setChecked(true);
            }
            return;
        }
        if(pressed){
            var preview = this.preview;
            var right = Ext.getCmp('right-preview');
            var bot = Ext.getCmp('bottom-preview');
            var btn = this.grid.getTopToolbar().items.get(2);
            switch(m.text){
                case 'Bottom':
                    right.hide();
                    bot.add(preview);
                    bot.show();
                    bot.ownerCt.doLayout();
                    btn.setIconClass('preview-bottom');
                    break;
                case 'Right':
                    bot.hide();
                    right.add(preview);
                    right.show();
                    right.ownerCt.doLayout();
                    btn.setIconClass('preview-right');
                    break;
                case 'Hide':
                    preview.ownerCt.hide();
                    preview.ownerCt.ownerCt.doLayout();
                    btn.setIconClass('preview-hide');
                    break;
            }
        }
    },

    openTab : function(record){
        record = (record && record.data) ? record : this.gsm.getSelected();
        var d = record.data;
        var id = !d.link ? Ext.id() : d.link.replace(/[^A-Z0-9-_]/gi, '');
        var tab;
        if(!(tab = this.getItem(id))){
            tab = new Ext.Panel({
                id: id,
                cls:'preview single-preview',
                title: d.title,
                tabTip: d.title,
                html: FeedViewer.getTemplate().apply(d),
                closable:true,
                listeners: FeedViewer.LinkInterceptor,
                autoScroll:true,
                border:true,

                tbar: [{
                    text: 'Go to Post',
                    iconCls: 'new-win',
                    handler : function(){
                        window.open(d.link);
                    }
                }]
            });
            this.add(tab);
        }
        this.setActiveTab(tab);
    },

    openAll : function(){
        this.beginUpdate();
        this.grid.store.data.each(this.openTab, this);
        this.endUpdate();
    }
});

Ext.reg('appmainpanel', MainPanel);


The source code

MainPanel = function(){
    this.preview = new Ext.Panel({
        id: 'preview',
        region: 'south',
        cls:'preview',
        autoScroll: true,
        listeners: FeedViewer.LinkInterceptor,
        enableTabbing: true,
        tbar: [{
            id:'tab',
            text: 'View in New Tab',
            iconCls: 'new-tab',
            disabled:true,
            handler : this.openTab,
            scope: this
        },
        '-',
        {
            id:'win',
            text: 'Go to Post',
            iconCls: 'new-win',
            disabled:true,
            scope: this,
            handler : function(){
                window.open(this.gsm.getSelected().data.link);
            }
        }],

        clear: function(){
            this.body.update('');
            var items = this.topToolbar.items;
            items.get('tab').disable();
            items.get('win').disable();
        }
    });

    this.grid = new FeedGrid(this, {
        tbar:[{
            text:'Open All',
            tooltip: {title:'Open All',text:'Opens all item in tabs'},
            iconCls: 'tabs',
            handler: this.openAll,
            scope:this
        },
        '-',
        {
            split:true,
            text:'Reading Pane',
            tooltip: {title:'Reading Pane',text:'Show, move or hide the Reading Pane'},
            iconCls: 'preview-bottom',
            handler: this.movePreview.createDelegate(this, []),
            menu:{
                id:'reading-menu',
                cls:'reading-menu',
                width:100,
                items: [{
                    text:'Bottom',
                    checked:true,
                    group:'rp-group',
                    checkHandler:this.movePreview,
                    scope:this,
                    iconCls:'preview-bottom'
                },{
                    text:'Right',
                    checked:false,
                    group:'rp-group',
                    checkHandler:this.movePreview,
                    scope:this,
                    iconCls:'preview-right'
                },{
                    text:'Hide',
                    checked:false,
                    group:'rp-group',
                    checkHandler:this.movePreview,
                    scope:this,
                    iconCls:'preview-hide'
                }]
            }
        },
        '-',
        {
            pressed: true,
            enableToggle:true,
            text:'Summary',
            tooltip: {title:'Post Summary',text:'View a short summary of each item in the list'},
            iconCls: 'summary',
            scope:this,
            toggleHandler: function(btn, pressed){
                this.grid.togglePreview(pressed);
            }
        }]
    });

    this.grid.on('afterrender', function() {
        //var fe = Ext.aria.FocusMgr.getByContainer(this.grid.body);
        //fe.on('enter', this.openTab, this);
    }, this);

    MainPanel.superclass.constructor.call(this, {
        id:'main-tabs',
        activeTab:0,
        region:'center',
        margins:'0 5 5 0',
        resizeTabs:true,
        tabWidth:150,
        minTabWidth: 120,
        enableTabScroll: true,
        plugins: new Ext.ux.TabCloseMenu(),
        items: {
            id:'main-view',
            layout:'border',
            title:'Loading...',
            hideMode:'offsets',
            items:[
                this.grid, {
                id:'bottom-preview',
                layout:'fit',
                items:this.preview,
                height: 250,
                split: true,
                border:false,
                region:'south'
            }, {
                id:'right-preview',
                layout:'fit',
                border:false,
                region:'east',
                width:350,
                split: true,
                hidden:true
            }]
        }
    });

    this.gsm = this.grid.getSelectionModel();

    this.gsm.on('rowselect', function(sm, index, record){
        FeedViewer.getTemplate().overwrite(this.preview.body, record.data);
        var items = this.preview.topToolbar.items;
        items.get('tab').enable();
        items.get('win').enable();
    }, this, {buffer:250});

    this.grid.store.on('beforeload', this.preview.clear, this.preview);
    this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);

    this.grid.on('rowdblclick', this.openTab, this);
};

Ext.extend(MainPanel, Ext.TabPanel, {

    loadFeed : function(feed){
        this.grid.loadFeed(feed.url);
        Ext.getCmp('main-view').setTitle(feed.text);
    },

    movePreview : function(m, pressed){
        if(!m){ // cycle if not a menu item click
            var readMenu = Ext.menu.MenuMgr.get('reading-menu');
            readMenu.render();
            var items = readMenu.items.items;
            var b = items[0], r = items[1], h = items[2];
            if(b.checked){
                r.setChecked(true);
            }else if(r.checked){
                h.setChecked(true);
            }else if(h.checked){
                b.setChecked(true);
            }
            return;
        }
        if(pressed){
            var preview = this.preview;
            var right = Ext.getCmp('right-preview');
            var bot = Ext.getCmp('bottom-preview');
            var btn = this.grid.getTopToolbar().items.get(2);
            switch(m.text){
                case 'Bottom':
                    right.hide();
                    bot.add(preview);
                    bot.show();
                    bot.ownerCt.doLayout();
                    btn.setIconClass('preview-bottom');
                    break;
                case 'Right':
                    bot.hide();
                    right.add(preview);
                    right.show();
                    right.ownerCt.doLayout();
                    btn.setIconClass('preview-right');
                    break;
                case 'Hide':
                    preview.ownerCt.hide();
                    preview.ownerCt.ownerCt.doLayout();
                    btn.setIconClass('preview-hide');
                    break;
            }
        }
    },

    openTab : function(record){
        record = (record && record.data) ? record : this.gsm.getSelected();
        var d = record.data;
        var id = !d.link ? Ext.id() : d.link.replace(/[^A-Z0-9-_]/gi, '');
        var tab;
        if(!(tab = this.getItem(id))){
            tab = new Ext.Panel({
                id: id,
                cls:'preview single-preview',
                title: d.title,
                tabTip: d.title,
                html: FeedViewer.getTemplate().apply(d),
                enableTabbing: true,
                closable:true,
                listeners: FeedViewer.LinkInterceptor,
                autoScroll:true,
                border:true,
                tbar: [{
                    text: 'Go to Post',
                    iconCls: 'new-win',
                    handler : function(){
                        window.open(d.link);
                    }
                }]
            });
            this.add(tab);
        }
        this.setActiveTab(tab);
        tab.enter();
    },

    openAll : function(){
        this.beginUpdate();
        this.grid.store.data.each(this.openTab, this);
        this.endUpdate();
    }
});

Ext.reg('appmainpanel', MainPanel);


The source code

/**
 * @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 in which to call the callback
     * @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

/**
 * @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,

    setContainer : function(ct){
        this.monitorResize = !ct.floating;
        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.itemId || c.id;

//          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');
            }
        }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 ' + (this.extraCls || '')
        };
    },

//  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){
        this.renderAll(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;

      /**
 * @class Ext.menu.Menu
 * @extends Ext.Container
 *
      A menu object.  This is the container to which you may add menu items.  Menu can also serve as a base class
 * when you want a specialized menu based off of another component (like {@link Ext.menu.DateMenu} for example).

 *
      Menus may contain either {@link Ext.menu.Item menu items}, or general {@link Ext.Component Component}s.

 *
      To make a contained general {@link Ext.Component Component} line up with other {@link Ext.menu.Item menu items}
 * specify iconCls: 'no-icon'.  This reserves a space for an icon, and indents the Component in line
 * with the other menu items.  See {@link Ext.form.ComboBox}.{@link Ext.form.ComboBox#getListParent getListParent}
 * for an example.

 *
      By default, Menus are absolutely positioned, floating Components. By configuring a Menu with
 * {@link #floating}:false, a Menu may be used as child of a Container.

 *
 * @xtype menu
 */
Ext.menu.Menu = Ext.extend(Ext.Container, {

      /**
     * @cfg {Object} defaults
     * A config object that will be applied to all items added to this container either via the {@link #items}
     * config or via the {@link #add} method.  The defaults config can contain any number of
     * name/value property pairs to be added to each item, and should be valid for the types of items
     * being added to the menu.
     */

      /**
     * @cfg {Mixed} items
     * An array of items to be added to this menu. Menus may contain either {@link Ext.menu.Item menu items},
     * or general {@link Ext.Component Component}s.
     */

      /**
     * @cfg {Number} minWidth The minimum width of the menu in pixels (defaults to 120)
     */
    minWidth : 120,

      /**
     * @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} subMenuAlign The {@link Ext.Element#alignTo} anchor position value to use for submenus of
     * this menu (defaults to 'tl-tr?')
     */
    subMenuAlign : 'tl-tr?',

      /**
     * @cfg {String} defaultAlign The default {@link Ext.Element#alignTo} anchor position value for this menu
     * relative to its element of origin (defaults to 'tl-bl?')
     */
    defaultAlign : 'tl-bl?',

      /**
     * @cfg {Boolean} allowOtherMenus True to allow multiple menus to be displayed at the same time (defaults to false)
     */
    allowOtherMenus : false,

      /**
     * @cfg {Boolean} ignoreParentClicks True to ignore clicks on any item in this menu that is a parent item (displays
     * a submenu) so that the submenu is not dismissed when clicking the parent item (defaults to false).
     */
    ignoreParentClicks : false,

      /**
     * @cfg {Boolean} enableScrolling True to allow the menu container to have scroller controls if the menu is too long (defaults to true).
     */
    enableScrolling : true,

      /**
     * @cfg {Number} maxHeight The maximum height of the menu. Only applies when enableScrolling is set to True (defaults to null).
     */
    maxHeight : null,

      /**
     * @cfg {Number} scrollIncrement The amount to scroll the menu. Only applies when enableScrolling is set to True (defaults to 24).
     */
    scrollIncrement : 24,

      /**
     * @cfg {Boolean} showSeparator True to show the icon separator. (defaults to true).
     */
    showSeparator : true,

      /**
     * @cfg {Array} defaultOffsets An array specifying the [x, y] offset in pixels by which to
     * change the default Menu popup position after aligning according to the {@link #defaultAlign}
     * configuration. Defaults to [0, 0].
     */
    defaultOffsets : [0, 0],

      /**
     * @cfg {Boolean} floating
     *
      By default, a Menu configured as floating:true
     * will be rendered as an {@link Ext.Layer} (an absolutely positioned,
     * floating Component with zindex=15000).
     * If configured as floating:false, the Menu may be
     * used as child item of another Container instead of a free-floating
     * {@link Ext.Layer Layer}.
     */
    floating : true,

    // private
    hidden : true,

      /**
     * @cfg {String/Object} layout
     * This class assigns a default layout (layout:'menu').
     * Developers may override this configuration option if another layout is required.
     * See {@link Ext.Container#layout} for additional information.
     */
    layout : 'menu',
    hideMode : 'offsets',    // Important for laying out Components
    scrollerHeight : 8,
    autoLayout : true,       // Provided for backwards compat
    defaultType : 'menuitem',

    initComponent : function(){
        if(Ext.isArray(this.initialConfig)){
            Ext.apply(this, {items:this.initialConfig});
        }
        this.addEvents(

      /**
             * @event click
             * Fires when this menu is clicked (or when the enter key is pressed while it is active)
             * @param {Ext.menu.Menu} this
            * @param {Ext.menu.Item} menuItem The menu item that was clicked
             * @param {Ext.EventObject} e
             */
            'click',

      /**
             * @event mouseover
             * Fires when the mouse is hovering over this menu
             * @param {Ext.menu.Menu} this
             * @param {Ext.EventObject} e
             * @param {Ext.menu.Item} menuItem The menu item that was clicked
             */
            'mouseover',

      /**
             * @event mouseout
             * Fires when the mouse exits this menu
             * @param {Ext.menu.Menu} this
             * @param {Ext.EventObject} e
             * @param {Ext.menu.Item} menuItem The menu item that was clicked
             */
            'mouseout',

      /**
             * @event itemclick
             * Fires when a menu item contained in this menu is clicked
             * @param {Ext.menu.BaseItem} baseItem The BaseItem that was clicked
             * @param {Ext.EventObject} e
             */
            'itemclick'
        );
        Ext.menu.MenuMgr.register(this);
        if(this.floating){
            Ext.EventManager.onWindowResize(this.hide, this);
        }else{
            if(this.initialConfig.hidden !== false){
                this.hidden = false;
            }
            this.internalDefaults = {hideOnClick: false};
        }
        Ext.menu.Menu.superclass.initComponent.call(this);
        if(this.autoLayout){
            this.on({
                add: this.doLayout,
                remove: this.doLayout,
                scope: this
            });
        }
    },

    //private
    getLayoutTarget : function() {
        return this.ul;
    },

    // private
    onRender : function(ct, position){
        if(!ct){
            ct = Ext.getBody();
        }

        var dh = {
            id: this.getId(),
            cls: 'x-menu ' + ((this.floating) ? 'x-menu-floating x-layer ' : '') + (this.cls || '') + (this.plain ? ' x-menu-plain' : '') + (this.showSeparator ? '' : ' x-menu-nosep'),
            style: this.style,
            cn: [
                {tag: 'a', cls: 'x-menu-focus', href: '#', onclick: 'return false;', tabIndex: '-1'},
                {tag: 'ul', cls: 'x-menu-list'}
            ]
        };
        if(this.floating){
            this.el = new Ext.Layer({
                shadow: this.shadow,
                dh: dh,
                constrain: false,
                parentEl: ct,
                zindex:15000
            });
        }else{
            this.el = ct.createChild(dh);
        }
        Ext.menu.Menu.superclass.onRender.call(this, ct, position);

        if(!this.keyNav){
            this.keyNav = new Ext.menu.MenuNav(this);
        }
        // generic focus element
        this.focusEl = this.el.child('a.x-menu-focus');
        this.ul = this.el.child('ul.x-menu-list');
        this.mon(this.ul, {
            scope: this,
            click: this.onClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut
        });
        if(this.enableScrolling){
            this.mon(this.el, {
                scope: this,
                delegate: '.x-menu-scroller',
                click: this.onScroll,
                mouseover: this.deactivateActive
            });
        }
    },

    // private
    findTargetItem : function(e){
        var t = e.getTarget('.x-menu-list-item', this.ul, true);
        if(t && t.menuItemId){
            return this.items.get(t.menuItemId);
        }
    },

    // private
    onClick : function(e){
        var t = this.findTargetItem(e);
        if(t){
            if(t.isFormField){
                this.setActiveItem(t);
            }else{
                if(t.menu && this.ignoreParentClicks){
                    t.expandMenu();
                    e.preventDefault();
                }else if(t.onClick){
                    t.onClick(e);
                    this.fireEvent('click', this, t, e);
                }
            }
        }
    },

    // private
    setActiveItem : function(item, autoExpand){
        if(item != this.activeItem){
            this.deactivateActive();
            if((this.activeItem = item).isFormField){
                item.focus();
            }else{
                item.activate(autoExpand);
            }
        }else if(autoExpand){
            item.expandMenu();
        }
    },

    deactivateActive : function(){
        var a = this.activeItem;
        if(a){
            if(a.isFormField){
                //Fields cannot deactivate, but Combos must collapse
                if(a.collapse){
                    a.collapse();
                }
            }else{
                a.deactivate();
            }
            delete this.activeItem;
        }
    },

    // private
    tryActivate : function(start, step){
        var items = this.items;
        for(var i = start, len = items.length; i >= 0 && i < len; i+= step){
            var item = items.get(i);
            if(!item.disabled && (item.canActivate || item.isFormField)){
                this.setActiveItem(item, false);
                return item;
            }
        }
        return false;
    },

    // private
    onMouseOver : function(e){
        var t = this.findTargetItem(e);
        if(t){
            if(t.canActivate && !t.disabled){
                this.setActiveItem(t, true);
            }
        }
        this.over = true;
        this.fireEvent('mouseover', this, e, t);
    },

    // private
    onMouseOut : function(e){
        var t = this.findTargetItem(e);
        if(t){
            if(t == this.activeItem && t.shouldDeactivate && t.shouldDeactivate(e)){
                this.activeItem.deactivate();
                delete this.activeItem;
            }
        }
        this.over = false;
        this.fireEvent('mouseout', this, e, t);
    },

    // private
    onScroll : function(e, t){
        if(e){
            e.stopEvent();
        }
        var ul = this.ul.dom, top = Ext.fly(t).is('.x-menu-scroller-top');
        ul.scrollTop += this.scrollIncrement * (top ? -1 : 1);
        if(top ? ul.scrollTop <= 0 : ul.scrollTop + this.activeMax >= ul.scrollHeight){
           this.onScrollerOut(null, t);
        }
    },

    // private
    onScrollerIn : function(e, t){
        var ul = this.ul.dom, top = Ext.fly(t).is('.x-menu-scroller-top');
        if(top ? ul.scrollTop > 0 : ul.scrollTop + this.activeMax < ul.scrollHeight){
            Ext.fly(t).addClass(['x-menu-item-active', 'x-menu-scroller-active']);
        }
    },

    // private
    onScrollerOut : function(e, t){
        Ext.fly(t).removeClass(['x-menu-item-active', 'x-menu-scroller-active']);
    },

      /**
     * If {@link #floating}=true, shows this menu relative to
     * another element, otherwise uses {@link Ext.Component#show}.
     * @param {Mixed} element The element to align to
     * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to
     * the element (defaults to this.defaultAlign)
     * @param {Ext.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
     */
    show : function(el, pos, parentMenu){
        if(this.floating){
            this.parentMenu = parentMenu;
            if(!this.el){
                this.render();
                this.doLayout(false, true);
            }
            if(this.fireEvent('beforeshow', this) !== false){
                this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign, this.defaultOffsets), parentMenu, false);
            }
        }else{
            Ext.menu.Menu.superclass.show.call(this);
        }
    },

      /**
     * Displays this menu at a specific xy position
     * @param {Array} xyPosition Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based)
     * @param {Ext.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
     */
    showAt : function(xy, parentMenu, /* private: */_e){
        this.parentMenu = parentMenu;
        if(!this.el){
            this.render();
        }
        this.el.setXY(xy);
        if(this.enableScrolling){
            this.constrainScroll(xy[1]);
        }
        this.el.show();
        Ext.menu.Menu.superclass.onShow.call(this);
        if(Ext.isIE){
            this.layout.doAutoSize();
            if(!Ext.isIE8){
                this.el.repaint();
            }
        }
        this.hidden = false;
        this.focus();
        this.fireEvent('show', this);
    },

    constrainScroll : function(y){
        var max, full = this.ul.setHeight('auto').getHeight();
        if(this.floating){
            max = this.maxHeight ? this.maxHeight : Ext.fly(this.el.dom.parentNode).getViewSize().height - y;
        }else{
            max = this.getHeight();
        }
        if(full > max && max > 0){
            this.activeMax = max - this.scrollerHeight * 2 - this.el.getFrameWidth('tb') - Ext.num(this.el.shadowOffset, 0);
            this.ul.setHeight(this.activeMax);
            this.createScrollers();
            this.el.select('.x-menu-scroller').setDisplayed('');
        }else{
            this.ul.setHeight(full);
            this.el.select('.x-menu-scroller').setDisplayed('none');
        }
        this.ul.dom.scrollTop = 0;
    },

    createScrollers : function(){
        if(!this.scroller){
            this.scroller = {
                pos: 0,
                top: this.el.insertFirst({
                    tag: 'div',
                    cls: 'x-menu-scroller x-menu-scroller-top',
                    html: ' '
                }),
                bottom: this.el.createChild({
                    tag: 'div',
                    cls: 'x-menu-scroller x-menu-scroller-bottom',
                    html: ' '
                })
            };
            this.scroller.top.hover(this.onScrollerIn, this.onScrollerOut, this);
            this.scroller.topRepeater = new Ext.util.ClickRepeater(this.scroller.top, {
                listeners: {
                    click: this.onScroll.createDelegate(this, [null, this.scroller.top], false)
                }
            });
            this.scroller.bottom.hover(this.onScrollerIn, this.onScrollerOut, this);
            this.scroller.bottomRepeater = new Ext.util.ClickRepeater(this.scroller.bottom, {
                listeners: {
                    click: this.onScroll.createDelegate(this, [null, this.scroller.bottom], false)
                }
            });
        }
    },

    onLayout : function(){
        if(this.isVisible()){
            if(this.enableScrolling){
                this.constrainScroll(this.el.getTop());
            }
            if(this.floating){
                this.el.sync();
            }
        }
    },

    focus : function(){
        if(!this.hidden){
            this.doFocus.defer(50, this);
        }
    },

    doFocus : function(){
        if(!this.hidden){
            this.focusEl.focus();
        }
    },

      /**
     * Hides this menu and optionally all parent menus
     * @param {Boolean} deep (optional) True to hide all parent menus recursively, if any (defaults to false)
     */
    hide : function(deep){
        this.deepHide = deep;
        Ext.menu.Menu.superclass.hide.call(this);
        delete this.deepHide;
    },

    // private
    onHide : function(){
        Ext.menu.Menu.superclass.onHide.call(this);
        this.deactivateActive();
        if(this.el && this.floating){
            this.el.hide();
        }
        if(this.deepHide === true && this.parentMenu){
            this.parentMenu.hide(true);
        }
    },

    // private
    lookupComponent : function(c){
         if(Ext.isString(c)){
            c = (c == 'separator' || c == '-') ? new Ext.menu.Separator() : new Ext.menu.TextItem(c);
             this.applyDefaults(c);
         }else{
            if(Ext.isObject(c)){
                c = this.getMenuItem(c);
            }else if(c.tagName || c.el){ // element. Wrap it.
                c = new Ext.BoxComponent({
                    el: c
                });
            }
         }
         return c;
    },

    applyDefaults : function(c){
        if(!Ext.isString(c)){
            c = Ext.menu.Menu.superclass.applyDefaults.call(this, c);
            var d = this.internalDefaults;
            if(d){
                if(c.events){
                    Ext.applyIf(c.initialConfig, d);
                    Ext.apply(c, d);
                }else{
                    Ext.applyIf(c, d);
                }
            }
        }
        return c;
    },

    // private
    getMenuItem : function(config){
       if(!config.isXType){
            if(!config.xtype && Ext.isBoolean(config.checked)){
                return new Ext.menu.CheckItem(config)
            }
            return Ext.create(config, this.defaultType);
        }
        return config;
    },

      /**
     * Adds a separator bar to the menu
     * @return {Ext.menu.Item} The menu item that was added
     */
    addSeparator : function(){
        return this.add(new Ext.menu.Separator());
    },

      /**
     * Adds an {@link Ext.Element} object to the menu
     * @param {Mixed} el The element or DOM node to add, or its id
     * @return {Ext.menu.Item} The menu item that was added
     */
    addElement : function(el){
        return this.add(new Ext.menu.BaseItem(el));
    },

      /**
     * Adds an existing object based on {@link Ext.menu.BaseItem} to the menu
     * @param {Ext.menu.Item} item The menu item to add
     * @return {Ext.menu.Item} The menu item that was added
     */
    addItem : function(item){
        return this.add(item);
    },

      /**
     * Creates a new {@link Ext.menu.Item} based an the supplied config object and adds it to the menu
     * @param {Object} config A MenuItem config object
     * @return {Ext.menu.Item} The menu item that was added
     */
    addMenuItem : function(config){
        return this.add(this.getMenuItem(config));
    },

      /**
     * Creates a new {@link Ext.menu.TextItem} with the supplied text and adds it to the menu
     * @param {String} text The text to display in the menu item
     * @return {Ext.menu.Item} The menu item that was added
     */
    addText : function(text){
        return this.add(new Ext.menu.TextItem(text));
    },

    //private
    onDestroy : function(){
        Ext.menu.Menu.superclass.onDestroy.call(this);
        Ext.menu.MenuMgr.unregister(this);
        Ext.EventManager.removeResizeListener(this.hide, this);
        if(this.keyNav) {
            this.keyNav.disable();
        }
        var s = this.scroller;
        if(s){
            Ext.destroy(s.topRepeater, s.bottomRepeater, s.top, s.bottom);
        }
    }
});

Ext.reg('menu', Ext.menu.Menu);

// MenuNav is a private utility class used internally by the Menu
Ext.menu.MenuNav = Ext.extend(Ext.KeyNav, function(){
    function up(e, m){
        if(!m.tryActivate(m.items.indexOf(m.activeItem)-1, -1)){
            m.tryActivate(m.items.length-1, -1);
        }
    }
    function down(e, m){
        if(!m.tryActivate(m.items.indexOf(m.activeItem)+1, 1)){
            m.tryActivate(0, 1);
        }
    }
    return {
        constructor : function(menu){
            Ext.menu.MenuNav.superclass.constructor.call(this, menu.el);
            this.scope = this.menu = menu;
        },

        doRelay : function(e, h){
            var k = e.getKey();
//          Keystrokes within a form Field (e.g.: down in a Combo) do not navigate. Allow only TAB
            if (this.menu.activeItem && this.menu.activeItem.isFormField && k != e.TAB) {
                return false;
            }
            if(!this.menu.activeItem && e.isNavKeyPress() && k != e.SPACE && k != e.RETURN){
                this.menu.tryActivate(0, 1);
                return false;
            }
            return h.call(this.scope || this, e, this.menu);
        },

        tab: function(e, m) {
            e.stopEvent();
            if (e.shiftKey) {
                up(e, m);
            } else {
                down(e, m);
            }
        },

        up : up,

        down : down,

        right : function(e, m){
            if(m.activeItem){
                m.activeItem.expandMenu(true);
            }
        },

        left : function(e, m){
            m.hide();
            if(m.parentMenu && m.parentMenu.activeItem){
                m.parentMenu.activeItem.activate();
            }
        },

        enter : function(e, m){
            if(m.activeItem){
                e.stopPropagation();
                m.activeItem.onClick(e);
                m.fireEvent('click', this, m.activeItem);
                return true;
            }
        }
    };
}());


The source code

/**
 * @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();
           });
       }
   }

   // 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.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
        */
       hideAll : function(){
            hideAll();
       },

       // private
       register : function(menu){
           if(!menus){
               init();
           }
           menus[menu.id] = menu;
           menu.on("beforehide", onBeforeHide);
           menu.on("hide", onHide);
           menu.on("beforeshow", onBeforeShow);
           menu.on("show", onShow);
           var g = menu.group;
           if(g && menu.events["checkchange"]){
               if(!groups[g]){
                   groups[g] = [];
               }
               groups[g].push(menu);
               menu.on("checkchange", onCheck);
           }
       },

/**
         * 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);
           var g = menu.group;
           if(g && menu.events["checkchange"]){
               groups[g].remove(menu);
               menu.un("checkchange", onCheck);
           }
       },

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

Ext.onReady(function(){
    Ext.QuickTips.init();

    // Menus can be prebuilt and passed by reference
    var dateMenu = new Ext.menu.DateMenu({
        handler: function(dp, date){
            Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
        }
    });

    var colorMenu = new Ext.menu.ColorMenu({
        handler: function(cm, color){
            Ext.example.msg('Color Selected', 'You chose {0}.', color);
        }
    });

    var store = new Ext.data.ArrayStore({
        fields: ['abbr', 'state'],
        data : Ext.exampledata.states // from states.js
    });

    var combo = new Ext.form.ComboBox({
        store: store,
        displayField: 'state',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText: 'Select a state...',
        selectOnFocus: true,
        width: 135,
        getListParent: function() {
            return this.el.up('.x-menu');
        },
        iconCls: 'no-icon'
    });

    var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        style: {
            overflow: 'visible'     // For the Combo popup
        },
        items: [
            combo,                  // A Field in a Menu
            {
                text: 'I like Ext',
                checked: true,       // when checked has a boolean value, it is assumed to be a CheckItem
                checkHandler: onItemCheck
            }, '-', {
                text: 'Radio Options',
                menu: {        // <-- submenu by nested config object
                    items: [
                        // stick any markup in a menu
                        'Choose a Theme',
                        {
                            text: 'Aero Glass',
                            checked: true,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }, {
                            text: 'Vista Black',
                            checked: false,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }, {
                            text: 'Gray Theme',
                            checked: false,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }, {
                            text: 'Default Theme',
                            checked: false,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }
                    ]
                }
            },{
                text: 'Choose a Date',
                iconCls: 'calendar',
                menu: dateMenu // <-- submenu by reference
            },{
                text: 'Choose a Color',
                menu: colorMenu // <-- submenu by reference
            }
        ]
    });

    var tb = new Ext.Toolbar();
    tb.render('toolbar');

    tb.add({
            text:'Button w/ Menu',
            iconCls: 'bmenu',  // <-- icon
            menu: menu  // assign menu by instance
        },
        new Ext.Toolbar.SplitButton({
            text: 'Split Button',
            handler: onButtonClick,
            tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
            iconCls: 'blist',
            // Menus can be built/referenced by using nested menu config objects
            menu : {
                items: [{
                    text: 'Bold', handler: onItemClick
                }, {
                    text: 'Italic', handler: onItemClick
                }, {
                    text: 'Underline', handler: onItemClick
                }, '-', {
                    text: 'Pick a Color',
                    handler: onItemClick,
                    menu: {
                        items: [
                            new Ext.ColorPalette({
                                listeners: {
                                    select: function(cp, color){
                                        Ext.example.msg('Color Selected', 'You chose {0}.', color);
                                    }
                                }
                            }), '-',
                            {
                                text: 'More Colors...',
                                handler: onItemClick
                            }
                        ]
                    }
                }, {
                    text: 'Extellent!',
                    handler: onItemClick
                }]
            }
        }), '-', {
        text: 'Toggle Me',
        enableToggle: true,
        toggleHandler: onItemToggle,
        pressed: true
    });

    menu.addSeparator();
    // Menus have a rich api for
    // adding and removing elements dynamically
    var item = menu.add({
        text: 'Dynamically added Item'
    });
    // items support full Observable API
    item.on('click', onItemClick);

    // items can easily be looked up
    menu.add({
        text: 'Disabled Item',
        id: 'disableMe'  // <-- Items can also have an id for easy lookup
        // disabled: true   <-- allowed but for sake of example we use long way below
    });
    // access items by id or index
    menu.items.get('disableMe').disable();

    // They can also be referenced by id in or components
    tb.add('-', {
        icon: 'list-items.gif', // icons can also be specified inline
        cls: 'x-btn-icon',
        tooltip: 'Quick Tips
Icon only button with tooltip'
    }, '-');

    var scrollMenu = new Ext.menu.Menu();
    for (var i = 0; i < 50; ++i){
        scrollMenu.add({
            text: 'Item ' + (i + 1)
        });
    }
    // scrollable menu
    tb.add({
        icon: 'preview.png',
        cls: 'x-btn-text-icon',
        text: 'Scrolling Menu',
        menu: scrollMenu
    });

    // add a combobox to the toolbar
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField: 'state',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        width:135
    });
    tb.addField(combo);

    tb.doLayout();

    // functions to display feedback
    function onButtonClick(btn){
        Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
    }

    function onItemClick(item){
        Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
    }

    function onItemCheck(item, checked){
        Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
    }

    function onItemToggle(item, pressed){
        Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
    }

});


The source code

/**
 * @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;
    var bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl;
    var buttons, activeTextEl, bwidth, iconCls = '';

    // private
    var handleButton = function(button){
        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;
        if(!b){
            buttons['ok'].hide();
            buttons['cancel'].hide();
            buttons['yes'].hide();
            buttons['no'].hide();
            return width;
        }
        dlg.footer.dom.style.display = '';
        for(var k in buttons){
            if(typeof buttons[k] != 'function'){
                if(b[k]){
                    buttons[k].show();
                    buttons[k].setText(typeof b[k] == 'string' ? b[k] : Ext.MessageBox.buttonText[k]);
                    width += buttons[k].el.getWidth()+15;
                }else{
                    buttons[k].hide();
                }
            }
        }
        return width;
    };

    return {

/**
         * Returns a reference to the underlying {@link Ext.Window} element
         * @return {Ext.Window} The window
         */
        getDialog : function(titleText){
           if(!dlg){
                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');
                        }
                    }
                });
                buttons = {};
                var bt = this.buttonText;
                //TODO: refactor this block into a buttons config to pass into the Window constructor
                buttons['ok'] = dlg.addButton(bt['ok'], handleButton.createCallback('ok'));
                buttons['yes'] = dlg.addButton(bt['yes'], handleButton.createCallback('yes'));
                buttons['no'] = dlg.addButton(bt['no'], handleButton.createCallback('no'));
                buttons['cancel'] = dlg.addButton(bt['cancel'], handleButton.createCallback('cancel'));
                buttons['ok'].hideMode = buttons['yes'].hideMode = buttons['no'].hideMode = buttons['cancel'].hideMode = 'offsets';
                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;
            var mw = msgEl.getWidth() + msgEl.getMargins('lr');
            var fw = dlg.getFrameWidth('lr');
            var bw = dlg.body.getFrameWidth('lr');
            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;
            }
            var w = Math.max(Math.min(opt.width || iw+mw+fw+bw, 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
    •
         *
  • 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/Number

         * If prompt is true, instead of prompting the user with a single line textbox,
         * specify multiline = true to prompt the user with a multiline textarea
         * using the {@link #defaultTextHeight} property, or specify a height in pixels
         * to create the textarea (defaults to false creating a single-line textbox)
    •
         *
  • 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 with a textbox or textarea (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, // show a multiline textarea using the {@link #defaultTextHeight}
   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(typeof opt.multiline == 'number' ?
                        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(opt.icon);
            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;

            d.on('show', function(){
                //workaround for window internally enabling keymap in afterShow
                d.keyMap.setDisabled(allowClose !== true);
                d.doLayout();
                this.setIcon(opt.icon);
                bwidth = updateButtons(opt.buttons);
                progressBar.setVisible(opt.progress === true || opt.wait === true);
                this.updateProgress(0, opt.progressText);
                this.updateText(opt.msg);
                if(opt.wait === true){
                    progressBar.wait(opt.waitConfig);
                }

            }, this, {single:true});
            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);
                d.show(opt.animEl);
            }
            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.  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(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 of the callback function
         * @return {Ext.MessageBox} this
         */
        alert : function(title, msg, fn, scope){
            this.show({
                title : title,
                msg : msg,
                buttons: this.OK,
                fn: fn,
                scope : scope
            });
            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 of the callback function
         * @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
            });
            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 of the callback function
         * @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:250,
                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 110)
         * @type Number
         */
        minWidth : 110,

/**
         * 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,

/**
         * 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

/**
 * @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 True if the 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, {
    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 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 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.
 */
    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 in which to execute the function.
 */
    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 in which to execute the function.
 */
    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 in which to execute the function.
     * @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
    _sort : function(property, dir, fn){
        var i,
            len,
            dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1,
            c = [], k = this.keys, items = this.items;

        fn = fn || function(a, b){
            return a-b;
        };
        for(i = 0, len = items.length; i < len; i++){
            c[c.length] = {key: k[i], value: items[i], index: i};
        }
        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;
        });
        for(i = 0, len = c.length; i < len; i++){
            items[i] = c[i].value;
            k[i] = c[i].key;
        }
        this.fireEvent("sort", this);
    },

/**
     * Sorts this collection with the passed comparison function
     * @param {String} direction (optional) "ASC" or "DESC"
     * @param {Function} fn (optional) comparison function
     */
    sort : function(dir, fn){
        this._sort("value", dir, fn);
    },

/**
     * Sorts this collection by keys
     * @param {String} direction (optional) "ASC" or "DESC"
     * @param {Function} fn (optional) a comparison function (defaults to 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) defaults to 0
     * @param {Number} endIndex (optional) default 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 of the function (defaults to this)
     * @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 of the function (defaults to this).
     * @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;
    },

    // private
    createValueMatcher : function(value, anyMatch, caseSensitive){
        if(!value.exec){ // not a regex
            value = String(value);
            value = new RegExp((anyMatch === true ? '' : '^') + Ext.escapeRe(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

Ext.app.Module = function(config){
    Ext.apply(this, config);
    Ext.app.Module.superclass.constructor.call(this);
    this.init();
}

Ext.extend(Ext.app.Module, Ext.util.Observable, {
    init : Ext.emptyFn
});


The source code

Ext.onReady(function(){
    Ext.get('mb1').on('click', function(e){
        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
    });

    Ext.get('mb2').on('click', function(e){
        Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
    });

    Ext.get('mb3').on('click', function(e){
        Ext.MessageBox.show({
           title: 'Address',
           msg: 'Please enter your address:',
           width:300,
           buttons: Ext.MessageBox.OKCANCEL,
           multiline: true,
           fn: showResultText,
           animEl: 'mb3'
       });
    });

    Ext.get('mb4').on('click', function(e){
        Ext.MessageBox.show({
           title:'Save Changes?',
           msg: 'You are closing a tab that has unsaved changes.
Would you like to save your changes?',
           buttons: Ext.MessageBox.YESNOCANCEL,
           fn: showResult,
           animEl: 'mb4',
           icon: Ext.MessageBox.QUESTION
       });
    });

    Ext.get('mb6').on('click', function(){
        Ext.MessageBox.show({
           title: 'Please wait',
           msg: 'Loading items...',
           progressText: 'Initializing...',
           width:300,
           progress:true,
           closable:false,
           animEl: 'mb6'
       });

       // this hideous block creates the bogus progress
       var f = function(v){
            return function(){
                if(v == 12){
                    Ext.MessageBox.hide();
                    Ext.example.msg('Done', 'Your fake items were loaded!');
                }else{
                    var i = v/11;
                    Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
                }
           };
       };
       for(var i = 1; i < 13; i++){
           setTimeout(f(i), i*500);
       }
    });

    Ext.get('mb7').on('click', function(){
        Ext.MessageBox.show({
           msg: 'Saving your data, please wait...',
           progressText: 'Saving...',
           width:300,
           wait:true,
           waitConfig: {interval:200},
           icon:'ext-mb-download', //custom class in msg-box.html
           animEl: 'mb7'
       });
        setTimeout(function(){
            //This simulates a long-running operation like a database save or XHR call.
            //In real code, this would be in a callback function.
            Ext.MessageBox.hide();
            Ext.example.msg('Done', 'Your fake data was saved!');
        }, 8000);
    });

    Ext.get('mb8').on('click', function(){
        Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
    });

    //Add these values dynamically so they aren't hard-coded in the html
    Ext.fly('info').dom.value = Ext.MessageBox.INFO;
    Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
    Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
    Ext.fly('error').dom.value = Ext.MessageBox.ERROR;

    Ext.get('mb9').on('click', function(){
        Ext.MessageBox.show({
           title: 'Icon Support',
           msg: 'Here is a message with an icon!',
           buttons: Ext.MessageBox.OK,
           animEl: 'mb9',
           fn: showResult,
           icon: Ext.get('icons').dom.value
       });
    });

    function showResult(btn){
        Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
    };

    function showResultText(btn, text){
        Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
    };
});


The source code

Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    /* Language chooser combobox  */
    var store = new Ext.data.ArrayStore({
        fields: ['code', 'language', 'charset'],
        data : Ext.exampledata.languages // from languages.js
    });
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'language',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText: 'Select a language...',
        selectOnFocus: true,
        onSelect: function(record) {
            window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
        }
    });
    combo.render('languages');

    // get the selected language code parameter from url (if exists)
    var params = Ext.urlDecode(window.location.search.substring(1));

    if (params.lang) {
        // check if there's really a language with that language code
        record = store.data.find(function(item, key){
            if (item.data.code == params.lang) {
                return true;
            }
            return false;
        });
        // if language was found in store assign it as current value in combobox
        if (record) {
            combo.setValue(record.data.language);
        }
    }

    /* Email field */
    var emailfield = new Ext.FormPanel({
        labelWidth: 100, // label settings here cascade unless overridden
        frame: true,
        title: 'Email Field',
        bodyStyle: 'padding:5px 5px 0',
        width: 360,
        defaults: {width: 220},
        defaultType: 'textfield',

        items: [
            {
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email'
            }
        ]
    });
    emailfield.render('emailfield');

    /* Datepicker */
    var datefield = new Ext.FormPanel({
        labelWidth: 100, // label settings here cascade unless overridden
        frame: true,
        title: 'Datepicker',
        bodyStyle: 'padding:5px 5px 0',
        width: 360,
        defaults: {width: 220},
        defaultType: 'datefield',
        items: [
            {
                fieldLabel: 'Date',
                name: 'date'
            }
        ]
    });
    datefield.render('datefield');

    // shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;

    var monthArray = Date.monthNames.map(function (e) { return [e]; });

    var ds = new Ext.data.Store({
        proxy: new Ext.ux.data.PagingMemoryProxy(monthArray),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'month'}
        ])
    });

    var cm = new Ext.grid.ColumnModel([{
           header: "Months of the year",
           dataIndex: 'month',
           editor: new Ed(new fm.TextField({
               allowBlank: false
           })),
           width: 240
        }]);

    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
    width: 360,
    height: 203,
    title:'Month Browser',
    store: ds,
    cm: cm,
    sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),

    bbar: new Ext.PagingToolbar({
            pageSize: 6,
            store: ds,
            displayInfo: true
        })
    });

    grid.render('grid');

    // trigger the data store load
    ds.load({params:{start:0, limit:6}});
});


The source code

Ext.ns('Ext.ux');

/**
 * Ext.ux.MultiCombo
 */
Ext.ux.MultiCombo = Ext.extend(Ext.form.ComboBox, {

/**
     * @cfg {String} overClass [x-grid3-row-over]
     */
    overClass : 'x-grid3-row-over',

/**
     * @cfg {Boolean} enableKeyEvents for typeAhead
     */
    enableKeyEvents: true,

/**
     * @cfg {String} selectedClass [x-grid3-row-selected]
     */
    selectedClass: 'x-grid3-row-selected',

/**
     * @cfg {String} highlightClass The css class applied to rows which are hovered with mouse
     * selected via key-nav, or highlighted when a text-query matches a single item.
     */
    highlightClass: 'x-grid3-row-over',

/**
     * @cfg {Number} autoSelectKey [44] COMMA Sets the key used to auto-select an auto-suggest
     * highlighted query.  When pressed, the highlighted text-item will be selected as if the user
     * selected the row with a mouse click.
     */
    autoSelectKey : 44,

/**
     * @cfg {String} allSelectedText Text to display when all items are selected
     */
    allSelectedText : 'All selected',

/**
     * @cfg {Number} maxDisplayRows The maximum number of rows to show before applying vscroll
     */
    maxDisplayRows: null,

    mode: 'local',
    triggerAction: 'all',
    typeAhead: true,

    // private
    highlightIndex : null,
    highlightIndexPrev : null,

    query : null,

/**
     * @cfg {Array} value CheckboxCombo expresses its value as an array.
     */
    value: [],

/**
     * @cfg {Integer} minChars [0]
     */
    minChars: 0,

    initComponent : function() {
        var cls = 'x-combo-list';

        // when blurring out of field, ensure that rawValue contains ONLY items contained in Store.
        this.on('blur', this.validateSelections.createDelegate(this));

        // create an auto-select key handler, like *nix-based console [tab] key behaviour
        this.on('keypress', function(field, ev) {
            if (ev.getKey() == this.autoSelectKey) {	// COMMA
                this.onAutoSelect();
            }
        },this);

        this.addEvents(

/**
             * @event initview Fires when Combo#initView is called.
             * gives plugins a chance to interact with DataView
             * @author Chris Scott
             * @param {Combo} this
             * @param {DataView} dv
             */
            'initview',
            'clearall'
        );

        // when list expands, constrain the height with @cfg maxDisplayRows
        if (this.maxDisplayRows) {
            this.on('expand', function(){
                var cnt = this.store.getCount();
                if (cnt > this.maxDisplayRows) {
                    var children = this.view.getNodes();
                    var h = 0;
                    for (var n = 0; n < this.maxDisplayRows; n++) {
                        h += Ext.fly(children[n]).getHeight();
                    }
                    this.maxHeight = h;
                }
            }, this, {
                single: true
            });
        }

        this.on('beforequery', this.onQuery, this);

        // Enforce that plugins is an Array.
        if (typeof(this.plugins) == 'undefined'){
            this.plugins = [];
        }
        else if (!Ext.isArray(this.plugins)) {
            this.plugins = [this.plugins];
        }

        var tmp = this.value;	// for case where transform is set.
        Ext.ux.MultiCombo.superclass.initComponent.call(this);
        if (this.transform) {
            if (typeof(tmp) == 'undefined') {
                tmp = [];
            }
            this.setValue(tmp);
        }
    },

    // private
    onViewClick : function(dv, index, node, ev){
        var rec = this.store.getAt(index);
        this.onSelect(rec, index);
        this.el.focus();
        /*
        if(doFocus !== false){
            this.el.focus();
        }
        */
    },

    // onTriggerClick, overrides Ext.form.ComboBox#onTriggerClick
    onTriggerClick: function() {
        if (this.highlightIndex != -1) {
            this.clearHighlight();
        }
        this.highlightIndex = -1;

        if(this.disabled){
            return;
        }
        if(this.isExpanded()){
            this.collapse();
            this.el.focus();
        }else {
            this.onFocus({});
            if(this.triggerAction == 'all') {
                this.doQuery(this.getRawValue(), true);
                var vlen = this.getValue().length, slen = this.view.getSelectedRecords().length;
                if (vlen != slen || vlen == 0) {
                    this.selectByValue(this.value, true);
                }
            } else {
                this.expand();
                this.doQuery(this.getRawValue());
            }

            this.highlightIndex = -1
            this.highlightIndexPrev = null;
            this.selectNext();
            this.scrollIntoView();
            this.el.focus();
        }
    },

    // onQuery, beforequery listener, @return false
    onQuery : function(qe) {
        q = qe.query;
        forceAll = qe.forceAll;
        if(forceAll === true || (q.length >= this.minChars)){
            if(this.lastQuery !== q){
                if (typeof(this.lastQuery) != 'undefined') {
                    if (q.match(new RegExp('^'+this.allSelectedText))) {
                        this.query = this.store.data;
                    }
                    else if (this.lastQuery.length > q.length) {
                        var items = q.replace(/\s+/g, '').split(',');
                        if (items[items.length-1].length == 0) {
                            items.pop();
                        }
                        this.query = this.store.data.filterBy(this.store.createFilterFn(this.displayField, new RegExp('^'+items.join('$|^')+'$', "i"), false, false));
                    }
                    else {
                        this.query = null;
                    }
                }
                this.lastQuery = q;
                if(this.mode == 'local'){
                    var raw = this.getRawValue();
                    if (raw == this.allSelectedText) {

                    }
                    var items = raw.replace(/\s+/g, '').split(',');
                    var last = items.pop();
                    this.matches = this.store.data.filterBy(this.store.createFilterFn(this.displayField, new RegExp('^'+last, "i"), false, false)).filterBy(this.createTypeAheadFilterFn(items));
                    if (this.matches.getCount() == 0) {
                        this.clearHighlight();
                    }
                    if (q.length == 0) {
                        this.view.clearSelections();
                        this.updateValue([]);
                    }

                    this.onLoad();
                } else {
                    this.store.baseParams[this.queryParam] = q;
                    this.store.load({
                        params: this.getParams(q)
                    });
                    this.expand();
                }
            }else{
                this.selectedIndex = -1;
                this.onLoad();
            }
        }

        return false;
    },

    // onLoad, overrides Ext.form.ComboBox#onLoad
    onLoad : function(){

        if(!this.hasFocus){
            return;
        }
        if(this.store.getCount() > 0){
            if (!this.isExpanded()) {
                this.expand();
                this.restrictHeight();
            }
            if(this.lastQuery == this.allQuery){
                if(this.editable){
                    this.el.dom.select();
                }
            }else{
                if (this.query != null) {
                    var values = [], indexes = [];
                    this.query.each(function(r){
                        values.push(r.data[this.valueField]);
                        indexes.push(this.store.indexOf(r));
                    }, this);
                    this.view.clearSelections();
                    this.updateValue(values, this.getRawValue());
                    this.view.select(indexes);
                }
                if (this.matches != null) {
                    if (this.matches.getCount() == 1) {
                        this.highlight(this.store.indexOf(this.matches.first()));
                        this.scrollIntoView();
                    }
                }
                else {
                    // @HACK: If store was configured with a proxy, set its mode to local now that its populated with data.
                    // Re-execute the query now.
                    this.mode = 'local';
                    this.lastQuery = undefined;
                    this.doQuery(this.getRawValue(), true);
                }
                if(this.typeAhead && this.lastKey != Ext.EventObject.DOWN && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
                    this.taTask.delay(this.typeAheadDelay);
                }
            }
        }else{
            this.onEmptyResults();
        }
    },

    onSelect : function(record, index) {
        if (index == -1) {
            throw new Error('MultiCombo#onSelect did not receive a valid index');
        }

        // select only when user clicks [apply] button
        if (this.selectOnApply == true) {
            return;
        }

        if (this.fireEvent('beforeselect', this, record, index) !== false) {
            var text = [];
            var value = [];
            var rs = this.view.getSelectedRecords();
            for (var n = 0, len = rs.length; n < len; n++) {
                text.push(rs[n].data[this.displayField]);
                value.push(rs[n].data[this.valueField]);
            }
            this.updateValue(value, (value.length != this.store.getCount()) ? text.join(', ') : this.allSelectedText);
            var node = this.view.getNode(index);
            this.innerList.scrollChildIntoView(node, false);
            this.fireEvent('select', this, record, index);
        }
    },

    // private
    onViewOver : function(ev, node){
        var t = ev.getTarget(this.view.itemSelector);
        if (t == null) {
            return;
        }
        this.highlightIndex = this.store.indexOf(this.view.getRecord(t));
        this.clearHighlight();
        this.highlight(this.highlightIndex);
        if(this.inKeyMode){ // prevent key nav and mouse over conflicts
            return;null
        }
        return;
    },

    // private
    onTypeAhead : function(){
        if(this.store.getCount() > 0){
            this.inKeyMode = false;
            var raw = this.getRawValue();
            var pos = this.getCaretPosition(raw);
            var items = [];
            var query = '';
            if (pos !== false && pos < raw.length) {
                items = raw.substr(0, pos).replace(/\s+/g, '').split(',');
                query = items.pop();
            } else {
                items = raw.replace(/\s+/g, '').split(',');
                query = items.pop();
            }
            var rs = this.store.data.filterBy(this.store.createFilterFn(this.displayField, new RegExp(query, "i"), false, false)).filterBy(this.createTypeAheadFilterFn(items));

            if (rs.getCount() == 1) {
                var r = rs.first();
                var rindex = this.store.indexOf(r)
                if (!this.view.isSelected(rindex)) {
                    this.typeAheadSelected = true;
                    var selStart = raw.length;
                    var len = items.join(',').length;
                    var selEnd = null;
                    var newValue = r.data[this.displayField];
                    if (pos !== false && pos < raw.length) {
                        var insertIdx = items.length;
                        var selStart = pos;
                        items = raw.replace(/\s+/g, '').split(',');
                        items.splice(insertIdx, 1, newValue);
                        selEnd = items.slice(0, insertIdx+1).join(', ').length;
                        this.highlight(rindex);
                        this.scrollIntoView();

                    }
                    else {
                        items.push(newValue);
                    }
                    var len = items.join(',').length;
                    if(selStart != len){
                        var lastWord = raw.split(',').pop();
                        if (items.length >1 && lastWord.match(/^\s+/) == null) {
                            selStart++;
                        }
                        this.setRawValue(items.join(', '));
                        this.selectText(selStart, (selEnd!=null) ? selEnd : this.getRawValue().length);
                    }
                }
            }
        }
    },

    apply : function() {
        var selected = 	this.view.getSelectedRecords();
        var value = [];
        for (var n=0,len=selected.length;n -1 && !this.view.isSelected(idx)) {
            var rec = this.store.getAt(idx);
            this.select(idx);
        }
    },
    // filters-out already-selected items from type-ahead queries.
    // e.g.: if store contains: "betty, barney, bart" and betty is already selected,
    // when user types "b", only "bart" and "barney" should be returned as possible matches,
    // since betty is *already* selected
    createTypeAheadFilterFn : function(items) {
        var key = this.displayField;
        return function(rec) {
            var re = new RegExp(rec.data[key], "i");
            var add = true;
            for (var n=0,len=items.length;n/**
     * setValue
     * Accepts a comma-separated list of ids or an array.  if given a string, will conver to Array.
     * @param {Array, String} v
     */
    setValue : function(v) {
        var text = [];
        var value = [];

        if (typeof(v) == 'string') {	// <-- "1,2,3"
            value = v.match(/\d+/g); // <-- strip multiple spaces and split on ","
            if(value){
                for (var n=0,len=value.length;n/**
     * 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){
        if (!typeof(index) == 'number') {
            throw new Error('MultiCombo#select expected @param {Number} index but got: ' + typeof(index));
        }
        this.view.isSelected(index) ? this.view.deselect(index, true) : this.view.select(index, true);
        this.onSelect(this.store.getAt(index), index);

        this.matches = null;
        if(scrollIntoView !== false){
            var el = this.view.getNode(index);
            if(el){
                this.innerList.scrollChildIntoView(el, false);
            }
        }

    },

    getLastValue : function() {
        return Ext.util.Format.trim(this.getRawValue().split(',').pop());
    },

/**
     * 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 (v.length) {
            var indexes = [];
            var rs = this.store.data.filterBy(this.store.createFilterFn(this.valueField, new RegExp(v.join('|'), "i"))).each(function(r){
                indexes.push(this.store.indexOf(r));
            }, this);
            if (indexes.length) {
                this.view.select(indexes);
                return true;
            }
        }
        else {
            this.view.clearSelections();
            this.setRawValue('');
            return false;
        }
    },

    // private
    initEvents : function(){
        Ext.form.ComboBox.superclass.initEvents.call(this);
        this.keyNav = new Ext.KeyNav(this.el, {
            "up" : function(e){
                this.lastKey = Ext.EventObject.UP;
                this.inKeyMode = true;
                this.selectPrev();
                this.scrollIntoView();
            },

            "down" : function(e){
                this.inKeyMode = true;
                if(!this.isExpanded()){
                    this.lastKey = Ext.EventObject.DOWN;
                    this.onTriggerClick();
                }else{
                    this.selectNext();
                    this.scrollIntoView();
                }

            },

            "enter" : function(e){
                var idx = this.highlightIndex;
                if (this.inKeyMode === true) {
                    if (this.plugins.length && (idx <= -1)) {
                        if (this.plugins[idx + 1]) {
                            this.plugins[idx + 1].onEnter(this);
                        }
                    }
                    else
                        if (this.plugins.length && this.highlightIndex == 0 && this.highlightIndexPrev == -1) {
                            if (this.plugins[idx]) {
                                this.plugins[idx].onEnter(this);
                            }
                        }
                        else {
                            var idx = this.getHighlightedIndex() || 0;
                            if (this.highlightIndex != null && idx != null) {
                                this.select(idx, true);
                                //this.delayedCheck = true;
                                //this.unsetDelayCheck.defer(10, this);

                            }
                        }
                }
                else {
                    var v = this.getLastValue();
                    var raw = this.getRawValue();

/** this block should be moved to method getCurrentWord
                     *
                     */
                    var pos = this.getCaretPosition(raw);
                    var word = '';
                    if (pos !== false && pos < raw.length) {
                        word = Ext.util.Format.trim(raw.substr(0, pos).split(',').pop());
                    } else {
                        word = Ext.util.Format.trim(raw.split(',').pop());
                    }

/*******************************************************/

                    var idx = this.store.find(this.displayField, word);
                    if (idx != -1) {
                        var rec = this.store.getAt(idx);
                        this.select(idx, true);
                    }
                    raw = this.getRawValue();
                    this.selectText(raw.length, raw.length);
                    this.collapse();
                }
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                if (this.matches != null && this.matches.getCount() == 1) {
                    var idx = this.store.indexOf(this.matches.first());
                    if (!this.view.isSelected(idx)) {
                        this.select(this.store.indexOf(this.matches.first()), true);
                    }
                }
                else if (this.value.length == 0 && this.getRawValue().length > 0) {
                    this.setRawValue('');
                }
                this.collapse();
                return true;
            },

            scope : this,

            doRelay : function(foo, bar, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                }
                return true;
            },

            forceKeyDown : true
        });
        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.editable !== false){
            this.el.on("keyup", this.onKeyUp, this);
        }
        if(this.forceSelection){
            this.on('blur', this.doForce, this);
        }
    },

    // private, blur-handler to ensure that rawValue contains only values from selections, in the same order as selected
    validateSelections : function(field) {
        var v = this.getValue();
        var text = [];
        for (var i=0,len=v.length;i=0) {
                text.push(this.store.getAt(idx).data[this.displayField]);
            }
        }
        this.setRawValue(text.join(', '));
    },

    scrollIntoView : function() {
        var el = this.getHighlightedNode();
        if (el) {
            this.innerList.scrollChildIntoView(el);
        }
    },

    // private
    selectNext : function(){
        this.clearHighlight();
        if (this.highlightIndex == null) {
            this.highlightIndex = -1;
        }
        if (this.highlightIndex <= -1 && this.highlightIndexPrev != -1) {
            if (this.plugins.length > 0) {
                var idx = Math.abs(this.highlightIndex)-1;
                if (this.plugins.length >= Math.abs(this.highlightIndex)) {
                    this.plugins[idx].selectNext(this);
                    this.highlightIndexPrev = this.highlightIndex;
                    this.highlightIndex++;
                    return false;
                }
            }
        }
        if (this.highlightIndexPrev == -1 && this.highlightIndex == 0) {
            this.highlightIndex = -1;
        }
        var ct = this.store.getCount();
        if(ct > 0){
            if (this.highlightIndex == -1 || this.highlightIndex+1 < ct) {
                if (this.highlightIndex == -1) {
                    this.highlightIndexPrev = 0;
                }
                else {
                    this.highlightIndexPrev = this.highlightIndex -1;
                }
                this.highlight(++this.highlightIndex);

            }
            else {
                this.highlight(ct-1);
            }
        }
    },

    // private
    selectPrev : function(){
        this.clearHighlight();
        if (this.highlightIndex <= 0) {
            var idx = Math.abs(this.highlightIndex);
            if (this.plugins.length >= idx+1 && this.highlightIndexPrev >= 0) {
                this.clearHighlight();
                this.plugins[idx].selectPrev(this);
                this.highlightIndexPrev = this.highlightIndex;
                this.highlightIndex--;
                if (this.highlightIndex == -1) {
                    this.highlightIndexPrev = -1;
                }
                return false;
            }
            else {
                this.highlightIndex = -1;
                this.highlightIndexPrev = -1;
                this.collapse();
                return;
            }
        }

        this.highlightIndexPrev = this.highlightIndex;
        var ct = this.store.getCount();
        if(ct > 0){
            if (this.highlighIndex == -1) {
                this.highlightIndex = 0;
            }
            else if (this.highlightIndex != 0) {
                this.highlightIndex--;
            }
            else if (this.highlightIndex == 0) {
                this.collapse();
            }
            this.highlight(this.highlightIndex);
        }
    },

    collapse : function() {
        if (this.isExpanded()) {
            this.highlightIndex = null;
            this.highlightIndexPrev = null;
        }
        Ext.ux.MultiCombo.superclass.collapse.call(this);
    },

    highlight : function(index) {
        this.view.el.select('.'+this.highlightClass).removeClass(this.highlightClass);
        var node = Ext.fly(this.view.getNode(index));
        if (node) {
            node.addClass(this.highlightClass);
        }
    },

    getHighlightedIndex : function() {
        var node = this.view.el.child('.' + this.highlightClass, true);
        return (node) ? this.store.indexOf(this.view.getRecord(node)) : this.highlightIndex;
    },
    getHighlightedNode : function() {
        return this.view.el.child('.'+this.highlightClass, true);
    },

    clearHighlight : function() {
        if (typeof(this.view) != 'object') { return false; }
        var el = this.view.el.select('.'+this.highlightClass);
        if (el) {
            el.removeClass(this.highlightClass);
        }
    },

    // private
    initList : function(){
        if(!this.list){
            var cls = 'x-combo-list';

            this.list = new Ext.Layer({
                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
            });

            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setWidth(lw);
            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.innerList.on('mouseover', this.onViewOver, this);
            this.innerList.on('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. Use
                * this to create custom UI layouts for items in the list.
                *

                * If you wish to preserve the default visual look of list items, add the CSS
                * class name
x-combo-list-item
 to the template's container element.
                *

                * The template must contain one or more substitution parameters using field
                * names from the Combo's {@link #store Store}. An example of a custom template
                * would be adding an
ext:qtip
 attribute which might display other fields
                * from the Store.
                *

                * The dropdown list is displayed in a DataView. See {@link Ext.DataView} for details.
                */
                this.tpl = '
{' + this.displayField + '}
';

/**
                 * @cfg {String} itemSelector
                 * 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.
                 * A simple CSS selector (e.g. div.some-class or span:first-child) that will be
                 * used to determine what nodes the DataView which handles the dropdown display will
                 * be working with.
                 */
            }

/**
            * 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,
                simpleSelect: true,
                multiSelect: true,
                overClass: this.overClass,
                selectedClass: this.selectedClass,
                itemSelector: this.itemSelector || '.' + cls + '-item'
            });
            this.view.on('click', this.onViewClick, this);
            this.fireEvent('initview', this, this.view);
            this.bindStore(this.store, true);

            if(this.resizable){
                this.resizer = new Ext.Resizable(this.list,  {
                   pinned:true, handles:'se'
                });
                this.resizer.on('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');
            }
        }
    }
});

Ext.reg('multicombo', Ext.ux.MultiCombo);


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    /*
     * Ext.ux.form.MultiSelect Example Code
     */
    var msForm = new Ext.form.FormPanel({
        title: 'MultiSelect Test',
        width: 700,
        bodyStyle: 'padding:10px;',
        renderTo: 'multiselect',
        items:[{
            xtype: 'multiselect',
            fieldLabel: 'Multiselect
(Required)',
            name: 'multiselect',
            width: 250,
            height: 200,
            allowBlank:false,
            store: [[123,'One Hundred Twenty Three'],
                    ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                    ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
            tbar:[{
                text: 'clear',
                handler: function(){
                    msForm.getForm().findField('multiselect').reset();
                }
            }],
            ddReorder: true
        }],
        tbar:[{
            text: 'Options',
            menu: [{
                text: 'Set Value (2,3)',
                handler: function(){
                    msForm.getForm().findField('multiselect').setValue('2,3');
                }
            },{
                text: 'Toggle Enabled',
                handler: function(){
                    var m = msForm.getForm().findField('multiselect');
                    if (!m.disabled) {
                        m.disable();
                    } else {
                        m.enable();
                    }
                }
            }]
        }],

        buttons: [{
            text: 'Save',
            handler: function(){
                if(msForm.getForm().isValid()){
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server:
'+
                        msForm.getForm().getValues(true));
                }
            }
        }]
    });

    var ds = new Ext.data.ArrayStore({
        data: [[123,'One Hundred Twenty Three'],
            ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
            ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
        fields: ['value','text'],
        sortInfo: {
            field: 'value',
            direction: 'ASC'
        }
    });

    /*
     * Ext.ux.form.ItemSelector Example Code
     */
    var isForm = new Ext.form.FormPanel({
        title: 'ItemSelector Test',
        width:700,
        bodyStyle: 'padding:10px;',
        renderTo: 'itemselector',
        items:[{
            xtype: 'itemselector',
            name: 'itemselector',
            fieldLabel: 'ItemSelector',
            imagePath: '../ux/images/',
            multiselects: [{
                width: 250,
                height: 200,
                store: ds,
                displayField: 'text',
                valueField: 'value'
            },{
                width: 250,
                height: 200,
                store: [['10','Ten']],
                tbar:[{
                    text: 'clear',
                    handler:function(){
                        isForm.getForm().findField('itemselector').reset();
                    }
                }]
            }]
        }],

        buttons: [{
            text: 'Save',
            handler: function(){
                if(isForm.getForm().isValid()){
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server:
'+
                        isForm.getForm().getValues(true));
                }
            }
        }]
    });

});


The source code

Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.MultiSelect
 * @extends Ext.form.Field
 * A control that allows selection and form submission of multiple list items.
 *
 *  @history
 *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
 *    2008-06-19 bpm Docs and demo code clean up
 *
 * @constructor
 * Create a new MultiSelect
 * @param {Object} config Configuration options
 * @xtype multiselect
 */
Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field,  {

/**
     * @cfg {String} legend Wraps the object with a fieldset and specified legend.
     */

/**
     * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
     */

/**
     * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
     */

/**
     * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
     */

/**
     * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
     */
    ddReorder:false,

/**
     * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
     * toolbar config, or an array of buttons/button configs to be added to the toolbar.
     */

/**
     * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
     * (use for lists which are sorted, defaults to false).
     */
    appendOnly:false,

/**
     * @cfg {Number} width Width in pixels of the control (defaults to 100).
     */
    width:100,

/**
     * @cfg {Number} height Height in pixels of the control (defaults to 100).
     */
    height:100,

/**
     * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
     */
    displayField:0,

/**
     * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
     */
    valueField:1,

/**
     * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
     * selection (defaults to true).
     */
    allowBlank:true,

/**
     * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
     */
    minSelections:0,

/**
     * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
     */
    maxSelections:Number.MAX_VALUE,

/**
     * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
     * {@link Ext.form.TextField#blankText}.
     */
    blankText:Ext.form.TextField.prototype.blankText,

/**
     * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
     * item(s) required').  The {0} token will be replaced by the value of {@link #minSelections}.
     */
    minSelectionsText:'Minimum {0} item(s) required',

/**
     * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
     * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxSelections}.
     */
    maxSelectionsText:'Maximum {0} item(s) allowed',

/**
     * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
     * (defaults to ',').
     */
    delimiter:',',

/**
     * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect 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.
     *

     *
    • 1-dimensional array : (e.g., ['Foo','Bar'])

     * A 1-dimensional array will automatically be expanded (each array item will be the combo
     * {@link #valueField value} and {@link #displayField text})
      •
     *
    • 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 value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
     *

     */

    // private
    defaultAutoCreate : {tag: "div"},

    // private
    initComponent: function(){
        Ext.ux.form.MultiSelect.superclass.initComponent.call(this);

        if(Ext.isArray(this.store)){
            if (Ext.isArray(this.store[0])){
                this.store = new Ext.data.ArrayStore({
                    fields: ['value','text'],
                    data: this.store
                });
                this.valueField = 'value';
            }else{
                this.store = new Ext.data.ArrayStore({
                    fields: ['text'],
                    data: this.store,
                    expandData: true
                });
                this.valueField = 'text';
            }
            this.displayField = 'text';
        } else {
            this.store = Ext.StoreMgr.lookup(this.store);
        }

        this.addEvents({
            'dblclick' : true,
            'click' : true,
            'change' : true,
            'drop' : true
        });
    },

    // private
    onRender: function(ct, position){
        Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);

        var fs = this.fs = new Ext.form.FieldSet({
            renderTo: this.el,
            title: this.legend,
            height: this.height,
            width: this.width,
            style: "padding:0;",
            tbar: this.tbar,
            bodyStyle: 'overflow: auto;'
        });

        this.view = new Ext.ListView({
            multiSelect: true,
            store: this.store,
            columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
            hideHeaders: true
        });

        fs.add(this.view);

        this.view.on('click', this.onViewClick, this);
        this.view.on('beforeclick', this.onViewBeforeClick, this);
        this.view.on('dblclick', this.onViewDblClick, this);

        this.hiddenName = this.name || Ext.id();
        var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
        this.hiddenField = this.el.createChild(hiddenTag);
        this.hiddenField.dom.disabled = this.hiddenName != this.name;
        fs.doLayout();
    },

    // private
    afterRender: function(){
        Ext.ux.form.MultiSelect.superclass.afterRender.call(this);

        if (this.ddReorder && !this.dragGroup && !this.dropGroup){
            this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
        }

        if (this.draggable || this.dragGroup){
            this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
                ddGroup: this.dragGroup
            });
        }
        if (this.droppable || this.dropGroup){
            this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
                ddGroup: this.dropGroup
            });
        }
    },

    // private
    onViewClick: function(vw, index, node, e) {
        this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
        this.hiddenField.dom.value = this.getValue();
        this.fireEvent('click', this, e);
        this.validate();
    },

    // private
    onViewBeforeClick: function(vw, index, node, e) {
        if (this.disabled) {return false;}
    },

    // private
    onViewDblClick : function(vw, index, node, e) {
        return this.fireEvent('dblclick', vw, index, node, e);
    },

/**
     * Returns an array of data values for the selected items in the list. The values will be separated
     * by {@link #delimiter}.
     * @return {Array} value An array of string data values
     */
    getValue: function(valueField){
        var returnArray = [];
        var selectionsArray = this.view.getSelectedIndexes();
        if (selectionsArray.length == 0) {return '';}
        for (var i=0; i/**
     * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
     * @param {String/Array} values The values to set
     */
    setValue: function(values) {
        var index;
        var selections = [];
        this.view.clearSelections();
        this.hiddenField.dom.value = '';

        if (!values || (values == '')) { return; }

        if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
        for (var i=0; i this.maxSelections) {
            this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
            return false;
        }
        return true;
    },

    // inherit docs
    disable: function(){
        this.disabled = true;
        this.hiddenField.dom.disabled = true;
        this.fs.disable();
    },

    // inherit docs
    enable: function(){
        this.disabled = false;
        this.hiddenField.dom.disabled = false;
        this.fs.enable();
    },

    // inherit docs
    destroy: function(){
        Ext.destroy(this.fs, this.dragZone, this.dropZone);
        Ext.ux.form.MultiSelect.superclass.destroy.call(this);
    }
});

Ext.reg('multiselect', Ext.ux.form.MultiSelect);

//backwards compat
Ext.ux.Multiselect = Ext.ux.form.MultiSelect;

Ext.ux.form.MultiSelect.DragZone = function(ms, config){
    this.ms = ms;
    this.view = ms.view;
    var ddGroup = config.ddGroup || 'MultiselectDD';
    var dd;
    if (Ext.isArray(ddGroup)){
        dd = ddGroup.shift();
    } else {
        dd = ddGroup;
        ddGroup = null;
    }
    Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
    this.setDraggable(ddGroup);
};

Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
    onInitDrag : function(x, y){
        var el = Ext.get(this.dragData.ddel.cloneNode(true));
        this.proxy.update(el.dom);
        el.setWidth(el.child('em').getWidth());
        this.onStartDrag(x, y);
        return true;
    },

    // private
    collectSelection: function(data) {
        data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
        var i = 0;
        this.view.store.each(function(rec){
            if (this.view.isSelected(i)) {
                var n = this.view.getNode(i);
                var dragNode = n.cloneNode(true);
                dragNode.id = Ext.id();
                data.ddel.appendChild(dragNode);
                data.records.push(this.view.store.getAt(i));
                data.viewNodes.push(n);
            }
            i++;
        }, this);
    },

    // override
    onEndDrag: function(data, e) {
        var d = Ext.get(this.dragData.ddel);
        if (d && d.hasClass("multi-proxy")) {
            d.remove();
        }
    },

    // override
    getDragData: function(e){
        var target = this.view.findItemFromChild(e.getTarget());
        if(target) {
            if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
                this.view.select(target);
                this.ms.setValue(this.ms.getValue());
            }
            if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
            var dragData = {
                sourceView: this.view,
                viewNodes: [],
                records: []
            };
            if (this.view.getSelectionCount() == 1) {
                var i = this.view.getSelectedIndexes()[0];
                var n = this.view.getNode(i);
                dragData.viewNodes.push(dragData.ddel = n);
                dragData.records.push(this.view.store.getAt(i));
                dragData.repairXY = Ext.fly(n).getXY();
            } else {
                dragData.ddel = document.createElement('div');
                dragData.ddel.className = 'multi-proxy';
                this.collectSelection(dragData);
            }
            return dragData;
        }
        return false;
    },

    // override the default repairXY.
    getRepairXY : function(e){
        return this.dragData.repairXY;
    },

    // private
    setDraggable: function(ddGroup){
        if (!ddGroup) return;
        if (Ext.isArray(ddGroup)) {
            Ext.each(ddGroup, this.setDraggable, this);
            return;
        }
        this.addToGroup(ddGroup);
    }
});

Ext.ux.form.MultiSelect.DropZone = function(ms, config){
    this.ms = ms;
    this.view = ms.view;
    var ddGroup = config.ddGroup || 'MultiselectDD';
    var dd;
    if (Ext.isArray(ddGroup)){
        dd = ddGroup.shift();
    } else {
        dd = ddGroup;
        ddGroup = null;
    }
    Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
    this.setDroppable(ddGroup);
};

Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {

/**
     * Part of the Ext.dd.DropZone interface. If no target node is found, the
     * whole Element becomes the target, and this causes the drop gesture to append.
     */
    getTargetFromEvent : function(e) {
        var target = e.getTarget();
        return target;
    },

    // private
    getDropPoint : function(e, n, dd){
        if (n == this.ms.fs.body.dom) { return "below"; }
        var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
        var c = t + (b - t) / 2;
        var y = Ext.lib.Event.getPageY(e);
        if(y <= c) {
            return "above";
        }else{
            return "below";
        }
    },

    // private
    isValidDropPoint: function(pt, n, data) {
        if (!data.viewNodes || (data.viewNodes.length != 1)) {
            return true;
        }
        var d = data.viewNodes[0];
        if (d == n) {
            return false;
        }
        if ((pt == "below") && (n.nextSibling == d)) {
            return false;
        }
        if ((pt == "above") && (n.previousSibling == d)) {
            return false;
        }
        return true;
    },

    // override
    onNodeEnter : function(n, dd, e, data){
        return false;
    },

    // override
    onNodeOver : function(n, dd, e, data){
        var dragElClass = this.dropNotAllowed;
        var pt = this.getDropPoint(e, n, dd);
        if (this.isValidDropPoint(pt, n, data)) {
            if (this.ms.appendOnly) {
                return "x-tree-drop-ok-below";
            }

            // set the insert point style on the target node
            if (pt) {
                var targetElClass;
                if (pt == "above"){
                    dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
                    targetElClass = "x-view-drag-insert-above";
                } else {
                    dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
                    targetElClass = "x-view-drag-insert-below";
                }
                if (this.lastInsertClass != targetElClass){
                    Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
                    this.lastInsertClass = targetElClass;
                }
            }
        }
        return dragElClass;
    },

    // private
    onNodeOut : function(n, dd, e, data){
        this.removeDropIndicators(n);
    },

    // private
    onNodeDrop : function(n, dd, e, data){
        if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
            return false;
        }
        var pt = this.getDropPoint(e, n, dd);
        if (n != this.ms.fs.body.dom)
            n = this.view.findItemFromChild(n);
        var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);
        if (pt == "below") {
            insertAt++;
        }

        var dir = false;

        // Validate if dragging within the same MultiSelect
        if (data.sourceView == this.view) {
            // If the first element to be inserted below is the target node, remove it
            if (pt == "below") {
                if (data.viewNodes[0] == n) {
                    data.viewNodes.shift();
                }
            } else {  // If the last element to be inserted above is the target node, remove it
                if (data.viewNodes[data.viewNodes.length - 1] == n) {
                    data.viewNodes.pop();
                }
            }

            // Nothing to drop...
            if (!data.viewNodes.length) {
                return false;
            }

            // If we are moving DOWN, then because a store.remove() takes place first,
            // the insertAt must be decremented.
            if (insertAt > this.view.store.indexOf(data.records[0])) {
                dir = 'down';
                insertAt--;
            }
        }

        for (var i = 0; i < data.records.length; i++) {
            var r = data.records[i];
            if (data.sourceView) {
                data.sourceView.store.remove(r);
            }
            this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
            var si = this.view.store.sortInfo;
            if(si){
                this.view.store.sort(si.field, si.direction);
            }
        }
        return true;
    },

    // private
    removeDropIndicators : function(n){
        if(n){
            Ext.fly(n).removeClass([
                "x-view-drag-insert-above",
                "x-view-drag-insert-left",
                "x-view-drag-insert-right",
                "x-view-drag-insert-below"]);
            this.lastInsertClass = "_noclass";
        }
    },

    // private
    setDroppable: function(ddGroup){
        if (!ddGroup) return;
        if (Ext.isArray(ddGroup)) {
            Ext.each(ddGroup, this.setDroppable, this);
            return;
        }
        this.addToGroup(ddGroup);
    }
});


The source code

/**
 * @class Ext.air.DragType
 *
 * Drag drop type constants
 *
 * @singleton
 */
Ext.air.DragType = {

/**
     * Constant for text data
     */
    TEXT : 'text/plain',

/**
     * Constant for html data
     */
    HTML : 'text/html',

/**
     * Constant for url data
     */
    URL : 'text/uri-list',

/**
     * Constant for bitmap data
     */
    BITMAP : 'image/x-vnd.adobe.air.bitmap',

/**
     * Constant for file list data
     */
    FILES : 'application/x-vnd.adobe.air.file-list'
};

// workaround for DD dataTransfer Clipboard not having hasFormat

Ext.apply(Ext.EventObjectImpl.prototype, {
    hasFormat : function(format){
        if (this.browserEvent.dataTransfer) {
            for (var i = 0, len = this.browserEvent.dataTransfer.types.length; i < len; i++) {
                if(this.browserEvent.dataTransfer.types[i] == format) {
                    return true;
                }
            }
        }
        return false;
    },

    getData : function(type){
        return this.browserEvent.dataTransfer.getData(type);
    }
});


The source code

/**
 * @class Ext.air.NativeObservable
 * @extends Ext.util.Observable
 *
 * Adds ability for Ext Observable functionality to proxy events for native (AIR) object wrappers
 *
 * @constructor
 */

Ext.air.NativeObservable = Ext.extend(Ext.util.Observable, {
    addListener : function(name){
        this.proxiedEvents = this.proxiedEvents || {};
        if(!this.proxiedEvents[name]){
            var instance = this;
            var f = function(){
                var args = Array.prototype.slice.call(arguments, 0);
                args.unshift(name);
                instance.fireEvent.apply(instance, args);
            };
            this.proxiedEvents[name] = f;
            this.getNative().addEventListener(name, f);
        }
        Ext.air.NativeObservable.superclass.addListener.apply(this, arguments);
    }
});

Ext.air.NativeObservable.prototype.on = Ext.air.NativeObservable.prototype.addListener;


The source code

/**
 * @class Ext.air.NativeWindow
 * @extends Ext.air.NativeObservable
 *
 * Wraps the AIR NativeWindow class to give an Ext friendly API.

This class also adds
 * automatic state management (position and size) for the window (by id) and it can be used
 * for easily creating "minimize to system tray" for the main window in your application.

 *
 * Note: Many of the config options for this class can only be applied to NEW windows. Passing
 * in an existing instance of a window along with those config options will have no effect.
 *
 * @constructor
 * @param {Object} config
 */
Ext.air.NativeWindow = function(config){
    Ext.apply(this, config);

/**
     * @type String
     */
    this.id = this.id || Ext.uniqueId();

    this.addEvents(

/**
         * @event close
         * @param {Object} e The air event object
         */
        'close',

/**
         * @event closing
         * @param {Object} e The air event object
         */
        'closing',

/**
         * @event move
         * @param {Object} e The air event object
         */
        'move',

/**
         * @event moving
         * @param {Object} e The air event object
         */
        'moving',

/**
         * @event resize
         * @param {Object} e The air event object
         */
        'resize',

/**
         * @event resizing
         * @param {Object} e The air event object
         */
        'resizing',

/**
         * @event displayStateChange
         * @param {Object} e The air event object
         */
        'displayStateChange',

/**
         * @event displayStateChanging
         * @param {Object} e The air event object
         */
        'displayStateChanging'
    );

    Ext.air.NativeWindow.superclass.constructor.call(this);

    if(!this.instance){
        var options = new air.NativeWindowInitOptions();
        options.systemChrome = this.chrome;
        options.type = this.type;
        options.resizable = this.resizable;
        options.minimizable = this.minimizable;
        options.maximizable = this.maximizable;
        options.transparent = this.transparent;

        this.loader = window.runtime.flash.html.HTMLLoader.createRootWindow(false, options, false);
        this.loader.load(new air.URLRequest(this.file));

        this.instance = this.loader.window.nativeWindow;
    }else{
        this.loader = this.instance.stage.getChildAt(0);
    }

    var provider = Ext.state.Manager;
    var b = air.Screen.mainScreen.visibleBounds;

    var state = provider.get(this.id) || {};
    provider.set(this.id, state);

    var win = this.instance;

    var width = Math.max(state.width || this.width, 100);
    var height = Math.max(state.height || this.height, 100);

    var centerX = b.x + ((b.width/2)-(width/2));
    var centerY = b.y + ((b.height/2)-(height/2));

    var x = !Ext.isEmpty(state.x, false) ? state.x : (!Ext.isEmpty(this.x, false) ? this.x : centerX);
    var y = !Ext.isEmpty(state.y, false) ? state.y : (!Ext.isEmpty(this.y, false) ? this.y : centerY);

    win.width = width;
    win.height = height;
    win.x = x;
    win.y = y;

    win.addEventListener('move', function(){
        if(win.displayState != air.NativeWindowDisplayState.MINIMIZED && win.width > 100 && win.height > 100) {
            state.x = win.x;
            state.y = win.y;
        }
    });
    win.addEventListener('resize', function(){
        if (win.displayState != air.NativeWindowDisplayState.MINIMIZED && win.width > 100 && win.height > 100) {
            state.width = win.width;
            state.height = win.height;
        }
    });

    Ext.air.NativeWindowManager.register(this);
    this.on('close', this.unregister, this);

/**
     * @cfg {Boolean} minimizeToTray
     * True to enable minimizing to the system tray. Note: this should only be applied
     * to the primary window in your application. A trayIcon is required.
     */
    if(this.minimizeToTray){
        this.initMinimizeToTray(this.trayIcon, this.trayMenu);
    }

};

Ext.extend(Ext.air.NativeWindow, Ext.air.NativeObservable, {

/**
     * @cfg {air.NativeWindow} instance
     * The native window instance to wrap. If undefined, a new window will be created.
     */

/**
     * @cfg {String} trayIcon
     * The icon to display when minimized in the system tray
     */

/**
     * @cfg {NativeMenu} trayMenu
     * Menu to display when the tray icon is right clicked
     */

/**
     * @cfg {String} trayTip
     * Tooltip for the tray icon
     */

/**
     * @cfg {String} chrome
     * The native window chrome (defaults to 'standard', can also be 'none').
     */
    chrome: 'standard', // can also be none

/**
     * @cfg {String} type
     * The native window type - normal, utility or lightweight. (defaults to normal)
     */
    type: 'normal',	// can be normal, utility or lightweight

/**
     * @cfg {Number} width
     */
    width:600,

/**
     * @cfg {Number} height
     */
    height:400,

/**
     * @cfg {Boolean} resizable
     */
    resizable: true,

/**
     * @cfg {Boolean} minimizable
     */
    minimizable: true,

/**
     * @cfg {Boolean} maximizable
     */
    maximizable: true,

/**
     * @cfg {Boolean} transparent
     */
    transparent: false,

/**
     * Returns the air.NativeWindow instance
     * @return air.NativeWindow
     */
    getNative : function(){
        return this.instance;
    },

/**
     * Returns the x/y coordinates for centering the windw on the screen
     * @return {x: Number, y: Number}
     */
    getCenterXY : function(){
        var b = air.Screen.mainScreen.visibleBounds;
        return {
            x: b.x + ((b.width/2)-(this.width/2)),
            y: b.y + ((b.height/2)-(this.height/2))
        };
    },

/**
     * Shows the window
     */
    show :function(){
        if(this.trayed){
            Ext.air.SystemTray.hideIcon();
            this.trayed = false;
        }
        this.instance.visible = true;
    },

/**
     * Shows and activates the window
     */
    activate : function(){
        this.show();
        this.instance.activate();
    },

/**
     * Hides the window
     */
    hide :function(){
        this.instance.visible = false;
    },

/**
     * Closes the window
     */
    close : function(){
        this.instance.close();
    },

/**
     * Returns true if this window is minimized
     * @return Boolean
     */
    isMinimized :function(){
        return this.instance.displayState == air.NativeWindowDisplayState.MINIMIZED;
    },

/**
     * Returns true if this window is maximized
     * @return Boolean
     */
    isMaximized :function(){
        return this.instance.displayState == air.NativeWindowDisplayState.MAXIMIZED;
    },

/**
     * Moves the window to the passed xy and y coordinates
     * @param {Number} x
     * @param {Number} y
     */
    moveTo : function(x, y){
        this.x = this.instance.x = x;
        this.y = this.instance.y = y;
    },

/**
     * @param {Number} width
     * @param {Number} height
     */
    resize : function(width, height){
        this.width = this.instance.width = width;
        this.height = this.instance.height = height;
    },

    unregister : function(){
        Ext.air.NativeWindowManager.unregister(this);
    },

    initMinimizeToTray : function(icon, menu){
        var tray = Ext.air.SystemTray;

        tray.setIcon(icon, this.trayTip);
        this.on('displayStateChanging', function(e){
            if(e.afterDisplayState == 'minimized'){
                e.preventDefault();
                this.hide();
                tray.showIcon();
                this.trayed = true;
            }
        }, this);

        tray.on('click', function(){
            this.activate();
        }, this);

        if(menu){
            tray.setMenu(menu);
        }
    }
});

/**
 * Returns the first opened window in your application
 * @return air.NativeWindow
 * @static
 */
Ext.air.NativeWindow.getRootWindow = function(){
    return air.NativeApplication.nativeApplication.openedWindows[0];
};

/**
 * Returns the javascript "window" object of the first opened window in your application
 * @return Window
 * @static
 */
Ext.air.NativeWindow.getRootHtmlWindow = function(){
    return Ext.air.NativeWindow.getRootWindow().stage.getChildAt(0).window;
};

/**
 * @class Ext.air.NativeWindowGroup
 *
 * A collection of NativeWindows.
 */
Ext.air.NativeWindowGroup = function(){
    var list = {};

    return {

/**
         * @param {Object} win
         */
        register : function(win){
            list[win.id] = win;
        },

/**
         * @param {Object} win
         */
        unregister : function(win){
            delete list[win.id];
        },

/**
         * @param {String} id
         */
        get : function(id){
            return list[id];
        },

/**
         * Closes all windows
         */
        closeAll : function(){
            for(var id in list){
                if(list.hasOwnProperty(id)){
                    list[id].close();
                }
            }
        },

/**
         * Executes the specified function once for every window in the group, 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 in which to execute the function
         */
        each : function(fn, scope){
            for(var id in list){
                if(list.hasOwnProperty(id)){
                    if(fn.call(scope || list[id], list[id]) === false){
                        return;
                    }
                }
            }
        }
    };
};

/**
 * @class Ext.air.NativeWindowManager
 * @extends Ext.air.NativeWindowGroup
 *
 * Collection of all NativeWindows created.
 *
 * @singleton
 */
Ext.air.NativeWindowManager = new Ext.air.NativeWindowGroup();


The source code

/**
 * @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);
    },

    // private
    validateValue : function(value){
        if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
            return false;
        }
        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
             return true;
        }
        value = String(value).replace(this.decimalSeparator, ".");
        if(isNaN(value)){
            this.markInvalid(String.format(this.nanText, value));
            return false;
        }
        var num = this.parseValue(value);
        if(num < this.minValue){
            this.markInvalid(String.format(this.minText, this.minValue));
            return false;
        }
        if(num > this.maxValue){
            this.markInvalid(String.format(this.maxText, this.maxValue));
            return false;
        }
        return true;
    },

    getValue : function(){
        return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
    },

    setValue : function(v){
        v = typeof v == 'number' ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
        v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
        return Ext.form.NumberField.superclass.setValue.call(this, v);
    },

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

/**
 * @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);
            });
        },

/**
         * Used to enable bubbling of events
         * @param {Object} events
         */
        enableBubble: function(events){
            var me = this;
            events = Ext.isArray(events) ? events : Ext.toArray(arguments);
            Ext.each(events, function(ename){
                ename = ename.toLowerCase();
                var ce = me.events[ename] || true;
                if (typeof ce == "boolean") {
                    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
 * @param {Function} fn The function to call
 * @param {Object} scope (optional) The scope (this object) for the fn
 * @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.
 * @static
 */
Ext.util.Observable.observeClass = function(c){
    Ext.apply(c, new Ext.util.Observable());
    c.prototype.fireEvent = function(){
        return (c.fireEvent.apply(c, arguments) !== false) &&
        (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false);
    };
};


The source code

(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(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 = function(){
    var filterOptRe = /^(?:scope|delay|buffer|single)$/, toLower = function(s){
        return s.toLowerCase();
    };

    return {

/**
         *
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 = toLower(a[0]),
                me = this,
                ret = TRUE,
                ce = me.events[ename],
                q,
                c;
            if (me.eventsSuspended === TRUE) {
                if (q = me.suspendedEventsQueue) {
                    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) {
                    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 (!filterOptRe.test(e)) {
                        me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
                    }
                }
            } else {
                eventName = toLower(eventName);
                ce = me.events[eventName] || TRUE;
                if (typeof ce == "boolean") {
                    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[toLower(eventName)];
            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();
                }
            }
        },

/**
         * Used to define events on this Observable
         * @param {Object} object The object with the events defined
         */
        addEvents : function(o){
            var me = this;
            me.events = me.events || {};
            if (typeof o == 'string') {
                EACH(arguments, function(a) {
                    me.events[a] = me.events[a] || 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];
            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.suspendedEventsQueue = [];
            }
        },

/**
         * 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;
            me.eventsSuspended = !delete me.suspendedEventQueue;
            EACH(me.suspendedEventsQueue, 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, scope){
    var task = new EXTUTIL.DelayedTask();
    return function(){
        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, scope){
    return function(){
        var args = TOARRAY(arguments);
        (function(){
            h.apply(scope, args);
        }).defer(o.delay || 10);
    };
};

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, scope);
        }
        if(o.single){
            h = createSingle(h, this, fn, scope);
        }
        if(o.buffer){
            h = createBuffered(h, o, scope);
        }
        l.fireFn = h;
        return l;
    },

    findListener : function(fn, scope){
        var s, ret = -1;
        EACH(this.listeners, function(l, i) {
            s = l.scope;
            if(l.fn == fn && (s == scope || s == this.obj)){
                ret = i;
                return FALSE;
            }
        },
        this);
        return ret;
    },

    isListening : function(fn, scope){
        return this.findListener(fn, scope) != -1;
    },

    removeListener : function(fn, scope){
        var index,
            me = this,
            ret = FALSE;
        if((index = me.findListener(fn, scope)) != -1){
            if (me.firing) {
                me.listeners = me.listeners.slice(0);
            }
            me.listeners.splice(index, 1);
            ret = TRUE;
        }
        return ret;
    },

    clearListeners : function(){
        this.listeners = [];
    },

    fire : function(){
        var me = this,
            args = TOARRAY(arguments),
            ret = TRUE;

        EACH(me.listeners, function(l) {
            me.firing = TRUE;
            if (l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
                return ret = me.firing = FALSE;
            }
        });
        me.firing = FALSE;
        return ret;
    }
};
})();


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();
    // Album toolbar
    var newIndex = 3;
    var tb = new Ext.Toolbar({
        items:[{
            text: 'New Album',
            iconCls: 'album-btn',
            handler: function(){
                var node = root.appendChild(new Ext.tree.TreeNode({
                    text:'Album ' + (++newIndex),
                    cls:'album-node',
                    allowDrag:false
                }));
                tree.getSelectionModel().select(node);
                setTimeout(function(){
                    ge.editNode = node;
                    ge.startEdit(node.ui.textNode);
                }, 10);
            }
        }]
    });

    // set up the Album tree
    var tree = new Ext.tree.TreePanel({
         // tree
         animate:true,
         enableDD:true,
         containerScroll: true,
         ddGroup: 'organizerDD',
         rootVisible:false,
         // layout
         region:'west',
         width:200,
         split:true,
         // panel
         title:'My Albums',
         autoScroll:true,
         tbar: tb,
         margins: '5 0 5 5'
    });

    var root = new Ext.tree.TreeNode({
        text: 'Albums',
        allowDrag:false,
        allowDrop:false
    });
    tree.setRootNode(root);

    root.appendChild(
        new Ext.tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),
        new Ext.tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),
        new Ext.tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})
    );

    // add an inline editor for the nodes
    var ge = new Ext.tree.TreeEditor(tree, {/* fieldconfig here */ }, {
        allowBlank:false,
        blankText:'A name is required',
        selectOnFocus:true
    });

    // Set up images view

    var view = new Ext.DataView({
        itemSelector: 'div.thumb-wrap',
        style:'overflow:auto',
        multiSelect: true,
        plugins: new Ext.DataView.DragSelector({dragSafe:true}),
        store: new Ext.data.JsonStore({
            url: '../view/get-images.php',
            autoLoad: true,
            root: 'images',
            id:'name',
            fields:[
                'name', 'url',
                {name: 'shortName', mapping: 'name', convert: shortName}
            ]
        }),
        tpl: new Ext.XTemplate(
            '',
            '
',
            '

',
            '{shortName}
',
            ''
        )
    });

    var images = new Ext.Panel({
        id:'images',
        title:'My Images',
        region:'center',
        margins: '5 5 5 0',
        layout:'fit',

        items: view
    });

    var layout = new Ext.Panel({
        layout: 'border',
        width:650,
        height:400,
        items: [tree, images]
    });

    layout.render('layout');

    var dragZone = new ImageDragZone(view, {containerScroll:true,
        ddGroup: 'organizerDD'});
});

/**
 * Create a DragZone instance for our JsonView
 */
ImageDragZone = function(view, config){
    this.view = view;
    ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(ImageDragZone, Ext.dd.DragZone, {
    // We don't want to register our image elements, so let's
    // override the default registry lookup to fetch the image
    // from the event instead
    getDragData : function(e){
        var target = e.getTarget('.thumb-wrap');
        if(target){
            var view = this.view;
            if(!view.isSelected(target)){
                view.onClick(e);
            }
            var selNodes = view.getSelectedNodes();
            var dragData = {
                nodes: selNodes
            };
            if(selNodes.length == 1){
                dragData.ddel = target;
                dragData.single = true;
            }else{
                var div = document.createElement('div'); // create the multi element drag "ghost"
                div.className = 'multi-proxy';
                for(var i = 0, len = selNodes.length; i < len; i++){
                    div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
                    if((i+1) % 3 == 0){
                        div.appendChild(document.createElement('br'));
                    }
                }
                var count = document.createElement('div'); // selected image count
                count.innerHTML = i + ' images selected';
                div.appendChild(count);

                dragData.ddel = div;
                dragData.multi = true;
            }
            return dragData;
        }
        return false;
    },

    // this method is called by the TreeDropZone after a node drop
    // to get the new tree node (there are also other way, but this is easiest)
    getTreeNode : function(){
        var treeNodes = [];
        var nodeData = this.view.getRecords(this.dragData.nodes);
        for(var i = 0, len = nodeData.length; i < len; i++){
            var data = nodeData[i].data;
            treeNodes.push(new Ext.tree.TreeNode({
                text: data.name,
                icon: '../view/'+data.url,
                data: data,
                leaf:true,
                cls: 'image-node'
            }));
        }
        return treeNodes;
    },

    // the default action is to "highlight" after a bad drop
    // but since an image can't be highlighted, let's frame it
    afterRepair:function(){
        for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
            Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
        }
        this.dragging = false;
    },

    // override the default repairXY with one offset for the margins and padding
    getRepairXY : function(e){
        if(!this.dragData.multi){
            var xy = Ext.Element.fly(this.dragData.ddel).getXY();
            xy[0]+=3;xy[1]+=3;
            return xy;
        }
        return false;
    }
});

// Utility functions

function shortName(name){
    if(name.length > 15){
        return name.substr(0, 12) + '...';
    }
    return name;
};


The source code

Ext.onReady(function(){

    var handleAction = function(action){
        Ext.example.msg('Action', 'You clicked "'+action+'"');
    };

    var p = new Ext.Window({
        title: 'Standard',
        closable: false,
        height:250,
        width: 500,
        bodyStyle: 'padding:10px',
        contentEl: 'content',
        autoScroll: true,
        tbar: [{
            xtype:'splitbutton',
            text: 'Menu Button',
            iconCls: 'add16',
            handler: handleAction.createCallback('Menu Button'),
            menu: [{text: 'Menu Item 1', handler: handleAction.createCallback('Menu Item 1')}]
        },'-',{
            xtype:'splitbutton',
            text: 'Cut',
            iconCls: 'add16',
            handler: handleAction.createCallback('Cut'),
            menu: [{text: 'Cut menu', handler: handleAction.createCallback('Cut menu')}]
        },{
            text: 'Copy',
            iconCls: 'add16',
            handler: handleAction.createCallback('Copy')
        },{
            text: 'Paste',
            iconCls: 'add16',
            menu: [{text: 'Paste menu', handler: handleAction.createCallback('Paste menu')}]
        },'-',{
            text: 'Format',
            iconCls: 'add16',
            handler: handleAction.createCallback('Format')
        },'->',{
            text: 'Right',
            iconCls: 'add16',
            handler: handleAction.createCallback('Right')
        }]
    });
    p.show();

});


The source code

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'topics',
        totalProperty: 'totalCount',
        idProperty: 'threadid',
        remoteSort: true,

        fields: [
            'title', 'forumtitle', 'forumid', 'author',
            {name: 'replycount', type: 'int'},
            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
            'lastposter', 'excerpt'
        ],

        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-browse-remote.php'
        })
    });
    store.setDefaultSort('lastpost', 'desc');

    // pluggable renders
    function renderTopic(value, p, record){
        return String.format(
                '{0}{1} Forum',
                value, record.data.forumtitle, record.id, record.data.forumid);
    }
    function renderLast(value, p, r){
        return String.format('{0}
by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
    }

    var grid = new Ext.grid.GridPanel({
        width:700,
        height:500,
        title:'ExtJS.com - Browse Forums',
        store: store,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Topic",
            dataIndex: 'title',
            width: 420,
            renderer: renderTopic,
            sortable: true
        },{
            header: "Author",
            dataIndex: 'author',
            width: 100,
            hidden: true,
            sortable: true
        },{
            header: "Replies",
            dataIndex: 'replycount',
            width: 70,
            align: 'right',
            sortable: true
        },{
            id: 'last',
            header: "Last Post",
            dataIndex: 'lastpost',
            width: 150,
            renderer: renderLast,
            sortable: true
        }],

        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '
'+record.data.excerpt+'
';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });

    // render it
    grid.render('topic-grid');

    // trigger the data store load
    store.load({params:{start:0, limit:25}});
});


The source code

/* Fix for Opera, which does not seem to include the map function on Array's */
if (!Array.prototype.map) {
    Array.prototype.map = function(fun){
        var len = this.length;
        if (typeof fun != 'function') {
            throw new TypeError();
        }
        var res = new Array(len);
        var thisp = arguments[1];
        for (var i = 0; i < len; i++) {
            if (i in this) {
                res[i] = fun.call(thisp, this[i], i, this);
            }
        }
        return res;
    };
}

Ext.ns('Ext.ux.data');

/**
 * @class Ext.ux.data.PagingMemoryProxy
 * @extends Ext.data.MemoryProxy
 *
Paging Memory Proxy, allows to use paging grid with in memory dataset

 */
Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
    constructor : function(data){
        Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
        this.data = data;
    },
    doRequest : function(action, rs, params, reader, callback, scope, options){
        params = params ||
        {};
        var result;
        try {
            result = reader.readRecords(this.data);
        }
        catch (e) {
            this.fireEvent('loadexception', this, options, null, e);
            callback.call(scope, null, options, false);
            return;
        }

        // filtering
        if (params.filter !== undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el) == 'object') {
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter) ? true : false;
                }
                else {
                    return String(el).match(params.filter) ? true : false;
                }
            });
            result.totalRecords = result.records.length;
        }

        // sorting
        if (params.sort !== undefined) {
            // use integer as params.sort to specify column, since arrays are not named
            // params.sort=0; would also match a array without columns
            var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
            var fn = function(r1, r2){
                return r1 < r2;
            };
            result.records.sort(function(a, b){
                var v = 0;
                if (typeof(a) == 'object') {
                    v = fn(a.data[params.sort], b.data[params.sort]) * dir;
                }
                else {
                    v = fn(a, b) * dir;
                }
                if (v == 0) {
                    v = (a.index < b.index ? -1 : 1);
                }
                return v;
            });
        }
        // paging (use undefined cause start can also be 0 (thus false))
        if (params.start !== undefined && params.limit !== undefined) {
            result.records = result.records.slice(params.start, params.start + params.limit);
        }
        callback.call(scope, result, options, true);
    }
});

//backwards compat.
Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;


The source code

/**
 * @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({
    ...
});

var myPageSize = 25;  // server script should only send back 25 items

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: {
        start: 0,          // specify params for the first page load if using paging
        limit: myPageSize,
        foo:   'bar'
    }
});
 *

 *
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,
            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.refresh,
            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);
    },

    // 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.
     */
    refresh : 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){
            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 && this.store.autoDestroy){
                this.store.destroy();
            }
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on({
                scope: this,
                beforeload: this.beforeLoad,
                load: this.onLoad,
                exception: this.onLoadError
            });
            doLoad = store.getCount() > 0;
        }
        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

/**
 * @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 : Ext.Panel
      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 {Boolean} autoScroll
     * true to use overflow:'auto' on the panel's body element and show scroll bars automatically when
     * necessary, false to clip any overflowing content (defaults to false).
     */

/**
     * @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 {String/Object} html
     * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use as the panel's body
     * content (defaults to ''). The HTML content is added by the Panel's {@link #afterRender} method,
     * and 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 {String} contentEl
     *
Specify the id of an existing HTML node to use as the panel's body content
     * (defaults to '').

     *
  • Description :

     *
      This config option is used to take an existing HTML element and place it in the body
     * of a new panel (it simply moves the specified DOM element into the body element of the Panel
     * when the Panel is rendered to use as the content (it is not going to be the
     * actual panel itself).

     *
    •
     *
  • Notes :

     *
      The specified HTML Element is appended to the Panel's {@link #body} Element by the
     * Panel's {@link #afterRender} method after any configured {@link #html HTML} has
     * been inserted, and so the document will not contain this HTML at the time the
     * {@link #render} event is fired.

     *
      The specified HTML element used will not participate in any layout scheme that the
     * Panel may use. It's just HTML. Layouts operate on child 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 {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 {String} tabTip
     * A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over
     * the tab of a Ext.Panel which is an item of a {@link Ext.TabPanel}. {@link Ext.QuickTips}.init()
     * must be called in order for the tips to render.
     */

/**
     * @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,

    // 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's new width.
             * @param {Number} height The Panel'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';
        }

        // shortcuts
        if(this.tbar){
            this.elements += ',tbar';
            if(Ext.isObject(this.tbar)){
                this.topToolbar = this.tbar;
            }
            delete this.tbar;
        }
        if(this.bbar){
            this.elements += ',bbar';
            if(Ext.isObject(this.bbar)){
                this.bottomToolbar = this.bbar;
            }
            delete this.bbar;
        }

        if(this.header === true){
            this.elements += ',header';
            delete this.header;
        }else if(this.headerCfg || (this.title && this.header !== false)){
            this.elements += ',header';
        }

        if(this.footerCfg || this.footer === true){
            this.elements += ',footer';
            delete this.footer;
        }

        if(this.buttons){
            this.elements += ',footer';
            var btns = this.buttons;

/**
             * This Panel's Array of buttons as created from the {@link #buttons}
             * config property. Read only.
             * @type Array
             * @property buttons
             */
            this.buttons = [];
            for(var i = 0, len = btns.length; i < len; i++) {
                if(btns[i].render){ // button instance
                    this.buttons.push(btns[i]);
                }else if(btns[i].xtype){
                    this.buttons.push(Ext.create(btns[i], 'button'));
                }else{
                    this.addButton(btns[i]);
                }
            }
        }
        if(this.fbar){
            this.elements += ',footer';
        }
        if(this.autoLoad){
            this.on('render', this.doAutoLoad, this, {delay:10});
        }
    },

    // 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;
        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';
            }
        }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(this.padding !== undefined) {
            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.tools = this.tools ? this.tools.slice(0) : [];
            if(!this.hideCollapseTool){
                this.tools[this.collapseFirst?'unshift':'push']({
                    id: 'toggle',
                    handler : this.toggleCollapse,
                    scope: this
                });
            }
            if(this.titleCollapse && this.header){
                this.mon(this.header, 'click', this.toggleCollapse, this);
                this.header.setStyle('cursor', 'pointer');
            }
        }
        if(this.tools){
            var ts = this.tools;
            this.tools = {};
            this.addTool.apply(this, ts);
        }else{
            this.tools = {};
        }

        if(this.buttons && this.buttons.length > 0){
            this.fbar = new Ext.Toolbar({
                items: this.buttons,
                toolbarCls: 'x-panel-fbar'
            });
        }
        this.toolbars = [];
        if(this.fbar){
            this.fbar = Ext.create(this.fbar, 'toolbar');
            this.fbar.enableOverflow = false;
            if(this.fbar.items){
                this.fbar.items.each(function(c){
                    c.minWidth = c.minWidth || this.minButtonWidth;
                }, this);
            }
            this.fbar.toolbarCls = 'x-panel-fbar';

            var bct = this.footer.createChild({cls: 'x-panel-btns x-panel-btns-'+this.buttonAlign});
            this.fbar.ownerCt = this;
            this.fbar.render(bct);
            bct.createChild({cls:'x-clear'});
            this.toolbars.push(this.fbar);
        }

        if(this.tbar && this.topToolbar){
            if(Ext.isArray(this.topToolbar)){
                this.topToolbar = new Ext.Toolbar(this.topToolbar);
            }else if(!this.topToolbar.events){
                this.topToolbar = Ext.create(this.topToolbar, 'toolbar');
            }
            this.topToolbar.ownerCt = this;
            this.topToolbar.render(this.tbar);
            this.toolbars.push(this.topToolbar);
        }
        if(this.bbar && this.bottomToolbar){
            if(Ext.isArray(this.bottomToolbar)){
                this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
            }else if(!this.bottomToolbar.events){
                this.bottomToolbar = Ext.create(this.bottomToolbar, 'toolbar');
            }
            this.bottomToolbar.ownerCt = this;
            this.bottomToolbar.render(this.bbar);
            this.toolbars.push(this.bottomToolbar);
        }
        Ext.each(this.toolbars, function(tb){
            tb.on({
                scope: this,
                afterlayout: this.syncHeight,
                remove: this.syncHeight
            });
        }, this);
    },

/**
     * 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.dom;
                var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null;
                if(img){
                    Ext.fly(img).replaceClass(old, this.iconCls);
                }else{
                    Ext.DomHelper.insertBefore(hd.firstChild, {
                        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.isObject(cfg) ? cfg : {
                shadow: this.shadow !== undefined ? 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;
    },

/**
     * 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 to use for the button handler function
     * @return {Ext.Button} The button that was added
     */
    addButton : function(config, handler, scope){
        var bc = {
            handler: handler,
            scope: scope,
            minWidth: this.minButtonWidth,
            hideParent:true
        };
        if(typeof config == "string"){
            bc.text = config;
        }else{
            Ext.apply(bc, config);
        }
        var btn = new Ext.Button(bc);
        if(!this.buttons){
            this.buttons = [];
        }
        this.buttons.push(btn);
        return btn;
    },

    // private
    addTool : function(){
        if(!this[this.toolTarget]) { // no where to render tools!
            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((tc.align !== 'left') ? this[this.toolTarget] : this[this.toolTarget].child('span'), 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(){
        if(this.toolbars.length > 0){
            this.duringLayout = true;
            Ext.each(this.toolbars, function(tb){
                tb.doLayout();
            });
            delete this.duringLayout;
            this.syncHeight();
        }
    },

    syncHeight : function(){
        if(!(this.autoHeight || this.duringLayout)){
            var last = this.lastSize;
            if(last && !Ext.isEmpty(last.height)){
                var old = last.height, h = this.el.getHeight();
                if(old != 'auto' && old != h){
                    var bd = this.body, bdh = bd.getHeight();
                    h = Math.max(bdh + old - h, 0);
                    if(bdh > 0 && bdh != h){
                        bd.setHeight(h);
                        if(Ext.isIE && h <= 0){
                            return;
                        }
                        var sz = bd.getSize();
                        this.fireEvent('bodyresize', 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);
        }
        this.setAutoScroll();
        if(this.html){
            this.body.update(Ext.isObject(this.html) ?
                             Ext.DomHelper.markup(this.html) :
                             this.html);
            delete this.html;
        }
        if(this.contentEl){
            var ce = Ext.getDom(this.contentEl);
            Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
            this.body.dom.appendChild(ce);
        }
        if(this.collapsed){
            this.collapsed = false;
            this.collapse(false);
        }
        Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last
        this.initEvents();
    },

    // private
    setAutoScroll : function(){
        if(this.rendered && this.autoScroll){
            var el = this.body || this.el;
            if(el){
                el.setOverflow('auto');
            }
        }
    },

    // 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();
        }
    },

    // 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, typeof this.draggable == 'boolean' ? null : this.draggable);
    },

    // private
    beforeEffect : function(){
        if(this.floating){
            this.el.beforeAction();
        }
        this.el.addClass('x-panel-animated');
    },

    // private
    afterEffect : function(){
        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();
        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.afterCollapse();
        }
    },

    // private
    afterCollapse : function(){
        this.collapsed = true;
        this.el.addClass(this.collapsedCls);
        this.afterEffect();
        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();
        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.afterExpand();
        }
    },

    // private
    afterExpand : function(){
        this.collapsed = false;
        this.afterEffect();
        if(this.deferLayout !== undefined){
            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(w, h){
        if(w !== undefined || h !== undefined){
            if(!this.collapsed){
                if(typeof w == 'number'){
                    w = this.adjustBodyWidth(w - this.getFrameWidth());
                    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);
                        }
                    }
                    if(this.fbar){
                        var f = this.fbar,
                            fWidth = 1,
                            strict = Ext.isStrict;
                        if(this.buttonAlign == 'left'){
                           fWidth = w - f.container.getFrameWidth('lr');
                        }else{
                            //center/right alignment off in webkit
                            if(Ext.isIE || Ext.isWebKit){
                                //center alignment ok on webkit.
                                //right broken in both, center on IE
                                if(!(this.buttonAlign == 'center' && Ext.isWebKit) && (!strict || (!Ext.isIE8 && strict))){
                                    (function(){
                                        f.setWidth(f.getEl().child('.x-toolbar-ct').getWidth());
                                    }).defer(1);
                                }else{
                                    fWidth = 'auto';
                                }
                            }else{
                                fWidth = 'auto';
                            }
                        }
                        f.setWidth(fWidth);
                    }
                    this.body.setWidth(w);
                }else if(w == 'auto'){
                    this.body.setWidth(w);
                }

                if(typeof h == 'number'){
                    h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight()));
                    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{
                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.doLayout();
                    }, this, {single:true});
                }
            }
            this.fireEvent('bodyresize', this, w, h);
        }
        this.syncShadow();
    },

    // private
    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'));
            var mc = this.bwrap.dom.firstChild.firstChild.firstChild;
            w += Ext.fly(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  = this.el.getFrameWidth('tb')+this.bwrap.getFrameWidth('tb');
        h += (this.tbar ? this.tbar.getHeight() : 0) +
             (this.bbar ? this.bbar.getHeight() : 0);

        if(this.frame){
            var hd = this.el.dom.firstChild;
            var ft = this.bwrap.dom.lastChild;
            h += (hd.offsetHeight + ft.offsetHeight);
            var mc = this.bwrap.dom.firstChild.firstChild.firstChild;
            h += Ext.fly(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.getSize().height - this.getFrameHeight();
    },

    // private
    syncShadow : function(){
        if(this.floating){
            this.el.sync(true);
        }
    },

    // private
    getLayoutTarget : 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(){
        if(this.header){
            this.header.removeAllListeners();
            if(this.headerAsText){
                Ext.Element.uncache(this.header.child('span'));
            }
        }
        Ext.Element.uncache(
            this.header,
            this.tbar,
            this.bbar,
            this.footer,
            this.body,
            this.bwrap
        );
        if(this.tools){
            for(var k in this.tools){
                Ext.destroy(this.tools[k]);
            }
        }
        if(this.buttons){
            for(var b in this.buttons){
                Ext.destroy(this.buttons[b]);
            }
        }
        Ext.destroy(this.toolbars);
        Ext.Panel.superclass.beforeDestroy.call(this);
    },

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

/**
 * @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

Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
    minHeight: 0,
    maxHeight:10000000,

    constructor: function(config){
        Ext.apply(this, config);
        this.events = {};
        Ext.ux.PanelResizer.superclass.constructor.call(this, config);
    },

    init : function(p){
        this.panel = p;

        if(this.panel.elements.indexOf('footer')==-1){
            p.elements += ',footer';
        }
        p.on('render', this.onRender, this);
    },

    onRender : function(p){
        this.handle = p.footer.createChild({cls:'x-panel-resize'});

        this.tracker = new Ext.dd.DragTracker({
            onStart: this.onDragStart.createDelegate(this),
            onDrag: this.onDrag.createDelegate(this),
            onEnd: this.onDragEnd.createDelegate(this),
            tolerance: 3,
            autoStart: 300
        });
        this.tracker.initEl(this.handle);
        p.on('beforedestroy', this.tracker.destroy, this.tracker);
    },

    // private
    onDragStart: function(e){
        this.dragging = true;
        this.startHeight = this.panel.el.getHeight();
        this.fireEvent('dragstart', this, e);
    },

    // private
    onDrag: function(e){
        this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
        this.fireEvent('drag', this, e);
    },

    // private
    onDragEnd: function(e){
        this.dragging = false;
        this.fireEvent('dragend', this, e);
    }
});
Ext.preg('panelresizer', Ext.ux.PanelResizer);


The source code

Ext.onReady(function(){
    var p = new Ext.Panel({
        title: 'My Panel',
        collapsible:true,
        renderTo: 'panel-basic',
        width:400,
        html: Ext.example.bogusMarkup
    });

    // preventBodyReset: true
    new Ext.Panel({
        title: 'A Panel with W3C-suggested body-html styling',
        preventBodyReset: true,
        renderTo: 'panel-reset-true',
        width: 400,
        html: html.join('')
    });

    // preventBodyReset: false
    new Ext.Panel({
        title: 'Same panel as above with preventBodyReset: false',
        normal: false,
        renderTo: 'panel-reset-false',
        width: 400,
        html: html.join('')
    });
});

// Some sample html
var html = [
    '
Heading One
',
    '
Heading Two
',
    '
This is a paragraph with STRONG, EMPHASIS and a Link
',
    '',
        '',
            '',
            '',
        '',
    '
Table Column One Table Column Two
',
    '
    ',
        '
  • Un-ordered List-item One
    • ',
        '
  • Un-ordered List-item One
    • ',
    '
',
    '
    ',
        '
  1. Ordered List-item One
    2. ',
        '
  2. Ordered List-item Two
    3. ',
    '
',
    '
This is a blockquote
'
];


The source code

Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

Ext.onReady(function(){
    var store = new Ext.data.JsonStore({
        fields: ['season', 'total'],
        data: [{
            season: 'Summer',
            total: 150
        },{
            season: 'Fall',
            total: 245
        },{
            season: 'Winter',
            total: 117
        },{
            season: 'Spring',
            total: 184
        }]
    });

    new Ext.Panel({
        width: 400,
        height: 400,
        title: 'Pie Chart with Legend - Favorite Season',
        renderTo: 'container',
        items: {
            store: store,
            xtype: 'piechart',
            dataField: 'total',
            categoryField: 'season',
            //extra styles get applied to the chart defaults
            extraStyle:
            {
                legend:
                {
                    display: 'bottom',
                    padding: 5,
                    font:
                    {
                        family: 'Tahoma',
                        size: 13
                    }
                }
            }
        }
    });
});


The source code

/**
 * @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

Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // create some portlet tools using built in Ext tool ids
    var tools = [{
        id:'gear',
        handler: function(){
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    },{
        id:'close',
        handler: function(e, target, panel){
            panel.ownerCt.remove(panel, true);
        }
    }];

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            region:'west',
            id:'west-panel',
            title:'West',
            split:true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins:'35 0 5 5',
            cmargins:'35 5 5 5',
            layout:'accordion',
            layoutConfig:{
                animate:true
            },
            items: [{
                html: Ext.example.shortBogusMarkup,
                title:'Navigation',
                autoScroll:true,
                border:false,
                iconCls:'nav'
            },{
                title:'Settings',
                html: Ext.example.shortBogusMarkup,
                border:false,
                autoScroll:true,
                iconCls:'settings'
            }]
        },{
            xtype:'portal',
            region:'center',
            margins:'35 5 5 0',
            items:[{
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{
                    title: 'Grid in a Portlet',
                    layout:'fit',
                    tools: tools,
                    items: new SampleGrid([0, 2, 3])
                },{
                    title: 'Another Panel 1',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                }]
            },{
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{
                    title: 'Panel 2',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                },{
                    title: 'Another Panel 2',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                }]
            },{
                columnWidth:.33,
                style:'padding:10px',
                items:[{
                    title: 'Panel 3',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                },{
                    title: 'Another Panel 3',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                }]
            }]

            /*
             * Uncomment this block to test handling of the drop event. You could use this
             * to save portlet position state for example. The event arg e is the custom
             * event defined in Ext.ux.Portal.DropZone.
             */
//            ,listeners: {
//                'drop': function(e){
//                    Ext.Msg.alert('Portlet Dropped', e.panel.title + '
Column: ' +
//                        e.columnIndex + '
Position: ' + e.position);
//                }
//            }
        }]
    });
});


The source code

Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
    layout : 'anchor',
    //autoEl : 'div',//already defined by Ext.Component
    defaultType : 'portlet',
    cls : 'x-portal-column'
});

Ext.reg('portalcolumn', Ext.ux.PortalColumn);


The source code

Ext.ux.Portlet = Ext.extend(Ext.Panel, {
    anchor : '100%',
    frame : true,
    collapsible : true,
    draggable : true,
    cls : 'x-portlet'
});

Ext.reg('portlet', Ext.ux.Portlet);


The source code

Ext.onReady(function(){
    var win = window.nativeWindow;
    var opener = Ext.air.NativeWindow.getRootHtmlWindow();

    var d = new Date().clearTime(true);
    d = d.add('mi', opener.Ext.state.Manager.get('defaultReminder'));

    var time = new Ext.get('time');
    time.dom.value = d.format('g:i A');

    var ok = new Ext.Button({
        text: 'OK',
        minWidth: 80,
        renderTo: 'btns',
        handler: function(){
            var t = Date.parseDate(time.getValue(), 'g:i A');
            if(t){
                var m = t.getMinutes() + (t.getHours()*60);
                opener.Ext.state.Manager.set('defaultReminder', m);
            }
            win.close();
        }
    });

    var close = new Ext.Button({
        text: 'Cancel',
        minWidth: 80,
        renderTo: 'btns',
        handler: function(){
            win.close();
        }
    });

    win.visible = true;
    win.activate();
});


The source code

Ext.onReady(function(){

    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'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '' + val + '';
        }else if(val < 0){
            return '' + val + '';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '' + val + '%';
        }else if(val < 0){
            return '' + val + '%';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.Store({
        proxy: new Ext.ux.data.PagingMemoryProxy(myData),
        remoteSort:true,
        sortInfo: {field:'price', direction:'ASC'},
        reader: new Ext.data.ArrayReader({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        })
    });

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:320,
        width:600,
        frame:true,
        title:'Sliding Pager',

        plugins: new Ext.ux.PanelResizer({
            minHeight: 100
        }),

        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,

            plugins: new Ext.ux.ProgressBarPager()
        })
    });

    grid.render('grid-example');

    store.load({params:{start:0, limit:10}});
});


The source code

Ext.onReady(function(){
    //==== Progress bar 1 ====
    var pbar1 = new Ext.ProgressBar({
       text:'Initializing...'
    });
    var btn1 = Ext.get('btn1');
    btn1.on('click', function(){
        Ext.fly('p1text').update('Working');
        if (!pbar1.rendered){
            pbar1.render('p1');
        }else{
            pbar1.text = 'Initializing...';
            pbar1.show();
        }
        Runner.run(pbar1, Ext.get('btn1'), 10, function(){
            pbar1.reset(true);
            Ext.fly('p1text').update('Done.').show();
        });
    });

    //==== Progress bar 2 ====
    var pbar2 = new Ext.ProgressBar({
        text:'Ready',
        id:'pbar2',
        cls:'left-align',
        renderTo:'p2'
    });
    var btn2 = Ext.get('btn2');
    btn2.on('click', function(){
        Runner.run(pbar2, btn2, 12, function(){
            pbar2.reset();
            pbar2.updateText('Done.');
        });
    });

    //==== Progress bar 3 ====
    var pbar3 = new Ext.ProgressBar({
        id:'pbar3',
        width:300,
        renderTo:'p3'
    });
    pbar3.on('update', function(val){
        //You can handle this event at each progress interval if
        //needed to perform some other action
        Ext.fly('p3text').dom.innerHTML += '.';
    });
    var btn3 = Ext.get('btn3');
    btn3.on('click', function(){
        Ext.fly('p3text').update('Working');
        btn3.dom.disabled = true;
        pbar3.wait({
            interval:200,
            duration:5000,
            increment:15,
            fn:function(){
                btn3.dom.disabled = false;
                Ext.fly('p3text').update('Done');
            }
        });
    });

    //==== Progress bar 4 ====
    var pbar4 = new Ext.ProgressBar({
        text:'Waiting on you...',
        id:'pbar4',
        textEl:'p4text',
        cls:'custom',
        renderTo:'p4'
    });
    var btn4 = Ext.get('btn4');
    btn4.on('click', function(){
        Runner.run(pbar4, btn4, 19, function(){
            pbar4.updateText('All finished!');
        });
    });
});

//Please do not use the following code as a best practice! :)
var Runner = function(){
    var f = function(v, pbar, btn, count, cb){
        return function(){
            if(v > count){
                btn.dom.disabled = false;
                cb();
            }else{
                if(pbar.id=='pbar4'){
                    //give this one a different count style for fun
                    var i = v/count;
                    pbar.updateProgress(i, Math.round(100*i)+'% completed...');
                }else{
                    pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
                }
            }
       };
    };
    return {
        run : function(pbar, btn, count, cb){
            btn.dom.disabled = true;
            var ms = 5000/count;
            for(var i = 1; i < (count+2); i++){
               setTimeout(f(i, pbar, btn, count, cb), i*ms);
            }
        }
    }
}();


The source code

/**
 * @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){
            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;
                    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');
        }
        if(this.waitTimer){
            this.waitTimer.onStop = null; //prevent recursion
            Ext.TaskMgr.stop(this.waitTimer);
            this.waitTimer = null;
        }
        if(hide === true){
            this.hide();
        }
        return this;
    }
});
Ext.reg('progress', Ext.ProgressBar);


The source code

/**
* @class Ext.ux.ProgressBarPager
* @extends Object
* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
*
* @ptype progressbarpager
* @constructor
* Create a new ItemSelector
* @param {Object} config Configuration options
* @xtype itemselector
*/
Ext.ux.ProgressBarPager  = Ext.extend(Object, {

/**
     * @cfg {Integer} progBarWidth
     *
The default progress bar width.  Default is 225.

    */
    progBarWidth   : 225,

/**
     * @cfg {String} defaultText
    *
The text to display while the store is loading.  Default is 'Loading...'

     */
    defaultText    : 'Loading...',

/**
     * @cfg {Object} defaultAnimCfg
     *
A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.

     */
    defaultAnimCfg : {
        duration   : 1,
        easing     : 'bounceOut'
    },
    constructor : function(config) {
        if (config) {
            Ext.apply(this, config);
        }
    },
    //public
    init : function (parent) {

        if(parent.displayInfo){
            this.parent = parent;
            var ind  = parent.items.indexOf(parent.displayItem);
            parent.remove(parent.displayItem, true);
            this.progressBar = new Ext.ProgressBar({
                text    : this.defaultText,
                width   : this.progBarWidth,
                animate :  this.defaultAnimCfg
            });

            parent.displayItem = this.progressBar;

            parent.add(parent.displayItem);
            parent.doLayout();
            Ext.apply(parent, this.parentOverrides);

            this.progressBar.on('render', function(pb) {
                pb.el.applyStyles('cursor:pointer');

                pb.el.on('click', this.handleProgressBarClick, this);
            }, this);

            // Remove the click handler from the
            this.progressBar.on({
                scope         : this,
                beforeDestroy : function() {
                    this.progressBar.el.un('click', this.handleProgressBarClick, this);
                }
            });

        }

    },
    // private
    // This method handles the click for the progress bar
    handleProgressBarClick : function(e){
        var parent = this.parent;
        var displayItem = parent.displayItem;

        var box = this.progressBar.getBox();
        var xy = e.getXY();
        var position = xy[0]-box.x;
        var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);

        var newpage = Math.ceil(position/(displayItem.width/pages));
        parent.changePage(newpage);
    },

    // private, overriddes
    parentOverrides  : {
        // private
        // This method updates the information via the progress bar.
        updateInfo : function(){
            if(this.displayItem){
                var count   = this.store.getCount();
                var pgData  = this.getPageData();
                var pageNum = this.readPage(pgData);

                var msg    = count == 0 ?
                    this.emptyMsg :
                    String.format(
                        this.displayMsg,
                        this.cursor+1, this.cursor+count, this.store.getTotalCount()
                    );

                pageNum = pgData.activePage; ;

                var pct	= pageNum / pgData.pages;

                this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
            }
        }
    }
});
Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);


The source code

Ext.onReady(function(){

    var propsGrid = new Ext.grid.PropertyGrid({
        renderTo: 'prop-grid',
        width: 300,
        autoHeight: true,
        propertyNames: {
            tested: 'QA',
            borderWidth: 'Border Width'
        },
        source: {
            '(name)': 'Properties Grid',
            grouping: false,
            autoFitColumns: true,
            productionQuality: false,
            created: new Date(Date.parse('10/15/2006')),
            tested: false,
            version: 0.01,
            borderWidth: 1
        },
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });

    // simulate updating the grid data via a button click
    new Ext.Button({
        renderTo: 'button-container',
        text: 'Update source',
        handler: function(){
            propsGrid.setSource({
                '(name)': 'Property Grid',
                grouping: false,
                autoFitColumns: true,
                productionQuality: true,
                created: new Date(),
                tested: false,
                version: 0.8,
                borderWidth: 2
            });
        }
    });
});


The source code

/**
 * @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 = 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);
};
Ext.extend(Ext.grid.PropertyStore, Ext.util.Observable, {
    // 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){
        if(Ext.isDate(val)){
            return true;
        }
        return !(Ext.isObject(val) || Ext.isFunction(val));
    },

    // private
    setValue : function(prop, value){
        this.source[prop] = value;
        this.store.getById(prop).set('value', value);
    },

    // 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 = 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: 'true'},
            {tag: 'option', value: 'false', html: 'false'}
        ]},
        getValue : function(){
            return this.el.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)
    };
    this.renderCellDelegate = this.renderCell.createDelegate(this);
    this.renderPropDelegate = this.renderProp.createDelegate(this);
};

Ext.extend(Ext.grid.PropertyColumnModel, Ext.grid.ColumnModel, {
    // private - strings used for locale support
    nameText : 'Name',
    valueText : 'Value',
    dateFormat : 'm/j/Y',

    // private
    renderDate : function(dateVal){
        return dateVal.dateFormat(this.dateFormat);
    },

    // private
    renderBool : function(bVal){
        return bVal ? 'true' : 'false';
    },

    // 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){
        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(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'
    }
});

    */

    // private config overrides
    enableColumnMove:false,
    stripeRows:false,
    trackMouseOver: false,
    clicksToEdit:1,
    enableHdMenu : false,
    viewConfig : {
        forceFit:true
    },

    // private
    initComponent : function(){
        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();
    }
});
Ext.reg("propertygrid", Ext.grid.PropertyGrid);


The source code

(function(){

var libFlyweight,
    version = Prototype.Version.split('.'),
    mouseEnterSupported = (parseInt(version[0]) >= 2) || (parseInt(version[1]) >= 7) || (parseInt(version[2]) >= 1),
    mouseCache = {},
    isXUL = Ext.isGecko ? function(node){
        return Object.prototype.toString.call(node) == '[object XULElement]';
    } : function(){},
    isTextNode = Ext.isGecko ? function(node){
        try{
            return node.nodeType == 3;
        }catch(e) {
            return false;
        }

    } : function(node){
        return node.nodeType == 3;
    },
    elContains = function(parent, child) {
       if(parent && parent.firstChild){
         while(child) {
            if(child === parent) {
                return true;
            }
            try {
                child = child.parentNode;
            } catch(e) {
                // In FF if you mouseout an text input element
                // thats inside a div sometimes it randomly throws
                // Permission denied to get property HTMLDivElement.parentNode
                // See https://bugzilla.mozilla.org/show_bug.cgi?id=208427
                return false;
            }
            if(child && (child.nodeType != 1)) {
                child = null;
            }
          }
        }
        return false;
    },
    checkRelatedTarget = function(e) {
        var related = Ext.lib.Event.getRelatedTarget(e);
        return !(isXUL(related) || elContains(e.currentTarget,related));
    };

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?
        p = Ext.getDom(p);
        c = Ext.getDom(c);
        if (!p || !c) {return false;}

        if(p.contains && !Ext.isSafari) {
            return p.contains(c);
        }else if(p.compareDocumentPosition) {
            return !!(p.compareDocumentPosition(c) & 16);
        }else{
            var parent = c.parentNode;
            while (parent) {
                if (parent == p) {
                    return true;
                }
                else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
                    return false;
                }
                parent = parent.parentNode;
            }
            return false;
        }
    },

    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: function(node) {
        return node && !isXUL(node) && isTextNode(node) ? 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, {
                responseText: xhr.responseText,
                responseXML : xhr.responseXML,
                argument: cb.argument
            });
         } : Ext.emptyFn;
    };
    var createFailure = function(cb){
         return cb.failure ? function(xhr){
            cb.failure.call(cb.scope||window, {
                responseText: xhr.responseText,
                responseXML : xhr.responseXML,
                argument: cb.argument
            });
         } : Ext.emptyFn;
    };
    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

/**
 * @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 = [];
                var values = v.split("^");
                for(var i = 0, len = values.length; i < len; i++){
                    all.push(this.decodeValue(values[i]));
                }
                return all;
           case "o":
                var all = {};
                var values = v.split("^");
                for(var i = 0, len = values.length; i < len; i++){
                    var kv = values[i].split("=");
                    all[kv[0]] = this.decodeValue(kv[1]);
                }
                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

/**
 * @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

Ext.sql.Proxy = function(conn, table, keyName, store, readonly){
    Ext.sql.Proxy.superclass.constructor.call(this);
    this.conn = conn;
    this.table = this.conn.getTable(table, keyName);
    this.store = store;

    if (readonly !== true) {
        this.store.on('add', this.onAdd, this);
        this.store.on('update', this.onUpdate, this);
        this.store.on('remove', this.onRemove, this);
    }
};

Ext.sql.Proxy.DATE_FORMAT = 'Y-m-d H:i:s';

Ext.extend(Ext.sql.Proxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg){
        if(!this.conn.isOpen()){ // assume that the connection is in the process of opening
            this.conn.on('open', function(){
                this.load(params, reader, callback, scope, arg);
            }, this, {single:true});
            return;
        };
        if(this.fireEvent("beforeload", this, params, reader, callback, scope, arg) !== false){
            var clause = params.where || '';
            var args = params.args || [];
            var group = params.groupBy;
            var sort = params.sort;
            var dir = params.dir;

            if(group || sort){
                clause += ' ORDER BY ';
                if(group && group != sort){
                    clause += group + ' ASC, ';
                }
                clause += sort + ' ' + (dir || 'ASC');
            }

            var rs = this.table.selectBy(clause, args);
            this.onLoad({callback:callback, scope:scope, arg:arg, reader: reader}, rs);
        }else{
            callback.call(scope||this, null, arg, false);
        }
    },

    onLoad : function(trans, rs, e, stmt){
        if(rs === false){
            this.fireEvent("loadexception", this, null, trans.arg, e);
            trans.callback.call(trans.scope||window, null, trans.arg, false);
            return;
        }
        var result = trans.reader.readRecords(rs);
        this.fireEvent("load", this, rs, trans.arg);
        trans.callback.call(trans.scope||window, result, trans.arg, true);
    },

    processData : function(o){
        var fs = this.store.fields;
        var r = {};
        for(var key in o){
            var f = fs.key(key), v = o[key];
            if(f){
                if(f.type == 'date'){
                    r[key] = v ? v.format(Ext.sql.Proxy.DATE_FORMAT,10) : '';
                }else if(f.type == 'boolean'){
                    r[key] = v ? 1 : 0;
                }else{
                    r[key] = v;
                }
            }
        }
        return r;
    },

    onUpdate : function(ds, record){
        var changes = record.getChanges();
        var kn = this.table.keyName;
        this.table.updateBy(this.processData(changes), kn + ' = ?', [record.data[kn]]);
        record.commit(true);
    },

    onAdd : function(ds, records, index){
        for(var i = 0, len = records.length; i < len; i++){
            this.table.insert(this.processData(records[i].data));
        }
    },

    onRemove : function(ds, record, index){
        var kn = this.table.keyName;
        this.table.removeBy(kn + ' = ?', [record.data[kn]]);
    }
});


The source code

Ext.onReady(function(){
    new Ext.ToolTip({
        target: 'tip1',
        html: 'A very simple tooltip'
    });

    new Ext.ToolTip({
        target: 'ajax-tip',
        width: 200,
        autoLoad: {url: 'ajax-tip.html'},
        dismissDelay: 15000 // auto hide after 15 seconds
    });

    new Ext.ToolTip({
        target: 'tip2',
        html: 'Click the X to close me',
        title: 'My Tip Title',
        autoHide: false,
        closable: true,
        draggable:true
    });

    new Ext.ToolTip({
        target: 'track-tip',
        title: 'Mouse Track',
        width:200,
        html: 'This tip will follow the mouse while it is over the element',
        trackMouse:true
    });

    new Ext.ToolTip({
        title: 'Rich Content Tooltip',
        id: 'content-anchor-tip',
        target: 'leftCallout',
        anchor: 'left',
        html: null,
        width: 415,
        autoHide: false,
        closable: true,
        contentEl: 'content-tip', // load content from the page
        listeners: {
            'render': function(){
                this.header.on('click', function(e){
                    e.stopEvent();
                    Ext.Msg.alert('Link', 'Link to something interesting.');
                    Ext.getCmp('content-anchor-tip').hide();
                }, this, {delegate:'a'});
            }
        }
    });

    new Ext.ToolTip({
        target: 'bottomCallout',
        anchor: 'top',
        anchorOffset: 85, // center the anchor on the tooltip
        html: 'This tip\'s anchor is centered'
    });

    new Ext.ToolTip({
        target: 'trackCallout',
        anchor: 'right',
        trackMouse: true,
        html: 'Tracking while you move the mouse'
    });

    Ext.QuickTips.init();

});


The source code

/**
 * @class Ext.QuickTip
 * @extends Ext.ToolTip
 * 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');
        }
    },

    // 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){
            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;
        var ns = cfg.namespace;
        if(this.interceptTitles && t.title){
            ttp = t.title;
            t.qtip = ttp;
            t.removeAttribute("title");
            e.preventDefault();
        } else{
            ttp = t.qtip || et.getAttribute(cfg.attribute, ns);
        }
        if(ttp){
            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){
        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);
    }
});


The source code

/**
 * @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

/**
 * @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 {
            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

/**
 * @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 {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
     */
    setValue : function(id, value){
        if(this.rendered){
            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);
            }
        }else{
            this.values = arguments;
        }
        return this;
    },

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

/**
 * @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.
 * @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. This id should be unique, and is used by the
 * {@link Ext.data.Store} object which owns the Record to index its collection of Records. 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 #Ext.data.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}
     */

/**
     * 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,

/**
     * false 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 isObj = (typeof value === 'object');
        if(!isObj && String(this.data[name]) === String(value)){
            return;
        } else if (isObj && Ext.encode(this.data[name]) === Ext.encode(value)) {
            return;
        }
        this.dirty = true;
        if(!this.modified){
            this.modified = {};
        }
        if(typeof 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){
            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 of this Record.
     * @param {String} id (optional) A new Record id, defaults to {@link #Record.id autogenerating an id}.
     * Note: if an id is not specified the copy created will be a
     * {@link #phantom} Record.
     * @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

/**
 * @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

function generateData(){
    var data = [];
    for(var i = 0; i < 12; ++i){
        data.push([Date.monthNames[i], (Math.floor(Math.random() *  11) + 1) * 100]);
    }
    return data;
}

Ext.onReady(function(){
    var store = new Ext.data.ArrayStore({
        fields: ['month', 'hits'],
        data: generateData()
    });

    new Ext.Panel({
        width: 700,
        height: 400,
        renderTo: document.body,
        title: 'Column Chart with Reload - Hits per Month',
        tbar: [{
            text: 'Load new data set',
            handler: function(){
                store.loadData(generateData());
            }
        }],
        items: {
            xtype: 'columnchart',
            store: store,
            yField: 'hits',
            xField: 'month',
            xAxis: new Ext.chart.CategoryAxis({
                title: 'Month'
            }),
            yAxis: new Ext.chart.NumericAxis({
                title: 'Hits'
            }),
            extraStyle: {
               xAxis: {
                    labelRotation: -90
                }
            }
        }
    });
});


The source code

Ext.onReady(function(){
    var win = window.nativeWindow;
    var opener = Ext.air.NativeWindow.getRootHtmlWindow();
    var taskId = String(window.location).split('=')[1];

    var store = opener.tx.data.tasks;
    var task = store.lookup(taskId);

    win.title = 'Reminder - ' + Ext.util.Format.ellipsis(task.data.title, 40);

    bulkUpdate({
        'task-title' : Ext.util.Format.ellipsis(task.data.title, 80),
        'task-due' : task.data.dueDate ? task.data.dueDate.format('F d, Y') : 'None'
    });

    function bulkUpdate(o){
        for(var id in o){
            Ext.fly(id).update(o[id]);
        }
    }

    var dismiss = new Ext.Button({
        text: 'Dismiss',
        minWidth: 80,
        renderTo: 'btns',
        handler: function(){
            win.close();
        }
    });

    var snooze = new Ext.Button({
        text: 'Snooze',
        minWidth: 80,
        renderTo: 'btns',
        handler: function(){
            var min = parseInt(Ext.get('snooze-time').getValue(), 10);
            var reminder = new Date().add('mi', min);
            var o = store.getById(taskId);
            if(o){
                o.set('reminder', reminder);
            }else{
                store.proxy.table.updateBy({reminder: reminder}, 'where taskId = ?', [taskId]);
            }
            win.close();
        }
    });

    win.visible = true;
    win.activate();
    win.notifyUser('informational');

    Ext.air.Sound.play('beep.mp3', 10500);
});


The source code

/**
 * @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.
     */
    maxRetries: 1,

    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 = (typeof this.namespace === 'string') ? 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] = {});
            var 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];
                var 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
        };

        // send only needed data
        var 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[typeof this.enableUrlEncode == 'string' ? 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(typeof this.enableBuffer == 'number' ? 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;
            var 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

Ext.onReady(function(){
    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        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: 'src'
        }
    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();
});


The source code

/**
 * @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 = 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);
        }
    }
    // 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);
    }

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

Ext.extend(Ext.Resizable, Ext.util.Observable, {

/**
     * @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)
     */

/**
     * 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();
        }
        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'
};

// private
Ext.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
    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);
    }
    this.el.on('mousedown', this.onMouseDown, this);
    if(!disableTrackOver){
        this.el.on({
            scope: this,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut
        });
    }
};

// private
Ext.Resizable.Handle.prototype = {
    // 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

// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
    url: 'app.php/users'
});

// Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'id',
    root: 'data'
}, [
    {name: 'id'},
    {name: 'email', allowBlank: false},
    {name: 'first', allowBlank: false},
    {name: 'last', allowBlank: false}
]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter();

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
    id: 'user',
    restful: true,     // <-- This Store is RESTful
    proxy: proxy,
    reader: reader,
    writer: writer,    // <-- plug a DataWriter into the store just as you would a Reader
    listeners: {
        write : function(store, action, result, response, rs) {
            App.setAlert(response.success, response.message);
        }
    }
});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns =  [
    {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
    {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
    {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
    {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
];

// load the store immeditately
store.load();

Ext.onReady(function() {
    Ext.QuickTips.init();

    // use RowEditor for editing
    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

    // Create a typical GridPanel with RowEditor plugin
    var userGrid = new Ext.grid.GridPanel({
        renderTo: 'user-grid',
        iconCls: 'icon-grid',
        frame: true,
        title: 'Users',
        autoScroll: true,
        height: 300,
        store: store,
        plugins: [editor],
        columns : userColumns,
        tbar: [{
            text: 'Add',
            iconCls: 'silk-add',
            handler: onAdd
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: onDelete
        }, '-'],
        viewConfig: {
            forceFit: true
        }
    });

/**
     * onAdd
     */
    function onAdd(btn, ev) {
        var u = new userGrid.store.recordType({
            first : '',
            last: '',
            email : ''
        });
        editor.stopEditing();
        userGrid.store.insert(0, u);
        editor.startEditing(0);
    }

/**
     * onDelete
     */
    function onDelete() {
        var rec = userGrid.getSelectionModel().getSelected();
        if (!rec) {
            return false;
        }
        userGrid.store.remove(rec);
    }

});


The source code

Ext.onReady(function(){
    Ext.QuickTips.init();

    var Employee = Ext.data.Record.create([{
        name: 'name',
        type: 'string'
    }, {
        name: 'email',
        type: 'string'
    }, {
        name: 'start',
        type: 'date',
        dateFormat: 'n/j/Y'
    },{
        name: 'salary',
        type: 'float'
    },{
        name: 'active',
        type: 'bool'
    }]);

    // hideous function to generate employee data
    var genData = function(){
        var data = [];
        var s = new Date(2007, 0, 1);
        var now = new Date(), i = -1;
        while(s.getTime() < now.getTime()){
            var ecount = Ext.ux.getRandomInt(0, 3);
            for(var i = 0; i < ecount; i++){
                var name = Ext.ux.generateName();
                data.push({
                    start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
                    name : name,
                    email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
                    active: true,
                    salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
                });
            }
            s = s.add(Date.MONTH, 1);
        }
        return data;
    }

    var store = new Ext.data.GroupingStore({
        reader: new Ext.data.JsonReader({fields: Employee}),
        data: genData(),
        sortInfo: {field: 'start', direction: 'ASC'}
    });

    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

    var grid = new Ext.grid.GridPanel({
        store: store,
        width: 600,
        region:'center',
        margins: '0 5 5 5',
        autoExpandColumn: 'name',
        plugins: [editor],
        view: new Ext.grid.GroupingView({
            markDirty: false
        }),
        tbar: [{
            iconCls: 'icon-user-add',
            text: 'Add Employee',
            handler: function(){
                var e = new Employee({
                    name: 'New Guy',
                    email: 'new@exttest.com',
                    start: (new Date()).clearTime(),
                    salary: 50000,
                    active: true
                });
                editor.stopEditing();
                store.insert(0, e);
                grid.getView().refresh();
                grid.getSelectionModel().selectRow(0);
                editor.startEditing(0);
            }
        },{
            ref: '../removeBtn',
            iconCls: 'icon-user-delete',
            text: 'Remove Employee',
            disabled: true,
            handler: function(){
                editor.stopEditing();
                var s = grid.getSelectionModel().getSelections();
                for(var i = 0, r; r = s[i]; i++){
                    store.remove(r);
                }
            }
        }],

        columns: [
        new Ext.grid.RowNumberer(),
        {
            id: 'name',
            header: 'First Name',
            dataIndex: 'name',
            width: 220,
            sortable: true,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },{
            header: 'Email',
            dataIndex: 'email',
            width: 150,
            sortable: true,
            editor: {
                xtype: 'textfield',
                allowBlank: false,
                vtype: 'email'
            }
        },{
            xtype: 'datecolumn',
            header: 'Start Date',
            dataIndex: 'start',
            format: 'm/d/Y',
            width: 100,
            sortable: true,
            groupRenderer: Ext.util.Format.dateRenderer('M y'),
            editor: {
                xtype: 'datefield',
                allowBlank: false,
                minValue: '01/01/2006',
                minText: 'Can\'t have a start date before the company existed!',
                maxValue: (new Date()).format('m/d/Y')
            }
        },{
            xtype: 'numbercolumn',
            header: 'Salary',
            dataIndex: 'salary',
            format: '$0,0.00',
            width: 100,
            sortable: true,
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 1,
                maxValue: 150000
            }
        },{
            xtype: 'booleancolumn',
            header: 'Active',
            dataIndex: 'active',
            align: 'center',
            width: 50,
            trueText: 'Yes',
            falseText: 'No',
            editor: {
                xtype: 'checkbox'
            }
        }]
    });

    var cstore = new Ext.data.JsonStore({
        fields:['month', 'employees', 'salary'],
        data:[],
        refreshData: function(){
            var o = {}, data = [];
            var s = new Date(2007, 0, 1);
            var now = new Date(), i = -1;
            while(s.getTime() < now.getTime()){
                var m = {
                    month: s.format('M y'),
                    employees: 0,
                    salary: 0,
                    index: ++i
                }
                data.push(m);
                o[m.month] = m;
                s = s.add(Date.MONTH, 1);
            }
            store.each(function(r){
                var m = o[r.data.start.format('M y')];
                for(var i = m.index, mo; mo = data[i]; i++){
                    mo.employees += 10000;
                    mo.salary += r.data.salary;
                }
            });
            this.loadData(data);
        }
    });
    cstore.refreshData();
    store.on('add', cstore.refreshData, cstore);
    store.on('remove', cstore.refreshData, cstore);
    store.on('update', cstore.refreshData, cstore);

    var chart = new Ext.Panel({
        width:600,
        height:200,
        layout:'fit',
        margins: '5 5 0',
        region: 'north',
        split: true,
        minHeight: 100,
        maxHeight: 500,

        items: {
            xtype: 'columnchart',
            store: cstore,
            url:'../../resources/charts.swf',
            xField: 'month',
            yAxis: new Ext.chart.NumericAxis({
                displayName: 'Employees',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            tipRenderer : function(chart, record, index, series){
                if(series.yField == 'salary'){
                    return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;
                }else{
                    return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;
                }
            },

            // style chart so it looks pretty
            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
                    }
                },
                xAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xeeeeee}
                },
                yAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xdfe8f6}
                }
            },
            series: [{
                type: 'column',
                displayName: 'Salary',
                yField: 'salary',
                style: {
                    image:'../chart/bar.gif',
                    mode: 'stretch',
                    color:0x99BBE8
                }
            }]
        }
    });

    var layout = new Ext.Panel({
        title: 'Employee Salary by Month',
        layout: 'border',
        layoutConfig: {
            columns: 1
        },
        width:600,
        height: 600,
        items: [chart, grid]
    });
    layout.render(Ext.getBody());

    grid.getSelectionModel().on('selectionchange', function(sm){
        grid.removeBtn.setDisabled(sm.getCount() < 1);
    });
});


The source code

Ext.ns('Ext.ux.grid');

/**
 * @class Ext.ux.grid.RowEditor
 * @extends Ext.Panel
 * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
 * A validation mode may be enabled which uses AnchorTips to notify the user of all
 * validation errors at once.
 *
 * @ptype roweditor
 */
Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
    floating: true,
    shadow: false,
    layout: 'hbox',
    cls: 'x-small-editor',
    buttonAlign: 'center',
    baseCls: 'x-row-editor',
    elements: 'header,footer,body',
    frameWidth: 5,
    buttonPad: 3,
    clicksToEdit: 'auto',
    monitorValid: true,
    focusDelay: 250,
    errorSummary: true,

    defaults: {
        normalWidth: true
    },

    initComponent: function(){
        Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
        this.addEvents(

/**
             * @event beforeedit
             * Fired before the row editor is activated.
             * If the listener returns false the editor will not be activated.
             * @param {Ext.ux.grid.RowEditor} roweditor This object
             * @param {Number} rowIndex The rowIndex of the row just edited
             */
            'beforeedit',

/**
             * @event validateedit
             * Fired after a row is edited and passes validation.
             * If the listener returns false changes to the record will not be set.
             * @param {Ext.ux.grid.RowEditor} roweditor This object
             * @param {Object} changes Object with changes made to the record.
             * @param {Ext.data.Record} r The Record that was edited.
             * @param {Number} rowIndex The rowIndex of the row just edited
             */
            'validateedit',

/**
             * @event afteredit
             * Fired after a row is edited and passes validation.  This event is fired
             * after the store's update event is fired with this edit.
             * @param {Ext.ux.grid.RowEditor} roweditor This object
             * @param {Object} changes Object with changes made to the record.
             * @param {Ext.data.Record} r The Record that was edited.
             * @param {Number} rowIndex The rowIndex of the row just edited
             */
            'afteredit'
        );
    },

    init: function(grid){
        this.grid = grid;
        this.ownerCt = grid;
        if(this.clicksToEdit === 2){
            grid.on('rowdblclick', this.onRowDblClick, this);
        }else{
            grid.on('rowclick', this.onRowClick, this);
            if(Ext.isIE){
                grid.on('rowdblclick', this.onRowDblClick, this);
            }
        }

        // stopEditing without saving when a record is removed from Store.
        grid.getStore().on('remove', function() {
            this.stopEditing(false);
        },this);

        grid.on({
            scope: this,
            keydown: this.onGridKey,
            columnresize: this.verifyLayout,
            columnmove: this.refreshFields,
            reconfigure: this.refreshFields,
        destroy : this.destroy,
            bodyscroll: {
                buffer: 250,
                fn: this.positionButtons
            }
        });
        grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
        grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
    },

    refreshFields: function(){
        this.initFields();
        this.verifyLayout();
    },

    isDirty: function(){
        var dirty;
        this.items.each(function(f){
            if(String(this.values[f.id]) !== String(f.getValue())){
                dirty = true;
                return false;
            }
        }, this);
        return dirty;
    },

    startEditing: function(rowIndex, doFocus){
        if(this.editing && this.isDirty()){
            this.showTooltip('You need to commit or cancel your changes');
            return;
        }
        this.editing = true;
        if(typeof rowIndex == 'object'){
            rowIndex = this.grid.getStore().indexOf(rowIndex);
        }
        if(this.fireEvent('beforeedit', this, rowIndex) !== false){
            var g = this.grid, view = g.getView();
            var row = view.getRow(rowIndex);
            var record = g.store.getAt(rowIndex);
            this.record = record;
            this.rowIndex = rowIndex;
            this.values = {};
            if(!this.rendered){
                this.render(view.getEditorParent());
            }
            var w = Ext.fly(row).getWidth();
            this.setSize(w);
            if(!this.initialized){
                this.initFields();
            }
            var cm = g.getColumnModel(), fields = this.items.items, f, val;
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                val = this.preEditValue(record, cm.getDataIndex(i));
                f = fields[i];
                f.setValue(val);
                this.values[f.id] = val || '';
            }
            this.verifyLayout(true);
            if(!this.isVisible()){
                this.setPagePosition(Ext.fly(row).getXY());
            } else{
                this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
            }
            if(!this.isVisible()){
                this.show().doLayout();
            }
            if(doFocus !== false){
                this.doFocus.defer(this.focusDelay, this);
            }
        }
    },

    stopEditing : function(saveChanges){
        this.editing = false;
        if(!this.isVisible()){
            return;
        }
        if(saveChanges === false || !this.isValid()){
            this.hide();
            return;
        }
        var changes = {}, r = this.record, hasChange = false;
        var cm = this.grid.colModel, fields = this.items.items;
        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            if(!cm.isHidden(i)){
                var dindex = cm.getDataIndex(i);
                if(!Ext.isEmpty(dindex)){
                    var oldValue = r.data[dindex];
                    var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
                    if(String(oldValue) !== String(value)){
                        changes[dindex] = value;
                        hasChange = true;
                    }
                }
            }
        }
        if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
            r.beginEdit();
            for(var k in changes){
                if(changes.hasOwnProperty(k)){
                    r.set(k, changes[k]);
                }
            }
            r.endEdit();
            this.fireEvent('afteredit', this, changes, r, this.rowIndex);
        }
        this.hide();
    },

    verifyLayout: function(force){
        if(this.el && (this.isVisible() || force === true)){
            var row = this.grid.getView().getRow(this.rowIndex);
            this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined);
            var cm = this.grid.colModel, fields = this.items.items;
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                if(!cm.isHidden(i)){
                    var adjust = 0;
                    if(i === 0){
                        adjust += 0; // outer padding
                    }
                    if(i === (len - 1)){
                        adjust += 3; // outer padding
                    } else{
                        adjust += 1;
                    }
                    fields[i].show();
                    fields[i].setWidth(cm.getColumnWidth(i) - adjust);
                } else{
                    fields[i].hide();
                }
            }
            this.doLayout();
            this.positionButtons();
        }
    },

    slideHide : function(){
        this.hide();
    },

    initFields: function(){
        var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
        this.removeAll(false);
        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            var c = cm.getColumnAt(i);
            var ed = c.getEditor();
            if(!ed){
                ed = c.displayEditor || new Ext.form.DisplayField();
            }
            if(i == 0){
                ed.margins = pm('0 1 2 1');
            } else if(i == len - 1){
                ed.margins = pm('0 0 2 1');
            } else{
                ed.margins = pm('0 1 2');
            }
            ed.setWidth(cm.getColumnWidth(i));
            ed.column = c;
            if(ed.ownerCt !== this){
                ed.on('focus', this.ensureVisible, this);
                ed.on('specialkey', this.onKey, this);
            }
            this.insert(i, ed);
        }
        this.initialized = true;
    },

    onKey: function(f, e){
        if(e.getKey() === e.ENTER){
            this.stopEditing(true);
            e.stopPropagation();
        }
    },

    onGridKey: function(e){
        if(e.getKey() === e.ENTER && !this.isVisible()){
            var r = this.grid.getSelectionModel().getSelected();
            if(r){
                var index = this.grid.store.indexOf(r);
                this.startEditing(index);
                e.stopPropagation();
            }
        }
    },

    ensureVisible: function(editor){
        if(this.isVisible()){
             this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
        }
    },

    onRowClick: function(g, rowIndex, e){
        if(this.clicksToEdit == 'auto'){
            var li = this.lastClickIndex;
            this.lastClickIndex = rowIndex;
            if(li != rowIndex && !this.isVisible()){
                return;
            }
        }
        this.startEditing(rowIndex, false);
        this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
    },

    onRowDblClick: function(g, rowIndex, e){
        this.startEditing(rowIndex, false);
        this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
    },

    onRender: function(){
        Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
        this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
        this.btns = new Ext.Panel({
            baseCls: 'x-plain',
            cls: 'x-btns',
            elements:'body',
            layout: 'table',
            width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
            items: [{
                ref: 'saveBtn',
                itemId: 'saveBtn',
                xtype: 'button',
                text: this.saveText || 'Save',
                width: this.minButtonWidth,
                handler: this.stopEditing.createDelegate(this, [true])
            }, {
                xtype: 'button',
                text: this.cancelText || 'Cancel',
                width: this.minButtonWidth,
                handler: this.stopEditing.createDelegate(this, [false])
            }]
        });
        this.btns.render(this.bwrap);
    },

    afterRender: function(){
        Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
        this.positionButtons();
        if(this.monitorValid){
            this.startMonitoring();
        }
    },

    onShow: function(){
        if(this.monitorValid){
            this.startMonitoring();
        }
        Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
    },

    onHide: function(){
        Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
        this.stopMonitoring();
        this.grid.getView().focusRow(this.rowIndex);
    },

    positionButtons: function(){
        if(this.btns){
            var h = this.el.dom.clientHeight;
            var view = this.grid.getView();
            var scroll = view.scroller.dom.scrollLeft;
            var width =  view.mainBody.getWidth();
            var bw = this.btns.getWidth();
            this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
        }
    },

    // private
    preEditValue : function(r, field){
        var value = r.data[field];
        return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
    },

    // private
    postEditValue : function(value, originalValue, r, field){
        return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
    },

    doFocus: function(pt){
        if(this.isVisible()){
            var index = 0;
            if(pt){
                index = this.getTargetColumnIndex(pt);
            }
            var cm = this.grid.getColumnModel();
            for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
                var c = cm.getColumnAt(i);
                if(!c.hidden && c.getEditor()){
                    c.getEditor().focus();
                    break;
                }
            }
        }
    },

    getTargetColumnIndex: function(pt){
        var grid = this.grid, v = grid.view;
        var x = pt.left;
        var cms = grid.colModel.config;
        var i = 0, match = false;
        for(var len = cms.length, c; c = cms[i]; i++){
            if(!c.hidden){
                if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
                    match = i;
                    break;
                }
            }
        }
        return match;
    },

    startMonitoring : function(){
        if(!this.bound && this.monitorValid){
            this.bound = true;
            Ext.TaskMgr.start({
                run : this.bindHandler,
                interval : this.monitorPoll || 200,
                scope: this
            });
        }
    },

    stopMonitoring : function(){
        this.bound = false;
        if(this.tooltip){
            this.tooltip.hide();
        }
    },

    isValid: function(){
        var valid = true;
        this.items.each(function(f){
            if(!f.isValid(true)){
                valid = false;
                return false;
            }
        });
        return valid;
    },

    // private
    bindHandler : function(){
        if(!this.bound){
            return false; // stops binding
        }
        var valid = this.isValid();
        if(!valid && this.errorSummary){
            this.showTooltip(this.getErrorText().join(''));
        }
        this.btns.saveBtn.setDisabled(!valid);
        this.fireEvent('validation', this, valid);
    },

    showTooltip: function(msg){
        var t = this.tooltip;
        if(!t){
            t = this.tooltip = new Ext.ToolTip({
                maxWidth: 600,
                cls: 'errorTip',
                width: 300,
                title: 'Errors',
                autoHide: false,
                anchor: 'left',
                anchorToTarget: true,
                mouseOffset: [40,0]
            });
        }
        t.initTarget(this.items.last().getEl());
        if(!t.rendered){
            t.show();
            t.hide();
        }
        t.body.update(msg);
        t.doAutoWidth();
        t.show();
    },

    getErrorText: function(){
        var data = ['
    '];
        this.items.each(function(f){
            if(!f.isValid(true)){
                data.push('
  • ', f.activeError, '
    • ');
            }
        });
        data.push('
');
        return data;
    }
});
Ext.preg('roweditor', Ext.ux.grid.RowEditor);

Ext.override(Ext.form.Field, {
    markInvalid : function(msg){
        if(!this.rendered || this.preventMark){ // not rendered
            return;
        }
        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.activeError = msg;
        this.fireEvent('invalid', this, msg);
    }
});

Ext.override(Ext.ToolTip, {
    doAutoWidth : function(){
        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") + 20;
        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;
        }
    }
});


The source code

Ext.ns('Ext.ux.grid');

/**
 * @class Ext.ux.grid.RowExpander
 * @extends Ext.util.Observable
 * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
 * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
 * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
 *
 * @ptype rowexpander
 */
Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {

/**
     * @cfg {Boolean} expandOnEnter
     * true to toggle selected row(s) between expanded/collapsed when the enter
     * key is pressed (defaults to true).
     */
    expandOnEnter : true,

/**
     * @cfg {Boolean} expandOnDblClick
     * true to toggle a row between expanded/collapsed when double clicked
     * (defaults to true).
     */
    expandOnDblClick : true,

    header : '',
    width : 20,
    sortable : false,
    fixed : true,
    menuDisabled : true,
    dataIndex : '',
    id : 'expander',
    lazyRender : true,
    enableCaching : true,

    constructor: function(config){
        Ext.apply(this, config);

        this.addEvents({

/**
             * @event beforeexpand
             * Fires before the row expands. Have the listener return false to prevent the row from expanding.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            beforeexpand: true,

/**
             * @event expand
             * Fires after the row expands.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            expand: true,

/**
             * @event beforecollapse
             * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            beforecollapse: true,

/**
             * @event collapse
             * Fires after the row collapses.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            collapse: true
        });

        Ext.ux.grid.RowExpander.superclass.constructor.call(this);

        if(this.tpl){
            if(typeof this.tpl == 'string'){
                this.tpl = new Ext.Template(this.tpl);
            }
            this.tpl.compile();
        }

        this.state = {};
        this.bodyContent = {};
    },

    getRowClass : function(record, rowIndex, p, ds){
        p.cols = p.cols-1;
        var content = this.bodyContent[record.id];
        if(!content && !this.lazyRender){
            content = this.getBodyContent(record, rowIndex);
        }
        if(content){
            p.body = content;
        }
        return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
    },

    init : function(grid){
        this.grid = grid;

        var view = grid.getView();
        view.getRowClass = this.getRowClass.createDelegate(this);

        view.enableRowBody = true;

        grid.on('render', this.onRender, this);
        grid.on('destroy', this.onDestroy, this);
    },

    // @private
    onRender: function() {
        var grid = this.grid;
        var mainBody = grid.getView().mainBody;
        mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
        if (this.expandOnEnter) {
            this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
                'enter' : this.onEnter,
                scope: this
            });
        }
        if (this.expandOnDblClick) {
            grid.on('rowdblclick', this.onRowDblClick, this);
        }
    },

    // @private
    onDestroy: function() {
        this.keyNav.disable();
        delete this.keyNav;
        var mainBody = this.grid.getView().mainBody;
        mainBody.un('mousedown', this.onMouseDown, this);
    },
    // @private
    onRowDblClick: function(grid, rowIdx, e) {
        this.toggleRow(rowIdx);
    },

    onEnter: function(e) {
        var g = this.grid;
        var sm = g.getSelectionModel();
        var sels = sm.getSelections();
        for (var i = 0, len = sels.length; i < len; i++) {
            var rowIdx = g.getStore().indexOf(sels[i]);
            this.toggleRow(rowIdx);
        }
    },

    getBodyContent : function(record, index){
        if(!this.enableCaching){
            return this.tpl.apply(record.data);
        }
        var content = this.bodyContent[record.id];
        if(!content){
            content = this.tpl.apply(record.data);
            this.bodyContent[record.id] = content;
        }
        return content;
    },

    onMouseDown : function(e, t){
        e.stopEvent();
        var row = e.getTarget('.x-grid3-row');
        this.toggleRow(row);
    },

    renderer : function(v, p, record){
        p.cellAttr = 'rowspan="2"';
        return '

';
    },

    beforeExpand : function(record, body, rowIndex){
        if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
            if(this.tpl && this.lazyRender){
                body.innerHTML = this.getBodyContent(record, rowIndex);
            }
            return true;
        }else{
            return false;
        }
    },

    toggleRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
    },

    expandRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
        if(this.beforeExpand(record, body, row.rowIndex)){
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
            this.fireEvent('expand', this, record, body, row.rowIndex);
        }
    },

    collapseRow : function(row){
        if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
        }
        var record = this.grid.store.getAt(row.rowIndex);
        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
        if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
            this.state[record.id] = false;
            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.fireEvent('collapse', this, record, body, row.rowIndex);
        }
    }
});

Ext.preg('rowexpander', Ext.ux.grid.RowExpander);

//backwards compat
Ext.grid.RowExpander = Ext.ux.grid.RowExpander;


The source code

// We are adding these custom layouts to a namespace that does not
// exist by default in Ext, so we have to add the namespace first:
Ext.ns('Ext.ux.layout');

/**
 * @class Ext.ux.layout.RowLayout
 * @extends Ext.layout.ContainerLayout
 *
This is the layout style of choice for creating structural layouts in a multi-row format where the height of
 * each row can be specified as a percentage or fixed height.  Row widths can also be fixed, percentage or auto.
 * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
 * and should generally not need to be created directly via the new keyword.

 *
RowLayout does not have any direct config options (other than inherited ones), but it does support a
 * specific config property of rowHeight that can be included in the config of any panel added to it.  The
 * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
 * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).

 *
The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
 * The rowHeight 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 row heights 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 height or none
 * specified (auto) are skipped, but their heights are subtracted from the overall container height.  During the second
 * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
 * the total remaining container height.  In other words, percentage height panels are designed to fill the space
 * left over by all the fixed-height and/or auto-height panels.  Because of this, while you can specify any number of rows
 * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
 * layout may not render as expected.  Example usage:

 *

// All rows are percentages -- they must add up to 1
var p = new Ext.Panel({
    title: 'Row Layout - Percentage Only',
    layout:'ux.row',
    items: [{
        title: 'Row 1',
        rowHeight: .25
    },{
        title: 'Row 2',
        rowHeight: .6
    },{
        title: 'Row 3',
        rowHeight: .15
    }]
});

// Mix of height and rowHeight -- all rowHeight values must add
// up to 1. The first row will take up exactly 120px, and the last two
// rows will fill the remaining container height.
var p = new Ext.Panel({
    title: 'Row Layout - Mixed',
    layout:'ux.row',
    items: [{
        title: 'Row 1',
        height: 120,
        // standard panel widths are still supported too:
        width: '50%' // or 200
    },{
        title: 'Row 2',
        rowHeight: .8,
        width: 300
    },{
        title: 'Row 3',
        rowHeight: .2
    }]
});

 */
Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
    // private
    monitorResize:true,

    // private
    isValidParent : function(c, target){
        return c.getEl().dom.parentNode == this.innerCt.dom;
    },

    // private
    onLayout : function(ct, target){
        var rs = ct.items.items, len = rs.length, r, i;

        if(!this.innerCt){
            target.addClass('ux-row-layout-ct');
            this.innerCt = target.createChild({cls:'x-row-inner'});
        }
        this.renderAll(ct, this.innerCt);

        var size = target.getViewSize();

        if(size.width < 1 && size.height < 1){ // display none?
            return;
        }

        var h = size.height - target.getPadding('tb'),
            ph = h;

        this.innerCt.setSize({height:h});

        // some rows can be percentages while others are fixed
        // so we need to make 2 passes

        for(i = 0; i < len; i++){
            r = rs[i];
            if(!r.rowHeight){
                ph -= (r.getSize().height + r.getEl().getMargins('tb'));
            }
        }

        ph = ph < 0 ? 0 : ph;

        for(i = 0; i < len; i++){
            r = rs[i];
            if(r.rowHeight){
                r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});
            }
        }
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;


The source code

/**
 * @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 = function(config){
    Ext.apply(this, config);
    if(this.rowspan){
        this.renderer = this.renderer.createDelegate(this);
    }
};

Ext.grid.RowNumberer.prototype = {

/**
     * @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,

    // private
    fixed:true,
    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

/**
 * @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 = 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);
};

Ext.extend(Ext.grid.RowSelectionModel, 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,

/**
     * @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
        });

        var view = this.grid.view;
        view.on("refresh", this.onRefresh, this);
        view.on("rowupdated", this.onRowUpdated, this);
        view.on("rowremoved", this.onRemove, this);
    },

    // 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
     * @param {Object} scope (optional)
     * @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, ed = g.activeEditor;
        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){
            e.stopEvent();
            ed.completeEdit();
            if(this.moveEditorOnEnter !== false){
                if(shift){
                    newCell = g.walkCells(ed.row - 1, ed.col, -1, this.acceptsNav, this);
                }else{
                    newCell = g.walkCells(ed.row + 1, ed.col, 1, this.acceptsNav, this);
                }
            }
        }else if(k == e.ESC){
            ed.cancelEdit();
        }
        if(newCell){
            g.startEditing(newCell[0], newCell[1]);
        }
    },

    destroy: function(){
        if(this.rowNav){
            this.rowNav.disable();
            this.rowNav = null;
        }
        Ext.grid.RowSelectionModel.superclass.destroy.call(this);
    }
});


The source code

SampleGrid = function(limitColumns){

    function italic(value){
        return '' + value + '';
    }

    function change(val){
        if(val > 0){
            return '' + val + '';
        }else if(val < 0){
            return '' + val + '';
        }
        return val;
    }

    function pctChange(val){
        if(val > 0){
            return '' + val + '%';
        }else if(val < 0){
            return '' + val + '%';
        }
        return val;
    }

    var columns = [
        {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ];

    // allow samples to limit columns
    if(limitColumns){
        var cs = [];
        for(var i = 0, len = limitColumns.length; i < len; i++){
            cs.push(columns[limitColumns[i]]);
        }
        columns = cs;
    }

    SampleGrid.superclass.constructor.call(this, {
        store: new Ext.data.Store({
            reader: new Ext.data.ArrayReader({}, [
                   {name: 'company'},
                   {name: 'price', type: 'float'},
                   {name: 'change', type: 'float'},
                   {name: 'pctChange', type: 'float'},
                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
              ]),
            data: [
                ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
                ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
                ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
                ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
                ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
                ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
                ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
                ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
                ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
                ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
                ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
                ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
                ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
                ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
                ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
                ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
                ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
                ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
                ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
                ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
                ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
                ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
                ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
                ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
                ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
                ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
                ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
                ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
                ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
            ]
        }),
        columns: columns,
        autoExpandColumn: 'company',
        height:250,
        width:600
    });

}

Ext.extend(SampleGrid, Ext.grid.GridPanel);


The source code

// Sample desktop configuration
MyDesktop = new Ext.app.App({
    init :function(){
        Ext.QuickTips.init();
    },

    getModules : function(){
        return [
            new MyDesktop.GridWindow(),
            new MyDesktop.TabWindow(),
            new MyDesktop.AccordionWindow(),
            new MyDesktop.BogusMenuModule(),
            new MyDesktop.BogusModule()
        ];
    },

    // config for the start menu
    getStartConfig : function(){
        return {
            title: 'Jack Slocum',
            iconCls: 'user',
            toolItems: [{
                text:'Settings',
                iconCls:'settings',
                scope:this
            },'-',{
                text:'Logout',
                iconCls:'logout',
                scope:this
            }]
        };
    }
});

/*
 * Example windows
 */
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
    id:'grid-win',
    init : function(){
        this.launcher = {
            text: 'Grid Window',
            iconCls:'icon-grid',
            handler : this.createWindow,
            scope: this
        }
    },

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win');
        if(!win){
            win = desktop.createWindow({
                id: 'grid-win',
                title:'Grid Window',
                width:740,
                height:480,
                iconCls: 'icon-grid',
                shim:false,
                animCollapse:false,
                constrainHeader:true,

                layout: 'fit',
                items:
                    new Ext.grid.GridPanel({
                        border:false,
                        ds: new Ext.data.Store({
                            reader: new Ext.data.ArrayReader({}, [
                               {name: 'company'},
                               {name: 'price', type: 'float'},
                               {name: 'change', type: 'float'},
                               {name: 'pctChange', type: 'float'}
                            ]),
                            data: Ext.grid.dummyData
                        }),
                        cm: new Ext.grid.ColumnModel([
                            new Ext.grid.RowNumberer(),
                            {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
                            {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                            {header: "Change", width: 70, sortable: true, dataIndex: 'change'},
                            {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
                        ]),

                        viewConfig: {
                            forceFit:true
                        },
                        //autoExpandColumn:'company',

                        tbar:[{
                            text:'Add Something',
                            tooltip:'Add a new row',
                            iconCls:'add'
                        }, '-', {
                            text:'Options',
                            tooltip:'Blah blah blah blaht',
                            iconCls:'option'
                        },'-',{
                            text:'Remove Something',
                            tooltip:'Remove the selected item',
                            iconCls:'remove'
                        }]
                    })
            });
        }
        win.show();
    }
});

MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
    id:'tab-win',
    init : function(){
        this.launcher = {
            text: 'Tab Window',
            iconCls:'tabs',
            handler : this.createWindow,
            scope: this
        }
    },

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('tab-win');
        if(!win){
            win = desktop.createWindow({
                id: 'tab-win',
                title:'Tab Window',
                width:740,
                height:480,
                iconCls: 'tabs',
                shim:false,
                animCollapse:false,
                border:false,
                constrainHeader:true,

                layout: 'fit',
                items:
                    new Ext.TabPanel({
                        activeTab:0,

                        items: [{
                            title: 'Tab Text 1',
                            header:false,
                            html : '
Something useful would be in here.
',
                            border:false
                        },{
                            title: 'Tab Text 2',
                            header:false,
                            html : '
Something useful would be in here.
',
                            border:false
                        },{
                            title: 'Tab Text 3',
                            header:false,
                            html : '
Something useful would be in here.
',
                            border:false
                        },{
                            title: 'Tab Text 4',
                            header:false,
                            html : '
Something useful would be in here.
',
                            border:false
                        }]
                    })
            });
        }
        win.show();
    }
});

MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {
    id:'acc-win',
    init : function(){
        this.launcher = {
            text: 'Accordion Window',
            iconCls:'accordion',
            handler : this.createWindow,
            scope: this
        }
    },

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('acc-win');
        if(!win){
            win = desktop.createWindow({
                id: 'acc-win',
                title: 'Accordion Window',
                width:250,
                height:400,
                iconCls: 'accordion',
                shim:false,
                animCollapse:false,
                constrainHeader:true,

                tbar:[{
                    tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},
                    iconCls:'connect'
                },'-',{
                    tooltip:'Add a new user',
                    iconCls:'user-add'
                },' ',{
                    tooltip:'Remove the selected user',
                    iconCls:'user-delete'
                }],

                layout:'accordion',
                border:false,
                layoutConfig: {
                    animate:false
                },

                items: [
                    new Ext.tree.TreePanel({
                        id:'im-tree',
                        title: 'Online Users',
                        loader: new Ext.tree.TreeLoader(),
                        rootVisible:false,
                        lines:false,
                        autoScroll:true,
                        tools:[{
                            id:'refresh',
                            on:{
                                click: function(){
                                    var tree = Ext.getCmp('im-tree');
                                    tree.body.mask('Loading', 'x-mask-loading');
                                    tree.root.reload();
                                    tree.root.collapse(true, false);
                                    setTimeout(function(){ // mimic a server call
                                        tree.body.unmask();
                                        tree.root.expand(true, true);
                                    }, 1000);
                                }
                            }
                        }],
                        root: new Ext.tree.AsyncTreeNode({
                            text:'Online',
                            children:[{
                                text:'Friends',
                                expanded:true,
                                children:[{
                                    text:'Jack',
                                    iconCls:'user',
                                    leaf:true
                                },{
                                    text:'Brian',
                                    iconCls:'user',
                                    leaf:true
                                },{
                                    text:'Jon',
                                    iconCls:'user',
                                    leaf:true
                                },{
                                    text:'Tim',
                                    iconCls:'user',
                                    leaf:true
                                },{
                                    text:'Nige',
                                    iconCls:'user',
                                    leaf:true
                                },{
                                    text:'Fred',
                                    iconCls:'user',
                                    leaf:true
                                },{
                                    text:'Bob',
                                    iconCls:'user',
                                    leaf:true
                                }]
                            },{
                                text:'Family',
                                expanded:true,
                                children:[{
                                    text:'Kelly',
                                    iconCls:'user-girl',
                                    leaf:true
                                },{
                                    text:'Sara',
                                    iconCls:'user-girl',
                                    leaf:true
                                },{
                                    text:'Zack',
                                    iconCls:'user-kid',
                                    leaf:true
                                },{
                                    text:'John',
                                    iconCls:'user-kid',
                                    leaf:true
                                }]
                            }]
                        })
                    }), {
                        title: 'Settings',
                        html:'
Something useful would be in here.
',
                        autoScroll:true
                    },{
                        title: 'Even More Stuff',
                        html : '
Something useful would be in here.
'
                    },{
                        title: 'My Stuff',
                        html : '
Something useful would be in here.
'
                    }
                ]
            });
        }
        win.show();
    }
});

// for example purposes
var windowIndex = 0;

MyDesktop.BogusModule = Ext.extend(Ext.app.Module, {
    init : function(){
        this.launcher = {
            text: 'Window '+(++windowIndex),
            iconCls:'bogus',
            handler : this.createWindow,
            scope: this,
            windowId:windowIndex
        }
    },

    createWindow : function(src){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('bogus'+src.windowId);
        if(!win){
            win = desktop.createWindow({
                id: 'bogus'+src.windowId,
                title:src.text,
                width:640,
                height:480,
                html : '
Something useful would be in here.
',
                iconCls: 'bogus',
                shim:false,
                animCollapse:false,
                constrainHeader:true
            });
        }
        win.show();
    }
});

MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, {
    init : function(){
        this.launcher = {
            text: 'Bogus Submenu',
            iconCls: 'bogus',
            handler: function() {
                return false;
            },
            menu: {
                items:[{
                    text: 'Bogus Window '+(++windowIndex),
                    iconCls:'bogus',
                    handler : this.createWindow,
                    scope: this,
                    windowId: windowIndex
                    },{
                    text: 'Bogus Window '+(++windowIndex),
                    iconCls:'bogus',
                    handler : this.createWindow,
                    scope: this,
                    windowId: windowIndex
                    },{
                    text: 'Bogus Window '+(++windowIndex),
                    iconCls:'bogus',
                    handler : this.createWindow,
                    scope: this,
                    windowId: windowIndex
                    },{
                    text: 'Bogus Window '+(++windowIndex),
                    iconCls:'bogus',
                    handler : this.createWindow,
                    scope: this,
                    windowId: windowIndex
                    },{
                    text: 'Bogus Window '+(++windowIndex),
                    iconCls:'bogus',
                    handler : this.createWindow,
                    scope: this,
                    windowId: windowIndex
                }]
            }
        }
    }
});

// Array data for the grid
Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
    ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
    ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
    ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
    ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
    ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
    ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
    ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];


The source code

/**
 * @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(");");
}

 *
 * @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 in which to call the callback
     * @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
     * @private
     */
    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
     * @private
     */
    onWrite : function(action, trans, res, 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.
            reader.readResponse(action, res);
        } catch (e) {
            this.fireEvent('exception', this, 'response', action, trans, res, e);
            trans.callback.call(trans.scope||window, null, res, false);
            return;
        }
        if(!res[reader.meta.successProperty] === 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[reader.meta.root], res, rs, trans.arg );
        trans.callback.call(trans.scope||window, res[reader.meta.root], 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

/**
 * @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

Ext.ns('Ext.ux.form');

Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        Ext.ux.form.SearchField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramName : 'query',

    onTrigger1Click : function(){
        if(this.hasSearch){
            this.el.dom.value = '';
            var o = {start: 0};
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramName] = '';
            this.store.reload({params:o});
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
        var o = {start: 0};
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramName] = v;
        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
    }
});


The source code

/**
 * Makes a ComboBox more closely mimic an HTML SELECT.  Supports clicking and dragging
 * through the list, with item selection occurring when the mouse button is released.
 * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
 * on inner elements.  Re-enabling editable after calling this will NOT work.
 *
 * @author Corey Gilmore
 * http://extjs.com/forum/showthread.php?t=6392
 *
 * @history 2007-07-08 jvs
 * Slight mods for Ext 2.0
 */
Ext.ux.SelectBox = function(config){
    this.searchResetDelay = 1000;
    config = config || {};
    config = Ext.apply(config || {}, {
        editable: false,
        forceSelection: true,
        rowHeight: false,
        lastSearchTerm: false,
        triggerAction: 'all',
        mode: 'local'
    });

    Ext.ux.SelectBox.superclass.constructor.apply(this, arguments);

    this.lastSelectedIndex = this.selectedIndex || 0;
};

Ext.extend(Ext.ux.SelectBox, Ext.form.ComboBox, {
    lazyInit: false,
    initEvents : function(){
        Ext.ux.SelectBox.superclass.initEvents.apply(this, arguments);
        // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
        this.el.on('keydown', this.keySearch, this, true);
        this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
    },

    keySearch : function(e, target, options) {
        var raw = e.getKey();
        var key = String.fromCharCode(raw);
        var startIndex = 0;

        if( !this.store.getCount() ) {
            return;
        }

        switch(raw) {
            case Ext.EventObject.HOME:
                e.stopEvent();
                this.selectFirst();
                return;

            case Ext.EventObject.END:
                e.stopEvent();
                this.selectLast();
                return;

            case Ext.EventObject.PAGEDOWN:
                this.selectNextPage();
                e.stopEvent();
                return;

            case Ext.EventObject.PAGEUP:
                this.selectPrevPage();
                e.stopEvent();
                return;
        }

        // skip special keys other than the shift key
        if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
            return;
        }
        if( this.lastSearchTerm == key ) {
            startIndex = this.lastSelectedIndex;
        }
        this.search(this.displayField, key, startIndex);
        this.cshTask.delay(this.searchResetDelay);
    },

    onRender : function(ct, position) {
        this.store.on('load', this.calcRowsPerPage, this);
        Ext.ux.SelectBox.superclass.onRender.apply(this, arguments);
        if( this.mode == 'local' ) {
            this.calcRowsPerPage();
        }
    },

    onSelect : function(record, index, skipCollapse){
        if(this.fireEvent('beforeselect', this, record, index) !== false){
            this.setValue(record.data[this.valueField || this.displayField]);
            if( !skipCollapse ) {
                this.collapse();
            }
            this.lastSelectedIndex = index + 1;
            this.fireEvent('select', this, record, index);
        }
    },

    render : function(ct) {
        Ext.ux.SelectBox.superclass.render.apply(this, arguments);
        if( Ext.isSafari ) {
            this.el.swallowEvent('mousedown', true);
        }
        this.el.unselectable();
        this.innerList.unselectable();
        this.trigger.unselectable();
        this.innerList.on('mouseup', function(e, target, options) {
            if( target.id && target.id == this.innerList.id ) {
                return;
            }
            this.onViewClick();
        }, this);

        this.innerList.on('mouseover', function(e, target, options) {
            if( target.id && target.id == this.innerList.id ) {
                return;
            }
            this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
            this.cshTask.delay(this.searchResetDelay);
        }, this);

        this.trigger.un('click', this.onTriggerClick, this);
        this.trigger.on('mousedown', function(e, target, options) {
            e.preventDefault();
            this.onTriggerClick();
        }, this);

        this.on('collapse', function(e, target, options) {
            Ext.getDoc().un('mouseup', this.collapseIf, this);
        }, this, true);

        this.on('expand', function(e, target, options) {
            Ext.getDoc().on('mouseup', this.collapseIf, this);
        }, this, true);
    },

    clearSearchHistory : function() {
        this.lastSelectedIndex = 0;
        this.lastSearchTerm = false;
    },

    selectFirst : function() {
        this.focusAndSelect(this.store.data.first());
    },

    selectLast : function() {
        this.focusAndSelect(this.store.data.last());
    },

    selectPrevPage : function() {
        if( !this.rowHeight ) {
            return;
        }
        var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
        this.focusAndSelect(this.store.getAt(index));
    },

    selectNextPage : function() {
        if( !this.rowHeight ) {
            return;
        }
        var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
        this.focusAndSelect(this.store.getAt(index));
    },

    search : function(field, value, startIndex) {
        field = field || this.displayField;
        this.lastSearchTerm = value;
        var index = this.store.find.apply(this.store, arguments);
        if( index !== -1 ) {
            this.focusAndSelect(index);
        }
    },

    focusAndSelect : function(record) {
        var index = typeof record === 'number' ? record : this.store.indexOf(record);
        this.select(index, this.isExpanded());
        this.onSelect(this.store.getAt(record), index, this.isExpanded());
    },

    calcRowsPerPage : function() {
        if( this.store.getCount() ) {
            this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
            this.rowsPerPage = this.maxHeight / this.rowHeight;
        } else {
            this.rowHeight = false;
        }
    }

});


The source code

Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.SelectBox
 * @extends Ext.form.ComboBox
 *
Makes a ComboBox more closely mimic an HTML SELECT.  Supports clicking and dragging
 * through the list, with item selection occurring when the mouse button is released.
 * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
 * on inner elements.  Re-enabling editable after calling this will NOT work.

 * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
 * @history 2007-07-08 jvs
 * Slight mods for Ext 2.0
 * @xtype selectbox
 */
Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
    constructor: function(config){
        this.searchResetDelay = 1000;
        config = config || {};
        config = Ext.apply(config || {}, {
            editable: false,
            forceSelection: true,
            rowHeight: false,
            lastSearchTerm: false,
            triggerAction: 'all',
            mode: 'local'
        });

        Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);

        this.lastSelectedIndex = this.selectedIndex || 0;
    },

    initEvents : function(){
        Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
        // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
        this.el.on('keydown', this.keySearch, this, true);
        this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
    },

    keySearch : function(e, target, options) {
        var raw = e.getKey();
        var key = String.fromCharCode(raw);
        var startIndex = 0;

        if( !this.store.getCount() ) {
            return;
        }

        switch(raw) {
            case Ext.EventObject.HOME:
                e.stopEvent();
                this.selectFirst();
                return;

            case Ext.EventObject.END:
                e.stopEvent();
                this.selectLast();
                return;

            case Ext.EventObject.PAGEDOWN:
                this.selectNextPage();
                e.stopEvent();
                return;

            case Ext.EventObject.PAGEUP:
                this.selectPrevPage();
                e.stopEvent();
                return;
        }

        // skip special keys other than the shift key
        if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
            return;
        }
        if( this.lastSearchTerm == key ) {
            startIndex = this.lastSelectedIndex;
        }
        this.search(this.displayField, key, startIndex);
        this.cshTask.delay(this.searchResetDelay);
    },

    onRender : function(ct, position) {
        this.store.on('load', this.calcRowsPerPage, this);
        Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
        if( this.mode == 'local' ) {
            this.calcRowsPerPage();
        }
    },

    onSelect : function(record, index, skipCollapse){
        if(this.fireEvent('beforeselect', this, record, index) !== false){
            this.setValue(record.data[this.valueField || this.displayField]);
            if( !skipCollapse ) {
                this.collapse();
            }
            this.lastSelectedIndex = index + 1;
            this.fireEvent('select', this, record, index);
        }
    },

    render : function(ct) {
        Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);
        if( Ext.isSafari ) {
            this.el.swallowEvent('mousedown', true);
        }
        this.el.unselectable();
        this.innerList.unselectable();
        this.trigger.unselectable();
        this.innerList.on('mouseup', function(e, target, options) {
            if( target.id && target.id == this.innerList.id ) {
                return;
            }
            this.onViewClick();
        }, this);

        this.innerList.on('mouseover', function(e, target, options) {
            if( target.id && target.id == this.innerList.id ) {
                return;
            }
            this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
            this.cshTask.delay(this.searchResetDelay);
        }, this);

        this.trigger.un('click', this.onTriggerClick, this);
        this.trigger.on('mousedown', function(e, target, options) {
            e.preventDefault();
            this.onTriggerClick();
        }, this);

        this.on('collapse', function(e, target, options) {
            Ext.getDoc().un('mouseup', this.collapseIf, this);
        }, this, true);

        this.on('expand', function(e, target, options) {
            Ext.getDoc().on('mouseup', this.collapseIf, this);
        }, this, true);
    },

    clearSearchHistory : function() {
        this.lastSelectedIndex = 0;
        this.lastSearchTerm = false;
    },

    selectFirst : function() {
        this.focusAndSelect(this.store.data.first());
    },

    selectLast : function() {
        this.focusAndSelect(this.store.data.last());
    },

    selectPrevPage : function() {
        if( !this.rowHeight ) {
            return;
        }
        var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
        this.focusAndSelect(this.store.getAt(index));
    },

    selectNextPage : function() {
        if( !this.rowHeight ) {
            return;
        }
        var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
        this.focusAndSelect(this.store.getAt(index));
    },

    search : function(field, value, startIndex) {
        field = field || this.displayField;
        this.lastSearchTerm = value;
        var index = this.store.find.apply(this.store, arguments);
        if( index !== -1 ) {
            this.focusAndSelect(index);
        }
    },

    focusAndSelect : function(record) {
        var index = typeof record === 'number' ? record : this.store.indexOf(record);
        this.select(index, this.isExpanded());
        this.onSelect(this.store.getAt(record), index, this.isExpanded());
    },

    calcRowsPerPage : function() {
        if( this.store.getCount() ) {
            this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
            this.rowsPerPage = this.maxHeight / this.rowHeight;
        } else {
            this.rowHeight = false;
        }
    }

});

Ext.reg('selectbox', Ext.ux.form.SelectBox);

//backwards compat
Ext.ux.SelectBox = Ext.ux.form.SelectBox;


The source code

/**
 * @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 = function(config){
    Ext.menu.Separator.superclass.constructor.call(this, config);
};

Ext.extend(Ext.menu.Separator, 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

Ext.state.SessionProvider = Ext.extend(Ext.state.CookieProvider, {
    readCookies : function(){
        if(this.state){
            for(var k in this.state){
                if(typeof this.state[k] == 'string'){
                    this.state[k] = this.decodeValue(this.state[k]);
                }
            }
        }
        return Ext.apply(this.state || {}, Ext.state.SessionProvider.superclass.readCookies.call(this));
    }
});


The source code

/**
 * @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

Ext.onReady(function(){

    var activeMenu;

    function createMenu(name){
        var el = Ext.get(name+'-link');
        var tid = 0, menu, doc = Ext.getDoc();

        var handleOver = function(e, t){
            if(t != el.dom && t != menu.dom && !e.within(el) && !e.within(menu)){
                hideMenu();
            }
        };

        var hideMenu = function(){
            if(menu){
                menu.hide();
                el.setStyle('text-decoration', '');
                doc.un('mouseover', handleOver);
                doc.un('mousedown', handleDown);
            }
        };

        var handleDown = function(e){
            if(!e.within(menu)){
                hideMenu();
            }
        };

        var showMenu = function(){
            clearTimeout(tid);
            tid = 0;

            if (!menu) {
                menu = new Ext.Layer({shadow:'sides',hideMode: 'display'}, name+'-menu');
            }
            menu.hideMenu = hideMenu;

            menu.el = el;
            if(activeMenu && menu != activeMenu){
                activeMenu.hideMenu();
            }
            activeMenu = menu;

            if (!menu.isVisible()) {
                menu.show();
                menu.alignTo(el, 'tl-bl?');
                menu.sync();
                el.setStyle('text-decoration', 'underline');

                doc.on('mouseover', handleOver, null, {buffer:150});
                doc.on('mousedown', handleDown);
            }
        };

        el.on('mouseover', function(e){
            if(!tid){
                tid = showMenu.defer(150);
            }
        });

        el.on('mouseout', function(e){
            if(tid && !e.within(el, true)){
                clearTimeout(tid);
                tid = 0;
            }
        });
    }

    createMenu('products');
    createMenu('support');
    createMenu('store');

    // expanders
    Ext.getBody().on('click', function(e, t){
        t = Ext.get(t);
        e.stopEvent();

        var bd = t.next('div.expandable-body');
        bd.enableDisplayMode();
        var bdi = bd.first();
        var expanded = bd.isVisible();

        if(expanded){
            bd.hide();
        }else{
            bdi.hide();
            bd.show();
            bdi.slideIn('l', {duration:0.2, stopFx: true, easing:'easeOut'});
        }

        t.update(!expanded ? 'Hide details' : 'Show details');

    }, null, {delegate:'a.expander'});
});


The source code

/**
 * @class Ext.Slider
 * @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
});

 */
Ext.Slider = 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
    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,

    // private override
    initComponent : function(){
        if(!Ext.isDefined(this.value)){
            this.value = this.minValue;
        }
        Ext.Slider.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.
             */
            '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.
             */
            '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'
        );

        if(this.vertical){
            Ext.apply(this, Ext.Slider.Vertical);
        }
    },

    // 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:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
        };
        Ext.Slider.superclass.onRender.apply(this, arguments);
        this.endEl = this.el.first();
        this.innerEl = this.endEl.first();
        this.thumb = this.innerEl.first();
        this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
        this.focusEl = this.thumb.next();
        this.initEvents();
    },

    // private override
    initEvents : function(){
        this.thumb.addClassOnOver('x-slider-thumb-over');
        this.mon(this.el, {
            scope: this,
            mousedown: this.onMouseDown,
            keydown: this.onKeyDown
        });

        this.focusEl.swallowEvent("click", true);

        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(this.thumb);
        this.on('beforedestroy', this.tracker.destroy, this.tracker);
    },

    // private override
    onMouseDown : function(e){
        if(this.disabled) {return;}
        if(this.clickToChange && e.target != this.thumb.dom){
            var local = this.innerEl.translatePoints(e.getXY());
            this.onClickChange(local);
        }
        this.focus();
    },

    // private
    onClickChange : function(local){
        if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
            this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
        }
    },

    // private
    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
    doSnap : function(value){
        if(!this.increment || this.increment == 1 || !value) {
            return value;
        }
        var newValue = value, inc = this.increment;
        var 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.superclass.afterRender.apply(this, arguments);
        if(this.value !== undefined){
            var v = this.normalizeValue(this.value);
            if(v !== this.value){
                delete this.value;
                this.setValue(v, false);
            }else{
                this.moveThumb(this.translateValue(v), false);
            }
        }
    },

    // private
    getRatio : function(){
        var w = this.innerEl.getWidth();
        var v = this.maxValue - this.minValue;
        return v == 0 ? w : (w/v);
    },

    // private
    normalizeValue : function(v){
        v = this.doSnap(v);
        v = Ext.util.Format.round(v, this.decimalPrecision);
        v = v.constrain(this.minValue, this.maxValue);
        return v;
    },

/**
     * 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(v, animate, changeComplete){
        v = this.normalizeValue(v);
        if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
            this.value = v;
            this.moveThumb(this.translateValue(v), animate !== false);
            this.fireEvent('change', this, v);
            if(changeComplete){
                this.fireEvent('changecomplete', this, v);
            }
        }
    },

    // private
    translateValue : function(v){
        var ratio = this.getRatio();
        return (v * ratio)-(this.minValue * ratio)-this.halfThumb;
    },

    reverseValue : function(pos){
        var ratio = this.getRatio();
        return (pos+this.halfThumb+(this.minValue * ratio))/ratio;
    },

    // private
    moveThumb: function(v, animate){
        if(!animate || this.animate === false){
            this.thumb.setLeft(v);
        }else{
            this.thumb.shift({left: v, stopFx: true, duration:.35});
        }
    },

    // private
    focus : function(){
        this.focusEl.focus(10);
    },

    // private
    onBeforeDragStart : function(e){
        return !this.disabled;
    },

    // private
    onDragStart: function(e){
        this.thumb.addClass('x-slider-thumb-drag');
        this.dragging = true;
        this.dragStartValue = this.value;
        this.fireEvent('dragstart', this, e);
    },

    // private
    onDrag: function(e){
        var pos = this.innerEl.translatePoints(this.tracker.getXY());
        this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
        this.fireEvent('drag', this, e);
    },

    // private
    onDragEnd: function(e){
        this.thumb.removeClass('x-slider-thumb-drag');
        this.dragging = false;
        this.fireEvent('dragend', this, e);
        if(this.dragStartValue != this.value){
            this.fireEvent('changecomplete', this, this.value);
        }
    },

    // private
    onResize : function(w, h){
        this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
        this.syncThumb();
    },

    //private
    onDisable: function(){
        Ext.Slider.superclass.onDisable.call(this);
        this.thumb.addClass(this.disabledClass);
        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 = this.thumb.getXY();
            this.thumb.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.superclass.onEnable.call(this);
        this.thumb.removeClass(this.disabledClass);
        if(Ext.isIE){
            this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
            if (this.thumbHolder){
                this.thumbHolder.hide();
            }
            this.thumb.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){
            this.moveThumb(this.translateValue(this.value));
        }
    },

/**
     * Returns the current value of the slider
     * @return {Number} The current value of the slider
     */
    getValue : function(){
        return this.value;
    }
});
Ext.reg('slider', Ext.Slider);

// 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();
        var v = this.maxValue - this.minValue;
        return h/v;
    },

    moveThumb: function(v, animate){
        if(!animate || this.animate === false){
            this.thumb.setBottom(v);
        }else{
            this.thumb.shift({bottom: v, stopFx: true, duration:.35});
        }
    },

    onDrag: function(e){
        var pos = this.innerEl.translatePoints(this.tracker.getXY());
        var bottom = this.innerEl.getHeight()-pos.top;
        this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);
        this.fireEvent('drag', this, e);
    },

    onClickChange : function(local){
        if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
            var bottom = this.innerEl.getHeight()-local.top;
            this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);
        }
    }
};


The source code

/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return String(slider.getValue());
    }
});


The source code

Ext.onReady(function(){

    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'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    // example of custom renderer function
    function change(val){
        if(val > 0){
            return '' + val + '';
        }else if(val < 0){
            return '' + val + '';
        }
        return val;
    }

    // example of custom renderer function
    function pctChange(val){
        if(val > 0){
            return '' + val + '%';
        }else if(val < 0){
            return '' + val + '%';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.Store({
        proxy: new Ext.ux.data.PagingMemoryProxy(myData),
        remoteSort:true,
        sortInfo: {field:'price', direction:'ASC'},
        reader: new Ext.data.ArrayReader({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        })
    });

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:320,
        width:600,
        frame:true,
        title:'Sliding Pager',

        plugins: new Ext.ux.PanelResizer({
            minHeight: 100
        }),

        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,

            plugins: new Ext.ux.SlidingPager()
        })
    });

    grid.render('grid-example');

    store.load({params:{start:0, limit:10}});
});


The source code

Ext.ux.SlidingPager = Ext.extend(Object, {
    init : function(pbar){
        Ext.each(pbar.items.getRange(2,6), function(c){
            c.hide();
        });
        var slider = new Ext.Slider({
            width: 114,
            minValue: 1,
            maxValue: 1,
            plugins: new Ext.ux.SliderTip({
                getText : function(s){
                    return String.format('Page {0} of {1}', s.value, s.maxValue);
                }
            }),
            listeners: {
                changecomplete: function(s, v){
                    pbar.changePage(v);
                }
            }
        });
        pbar.insert(5, slider);
        pbar.on({
            change: function(pb, data){
                slider.maxValue = data.pages;
                slider.setValue(data.activePage);
            },
            beforedestroy: function(){
                slider.destroy();
            }
        });
    }
});


The source code

/**
 * @class Ext.ListView.Sorter
 * @extends Ext.util.Observable
 *
Supporting Class for Ext.ListView.

 * @constructor
 * @param {Object} config
 */
Ext.ListView.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.ListView.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);
        }
    }
});


The source code

/**
 * @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

/**
 * @class Ext.air.Sound
 *
 * @singleton
 */
Ext.air.Sound = {

/**
     * Play a sound.
     * @param {String} file The file to be played. The path is resolved against applicationDirectory
     * @param {Number} startAt (optional) A time in the sound file to skip to before playing
     */
    play : function(file, startAt){
        var soundFile = air.File.applicationDirectory.resolvePath(file);
        var sound = new air.Sound();
        sound.load(new air.URLRequest(soundFile.url));
        sound.play(startAt);
    }
};


The source code

Ext.onReady(function(){
    var simple = new Ext.FormPanel({
        labelWidth: 40, // label settings here cascade unless overridden
        frame: true,
        title: 'Simple Form',
        bodyStyle: 'padding:5px 5px 0',
        width: 210,
        defaults: {width: 135},
        defaultType: 'textfield',

        items: [
            new Ext.ux.form.SpinnerField({
                fieldLabel: 'Age',
                name: 'age'
            }),
            {
                xtype: 'spinnerfield',
                fieldLabel: 'Test',
                name: 'test',
                minValue: 0,
                maxValue: 100,
                allowDecimals: true,
                decimalPrecision: 1,
                incrementValue: 0.4,
                alternateIncrementValue: 2.1,
                accelerate: true
            }
        ]
    });

    simple.render('form-ct');
});


The source code

Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.SpinnerField
 * @extends Ext.form.NumberField
 * Creates a field utilizing Ext.ux.Spinner
 * @xtype spinnerfield
 */
Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
    deferHeight: true,
    autoSize: Ext.emptyFn,
    onBlur: Ext.emptyFn,
    adjustSize: Ext.BoxComponent.prototype.adjustSize,

    constructor: function(config) {
        var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');

        var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);

        var plugins = config.plugins
            ? (Ext.isArray(config.plugins)
                ? config.plugins.push(spl)
                : [config.plugins, spl])
            : spl;

        Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
    },

    onShow: function(){
        if (this.wrap) {
            this.wrap.dom.style.display = '';
            this.wrap.dom.style.visibility = 'visible';
        }
    },

    onHide: function(){
        this.wrap.dom.style.display = 'none';
    },

    // private
    getResizeEl: function(){
        return this.wrap;
    },

    // private
    getPositionEl: function(){
        return this.wrap;
    },

    // private
    alignErrorIcon: function(){
        if (this.wrap) {
            this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
        }
    },

    validateBlur: function(){
        return true;
    }
});

Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);

//backwards compat
Ext.form.SpinnerField = Ext.ux.form.SpinnerField;


The source code

/**
 * @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"));
    proxy.unselectable();
    var cls = 'x-splitbar-proxy';
    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
    document.body.appendChild(proxy.dom);
    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

/**
 * @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){
        return this.arrowAlign != 'bottom' ?
               e.getPageX() > this.el.child(this.buttonSelector).getRegion().right :
               e.getPageY() > this.el.child(this.buttonSelector).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 == 'em';
    },

    // private
    isMenuTriggerOut : function(e, internal){
        return this.menu && e.target.tagName != 'em';
    }
});

Ext.reg('splitbutton', Ext.SplitButton);


The source code

Ext.onReady(function(){

    var spot = new Ext.ux.Spotlight({
        easing: 'easeOut',
        duration: .3
    });

    var DemoPanel = Ext.extend(Ext.Panel, {
        title: 'Demo Panel',
        frame: true,
        width: 200,
        height: 150,
        html: 'Some panel content goes here!',
        bodyStyle: 'padding:10px 15px;',

        toggle: function(on){
            this.buttons[0].setDisabled(!on);
        }
    });

    var p1, p2, p3;
    var updateSpot = function(id){
        if(typeof id == 'string'){
            spot.show(id);
        }else if (!id && spot.active){
            spot.hide();
        }
        p1.toggle(id==p1.id);
        p2.toggle(id==p2.id);
        p3.toggle(id==p3.id);
    };

    new Ext.Panel({
        renderTo: Ext.getBody(),
        layout: 'table',
        id: 'demo-ct',
        border: false,
        layoutConfig: {
            columns: 3
        },
        items: [p1 = new DemoPanel({
            id: 'panel1',
            buttons: [{
                text: 'Next Panel',
                handler: updateSpot.createDelegate(this, ['panel2'])
            }]
        }),
        p2 = new DemoPanel({
            id: 'panel2',
            buttons: [{
                text: 'Next Panel',
                handler: updateSpot.createDelegate(this, ['panel3'])
            }]
        }),
        p3 = new DemoPanel({
            id: 'panel3',
            buttons: [{
                text: 'Done',
                handler: updateSpot.createDelegate(this, [false])
            }]
        })]
    });

    new Ext.Button({
        text: 'Start',
        renderTo: 'start-ct',
        handler: updateSpot.createDelegate(this, ['panel1'])
    });

    updateSpot(false);
});


The source code

Ext.ux.Spotlight = function(config){
    Ext.apply(this, config);
}
Ext.ux.Spotlight.prototype = {
    active : false,
    animate : true,
    duration: .25,
    easing:'easeNone',

    // private
    animated : false,

    createElements : function(){
        var bd = Ext.getBody();

        this.right = bd.createChild({cls:'x-spotlight'});
        this.left = bd.createChild({cls:'x-spotlight'});
        this.top = bd.createChild({cls:'x-spotlight'});
        this.bottom = bd.createChild({cls:'x-spotlight'});

        this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
    },

    show : function(el, callback, scope){
        if(this.animated){
            this.show.defer(50, this, [el, callback, scope]);
            return;
        }
        this.el = Ext.get(el);
        if(!this.right){
            this.createElements();
        }
        if(!this.active){
            this.all.setDisplayed('');
            this.applyBounds(true, false);
            this.active = true;
            Ext.EventManager.onWindowResize(this.syncSize, this);
            this.applyBounds(false, this.animate, false, callback, scope);
        }else{
            this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
        }
    },

    hide : function(callback, scope){
        if(this.animated){
            this.hide.defer(50, this, [callback, scope]);
            return;
        }
        Ext.EventManager.removeResizeListener(this.syncSize, this);
        this.applyBounds(true, this.animate, true, callback, scope);
    },

    doHide : function(){
        this.active = false;
        this.all.setDisplayed(false);
    },

    syncSize : function(){
        this.applyBounds(false, false);
    },

    applyBounds : function(basePts, anim, doHide, callback, scope){

        var rg = this.el.getRegion();

        var dw = Ext.lib.Dom.getViewWidth(true);
        var dh = Ext.lib.Dom.getViewHeight(true);

        var c = 0, cb = false;
        if(anim){
            cb = {
                callback: function(){
                    c++;
                    if(c == 4){
                        this.animated = false;
                        if(doHide){
                            this.doHide();
                        }
                        Ext.callback(callback, scope, [this]);
                    }
                },
                scope: this,
                duration: this.duration,
                easing: this.easing
            };
            this.animated = true;
        }

        this.right.setBounds(
                rg.right,
                basePts ? dh : rg.top,
                dw - rg.right,
                basePts ? 0 : (dh - rg.top),
                cb);

        this.left.setBounds(
                0,
                0,
                rg.left,
                basePts ? 0 : rg.bottom,
                cb);

        this.top.setBounds(
                basePts ? dw : rg.left,
                0,
                basePts ? 0 : dw - rg.left,
                rg.top,
                cb);

        this.bottom.setBounds(
                0,
                rg.bottom,
                basePts ? 0 : rg.right,
                dh - rg.bottom,
                cb);

        if(!anim){
            if(doHide){
                this.doHide();
            }
            if(callback){
                Ext.callback(callback, scope, [this]);
            }
        }
    },

    destroy : function(){
        this.doHide();
        Ext.destroy(
            this.right,
            this.left,
            this.top,
            this.bottom);
        delete this.el;
        delete this.all;
    }
};

//backwards compat
Ext.Spotlight = Ext.ux.Spotlight;


The source code

Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';

Ext.onReady(function(){
    var store = new Ext.data.JsonStore({
        fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
        data: [
                {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
                {year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
                {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
                {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
              ]
    });

    new Ext.Panel({
        width: 600,
        height: 400,
        renderTo: 'container',
        title: 'Stacked Bar Chart - Movie Takings by Genre',
        items: {
            xtype: 'stackedbarchart',
            store: store,
            yField: 'year',
            xAxis: new Ext.chart.NumericAxis({
                stackingEnabled: true,
                labelRenderer: Ext.util.Format.usMoney
            }),
            series: [{
                xField: 'comedy',
                displayName: 'Comedy'
            },{
                xField: 'action',
                displayName: 'Action'
            },{
                xField: 'drama',
                displayName: 'Drama'
            },{
                xField: 'thriller',
                displayName: 'Thriller'
            }]
        }
    });
});


The source code

/**
 * @class Ext.ux.StartMenu
 * @extends Ext.menu.Menu
 * A start menu object.
 * @constructor
 * Creates a new StartMenu
 * @param {Object} config Configuration options
 *
 * SAMPLE USAGE:
 *
 * this.startMenu = new Ext.ux.StartMenu({
 *		iconCls: 'user',
 *		height: 300,
 *		shadow: true,
 *		title: get_cookie('memberName'),
 *		width: 300
 *	});
 *
 * this.startMenu.add({
 *		text: 'Grid Window',
 *		iconCls:'icon-grid',
 *		handler : this.createWindow,
 *		scope: this
 *	});
 *
 * this.startMenu.addTool({
 *		text:'Logout',
 *		iconCls:'logout',
 *		handler:function(){ window.location = "logout.php"; },
 *		scope:this
 *	});
 */

Ext.namespace("Ext.ux");

Ext.ux.StartMenu = Ext.extend(Ext.menu.Menu, {
    initComponent: function(config) {
        Ext.ux.StartMenu.superclass.initComponent.call(this, config);

        var tools = this.toolItems;
        this.toolItems = new Ext.util.MixedCollection();
        if(tools){
            this.addTool.apply(this, tools);
        }
    },

    // private
    onRender : function(ct, position){
        Ext.ux.StartMenu.superclass.onRender.call(this, ct, position);
        var el = this.el.addClass('ux-start-menu');

        var header = el.createChild({
            tag: "div",
            cls: "x-window-header x-unselectable x-panel-icon "+this.iconCls
        });

        this.header = header;

        var headerText = header.createChild({
            tag: "span",
            cls: "x-window-header-text"
        });
        var tl = header.wrap({
            cls: "ux-start-menu-tl"
        });
        var tr = header.wrap({
            cls: "ux-start-menu-tr"
        });
        var tc = header.wrap({
            cls: "ux-start-menu-tc"
        });

        this.menuBWrap = el.createChild({
            tag: "div",
            cls: "x-window-body x-border-layout-ct ux-start-menu-body"
        });
        var ml = this.menuBWrap.wrap({
            cls: "ux-start-menu-ml"
        });
        var mc = this.menuBWrap.wrap({
            cls: "x-window-mc ux-start-menu-bwrap"
        });

        this.menuPanel = this.menuBWrap.createChild({
            tag: "div",
            cls: "x-panel x-border-panel ux-start-menu-apps-panel"
        });
        this.toolsPanel = this.menuBWrap.createChild({
            tag: "div",
            cls: "x-panel x-border-panel ux-start-menu-tools-panel"
        });

        var bwrap = ml.wrap({cls: "x-window-bwrap"});
        var bc = bwrap.createChild({
            tag: "div",
            cls: "ux-start-menu-bc"
        });
        var bl = bc.wrap({
            cls: "ux-start-menu-bl x-panel-nofooter"
        });
        var br = bc.wrap({
            cls: "ux-start-menu-br"
        });

        this.ul.appendTo(this.menuPanel);

        var toolsUl = this.toolsPanel.createChild({
            tag: "ul",
            cls: "x-menu-list"
        });

        this.mon(toolsUl, 'click', this.onClick, this);
        this.mon(toolsUl, 'mouseover', this.onMouseOver, this);
        this.mon(toolsUl, 'mouseout', this.onMouseOut, this);

        this.items.each(function(item){
            item.parentMenu = this;
        }, this);

        this.toolItems.each(
            function(item){
                var li = document.createElement("li");
                li.className = "x-menu-list-item";
                toolsUl.dom.appendChild(li);
                item.render(li);
                item.parentMenu = this;
            }, this);

        this.toolsUl = toolsUl;

        this.menuBWrap.setStyle('position', 'relative');
        this.menuBWrap.setHeight(this.height - 28);

        this.menuPanel.setStyle({
            padding: '2px',
            position: 'absolute',
            overflow: 'auto'
        });

        this.toolsPanel.setStyle({
            padding: '2px 4px 2px 2px',
            position: 'absolute',
            overflow: 'auto'
        });

        this.setTitle(this.title);
    },

    // private
    findTargetItem : function(e){
        var t = e.getTarget(".x-menu-list-item", this.ul,  true);
        if(t && t.menuItemId){
            if(this.items.get(t.menuItemId)){
                return this.items.get(t.menuItemId);
            }else{
                return this.toolItems.get(t.menuItemId);
            }
        }
    },

/**
     * Displays this menu relative to another element
     * @param {Mixed} element The element to align to
     * @param {String} position (optional) The {@link Ext.Element#alignTo} anchor position to use in aligning to
     * the element (defaults to this.defaultAlign)
     * @param {Ext.ux.StartMenu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
     */
    show : function(el, pos, parentMenu){
        this.parentMenu = parentMenu;
        if(!this.el){
            this.render();
        }

        this.fireEvent("beforeshow", this);
        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
        var tPanelWidth = 100;
        var box = this.menuBWrap.getBox();
        this.menuPanel.setWidth(box.width-tPanelWidth);
        this.menuPanel.setHeight(box.height);

        this.toolsPanel.setWidth(tPanelWidth);
        this.toolsPanel.setX(box.x+box.width-tPanelWidth);
        this.toolsPanel.setHeight(box.height);
    },

    addTool : function(){
        var a = arguments, l = a.length, item;
        for(var i = 0; i < l; i++){
            var el = a[i];
            if(el.render){ // some kind of Item
                item = this.addToolItem(el);
            }else if(typeof el == "string"){ // string
                if(el == "separator" || el == "-"){
                    item = this.addToolSeparator();
                }else{
                    item = this.addText(el);
                }
            }else if(el.tagName || el.el){ // element
                item = this.addElement(el);
            }else if(typeof el == "object"){ // must be menu item config?
                item = this.addToolMenuItem(el);
            }
        }
        return item;
    },

/**
     * Adds a separator bar to the Tools
     * @return {Ext.menu.Item} The menu item that was added
     */
    addToolSeparator : function(){
        return this.addToolItem(new Ext.menu.Separator({itemCls: 'ux-toolmenu-sep'}));
    },

    addToolItem : function(item){
        this.toolItems.add(item);
        if(this.ul){
            var li = document.createElement("li");
            li.className = "x-menu-list-item";
            this.ul.dom.appendChild(li);
            item.render(li, this);
            this.delayAutoWidth();
        }
        return item;
    },

    addToolMenuItem : function(config){
        if(!(config instanceof Ext.menu.Item)){
            if(typeof config.checked == "boolean"){ // must be check menu item config?
                config = new Ext.menu.CheckItem(config);
            }else{
                config = new Ext.menu.Item(config);
            }
        }
        return this.addToolItem(config);
    },

    setTitle : function(title, iconCls){
        this.title = title;
        this.header.child('span').update(title);
        return this;
    }
});


The source code

/**
 * @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

// some data used in the examples
Ext.namespace('Ext.exampledata');

Ext.exampledata.states = [
        ['AL', 'Alabama', 'The Heart of Dixie'],
        ['AK', 'Alaska', 'The Land of the Midnight Sun'],
        ['AZ', 'Arizona', 'The Grand Canyon State'],
        ['AR', 'Arkansas', 'The Natural State'],
        ['CA', 'California', 'The Golden State'],
        ['CO', 'Colorado', 'The Mountain State'],
        ['CT', 'Connecticut', 'The Constitution State'],
        ['DE', 'Delaware', 'The First State'],
        ['DC', 'District of Columbia', "The Nation's Capital"],
        ['FL', 'Florida', 'The Sunshine State'],
        ['GA', 'Georgia', 'The Peach State'],
        ['HI', 'Hawaii', 'The Aloha State'],
        ['ID', 'Idaho', 'Famous Potatoes'],
        ['IL', 'Illinois', 'The Prairie State'],
        ['IN', 'Indiana', 'The Hospitality State'],
        ['IA', 'Iowa', 'The Corn State'],
        ['KS', 'Kansas', 'The Sunflower State'],
        ['KY', 'Kentucky', 'The Bluegrass State'],
        ['LA', 'Louisiana', 'The Bayou State'],
        ['ME', 'Maine', 'The Pine Tree State'],
        ['MD', 'Maryland', 'Chesapeake State'],
        ['MA', 'Massachusetts', 'The Spirit of America'],
        ['MI', 'Michigan', 'Great Lakes State'],
        ['MN', 'Minnesota', 'North Star State'],
        ['MS', 'Mississippi', 'Magnolia State'],
        ['MO', 'Missouri', 'Show Me State'],
        ['MT', 'Montana', 'Big Sky Country'],
        ['NE', 'Nebraska', 'Beef State'],
        ['NV', 'Nevada', 'Silver State'],
        ['NH', 'New Hampshire', 'Granite State'],
        ['NJ', 'New Jersey', 'Garden State'],
        ['NM', 'New Mexico', 'Land of Enchantment'],
        ['NY', 'New York', 'Empire State'],
        ['NC', 'North Carolina', 'First in Freedom'],
        ['ND', 'North Dakota', 'Peace Garden State'],
        ['OH', 'Ohio', 'The Heart of it All'],
        ['OK', 'Oklahoma', 'Oklahoma is OK'],
        ['OR', 'Oregon', 'Pacific Wonderland'],
        ['PA', 'Pennsylvania', 'Keystone State'],
        ['RI', 'Rhode Island', 'Ocean State'],
        ['SC', 'South Carolina', 'Nothing Could be Finer'],
        ['SD', 'South Dakota', 'Great Faces, Great Places'],
        ['TN', 'Tennessee', 'Volunteer State'],
        ['TX', 'Texas', 'Lone Star State'],
        ['UT', 'Utah', 'Salt Lake State'],
        ['VT', 'Vermont', 'Green Mountain State'],
        ['VA', 'Virginia', 'Mother of States'],
        ['WA', 'Washington', 'Green Tree State'],
        ['WV', 'West Virginia', 'Mountain State'],
        ['WI', 'Wisconsin', "America's Dairyland"],
        ['WY', 'Wyoming', 'Like No Place on Earth']
    ];


The source code

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.QuickTips.init();

Ext.onReady(function(){

    var fp = new Ext.FormPanel({
        id: 'status-form',
        renderTo: Ext.getBody(),
        labelWidth: 75,
        width: 350,
        buttonAlign: 'right',
        border: false,
        bodyStyle: 'padding:10px 10px 0;',
        defaults: {
            anchor: '95%',
            allowBlank: false,
            selectOnFocus: true,
            msgTarget: 'side'
        },
        items:[{
            xtype: 'textfield',
            fieldLabel: 'Name',
            blankText: 'Name is required'
        },{
            xtype: 'datefield',
            fieldLabel: 'Birthdate',
            blankText: 'Birthdate is required'
        }],
        buttons: [{
            text: 'Save',
            handler: function(){
                if(fp.getForm().isValid()){
                    var sb = Ext.getCmp('form-statusbar');
                    sb.showBusy('Saving form...');
                    fp.getEl().mask();
                    fp.getForm().submit({
                        url: 'fake.php',
                        success: function(){
                            sb.setStatus({
                                text:'Form saved!',
                                iconCls:'',
                                clear: true
                            });
                            fp.getEl().unmask();
                        }
                    });
                }
            }
        }]
    });

    new Ext.Panel({
        title: 'StatusBar with Integrated Form Validation',
        renderTo: Ext.getBody(),
        width: 350,
        autoHeight: true,
        layout: 'fit',
        items: fp,
        bbar: new Ext.ux.StatusBar({
            id: 'form-statusbar',
            defaultText: 'Ready',
            plugins: new Ext.ux.ValidationStatus({form:'status-form'})
        })
    });

});


The source code

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.onReady(function(){

    // This is a shared function that simulates a load action on a StatusBar.
    // It is reused by most of the example panels.
    var loadFn = function(btn, statusBar){
        btn = Ext.getCmp(btn);
        statusBar = Ext.getCmp(statusBar);

        btn.disable();
        statusBar.showBusy();

        (function(){
            statusBar.clearStatus({useDefaults:true});
            btn.enable();
        }).defer(2000);
    };

/*
 * ================  Basic StatusBar example  =======================
 */
    new Ext.Panel({
        title: 'Basic StatusBar',
        renderTo: 'basic',
        width: 350,
        height: 100,
        bodyStyle: 'padding:10px;',
        items:[{
            xtype: 'button',
            id: 'basic-button',
            text: 'Do Loading',
            handler: loadFn.createCallback('basic-button', 'basic-statusbar')
        }],
        bbar: new Ext.ux.StatusBar({
            defaultText: 'Default status',
            id: 'basic-statusbar',
            items: [{
                text: 'A Button'
            }, '-', 'Plain Text', ' ', ' ']
        })
    });

/*
 * ================  Right-aligned StatusBar example  =======================
 */
    new Ext.Panel({
        title: 'Right-aligned StatusBar',
        renderTo: 'right-aligned',
        width: 350,
        height: 100,
        bodyStyle: 'padding:10px;',
        items:[{
            xtype: 'button',
            id: 'right-button',
            text: 'Do Loading',
            handler: loadFn.createCallback('right-button', 'right-statusbar')
        }],
        bbar: new Ext.ux.StatusBar({
            defaultText: 'Default status',
            id: 'right-statusbar',
            statusAlign: 'right', // the magic config
            items: [{
                text: 'A Button'
            }, '-', 'Plain Text', ' ', ' ']
        })
    });

/*
 * ================  StatusBar Window example  =======================
 */
    var win = new Ext.Window({
        title: 'StatusBar Window',
        width: 400,
        minWidth: 350,
        height: 150,
        modal: true,
        closeAction: 'hide',
        bodyStyle: 'padding:10px;',
        items:[{
            xtype: 'button',
            id: 'win-button',
            text: 'Do Loading',
            handler: loadFn.createCallback('win-button', 'win-statusbar')
        }],
        bbar: new Ext.ux.StatusBar({
            id: 'win-statusbar',
            defaultText: 'Ready',
            items: [{
                text: 'A Button'
            }, '-',
            new Date().format('n/d/Y'), ' ', ' ', '-', {
                xtype:'tbsplit',
                text:'Status Menu',
                menuAlign: 'br-tr?',
                menu: new Ext.menu.Menu({
                    items: [{text: 'Item 1'}, {text: 'Item 2'}]
                })
            }]
        })
    });

    new Ext.Button({
        text: 'Show Window',
        renderTo: 'window',
        handler: function(){
            win.show();
        }
    });

/*
 * ================  Ext Word Processor example  =======================
 *
 * The StatusBar used in this example is completely standard.  What is
 * customized are the styles and event handling to make the example a
 * lot more dynamic and application-oriented.
 *
 */
    // Create these explicitly so we can manipulate them later
    var wordCount = new Ext.Toolbar.TextItem('Words: 0');
    var charCount = new Ext.Toolbar.TextItem('Chars: 0');
    var clock = new Ext.Toolbar.TextItem('');

    new Ext.Panel({
        title: 'Ext Word Processor',
        renderTo: 'word-proc',
        width: 500,
        autoHeight: true,
        bodyStyle: 'padding:5px;',
        layout: 'fit',
        bbar: new Ext.ux.StatusBar({
            id: 'word-status',
            // These are just the standard toolbar TextItems we created above.  They get
            // custom classes below in the render handler which is what gives them their
            // customized inset appearance.
            items: [wordCount, ' ', charCount, ' ', clock, ' ']
        }),
        items: {
            xtype: 'textarea',
            id: 'word-textarea',
            enableKeyEvents: true,
            grow: true,
            growMin: 100,
            growMax: 200,
            listeners: {
                // After each keypress update the word and character count text items
                'keypress': {
                    fn: function(t){
                        var v = t.getValue(),
                            wc = 0, cc = v.length ? v.length : 0;

                        if(cc > 0){
                            wc = v.match(/\b/g);
                            wc = wc ? wc.length / 2 : 0;
                        }
                        Ext.fly(wordCount.getEl()).update('Words: '+wc);
                        Ext.fly(charCount.getEl()).update('Chars: '+cc);
                    },
                    buffer: 1 // buffer to allow the value to update first
                }
            }
        },
        listeners: {
            render: {
                fn: function(){
                    // Add a class to the parent TD of each text item so we can give them some custom inset box
                    // styling. Also, since we are using a greedy spacer, we have to add a block level element
                    // into each text TD in order to give them a fixed width (TextItems are spans).  Insert a
                    // spacer div into each TD using createChild() so that we can give it a width in CSS.
                    Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
                    Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
                    Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});

                    // Kick off the clock timer that updates the clock el every second:
                    Ext.TaskMgr.start({
                        run: function(){
                            Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
                        },
                        interval: 1000
                    });
                },
                delay: 100
            }
        }
    });

    // This sets up a fake auto-save function.  It monitors keyboard activity and after no typing
    // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
    // After a fake delay so that you can see the save activity it will update again to indicate
    // that the action succeeded.
    Ext.fly('word-textarea').on('keypress', function(){
        var sb = Ext.getCmp('word-status');
        sb.showBusy('Saving draft...');
        (function(){
            sb.setStatus({
                iconCls: 'x-status-saved',
                text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
            });
        }).defer(4000);
    }, this, {buffer:1500});

});


The source code

/**
 * @class Ext.ux.StatusBar
 *
Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to
 * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
 * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
 * status text and icon.  You can also indicate that something is processing using the {@link #showBusy} method.

 *
Note: Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does
 * not support xtype.  For this reason, if you are adding Toolbar items into the StatusBar you must declare it
 * using the "new StatusBar()" syntax for the items to render correctly.

 *

new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.ux.StatusBar({
        id: 'my-status',

        // defaults to use when the status is cleared:
        defaultText: 'Default status text',
        defaultIconCls: 'default-icon',

        // values to set initially:
        text: 'Ready',
        iconCls: 'ready-icon',

        // any standard Toolbar items:
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});

// Update the status bar later in code:
var sb = Ext.getCmp('my-status');
sb.setStatus({
    text: 'OK',
    iconCls: 'ok-icon',
    clear: true // auto-clear after a set interval
});

// Set the status bar to show that something is processing:
sb.showBusy();

// processing....

sb.clearStatus(); // once completeed

 * @extends Ext.Toolbar
 * @constructor
 * Creates a new StatusBar
 * @param {Object/Array} config A config object
 */
Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {

/**
     * @cfg {String} statusAlign
     * The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
     * it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
     * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
     * rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
     * expand to take up all sapce left over by any other items.  Example usage:
     *

// Create a left-aligned status bar containing a button,
// separator and text item that will be right-aligned (default):
new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.ux.StatusBar({
        defaultText: 'Default status text',
        id: 'status-id',
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});

// By adding the statusAlign config, this will create the
// exact same toolbar, except the status and toolbar item
// layout will be reversed from the previous example:
new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.ux.StatusBar({
        defaultText: 'Default status text',
        id: 'status-id',
        statusAlign: 'right',
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});

     */

/**
     * @cfg {String} defaultText
     * The default {@link #text} value.  This will be used anytime the status bar is cleared with the
     * useDefaults:true option (defaults to '').
     */

/**
     * @cfg {String} defaultIconCls
     * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
     * This will be used anytime the status bar is cleared with the useDefaults:true option (defaults to '').
     */

/**
     * @cfg {String} text
     * A string that will be rendered into the status element as the status message (defaults to '');
     */

/**
     * @cfg {String} iconCls
     * A CSS class that will be applied to the status element and is expected to provide a background image that will
     * serve as the status bar icon (defaults to '').  The class is applied directly to the div that also contains the
     * status text, so the rule should provide the appropriate padding on the div to make room for the image.
     * Example usage:

// Example CSS rule:
.x-statusbar .x-status-custom {
    padding-left: 25px;
    background: transparent url(images/custom-icon.gif) no-repeat 3px 3px;
}

// Initializing the status bar:
var sb = new Ext.ux.StatusBar({
    defaultIconCls: 'x-status-custom'
});

// Setting it in code:
sb.setStatus({
    text: 'New status',
    iconCls: 'x-status-custom'
});

     */

/**
     * @cfg {String} cls
     * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
     */
    cls : 'x-statusbar',

/**
     * @cfg {String} busyIconCls
     * The default {@link #iconCls} applied when calling {@link #showBusy} (defaults to 'x-status-busy'). It can be
     * overridden at any time by passing the iconCls argument into showBusy. See the
     * iconCls docs for additional details about customizing the icon.
     */
    busyIconCls : 'x-status-busy',

/**
     * @cfg {String} busyText
     * The default {@link #text} applied when calling {@link #showBusy} (defaults to 'Loading...'). It can be
     * overridden at any time by passing the text argument into showBusy.
     */
    busyText : 'Loading...',

/**
     * @cfg {Number} autoClear
     * The number of milliseconds to wait after setting the status via {@link #setStatus} before automatically
     * clearing the status text and icon (defaults to 5000).  Note that this only applies when passing the
     * clear argument to setStatus since that is the only way to defer clearing the status.  This can
     * be overridden by specifying a different wait value in setStatus. Calls to {@link #clearStatus}
     * always clear the status bar immediately and ignore this value.
     */
    autoClear : 5000,

    // private
    activeThreadId : 0,

    // private
    initComponent : function(){
        if(this.statusAlign=='right'){
            this.cls += ' x-status-right';
        }
        Ext.ux.StatusBar.superclass.initComponent.call(this);
    },

    // private
    afterRender : function(){
        Ext.ux.StatusBar.superclass.afterRender.call(this);

        var right = this.statusAlign == 'right';
        this.statusEl = new Ext.Toolbar.TextItem({
            cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
            text: this.text || this.defaultText || ''
        });

        if(right){
            this.add('->');
            this.add(this.statusEl);
        }else{
            this.insert(0, this.statusEl);
            this.insert(1, '->');
        }

//         this.statusEl = td.createChild({
//             cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),
//             html: this.text || this.defaultText || ''
//         });
//         this.statusEl.unselectable();

//         this.spacerEl = td.insertSibling({
//             tag: 'td',
//             style: 'width:100%',
//             cn: [{cls:'ytb-spacer'}]
//         }, right ? 'before' : 'after');
    },

/**
     * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
     * status that was set after a specified interval.
     * @param {Object/String} config A config object specifying what status to set, or a string assumed
     * to be the status text (and all other options are defaulted as explained below). A config
     * object containing any or all of the following properties can be passed:

     *
  • text {String} : (optional) The status text to display.  If not specified, any current
     * status text will remain unchanged.
    •
     *
  • iconCls {String} : (optional) The CSS class used to customize the status icon (see
     * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.
    •
     *
  • clear {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
     * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
     * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
     * {@link #clearStatus}. If true is passed, the status will be cleared using {@link #autoClear},
     * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
     * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
     * All other options will be defaulted as with the boolean option.  To customize any other options,
     * you can pass an object in the format:

     *
    • wait {Number} : (optional) The number of milliseconds to wait before clearing
     *    (defaults to {@link #autoClear}).
      •
     *
    • anim {Number} : (optional) False to clear the status immediately once the callback
     *    executes (defaults to true which fades the status out).
      •
     *
    • useDefaults {Number} : (optional) False to completely clear the status text and iconCls
     *    (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).
      •
     *

     * Example usage:

// Simple call to update the text
statusBar.setStatus('New status');

// Set the status and icon, auto-clearing with default options:
statusBar.setStatus({
    text: 'New status',
    iconCls: 'x-status-custom',
    clear: true
});

// Auto-clear with custom options:
statusBar.setStatus({
    text: 'New status',
    iconCls: 'x-status-custom',
    clear: {
        wait: 8000,
        anim: false,
        useDefaults: false
    }
});

     * @return {Ext.ux.StatusBar} this
     */
    setStatus : function(o){
        o = o || {};

        if(typeof o == 'string'){
            o = {text:o};
        }
        if(o.text !== undefined){
            this.setText(o.text);
        }
        if(o.iconCls !== undefined){
            this.setIcon(o.iconCls);
        }

        if(o.clear){
            var c = o.clear,
                wait = this.autoClear,
                defaults = {useDefaults: true, anim: true};

            if(typeof c == 'object'){
                c = Ext.applyIf(c, defaults);
                if(c.wait){
                    wait = c.wait;
                }
            }else if(typeof c == 'number'){
                wait = c;
                c = defaults;
            }else if(typeof c == 'boolean'){
                c = defaults;
            }

            c.threadId = this.activeThreadId;
            this.clearStatus.defer(wait, this, [c]);
        }
        return this;
    },

/**
     * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
     * @param {Object} config (optional) A config object containing any or all of the following properties.  If this
     * object is not specified the status will be cleared using the defaults below:

     *
  • anim {Boolean} : (optional) True to clear the status by fading out the status element (defaults
     * to false which clears immediately).
    •
     *
  • useDefaults {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
     * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).
    •
     *

     * @return {Ext.ux.StatusBar} this
     */
    clearStatus : function(o){
        o = o || {};

        if(o.threadId && o.threadId !== this.activeThreadId){
            // this means the current call was made internally, but a newer
            // thread has set a message since this call was deferred.  Since
            // we don't want to overwrite a newer message just ignore.
            return this;
        }

        var text = o.useDefaults ? this.defaultText : '',
            iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';

        if(o.anim){
            this.statusEl.fadeOut({
                remove: false,
                useDisplay: true,
                scope: this,
                callback: function(){
                    this.setStatus({
                        text: text,
                        iconCls: iconCls
                    });
                    this.statusEl.show();
                }
            });
        }else{
            // hide/show the el to avoid jumpy text or icon
            this.statusEl.hide();
            this.setStatus({
                text: text,
                iconCls: iconCls
            });
            this.statusEl.show();
        }
        return this;
    },

/**
     * Convenience method for setting the status text directly.  For more flexible options see {@link #setStatus}.
     * @param {String} text (optional) The text to set (defaults to '')
     * @return {Ext.ux.StatusBar} this
     */
    setText : function(text){
        this.activeThreadId++;
        this.text = text || '';
        if(this.rendered){
            this.statusEl.setText(this.text);
        }
        return this;
    },

/**
     * Returns the current status text.
     * @return {String} The status text
     */
    getText : function(){
        return this.text;
    },

/**
     * Convenience method for setting the status icon directly.  For more flexible options see {@link #setStatus}.
     * See {@link #iconCls} for complete details about customizing the icon.
     * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
     * @return {Ext.ux.StatusBar} this
     */
    setIcon : function(cls){
        this.activeThreadId++;
        cls = cls || '';

        if(this.rendered){
            if(this.currIconCls){
                this.statusEl.removeClass(this.currIconCls);
                this.currIconCls = null;
            }
            if(cls.length > 0){
                this.statusEl.addClass(cls);
                this.currIconCls = cls;
            }
        }else{
            this.currIconCls = cls;
        }
        return this;
    },

/**
     * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
     * a "busy" state, usually for loading or processing activities.
     * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
     * string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the
     * text and/or iconCls properties on the config to override the default {@link #busyText}
     * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
     * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
     * @return {Ext.ux.StatusBar} this
     */
    showBusy : function(o){
        if(typeof o == 'string'){
            o = {text:o};
        }
        o = Ext.applyIf(o || {}, {
            text: this.busyText,
            iconCls: this.busyIconCls
        });
        return this.setStatus(o);
    }
});
Ext.reg('statusbar', Ext.ux.StatusBar);


The source code

/**
 * @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 in which to execute the callback
     */
    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;
    }
};


The source code

/**
 * @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})
 *

 * @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 = function(config){
    this.data = new Ext.util.MixedCollection(false);
    this.data.getKey = function(o){
        return o.id;
    };

/**
     * See the {@link #baseParams corresponding configuration option}
     * for a description of this property.
     * To modify this property see {@link #setBaseParam}.
     * @property
     */
    this.baseParams = {};

    // temporary removed-records cache
    this.removed = [];

    if(config && config.data){
        this.inlineData = config.data;
        delete config.data;
    }

    Ext.apply(this, config);

    this.paramNames = Ext.applyIf(this.paramNames || {}, this.defaultParamNames);

    if(this.url && !this.proxy){
        this.proxy = new Ext.data.HttpProxy({url: this.url});
    }
    // 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.
        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.onMetaChange.createDelegate(this);
        }
        if (this.writer) { // writer passed
            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
         */
        '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 {DataProxy} this
         * @param {String} action [Ext.data.Api.actions.create|update|destroy]
         * @param {Record/Array[Record]} rs
         * @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 or failure of the action is available in the result['successProperty'] property.
         * The server-code might set the successProperty to false if a database validation
         * failed, for example.
         * @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'
    );

    if(this.proxy){
        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
        });
    }

    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]);
    }
};
Ext.extend(Ext.data.Store, 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'
    },

/**
     * Destroys the store.
     */
    destroy : function(){
        if(this.storeId){
            Ext.StoreMgr.unregister(this);
        }
        this.data = null;
        Ext.destroy(this.proxy);
        this.reader = this.writer = null;
        this.purgeListeners();
    },

/**
     * 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 a Record from the Store and fires the {@link #remove} event.
     * @param {Ext.data.Record} record The Ext.data.Record object to remove from the cache.
     */
    remove : function(record){
        var index = this.data.indexOf(record);
        if(index > -1){
            this.data.removeAt(index);
            if(this.pruneModifiedRecords){
                this.modified.remove(record);
            }
            if(this.snapshot){
                this.snapshot.remove(record);
            }
            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.
     */
    removeAll : function(){
        this.data.clear();
        if(this.snapshot){
            this.snapshot.clear();
        }
        if(this.pruneModifiedRecords){
            this.modified = [];
        }
        this.fireEvent('clear', 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);
        }
        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.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;
    },

/**
     *
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 and is passed the following arguments:

     *
    • r : Ext.data.Record[]
      •
     *
    • 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 = options || {};
        this.storeOptions(options);
        if(this.sortInfo && this.remoteSort){
            var pn = this.paramNames;
            options.params = 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 or records.  Should not be used directly.  It's called by Store#remove if a Writer is set.
     * @param {Store} this
     * @param {Ext.data.Record/Ext.data.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) {
        // 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 params key
        options = Ext.applyIf(options||{}, {
            params: {}
        });

        // 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);
        }
        else {
            // if Writer is configured as listful, force single-recoord rs to be [{}} instead of {}
            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.write(action, options.params, rs);
            }
        }
        if (doRequest !== false) {
            // Send request to proxy.
            var params = Ext.apply({}, options.params, this.baseParams);
            if (this.writer && this.proxy.url && !this.proxy.restful && !Ext.data.Api.hasUniqueUrl(this.proxy, action)) {
                params.xaction = action;
            }
            // 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 DataProxy#api
            this.proxy.request(Ext.data.Api.actions[action], rs, params, this.reader, this.createCallback(action, rs), 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.
     */
    save : function() {
        if (!this.writer) {
            throw new Ext.data.Store.Error('writer-undefined');
        }

        // DESTROY:  First check for removed records.  Records in this.removed are guaranteed non-phantoms.  @see Store#remove
        if (this.removed.length) {
            this.doTransaction('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) { // Bail-out if empty...
            return true;
        }

        // 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) {
            this.doTransaction('create', phantoms);
        }

        // UPDATE:  And finally, if we're still here after splicing-off phantoms and !isValid real records, update the rest...
        if (rs.length) {
            this.doTransaction('update', rs);
        }
        return true;
    },

    // private.  Simply wraps call to Store#execute in try/catch.  Defers to Store#handleException on error.  Loops if batch: false
    doTransaction : function(action, rs) {
        function transaction(records) {
            try {
                this.execute(action, records);
            } 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 callback-handler for remote CRUD actions
    // Do not override -- override loadRecords, onCreateRecords, onDestroyRecords and onUpdateRecords instead.
    createCallback : function(action, rs) {
        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, data);
            // If success === false here, exception will have been called in DataProxy
            if (success === true) {
                this.fireEvent('write', this, action, data, response, rs);
            }
        };
    },

    // 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] : 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 options used in the last {@link #load} operation. See {@link #load} for details (defaults to
     * null, in which case the {@link #lastOptions} are used).
     */
    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(!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.data.clear();
            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
    applySort : function(){
        if(this.sortInfo && !this.remoteSort){
            var s = this.sortInfo, f = s.field;
            this.sortData(f, s.direction);
        }
    },

    // private
    sortData : function(f, direction){
        direction = direction || 'ASC';
        var st = this.fields.get(f).sortType;
        var fn = function(r1, r2){
            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
        };
        this.data.sort(direction, fn);
        if(this.snapshot && this.snapshot != this.data){
            this.snapshot.sort(direction, fn);
        }
    },

/**
     * 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}.
     * @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')
     */
    sort : function(fieldName, dir){
        var f = this.fields.get(fieldName);
        if(!f){
            return false;
        }
        if(!dir){
            if(this.sortInfo && this.sortInfo.field == f.name){ // toggle sort dir
                dir = (this.sortToggle[f.name] || 'ASC').toggle('ASC', 'DESC');
            }else{
                dir = f.sortDir;
            }
        }
        var st = (this.sortToggle) ? this.sortToggle[f.name] : null;
        var si = (this.sortInfo) ? this.sortInfo : null;

        this.sortToggle[f.name] = dir;
        this.sortInfo = {field: f.name, direction: dir};
        if(!this.remoteSort){
            this.applySort();
            this.fireEvent('datachanged', this);
        }else{
            if (!this.load(this.lastOptions)) {
                if (st) {
                    this.sortToggle[f.name] = st;
                }
                if (si) {
                    this.sortInfo = si;
                }
            }
        }
    },

/**
     * 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 in which to call the function (defaults to the {@link Ext.data.Record Record}).
     */
    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;
    },

    // private
    createFilterFn : function(property, value, anyMatch, caseSensitive){
        if(Ext.isEmpty(value, false)){
            return false;
        }
        value = this.data.createValueMatcher(value, anyMatch, caseSensitive);
        return function(r){
            return value.test(r.data[property]);
        };
    },

/**
     * 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;
    },

/**
     * Filter the {@link Ext.data.Record 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
     */
    filter : function(property, value, anyMatch, caseSensitive){
        var fn = this.createFilterFn(property, value, anyMatch, caseSensitive);
        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 of the function (defaults to this)
     */
    filterBy : function(fn, scope){
        this.snapshot = this.snapshot || this.data;
        this.data = this.queryBy(fn, scope||this);
        this.fireEvent('datachanged', this);
    },

/**
     * 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 of the function (defaults to this)
     * @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 property/value.
     * @param {String} property A property on your objects
     * @param {String/RegExp} value Either a string that the property value
     * should begin with, or a RegExp to test against the property.
     * @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 property/value.
     * @param {String} property A property on your objects
     * @param {String/RegExp} value The value to match 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 of the function (defaults to this)
     * @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;
    },

/**
     * 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;
    },

    // 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, rtype, o){
        this.recordType = rtype;
        this.fields = rtype.prototype.fields;
        delete this.snapshot;
        if(meta.sortInfo){
            this.sortInfo = meta.sortInfo;
        }else if(this.sortInfo  && !this.fields.get(this.sortInfo.field)){
            delete this.sortInfo;
        }
        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

/**
 * @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

/*! 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

/*
    Cookie Plug-in

    This plug in automatically gets all the cookies for this site and adds them to the post_params.
    Cookies are loaded only on initialization.  The refreshCookies function can be called to update the post_params.
    The cookies will override any other post params with the same name.
*/

var SWFUpload;
if (typeof(SWFUpload) === "function") {
    SWFUpload.prototype.initSettings = function (oldInitSettings) {
        return function () {
            if (typeof(oldInitSettings) === "function") {
                oldInitSettings.call(this);
            }

            this.refreshCookies(false);	// The false parameter must be sent since SWFUpload has not initialzed at this point
        };
    }(SWFUpload.prototype.initSettings);

    // refreshes the post_params and updates SWFUpload.  The sendToFlash parameters is optional and defaults to True
    SWFUpload.prototype.refreshCookies = function (sendToFlash) {
        if (sendToFlash === undefined) {
            sendToFlash = true;
        }
        sendToFlash = !!sendToFlash;

        // Get the post_params object
        var postParams = this.settings.post_params;

        // Get the cookies
        var i, cookieArray = document.cookie.split(';'), caLength = cookieArray.length, c, eqIndex, name, value;
        for (i = 0; i < caLength; i++) {
            c = cookieArray[i];

            // Left Trim spaces
            while (c.charAt(0) === " ") {
                c = c.substring(1, c.length);
            }
            eqIndex = c.indexOf("=");
            if (eqIndex > 0) {
                name = c.substring(0, eqIndex);
                value = c.substring(eqIndex + 1);
                postParams[name] = value;
            }
        }

        if (sendToFlash) {
            this.setPostParams(postParams);
        }
    };

}


The source code

/**
 * SWFUpload: http://www.swfupload.org, http://swfupload.googlecode.com
 *
 * mmSWFUpload 1.0: Flash upload dialog - http://profandesign.se/swfupload/,  http://www.vinterwebb.se/
 *
 * SWFUpload is (c) 2006-2007 Lars Huring, Olov Nilz�n and Mammon Media and is released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * SWFUpload 2 is (c) 2007-2008 Jake Roberts and is released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 */

/* ******************* */
/* Constructor & Init  */
/* ******************* */
var SWFUpload;

if (SWFUpload == undefined) {
    SWFUpload = function (settings) {
        this.initSWFUpload(settings);
    };
}

SWFUpload.prototype.initSWFUpload = function (settings) {
    try {
        this.customSettings = {};	// A container where developers can place their own settings associated with this instance.
        this.settings = settings;
        this.eventQueue = [];
        this.movieName = "SWFUpload_" + SWFUpload.movieCount++;
        this.movieElement = null;

        // Setup global control tracking
        SWFUpload.instances[this.movieName] = this;

        // Load the settings.  Load the Flash movie.
        this.initSettings();
        this.loadFlash();
        this.displayDebugInfo();
    } catch (ex) {
        delete SWFUpload.instances[this.movieName];
        throw ex;
    }
};

/* *************** */
/* Static Members  */
/* *************** */
SWFUpload.instances = {};
SWFUpload.movieCount = 0;
SWFUpload.version = "2.2.0 2009-03-25";
SWFUpload.QUEUE_ERROR = {
    QUEUE_LIMIT_EXCEEDED	  		: -100,
    FILE_EXCEEDS_SIZE_LIMIT  		: -110,
    ZERO_BYTE_FILE			  		: -120,
    INVALID_FILETYPE		  		: -130
};
SWFUpload.UPLOAD_ERROR = {
    HTTP_ERROR				  		: -200,
    MISSING_UPLOAD_URL	      		: -210,
    IO_ERROR				  		: -220,
    SECURITY_ERROR			  		: -230,
    UPLOAD_LIMIT_EXCEEDED	  		: -240,
    UPLOAD_FAILED			  		: -250,
    SPECIFIED_FILE_ID_NOT_FOUND		: -260,
    FILE_VALIDATION_FAILED	  		: -270,
    FILE_CANCELLED			  		: -280,
    UPLOAD_STOPPED					: -290
};
SWFUpload.FILE_STATUS = {
    QUEUED		 : -1,
    IN_PROGRESS	 : -2,
    ERROR		 : -3,
    COMPLETE	 : -4,
    CANCELLED	 : -5
};
SWFUpload.BUTTON_ACTION = {
    SELECT_FILE  : -100,
    SELECT_FILES : -110,
    START_UPLOAD : -120
};
SWFUpload.CURSOR = {
    ARROW : -1,
    HAND : -2
};
SWFUpload.WINDOW_MODE = {
    WINDOW : "window",
    TRANSPARENT : "transparent",
    OPAQUE : "opaque"
};

// Private: takes a URL, determines if it is relative and converts to an absolute URL
// using the current site. Only processes the URL if it can, otherwise returns the URL untouched
SWFUpload.completeURL = function(url) {
    if (typeof(url) !== "string" || url.match(/^https?:\/\//i) || url.match(/^\//)) {
        return url;
    }

    var currentURL = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "");

    var indexSlash = window.location.pathname.lastIndexOf("/");
    if (indexSlash <= 0) {
        path = "/";
    } else {
        path = window.location.pathname.substr(0, indexSlash) + "/";
    }

    return /*currentURL +*/ path + url;

};

/* ******************** */
/* Instance Members  */
/* ******************** */

// Private: initSettings ensures that all the
// settings are set, getting a default value if one was not assigned.
SWFUpload.prototype.initSettings = function () {
    this.ensureDefault = function (settingName, defaultValue) {
        this.settings[settingName] = (this.settings[settingName] == undefined) ? defaultValue : this.settings[settingName];
    };

    // Upload backend settings
    this.ensureDefault("upload_url", "");
    this.ensureDefault("preserve_relative_urls", false);
    this.ensureDefault("file_post_name", "Filedata");
    this.ensureDefault("post_params", {});
    this.ensureDefault("use_query_string", false);
    this.ensureDefault("requeue_on_error", false);
    this.ensureDefault("http_success", []);
    this.ensureDefault("assume_success_timeout", 0);

    // File Settings
    this.ensureDefault("file_types", "*.*");
    this.ensureDefault("file_types_description", "All Files");
    this.ensureDefault("file_size_limit", 0);	// Default zero means "unlimited"
    this.ensureDefault("file_upload_limit", 0);
    this.ensureDefault("file_queue_limit", 0);

    // Flash Settings
    this.ensureDefault("flash_url", "swfupload.swf");
    this.ensureDefault("prevent_swf_caching", true);

    // Button Settings
    this.ensureDefault("button_image_url", "");
    this.ensureDefault("button_width", 1);
    this.ensureDefault("button_height", 1);
    this.ensureDefault("button_text", "");
    this.ensureDefault("button_text_style", "color: #000000; font-size: 16pt;");
    this.ensureDefault("button_text_top_padding", 0);
    this.ensureDefault("button_text_left_padding", 0);
    this.ensureDefault("button_action", SWFUpload.BUTTON_ACTION.SELECT_FILES);
    this.ensureDefault("button_disabled", false);
    this.ensureDefault("button_placeholder_id", "");
    this.ensureDefault("button_placeholder", null);
    this.ensureDefault("button_cursor", SWFUpload.CURSOR.ARROW);
    this.ensureDefault("button_window_mode", SWFUpload.WINDOW_MODE.WINDOW);

    // Debug Settings
    this.ensureDefault("debug", false);
    this.settings.debug_enabled = this.settings.debug;	// Here to maintain v2 API

    // Event Handlers
    this.settings.return_upload_start_handler = this.returnUploadStart;
    this.ensureDefault("swfupload_loaded_handler", null);
    this.ensureDefault("file_dialog_start_handler", null);
    this.ensureDefault("file_queued_handler", null);
    this.ensureDefault("file_queue_error_handler", null);
    this.ensureDefault("file_dialog_complete_handler", null);

    this.ensureDefault("upload_start_handler", null);
    this.ensureDefault("upload_progress_handler", null);
    this.ensureDefault("upload_error_handler", null);
    this.ensureDefault("upload_success_handler", null);
    this.ensureDefault("upload_complete_handler", null);

    this.ensureDefault("debug_handler", this.debugMessage);

    this.ensureDefault("custom_settings", {});

    // Other settings
    this.customSettings = this.settings.custom_settings;

    // Update the flash url if needed
    if (!!this.settings.prevent_swf_caching) {
        this.settings.flash_url = this.settings.flash_url + (this.settings.flash_url.indexOf("?") < 0 ? "?" : "&") + "preventswfcaching=" + new Date().getTime();
    }

    if (!this.settings.preserve_relative_urls) {
        //this.settings.flash_url = SWFUpload.completeURL(this.settings.flash_url);	// Don't need to do this one since flash doesn't look at it
        this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);
        this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
    }

    delete this.ensureDefault;
};

// Private: loadFlash replaces the button_placeholder element with the flash movie.
SWFUpload.prototype.loadFlash = function () {
    var targetElement, tempParent;

    // Make sure an element with the ID we are going to use doesn't already exist
    if (document.getElementById(this.movieName) !== null) {
        throw "ID " + this.movieName + " is already in use. The Flash Object could not be added";
    }

    // Get the element where we will be placing the flash movie
    targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder;

    if (targetElement == undefined) {
        throw "Could not find the placeholder element: " + this.settings.button_placeholder_id;
    }

    // Append the container and load the flash
    tempParent = document.createElement("div");
    tempParent.innerHTML = this.getFlashHTML();	// Using innerHTML is non-standard but the only sensible way to dynamically add Flash in IE (and maybe other browsers)
    targetElement.parentNode.replaceChild(tempParent.firstChild, targetElement);

    // Fix IE Flash/Form bug
    if (window[this.movieName] == undefined) {
        window[this.movieName] = this.getMovieElement();
    }

};

// Private: getFlashHTML generates the object tag needed to embed the flash in to the document
SWFUpload.prototype.getFlashHTML = function () {
    // Flash Satay object syntax: http://www.alistapart.com/articles/flashsatay
    return [' ',
                '',
                '',
                '',
                '',
                '',
                '',
                ' '].join("");
};

// Private: getFlashVars builds the parameter string that will be passed
// to flash in the flashvars param.
SWFUpload.prototype.getFlashVars = function () {
    // Build a string from the post param object
    var paramString = this.buildParamString();
    var httpSuccessString = this.settings.http_success.join(",");

    // Build the parameter string
    return ["movieName=", encodeURIComponent(this.movieName),
            "&uploadURL=", encodeURIComponent(this.settings.upload_url),
            "&useQueryString=", encodeURIComponent(this.settings.use_query_string),
            "&requeueOnError=", encodeURIComponent(this.settings.requeue_on_error),
            "&httpSuccess=", encodeURIComponent(httpSuccessString),
            "&assumeSuccessTimeout=", encodeURIComponent(this.settings.assume_success_timeout),
            "&params=", encodeURIComponent(paramString),
            "&filePostName=", encodeURIComponent(this.settings.file_post_name),
            "&fileTypes=", encodeURIComponent(this.settings.file_types),
            "&fileTypesDescription=", encodeURIComponent(this.settings.file_types_description),
            "&fileSizeLimit=", encodeURIComponent(this.settings.file_size_limit),
            "&fileUploadLimit=", encodeURIComponent(this.settings.file_upload_limit),
            "&fileQueueLimit=", encodeURIComponent(this.settings.file_queue_limit),
            "&debugEnabled=", encodeURIComponent(this.settings.debug_enabled),
            "&buttonImageURL=", encodeURIComponent(this.settings.button_image_url),
            "&buttonWidth=", encodeURIComponent(this.settings.button_width),
            "&buttonHeight=", encodeURIComponent(this.settings.button_height),
            "&buttonText=", encodeURIComponent(this.settings.button_text),
            "&buttonTextTopPadding=", encodeURIComponent(this.settings.button_text_top_padding),
            "&buttonTextLeftPadding=", encodeURIComponent(this.settings.button_text_left_padding),
            "&buttonTextStyle=", encodeURIComponent(this.settings.button_text_style),
            "&buttonAction=", encodeURIComponent(this.settings.button_action),
            "&buttonDisabled=", encodeURIComponent(this.settings.button_disabled),
            "&buttonCursor=", encodeURIComponent(this.settings.button_cursor)
        ].join("");
};

// Public: getMovieElement retrieves the DOM reference to the Flash element added by SWFUpload
// The element is cached after the first lookup
SWFUpload.prototype.getMovieElement = function () {
    if (this.movieElement == undefined) {
        this.movieElement = document.getElementById(this.movieName);
    }

    if (this.movieElement === null) {
        throw "Could not find Flash element";
    }

    return this.movieElement;
};

// Private: buildParamString takes the name/value pairs in the post_params setting object
// and joins them up in to a string formatted "name=value&name=value"
SWFUpload.prototype.buildParamString = function () {
    var postParams = this.settings.post_params;
    var paramStringPairs = [];

    if (typeof(postParams) === "object") {
        for (var name in postParams) {
            if (postParams.hasOwnProperty(name)) {
                paramStringPairs.push(encodeURIComponent(name.toString()) + "=" + encodeURIComponent(postParams[name].toString()));
            }
        }
    }

    return paramStringPairs.join("&");
};

// Public: Used to remove a SWFUpload instance from the page. This method strives to remove
// all references to the SWF, and other objects so memory is properly freed.
// Returns true if everything was destroyed. Returns a false if a failure occurs leaving SWFUpload in an inconsistant state.
// Credits: Major improvements provided by steffen
SWFUpload.prototype.destroy = function () {
    try {
        // Make sure Flash is done before we try to remove it
        this.cancelUpload(null, false);

        // Remove the SWFUpload DOM nodes
        var movieElement = null;
        movieElement = this.getMovieElement();

        if (movieElement && typeof(movieElement.CallFunction) === "unknown") { // We only want to do this in IE
            // Loop through all the movie's properties and remove all function references (DOM/JS IE 6/7 memory leak workaround)
            for (var i in movieElement) {
                try {
                    if (typeof(movieElement[i]) === "function") {
                        movieElement[i] = null;
                    }
                } catch (ex1) {}
            }

            // Remove the Movie Element from the page
            try {
                movieElement.parentNode.removeChild(movieElement);
            } catch (ex) {}
        }

        // Remove IE form fix reference
        window[this.movieName] = null;

        // Destroy other references
        SWFUpload.instances[this.movieName] = null;
        delete SWFUpload.instances[this.movieName];

        this.movieElement = null;
        this.settings = null;
        this.customSettings = null;
        this.eventQueue = null;
        this.movieName = null;

        return true;
    } catch (ex2) {
        return false;
    }
};

// Public: displayDebugInfo prints out settings and configuration
// information about this SWFUpload instance.
// This function (and any references to it) can be deleted when placing
// SWFUpload in production.
SWFUpload.prototype.displayDebugInfo = function () {
    this.debug(
        [
            "---SWFUpload Instance Info---\n",
            "Version: ", SWFUpload.version, "\n",
            "Movie Name: ", this.movieName, "\n",
            "Settings:\n",
            "\t", "upload_url:               ", this.settings.upload_url, "\n",
            "\t", "flash_url:                ", this.settings.flash_url, "\n",
            "\t", "use_query_string:         ", this.settings.use_query_string.toString(), "\n",
            "\t", "requeue_on_error:         ", this.settings.requeue_on_error.toString(), "\n",
            "\t", "http_success:             ", this.settings.http_success.join(", "), "\n",
            "\t", "assume_success_timeout:   ", this.settings.assume_success_timeout, "\n",
            "\t", "file_post_name:           ", this.settings.file_post_name, "\n",
            "\t", "post_params:              ", this.settings.post_params.toString(), "\n",
            "\t", "file_types:               ", this.settings.file_types, "\n",
            "\t", "file_types_description:   ", this.settings.file_types_description, "\n",
            "\t", "file_size_limit:          ", this.settings.file_size_limit, "\n",
            "\t", "file_upload_limit:        ", this.settings.file_upload_limit, "\n",
            "\t", "file_queue_limit:         ", this.settings.file_queue_limit, "\n",
            "\t", "debug:                    ", this.settings.debug.toString(), "\n",

            "\t", "prevent_swf_caching:      ", this.settings.prevent_swf_caching.toString(), "\n",

            "\t", "button_placeholder_id:    ", this.settings.button_placeholder_id.toString(), "\n",
            "\t", "button_placeholder:       ", (this.settings.button_placeholder ? "Set" : "Not Set"), "\n",
            "\t", "button_image_url:         ", this.settings.button_image_url.toString(), "\n",
            "\t", "button_width:             ", this.settings.button_width.toString(), "\n",
            "\t", "button_height:            ", this.settings.button_height.toString(), "\n",
            "\t", "button_text:              ", this.settings.button_text.toString(), "\n",
            "\t", "button_text_style:        ", this.settings.button_text_style.toString(), "\n",
            "\t", "button_text_top_padding:  ", this.settings.button_text_top_padding.toString(), "\n",
            "\t", "button_text_left_padding: ", this.settings.button_text_left_padding.toString(), "\n",
            "\t", "button_action:            ", this.settings.button_action.toString(), "\n",
            "\t", "button_disabled:          ", this.settings.button_disabled.toString(), "\n",

            "\t", "custom_settings:          ", this.settings.custom_settings.toString(), "\n",
            "Event Handlers:\n",
            "\t", "swfupload_loaded_handler assigned:  ", (typeof this.settings.swfupload_loaded_handler === "function").toString(), "\n",
            "\t", "file_dialog_start_handler assigned: ", (typeof this.settings.file_dialog_start_handler === "function").toString(), "\n",
            "\t", "file_queued_handler assigned:       ", (typeof this.settings.file_queued_handler === "function").toString(), "\n",
            "\t", "file_queue_error_handler assigned:  ", (typeof this.settings.file_queue_error_handler === "function").toString(), "\n",
            "\t", "upload_start_handler assigned:      ", (typeof this.settings.upload_start_handler === "function").toString(), "\n",
            "\t", "upload_progress_handler assigned:   ", (typeof this.settings.upload_progress_handler === "function").toString(), "\n",
            "\t", "upload_error_handler assigned:      ", (typeof this.settings.upload_error_handler === "function").toString(), "\n",
            "\t", "upload_success_handler assigned:    ", (typeof this.settings.upload_success_handler === "function").toString(), "\n",
            "\t", "upload_complete_handler assigned:   ", (typeof this.settings.upload_complete_handler === "function").toString(), "\n",
            "\t", "debug_handler assigned:             ", (typeof this.settings.debug_handler === "function").toString(), "\n"
        ].join("")
    );
};

/* Note: addSetting and getSetting are no longer used by SWFUpload but are included
    the maintain v2 API compatibility
*/
// Public: (Deprecated) addSetting adds a setting value. If the value given is undefined or null then the default_value is used.
SWFUpload.prototype.addSetting = function (name, value, default_value) {
    if (value == undefined) {
        return (this.settings[name] = default_value);
    } else {
        return (this.settings[name] = value);
    }
};

// Public: (Deprecated) getSetting gets a setting. Returns an empty string if the setting was not found.
SWFUpload.prototype.getSetting = function (name) {
    if (this.settings[name] != undefined) {
        return this.settings[name];
    }

    return "";
};

// Private: callFlash handles function calls made to the Flash element.
// Calls are made with a setTimeout for some functions to work around
// bugs in the ExternalInterface library.
SWFUpload.prototype.callFlash = function (functionName, argumentArray) {
    argumentArray = argumentArray || [];

    var movieElement = this.getMovieElement();
    var returnValue, returnString;

    // Flash's method if calling ExternalInterface methods (code adapted from MooTools).
    try {
        returnString = movieElement.CallFunction('' + __flash__argumentsToXML(argumentArray, 0) + '');
        returnValue = eval(returnString);
    } catch (ex) {
        throw "Call to " + functionName + " failed";
    }

    // Unescape file post param values
    if (returnValue != undefined && typeof returnValue.post === "object") {
        returnValue = this.unescapeFilePostParams(returnValue);
    }

    return returnValue;
};

/* *****************************
    -- Flash control methods --
    Your UI should use these
    to operate SWFUpload
   ***************************** */

// WARNING: this function does not work in Flash Player 10
// Public: selectFile causes a File Selection Dialog window to appear.  This
// dialog only allows 1 file to be selected.
SWFUpload.prototype.selectFile = function () {
    this.callFlash("SelectFile");
};

// WARNING: this function does not work in Flash Player 10
// Public: selectFiles causes a File Selection Dialog window to appear/ This
// dialog allows the user to select any number of files
// Flash Bug Warning: Flash limits the number of selectable files based on the combined length of the file names.
// If the selection name length is too long the dialog will fail in an unpredictable manner.  There is no work-around
// for this bug.
SWFUpload.prototype.selectFiles = function () {
    this.callFlash("SelectFiles");
};

// Public: startUpload starts uploading the first file in the queue unless
// the optional parameter 'fileID' specifies the ID
SWFUpload.prototype.startUpload = function (fileID) {
    this.callFlash("StartUpload", [fileID]);
};

// Public: cancelUpload cancels any queued file.  The fileID parameter may be the file ID or index.
// If you do not specify a fileID the current uploading file or first file in the queue is cancelled.
// If you do not want the uploadError event to trigger you can specify false for the triggerErrorEvent parameter.
SWFUpload.prototype.cancelUpload = function (fileID, triggerErrorEvent) {
    if (triggerErrorEvent !== false) {
        triggerErrorEvent = true;
    }
    this.callFlash("CancelUpload", [fileID, triggerErrorEvent]);
};

// Public: stopUpload stops the current upload and requeues the file at the beginning of the queue.
// If nothing is currently uploading then nothing happens.
SWFUpload.prototype.stopUpload = function () {
    this.callFlash("StopUpload");
};

/* ************************
 * Settings methods
 *   These methods change the SWFUpload settings.
 *   SWFUpload settings should not be changed directly on the settings object
 *   since many of the settings need to be passed to Flash in order to take
 *   effect.
 * *********************** */

// Public: getStats gets the file statistics object.
SWFUpload.prototype.getStats = function () {
    return this.callFlash("GetStats");
};

// Public: setStats changes the SWFUpload statistics.  You shouldn't need to
// change the statistics but you can.  Changing the statistics does not
// affect SWFUpload accept for the successful_uploads count which is used
// by the upload_limit setting to determine how many files the user may upload.
SWFUpload.prototype.setStats = function (statsObject) {
    this.callFlash("SetStats", [statsObject]);
};

// Public: getFile retrieves a File object by ID or Index.  If the file is
// not found then 'null' is returned.
SWFUpload.prototype.getFile = function (fileID) {
    if (typeof(fileID) === "number") {
        return this.callFlash("GetFileByIndex", [fileID]);
    } else {
        return this.callFlash("GetFile", [fileID]);
    }
};

// Public: addFileParam sets a name/value pair that will be posted with the
// file specified by the Files ID.  If the name already exists then the
// exiting value will be overwritten.
SWFUpload.prototype.addFileParam = function (fileID, name, value) {
    return this.callFlash("AddFileParam", [fileID, name, value]);
};

// Public: removeFileParam removes a previously set (by addFileParam) name/value
// pair from the specified file.
SWFUpload.prototype.removeFileParam = function (fileID, name) {
    this.callFlash("RemoveFileParam", [fileID, name]);
};

// Public: setUploadUrl changes the upload_url setting.
SWFUpload.prototype.setUploadURL = function (url) {
    this.settings.upload_url = url.toString();
    this.callFlash("SetUploadURL", [url]);
};

// Public: setPostParams changes the post_params setting
SWFUpload.prototype.setPostParams = function (paramsObject) {
    this.settings.post_params = paramsObject;
    this.callFlash("SetPostParams", [paramsObject]);
};

// Public: addPostParam adds post name/value pair.  Each name can have only one value.
SWFUpload.prototype.addPostParam = function (name, value) {
    this.settings.post_params[name] = value;
    this.callFlash("SetPostParams", [this.settings.post_params]);
};

// Public: removePostParam deletes post name/value pair.
SWFUpload.prototype.removePostParam = function (name) {
    delete this.settings.post_params[name];
    this.callFlash("SetPostParams", [this.settings.post_params]);
};

// Public: setFileTypes changes the file_types setting and the file_types_description setting
SWFUpload.prototype.setFileTypes = function (types, description) {
    this.settings.file_types = types;
    this.settings.file_types_description = description;
    this.callFlash("SetFileTypes", [types, description]);
};

// Public: setFileSizeLimit changes the file_size_limit setting
SWFUpload.prototype.setFileSizeLimit = function (fileSizeLimit) {
    this.settings.file_size_limit = fileSizeLimit;
    this.callFlash("SetFileSizeLimit", [fileSizeLimit]);
};

// Public: setFileUploadLimit changes the file_upload_limit setting
SWFUpload.prototype.setFileUploadLimit = function (fileUploadLimit) {
    this.settings.file_upload_limit = fileUploadLimit;
    this.callFlash("SetFileUploadLimit", [fileUploadLimit]);
};

// Public: setFileQueueLimit changes the file_queue_limit setting
SWFUpload.prototype.setFileQueueLimit = function (fileQueueLimit) {
    this.settings.file_queue_limit = fileQueueLimit;
    this.callFlash("SetFileQueueLimit", [fileQueueLimit]);
};

// Public: setFilePostName changes the file_post_name setting
SWFUpload.prototype.setFilePostName = function (filePostName) {
    this.settings.file_post_name = filePostName;
    this.callFlash("SetFilePostName", [filePostName]);
};

// Public: setUseQueryString changes the use_query_string setting
SWFUpload.prototype.setUseQueryString = function (useQueryString) {
    this.settings.use_query_string = useQueryString;
    this.callFlash("SetUseQueryString", [useQueryString]);
};

// Public: setRequeueOnError changes the requeue_on_error setting
SWFUpload.prototype.setRequeueOnError = function (requeueOnError) {
    this.settings.requeue_on_error = requeueOnError;
    this.callFlash("SetRequeueOnError", [requeueOnError]);
};

// Public: setHTTPSuccess changes the http_success setting
SWFUpload.prototype.setHTTPSuccess = function (http_status_codes) {
    if (typeof http_status_codes === "string") {
        http_status_codes = http_status_codes.replace(" ", "").split(",");
    }

    this.settings.http_success = http_status_codes;
    this.callFlash("SetHTTPSuccess", [http_status_codes]);
};

// Public: setHTTPSuccess changes the http_success setting
SWFUpload.prototype.setAssumeSuccessTimeout = function (timeout_seconds) {
    this.settings.assume_success_timeout = timeout_seconds;
    this.callFlash("SetAssumeSuccessTimeout", [timeout_seconds]);
};

// Public: setDebugEnabled changes the debug_enabled setting
SWFUpload.prototype.setDebugEnabled = function (debugEnabled) {
    this.settings.debug_enabled = debugEnabled;
    this.callFlash("SetDebugEnabled", [debugEnabled]);
};

// Public: setButtonImageURL loads a button image sprite
SWFUpload.prototype.setButtonImageURL = function (buttonImageURL) {
    if (buttonImageURL == undefined) {
        buttonImageURL = "";
    }

    this.settings.button_image_url = buttonImageURL;
    this.callFlash("SetButtonImageURL", [buttonImageURL]);
};

// Public: setButtonDimensions resizes the Flash Movie and button
SWFUpload.prototype.setButtonDimensions = function (width, height) {
    this.settings.button_width = width;
    this.settings.button_height = height;

    var movie = this.getMovieElement();
    if (movie != undefined) {
        movie.style.width = width + "px";
        movie.style.height = height + "px";
    }

    this.callFlash("SetButtonDimensions", [width, height]);
};
// Public: setButtonText Changes the text overlaid on the button
SWFUpload.prototype.setButtonText = function (html) {
    this.settings.button_text = html;
    this.callFlash("SetButtonText", [html]);
};
// Public: setButtonTextPadding changes the top and left padding of the text overlay
SWFUpload.prototype.setButtonTextPadding = function (left, top) {
    this.settings.button_text_top_padding = top;
    this.settings.button_text_left_padding = left;
    this.callFlash("SetButtonTextPadding", [left, top]);
};

// Public: setButtonTextStyle changes the CSS used to style the HTML/Text overlaid on the button
SWFUpload.prototype.setButtonTextStyle = function (css) {
    this.settings.button_text_style = css;
    this.callFlash("SetButtonTextStyle", [css]);
};
// Public: setButtonDisabled disables/enables the button
SWFUpload.prototype.setButtonDisabled = function (isDisabled) {
    this.settings.button_disabled = isDisabled;
    this.callFlash("SetButtonDisabled", [isDisabled]);
};
// Public: setButtonAction sets the action that occurs when the button is clicked
SWFUpload.prototype.setButtonAction = function (buttonAction) {
    this.settings.button_action = buttonAction;
    this.callFlash("SetButtonAction", [buttonAction]);
};

// Public: setButtonCursor changes the mouse cursor displayed when hovering over the button
SWFUpload.prototype.setButtonCursor = function (cursor) {
    this.settings.button_cursor = cursor;
    this.callFlash("SetButtonCursor", [cursor]);
};

/* *******************************
    Flash Event Interfaces
    These functions are used by Flash to trigger the various
    events.

    All these functions a Private.

    Because the ExternalInterface library is buggy the event calls
    are added to a queue and the queue then executed by a setTimeout.
    This ensures that events are executed in a determinate order and that
    the ExternalInterface bugs are avoided.
******************************* */

SWFUpload.prototype.queueEvent = function (handlerName, argumentArray) {
    // Warning: Don't call this.debug inside here or you'll create an infinite loop

    if (argumentArray == undefined) {
        argumentArray = [];
    } else if (!(argumentArray instanceof Array)) {
        argumentArray = [argumentArray];
    }

    var self = this;
    if (typeof this.settings[handlerName] === "function") {
        // Queue the event
        this.eventQueue.push(function () {
            this.settings[handlerName].apply(this, argumentArray);
        });

        // Execute the next queued event
        setTimeout(function () {
            self.executeNextEvent();
        }, 0);

    } else if (this.settings[handlerName] !== null) {
        throw "Event handler " + handlerName + " is unknown or is not a function";
    }
};

// Private: Causes the next event in the queue to be executed.  Since events are queued using a setTimeout
// we must queue them in order to garentee that they are executed in order.
SWFUpload.prototype.executeNextEvent = function () {
    // Warning: Don't call this.debug inside here or you'll create an infinite loop

    var  f = this.eventQueue ? this.eventQueue.shift() : null;
    if (typeof(f) === "function") {
        f.apply(this);
    }
};

// Private: unescapeFileParams is part of a workaround for a flash bug where objects passed through ExternalInterface cannot have
// properties that contain characters that are not valid for JavaScript identifiers. To work around this
// the Flash Component escapes the parameter names and we must unescape again before passing them along.
SWFUpload.prototype.unescapeFilePostParams = function (file) {
    var reg = /[$]([0-9a-f]{4})/i;
    var unescapedPost = {};
    var uk;

    if (file != undefined) {
        for (var k in file.post) {
            if (file.post.hasOwnProperty(k)) {
                uk = k;
                var match;
                while ((match = reg.exec(uk)) !== null) {
                    uk = uk.replace(match[0], String.fromCharCode(parseInt("0x" + match[1], 16)));
                }
                unescapedPost[uk] = file.post[k];
            }
        }

        file.post = unescapedPost;
    }

    return file;
};

// Private: Called by Flash to see if JS can call in to Flash (test if External Interface is working)
SWFUpload.prototype.testExternalInterface = function () {
    try {
        return this.callFlash("TestExternalInterface");
    } catch (ex) {
        return false;
    }
};

// Private: This event is called by Flash when it has finished loading. Don't modify this.
// Use the swfupload_loaded_handler event setting to execute custom code when SWFUpload has loaded.
SWFUpload.prototype.flashReady = function () {
    // Check that the movie element is loaded correctly with its ExternalInterface methods defined
    var movieElement = this.getMovieElement();

    if (!movieElement) {
        this.debug("Flash called back ready but the flash movie can't be found.");
        return;
    }

    this.cleanUp(movieElement);

    this.queueEvent("swfupload_loaded_handler");
};

// Private: removes Flash added fuctions to the DOM node to prevent memory leaks in IE.
// This function is called by Flash each time the ExternalInterface functions are created.
SWFUpload.prototype.cleanUp = function (movieElement) {
    // Pro-actively unhook all the Flash functions
    try {
        if (this.movieElement && typeof(movieElement.CallFunction) === "unknown") { // We only want to do this in IE
            this.debug("Removing Flash functions hooks (this should only run in IE and should prevent memory leaks)");
            for (var key in movieElement) {
                try {
                    if (typeof(movieElement[key]) === "function") {
                        movieElement[key] = null;
                    }
                } catch (ex) {
                }
            }
        }
    } catch (ex1) {

    }

    // Fix Flashes own cleanup code so if the SWFMovie was removed from the page
    // it doesn't display errors.
    window["__flash__removeCallback"] = function (instance, name) {
        try {
            if (instance) {
                instance[name] = null;
            }
        } catch (flashEx) {

        }
    };

};

/* This is a chance to do something before the browse window opens */
SWFUpload.prototype.fileDialogStart = function () {
    this.queueEvent("file_dialog_start_handler");
};

/* Called when a file is successfully added to the queue. */
SWFUpload.prototype.fileQueued = function (file) {
    file = this.unescapeFilePostParams(file);
    this.queueEvent("file_queued_handler", file);
};

/* Handle errors that occur when an attempt to queue a file fails. */
SWFUpload.prototype.fileQueueError = function (file, errorCode, message) {
    file = this.unescapeFilePostParams(file);
    this.queueEvent("file_queue_error_handler", [file, errorCode, message]);
};

/* Called after the file dialog has closed and the selected files have been queued.
    You could call startUpload here if you want the queued files to begin uploading immediately. */
SWFUpload.prototype.fileDialogComplete = function (numFilesSelected, numFilesQueued, numFilesInQueue) {
    this.queueEvent("file_dialog_complete_handler", [numFilesSelected, numFilesQueued, numFilesInQueue]);
};

SWFUpload.prototype.uploadStart = function (file) {
    file = this.unescapeFilePostParams(file);
    this.queueEvent("return_upload_start_handler", file);
};

SWFUpload.prototype.returnUploadStart = function (file) {
    var returnValue;
    if (typeof this.settings.upload_start_handler === "function") {
        file = this.unescapeFilePostParams(file);
        returnValue = this.settings.upload_start_handler.call(this, file);
    } else if (this.settings.upload_start_handler != undefined) {
        throw "upload_start_handler must be a function";
    }

    // Convert undefined to true so if nothing is returned from the upload_start_handler it is
    // interpretted as 'true'.
    if (returnValue === undefined) {
        returnValue = true;
    }

    returnValue = !!returnValue;

    this.callFlash("ReturnUploadStart", [returnValue]);
};

SWFUpload.prototype.uploadProgress = function (file, bytesComplete, bytesTotal) {
    file = this.unescapeFilePostParams(file);
    this.queueEvent("upload_progress_handler", [file, bytesComplete, bytesTotal]);
};

SWFUpload.prototype.uploadError = function (file, errorCode, message) {
    file = this.unescapeFilePostParams(file);
    this.queueEvent("upload_error_handler", [file, errorCode, message]);
};

SWFUpload.prototype.uploadSuccess = function (file, serverData, responseReceived) {
    file = this.unescapeFilePostParams(file);
    this.queueEvent("upload_success_handler", [file, serverData, responseReceived]);
};

SWFUpload.prototype.uploadComplete = function (file) {
    file = this.unescapeFilePostParams(file);
    this.queueEvent("upload_complete_handler", file);
};

/* Called by SWFUpload JavaScript and Flash functions when debug is enabled. By default it writes messages to the
   internal debug console.  You can override this event and have messages written where you want. */
SWFUpload.prototype.debug = function (message) {
    this.queueEvent("debug_handler", message);
};

/* **********************************
    Debug Console
    The debug console is a self contained, in page location
    for debug message to be sent.  The Debug Console adds
    itself to the body if necessary.

    The console is automatically scrolled as messages appear.

    If you are using your own debug handler or when you deploy to production and
    have debug disabled you can remove these functions to reduce the file size
    and complexity.
********************************** */

// Private: debugMessage is the default debug_handler.  If you want to print debug messages
// call the debug() function.  When overriding the function your own function should
// check to see if the debug setting is true before outputting debug information.
SWFUpload.prototype.debugMessage = function (message) {
    if (this.settings.debug) {
        var exceptionMessage, exceptionValues = [];

        // Check for an exception object and print it nicely
        if (typeof message === "object" && typeof message.name === "string" && typeof message.message === "string") {
            for (var key in message) {
                if (message.hasOwnProperty(key)) {
                    exceptionValues.push(key + ": " + message[key]);
                }
            }
            exceptionMessage = exceptionValues.join("\n") || "";
            exceptionValues = exceptionMessage.split("\n");
            exceptionMessage = "EXCEPTION: " + exceptionValues.join("\nEXCEPTION: ");
            SWFUpload.Console.writeLine(exceptionMessage);
        } else {
            SWFUpload.Console.writeLine(message);
        }
    }
};

SWFUpload.Console = {};
SWFUpload.Console.writeLine = function (message) {
    var console, documentForm;

    try {
        console = document.getElementById("SWFUpload_Console");

        if (!console) {
            documentForm = document.createElement("form");
            document.getElementsByTagName("body")[0].appendChild(documentForm);

            console = document.createElement("textarea");
            console.id = "SWFUpload_Console";
            console.style.fontFamily = "monospace";
            console.setAttribute("wrap", "off");
            console.wrap = "off";
            console.style.overflow = "auto";
            console.style.width = "700px";
            console.style.height = "350px";
            console.style.margin = "5px";
            documentForm.appendChild(console);
        }

        console.value += message + "\n";

        console.scrollTop = console.scrollHeight - console.clientHeight;
    } catch (ex) {
        alert("Exception: " + ex.name + " Message: " + ex.message);
    }
};


The source code

/*
    Queue Plug-in

    Features:
        *Adds a cancelQueue() method for cancelling the entire queue.
        *All queued files are uploaded when startUpload() is called.
        *If false is returned from uploadComplete then the queue upload is stopped.
         If false is not returned (strict comparison) then the queue upload is continued.
        *Adds a QueueComplete event that is fired when all the queued files have finished uploading.
         Set the event handler with the queue_complete_handler setting.

    */

var SWFUpload;
if (typeof(SWFUpload) === "function") {
    SWFUpload.queue = {};

    SWFUpload.prototype.initSettings = (function (oldInitSettings) {
        return function () {
            if (typeof(oldInitSettings) === "function") {
                oldInitSettings.call(this);
            }

            this.queueSettings = {};

            this.queueSettings.queue_cancelled_flag = false;
            this.queueSettings.queue_upload_count = 0;

            this.queueSettings.user_upload_complete_handler = this.settings.upload_complete_handler;
            this.queueSettings.user_upload_start_handler = this.settings.upload_start_handler;
            this.settings.upload_complete_handler = SWFUpload.queue.uploadCompleteHandler;
            this.settings.upload_start_handler = SWFUpload.queue.uploadStartHandler;

            this.settings.queue_complete_handler = this.settings.queue_complete_handler || null;
        };
    })(SWFUpload.prototype.initSettings);

    SWFUpload.prototype.startUpload = function (fileID) {
        this.queueSettings.queue_cancelled_flag = false;
        this.callFlash("StartUpload", [fileID]);
    };

    SWFUpload.prototype.cancelQueue = function () {
        this.queueSettings.queue_cancelled_flag = true;
        this.stopUpload();

        var stats = this.getStats();
        while (stats.files_queued > 0) {
            this.cancelUpload();
            stats = this.getStats();
        }
    };

    SWFUpload.queue.uploadStartHandler = function (file) {
        var returnValue;
        if (typeof(this.queueSettings.user_upload_start_handler) === "function") {
            returnValue = this.queueSettings.user_upload_start_handler.call(this, file);
        }

        // To prevent upload a real "FALSE" value must be returned, otherwise default to a real "TRUE" value.
        returnValue = (returnValue === false) ? false : true;

        this.queueSettings.queue_cancelled_flag = !returnValue;

        return returnValue;
    };

    SWFUpload.queue.uploadCompleteHandler = function (file) {
        var user_upload_complete_handler = this.queueSettings.user_upload_complete_handler;
        var continueUpload;

        if (file.filestatus === SWFUpload.FILE_STATUS.COMPLETE) {
            this.queueSettings.queue_upload_count++;
        }

        if (typeof(user_upload_complete_handler) === "function") {
            continueUpload = (user_upload_complete_handler.call(this, file) === false) ? false : true;
        } else if (file.filestatus === SWFUpload.FILE_STATUS.QUEUED) {
            // If the file was stopped and re-queued don't restart the upload
            continueUpload = false;
        } else {
            continueUpload = true;
        }

        if (continueUpload) {
            var stats = this.getStats();
            if (stats.files_queued > 0 && this.queueSettings.queue_cancelled_flag === false) {
                this.startUpload();
            } else if (this.queueSettings.queue_cancelled_flag === false) {
                this.queueEvent("queue_complete_handler", [this.queueSettings.queue_upload_count]);
                this.queueSettings.queue_upload_count = 0;
            } else {
                this.queueSettings.queue_cancelled_flag = false;
                this.queueSettings.queue_upload_count = 0;
            }
        }
    };
}


The source code

/*
    Speed Plug-in

    Features:
        *Adds several properties to the 'file' object indicated upload speed, time left, upload time, etc.
            - currentSpeed -- String indicating the upload speed, bytes per second
            - averageSpeed -- Overall average upload speed, bytes per second
            - movingAverageSpeed -- Speed over averaged over the last several measurements, bytes per second
            - timeRemaining -- Estimated remaining upload time in seconds
            - timeElapsed -- Number of seconds passed for this upload
            - percentUploaded -- Percentage of the file uploaded (0 to 100)
            - sizeUploaded -- Formatted size uploaded so far, bytes

        *Adds setting 'moving_average_history_size' for defining the window size used to calculate the moving average speed.

        *Adds several Formatting functions for formatting that values provided on the file object.
            - SWFUpload.speed.formatBPS(bps) -- outputs string formatted in the best units (Gbps, Mbps, Kbps, bps)
            - SWFUpload.speed.formatTime(seconds) -- outputs string formatted in the best units (x Hr y M z S)
            - SWFUpload.speed.formatSize(bytes) -- outputs string formatted in the best units (w GB x MB y KB z B )
            - SWFUpload.speed.formatPercent(percent) -- outputs string formatted with a percent sign (x.xx %)
            - SWFUpload.speed.formatUnits(baseNumber, divisionArray, unitLabelArray, fractionalBoolean)
                - Formats a number using the division array to determine how to apply the labels in the Label Array
                - factionalBoolean indicates whether the number should be returned as a single fractional number with a unit (speed)
                    or as several numbers labeled with units (time)
    */

var SWFUpload;
if (typeof(SWFUpload) === "function") {
    SWFUpload.speed = {};

    SWFUpload.prototype.initSettings = (function (oldInitSettings) {
        return function () {
            if (typeof(oldInitSettings) === "function") {
                oldInitSettings.call(this);
            }

            this.ensureDefault = function (settingName, defaultValue) {
                this.settings[settingName] = (this.settings[settingName] == undefined) ? defaultValue : this.settings[settingName];
            };

            // List used to keep the speed stats for the files we are tracking
            this.fileSpeedStats = {};
            this.speedSettings = {};

            this.ensureDefault("moving_average_history_size", "10");

            this.speedSettings.user_file_queued_handler = this.settings.file_queued_handler;
            this.speedSettings.user_file_queue_error_handler = this.settings.file_queue_error_handler;
            this.speedSettings.user_upload_start_handler = this.settings.upload_start_handler;
            this.speedSettings.user_upload_error_handler = this.settings.upload_error_handler;
            this.speedSettings.user_upload_progress_handler = this.settings.upload_progress_handler;
            this.speedSettings.user_upload_success_handler = this.settings.upload_success_handler;
            this.speedSettings.user_upload_complete_handler = this.settings.upload_complete_handler;

            this.settings.file_queued_handler = SWFUpload.speed.fileQueuedHandler;
            this.settings.file_queue_error_handler = SWFUpload.speed.fileQueueErrorHandler;
            this.settings.upload_start_handler = SWFUpload.speed.uploadStartHandler;
            this.settings.upload_error_handler = SWFUpload.speed.uploadErrorHandler;
            this.settings.upload_progress_handler = SWFUpload.speed.uploadProgressHandler;
            this.settings.upload_success_handler = SWFUpload.speed.uploadSuccessHandler;
            this.settings.upload_complete_handler = SWFUpload.speed.uploadCompleteHandler;

            delete this.ensureDefault;
        };
    })(SWFUpload.prototype.initSettings);

    SWFUpload.speed.fileQueuedHandler = function (file) {
        if (typeof this.speedSettings.user_file_queued_handler === "function") {
            file = SWFUpload.speed.extendFile(file);

            return this.speedSettings.user_file_queued_handler.call(this, file);
        }
    };

    SWFUpload.speed.fileQueueErrorHandler = function (file, errorCode, message) {
        if (typeof this.speedSettings.user_file_queue_error_handler === "function") {
            file = SWFUpload.speed.extendFile(file);

            return this.speedSettings.user_file_queue_error_handler.call(this, file, errorCode, message);
        }
    };

    SWFUpload.speed.uploadStartHandler = function (file) {
        if (typeof this.speedSettings.user_upload_start_handler === "function") {
            file = SWFUpload.speed.extendFile(file, this.fileSpeedStats);
            return this.speedSettings.user_upload_start_handler.call(this, file);
        }
    };

    SWFUpload.speed.uploadErrorHandler = function (file, errorCode, message) {
        file = SWFUpload.speed.extendFile(file, this.fileSpeedStats);
        SWFUpload.speed.removeTracking(file, this.fileSpeedStats);

        if (typeof this.speedSettings.user_upload_error_handler === "function") {
            return this.speedSettings.user_upload_error_handler.call(this, file, errorCode, message);
        }
    };
    SWFUpload.speed.uploadProgressHandler = function (file, bytesComplete, bytesTotal) {
        this.updateTracking(file, bytesComplete);
        file = SWFUpload.speed.extendFile(file, this.fileSpeedStats);

        if (typeof this.speedSettings.user_upload_progress_handler === "function") {
            return this.speedSettings.user_upload_progress_handler.call(this, file, bytesComplete, bytesTotal);
        }
    };

    SWFUpload.speed.uploadSuccessHandler = function (file, serverData) {
        if (typeof this.speedSettings.user_upload_success_handler === "function") {
            file = SWFUpload.speed.extendFile(file, this.fileSpeedStats);
            return this.speedSettings.user_upload_success_handler.call(this, file, serverData);
        }
    };
    SWFUpload.speed.uploadCompleteHandler = function (file) {
        file = SWFUpload.speed.extendFile(file, this.fileSpeedStats);
        SWFUpload.speed.removeTracking(file, this.fileSpeedStats);

        if (typeof this.speedSettings.user_upload_complete_handler === "function") {
            return this.speedSettings.user_upload_complete_handler.call(this, file);
        }
    };

    // Private: extends the file object with the speed plugin values
    SWFUpload.speed.extendFile = function (file, trackingList) {
        var tracking;

        if (trackingList) {
            tracking = trackingList[file.id];
        }

        if (tracking) {
            file.currentSpeed = tracking.currentSpeed;
            file.averageSpeed = tracking.averageSpeed;
            file.movingAverageSpeed = tracking.movingAverageSpeed;
            file.timeRemaining = tracking.timeRemaining;
            file.timeElapsed = tracking.timeElapsed;
            file.percentUploaded = tracking.percentUploaded;
            file.sizeUploaded = tracking.bytesUploaded;

        } else {
            file.currentSpeed = 0;
            file.averageSpeed = 0;
            file.movingAverageSpeed = 0;
            file.timeRemaining = 0;
            file.timeElapsed = 0;
            file.percentUploaded = 0;
            file.sizeUploaded = 0;
        }

        return file;
    };

    // Private: Updates the speed tracking object, or creates it if necessary
    SWFUpload.prototype.updateTracking = function (file, bytesUploaded) {
        var tracking = this.fileSpeedStats[file.id];
        if (!tracking) {
            this.fileSpeedStats[file.id] = tracking = {};
        }

        // Sanity check inputs
        bytesUploaded = bytesUploaded || tracking.bytesUploaded || 0;
        if (bytesUploaded < 0) {
            bytesUploaded = 0;
        }
        if (bytesUploaded > file.size) {
            bytesUploaded = file.size;
        }

        var tickTime = (new Date()).getTime();
        if (!tracking.startTime) {
            tracking.startTime = (new Date()).getTime();
            tracking.lastTime = tracking.startTime;
            tracking.currentSpeed = 0;
            tracking.averageSpeed = 0;
            tracking.movingAverageSpeed = 0;
            tracking.movingAverageHistory = [];
            tracking.timeRemaining = 0;
            tracking.timeElapsed = 0;
            tracking.percentUploaded = bytesUploaded / file.size;
            tracking.bytesUploaded = bytesUploaded;
        } else if (tracking.startTime > tickTime) {
            this.debug("When backwards in time");
        } else {
            // Get time and deltas
            var now = (new Date()).getTime();
            var lastTime = tracking.lastTime;
            var deltaTime = now - lastTime;
            var deltaBytes = bytesUploaded - tracking.bytesUploaded;

            if (deltaBytes === 0 || deltaTime === 0) {
                return tracking;
            }

            // Update tracking object
            tracking.lastTime = now;
            tracking.bytesUploaded = bytesUploaded;

            // Calculate speeds
            tracking.currentSpeed = (deltaBytes * 8 ) / (deltaTime / 1000);
            tracking.averageSpeed = (tracking.bytesUploaded * 8) / ((now - tracking.startTime) / 1000);

            // Calculate moving average
            tracking.movingAverageHistory.push(tracking.currentSpeed);
            if (tracking.movingAverageHistory.length > this.settings.moving_average_history_size) {
                tracking.movingAverageHistory.shift();
            }

            tracking.movingAverageSpeed = SWFUpload.speed.calculateMovingAverage(tracking.movingAverageHistory);

            // Update times
            tracking.timeRemaining = (file.size - tracking.bytesUploaded) * 8 / tracking.movingAverageSpeed;
            tracking.timeElapsed = (now - tracking.startTime) / 1000;

            // Update percent
            tracking.percentUploaded = (tracking.bytesUploaded / file.size * 100);
        }

        return tracking;
    };
    SWFUpload.speed.removeTracking = function (file, trackingList) {
        try {
            trackingList[file.id] = null;
            delete trackingList[file.id];
        } catch (ex) {
        }
    };

    SWFUpload.speed.formatUnits = function (baseNumber, unitDivisors, unitLabels, singleFractional) {
        var i, unit, unitDivisor, unitLabel;

        if (baseNumber === 0) {
            return "0 " + unitLabels[unitLabels.length - 1];
        }

        if (singleFractional) {
            unit = baseNumber;
            unitLabel = unitLabels.length >= unitDivisors.length ? unitLabels[unitDivisors.length - 1] : "";
            for (i = 0; i < unitDivisors.length; i++) {
                if (baseNumber >= unitDivisors[i]) {
                    unit = (baseNumber / unitDivisors[i]).toFixed(2);
                    unitLabel = unitLabels.length >= i ? " " + unitLabels[i] : "";
                    break;
                }
            }

            return unit + unitLabel;
        } else {
            var formattedStrings = [];
            var remainder = baseNumber;

            for (i = 0; i < unitDivisors.length; i++) {
                unitDivisor = unitDivisors[i];
                unitLabel = unitLabels.length > i ? " " + unitLabels[i] : "";

                unit = remainder / unitDivisor;
                if (i < unitDivisors.length -1) {
                    unit = Math.floor(unit);
                } else {
                    unit = unit.toFixed(2);
                }
                if (unit > 0) {
                    remainder = remainder % unitDivisor;

                    formattedStrings.push(unit + unitLabel);
                }
            }

            return formattedStrings.join(" ");
        }
    };

    SWFUpload.speed.formatBPS = function (baseNumber) {
        var bpsUnits = [1073741824, 1048576, 1024, 1], bpsUnitLabels = ["Gbps", "Mbps", "Kbps", "bps"];
        return SWFUpload.speed.formatUnits(baseNumber, bpsUnits, bpsUnitLabels, true);

    };
    SWFUpload.speed.formatTime = function (baseNumber) {
        var timeUnits = [86400, 3600, 60, 1], timeUnitLabels = ["d", "h", "m", "s"];
        return SWFUpload.speed.formatUnits(baseNumber, timeUnits, timeUnitLabels, false);

    };
    SWFUpload.speed.formatBytes = function (baseNumber) {
        var sizeUnits = [1073741824, 1048576, 1024, 1], sizeUnitLabels = ["GB", "MB", "KB", "bytes"];
        return SWFUpload.speed.formatUnits(baseNumber, sizeUnits, sizeUnitLabels, true);

    };
    SWFUpload.speed.formatPercent = function (baseNumber) {
        return baseNumber.toFixed(2) + " %";
    };

    SWFUpload.speed.calculateMovingAverage = function (history) {
        var vals = [], size, sum = 0.0, mean = 0.0, varianceTemp = 0.0, variance = 0.0, standardDev = 0.0;
        var i;
        var mSum = 0, mCount = 0;

        size = history.length;

        // Check for sufficient data
        if (size >= 8) {
            // Clone the array and Calculate sum of the values
            for (i = 0; i < size; i++) {
                vals[i] = history[i];
                sum += vals[i];
            }

            mean = sum / size;

            // Calculate variance for the set
            for (i = 0; i < size; i++) {
                varianceTemp += Math.pow((vals[i] - mean), 2);
            }

            variance = varianceTemp / size;
            standardDev = Math.sqrt(variance);

            //Standardize the Data
            for (i = 0; i < size; i++) {
                vals[i] = (vals[i] - mean) / standardDev;
            }

            // Calculate the average excluding outliers
            var deviationRange = 2.0;
            for (i = 0; i < size; i++) {

                if (vals[i] <= deviationRange && vals[i] >= -deviationRange) {
                    mCount++;
                    mSum += history[i];
                }
            }

        } else {
            // Calculate the average (not enough data points to remove outliers)
            mCount = size;
            for (i = 0; i < size; i++) {
                mSum += history[i];
            }
        }

        return mSum / mCount;
    };

}


The source code

/*
    SWFUpload.SWFObject Plugin

    Summary:
        This plugin uses SWFObject to embed SWFUpload dynamically in the page.  SWFObject provides accurate Flash Player detection and DOM Ready loading.
        This plugin replaces the Graceful Degradation plugin.

    Features:
        * swfupload_load_failed_hander event
        * swfupload_pre_load_handler event
        * minimum_flash_version setting (default: "9.0.28")
        * SWFUpload.onload event for early loading

    Usage:
        Provide handlers and settings as needed.  When using the SWFUpload.SWFObject plugin you should initialize SWFUploading
        in SWFUpload.onload rather than in window.onload.  When initialized this way SWFUpload can load earlier preventing the UI flicker
        that was seen using the Graceful Degradation plugin.

    Notes:
        You must provide set minimum_flash_version setting to "8" if you are using SWFUpload for Flash Player 8.
        The swfuploadLoadFailed event is only fired if the minimum version of Flash Player is not met.  Other issues such as missing SWF files, browser bugs
         or corrupt Flash Player installations will not trigger this event.
        The swfuploadPreLoad event is fired as soon as the minimum version of Flash Player is found.  It does not wait for SWFUpload to load and can
         be used to prepare the SWFUploadUI and hide alternate content.
        swfobject's onDomReady event is cross-browser safe but will default to the window.onload event when DOMReady is not supported by the browser.
         Early DOM Loading is supported in major modern browsers but cannot be guaranteed for every browser ever made.
*/

/* SWFObject v2.1
    Copyright (c) 2007-2008 Geoff Stearns, Michael Williams, and Bobby van der Sluis
    This software is released under the MIT License
*/
var swfobject=function(){var b="undefined",Q="object",n="Shockwave Flash",p="ShockwaveFlash.ShockwaveFlash",P="application/x-shockwave-flash",m="SWFObjectExprInst",j=window,K=document,T=navigator,o=[],N=[],i=[],d=[],J,Z=null,M=null,l=null,e=false,A=false;var h=function(){var v=typeof K.getElementById!=b&&typeof K.getElementsByTagName!=b&&typeof K.createElement!=b,AC=[0,0,0],x=null;if(typeof T.plugins!=b&&typeof T.plugins[n]==Q){x=T.plugins[n].description;if(x&&!(typeof T.mimeTypes!=b&&T.mimeTypes[P]&&!T.mimeTypes[P].enabledPlugin)){x=x.replace(/^.*\s+(\S+\s+\S+$)/,"$1");AC[0]=parseInt(x.replace(/^(.*)\..*$/,"$1"),10);AC[1]=parseInt(x.replace(/^.*\.(.*)\s.*$/,"$1"),10);AC[2]=/r/.test(x)?parseInt(x.replace(/^.*r(.*)$/,"$1"),10):0}}else{if(typeof j.ActiveXObject!=b){var y=null,AB=false;try{y=new ActiveXObject(p+".7")}catch(t){try{y=new ActiveXObject(p+".6");AC=[6,0,21];y.AllowScriptAccess="always"}catch(t){if(AC[0]==6){AB=true}}if(!AB){try{y=new ActiveXObject(p)}catch(t){}}}if(!AB&&y){try{x=y.GetVariable("$version");if(x){x=x.split(" ")[1].split(",");AC=[parseInt(x[0],10),parseInt(x[1],10),parseInt(x[2],10)]}}catch(t){}}}}var AD=T.userAgent.toLowerCase(),r=T.platform.toLowerCase(),AA=/webkit/.test(AD)?parseFloat(AD.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,q=false,z=r?/win/.test(r):/win/.test(AD),w=r?/mac/.test(r):/mac/.test(AD);/*@cc_on q=true;@if(@_win32)z=true;@elif(@_mac)w=true;@end@*/return{w3cdom:v,pv:AC,webkit:AA,ie:q,win:z,mac:w}}();var L=function(){if(!h.w3cdom){return }f(H);if(h.ie&&h.win){try{K.write("


The source code

Ext.SwitchButton = Ext.extend(Ext.Component, {
    initComponent : function(){
        Ext.SwitchButton.superclass.initComponent.call(this);

        var mc = new Ext.util.MixedCollection();
        mc.addAll(this.items);
        this.items = mc;

        this.addEvents('change');

        if(this.handler){
            this.on('change', this.handler, this.scope || this);
        }
    },

    onRender : function(ct, position){

        var el = document.createElement('table');
        el.cellSpacing = 0;
        el.className = 'x-rbtn';
        el.id = this.id;

        var row = document.createElement('tr');
        el.appendChild(row);

        var count = this.items.length;
        var last = count - 1;
        this.activeItem = this.items.get(this.activeItem);

        for(var i = 0; i < count; i++){
            var item = this.items.itemAt(i);

            var cell = row.appendChild(document.createElement('td'));
            cell.id = this.id + '-rbi-' + i;

            var cls = i == 0 ? 'x-rbtn-first' : (i == last ? 'x-rbtn-last' : 'x-rbtn-item');
            item.baseCls = cls;

            if(this.activeItem == item){
                cls += '-active';
            }
            cell.className = cls;

            var button = document.createElement('button');
            button.innerHTML = ' ';
            button.className = item.iconCls;
            button.qtip = item.tooltip;

            cell.appendChild(button);

            item.cell = cell;
        }

        this.el = Ext.get(ct.dom.appendChild(el));

        this.el.on('click', this.onClick, this);
    },

    getActiveItem : function(){
        return this.activeItem;
    },

    setActiveItem : function(item){
        if(typeof item != 'object' && item !== null){
            item = this.items.get(item);
        }
        var current = this.getActiveItem();
        if(item != current){
            if(current){
                Ext.fly(current.cell).removeClass(current.baseCls + '-active');
            }
            if(item) {
                Ext.fly(item.cell).addClass(item.baseCls + '-active');
            }
            this.activeItem = item;
            this.fireEvent('change', this, item);
        }
        return item;
    },

    onClick : function(e){
        var target = e.getTarget('td', 2);
        if(!this.disabled && target){
            this.setActiveItem(parseInt(target.id.split('-rbi-')[1], 10));
        }
    }
});

Ext.reg('switch', Ext.SwitchButton);


The source code

/**
 * @class Ext.air.SystemMenu
 *
 * Provides platform independent handling of adding item to the application menu, creating the menu or
 * items as needed.

 *
 * This class also provides the ability to bind standard Ext.Action instances with NativeMenuItems
 *
 * @singleton
 */
Ext.air.SystemMenu = function(){
    var menu;
    // windows
    if(air.NativeWindow.supportsMenu && nativeWindow.systemChrome != air.NativeWindowSystemChrome.NONE) {
        menu = new air.NativeMenu();
        nativeWindow.menu = menu;
    }

    // mac
    if(air.NativeApplication.supportsMenu) {
        menu = air.NativeApplication.nativeApplication.menu;
    }

    function find(menu, text){
        for(var i = 0, len = menu.items.length; i < len; i++){
            if(menu.items[i]['label'] == text){
                return menu.items[i];
            }
        }
        return null;
    }

    return {

/**
         * Add items to one of the application menus
         * @param {String} text The application menu to add the actions to (e.g. 'File' or 'Edit').
         * @param {Array} actions An array of Ext.Action objects or menu item configs
         * @param {Number} mindex The index of the character in "text" which should be used for
         * keyboard access
         * @return air.NativeMenu The raw submenu
         */
        add: function(text, actions, mindex){

            var item = find(menu, text);
            if(!item){
                item = menu.addItem(new air.NativeMenuItem(text));
                item.mnemonicIndex = mindex || 0;

                item.submenu = new air.NativeMenu();
            }
            for (var i = 0, len = actions.length; i < len; i++) {
                item.submenu.addItem(actions[i] == '-' ? new air.NativeMenuItem("", true) : Ext.air.MenuItem(actions[i]));
            }
            return item.submenu;
        },

/**
         * Returns the application menu
         */
        get : function(){
            return menu;
        }
    };
}();

// ability to bind native menu items to an Ext.Action
Ext.air.MenuItem = function(action){
    if(!action.isAction){
        action = new Ext.Action(action);
    }
    var cfg = action.initialConfig;
    var nativeItem = new air.NativeMenuItem(cfg.itemText || cfg.text);

    nativeItem.enabled = !cfg.disabled;

    if(!Ext.isEmpty(cfg.checked)){
        nativeItem.checked = cfg.checked;
    }

    var handler = cfg.handler;
    var scope = cfg.scope;

    nativeItem.addEventListener(air.Event.SELECT, function(){
        handler.call(scope || window, cfg);
    });

    action.addComponent({
        setDisabled : function(v){
            nativeItem.enabled = !v;
        },

        setText : function(v){
            nativeItem.label = v;
        },

        setVisible : function(v){
            // could not find way to hide in air so disable?
            nativeItem.enabled = !v;
        },

        setHandler : function(newHandler, newScope){
            handler = newHandler;
            scope = newScope;
        },
        // empty function
        on : function(){}
    });

    return nativeItem;
}


The source code

Ext.air.SystemTray = function(){
    var app = air.NativeApplication.nativeApplication;
    var icon, isWindows = false, bitmaps;

    // windows
    if(air.NativeApplication.supportsSystemTrayIcon) {
        icon = app.icon;
        isWindows = true;
    }

    // mac
    if(air.NativeApplication.supportsDockIcon) {
        icon = app.icon;
    }

    return {

        setIcon : function(icon, tooltip, initWithIcon){
            if(!icon){ // not supported OS
                return;
            }
            var loader = new air.Loader();
            loader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, function(e){
                bitmaps = new runtime.Array(e.target.content.bitmapData);
                if (initWithIcon) {
                    icon.bitmaps = bitmaps;
                }
            });
            loader.load(new air.URLRequest(icon));
            if(tooltip && air.NativeApplication.supportsSystemTrayIcon) {
                app.icon.tooltip = tooltip;
            }
        },

        bounce : function(priority){
            icon.bounce(priority);
        },

        on : function(eventName, fn, scope){
            icon.addEventListener(eventName, function(){
                fn.apply(scope || this, arguments);
            });
        },

        hideIcon : function(){
            if(!icon){ // not supported OS
                return;
            }
            icon.bitmaps = [];
        },

        showIcon : function(){
            if(!icon){ // not supported OS
                return;
            }
            icon.bitmaps = bitmaps;
        },

        setMenu: function(actions, _parentMenu){
            if(!icon){ // not supported OS
                return;
            }
            var menu = new air.NativeMenu();

            for (var i = 0, len = actions.length; i < len; i++) {
                var a = actions[i];
                if(a == '-'){
                    menu.addItem(new air.NativeMenuItem("", true));
                }else{
                    var item = menu.addItem(Ext.air.MenuItem(a));
                    if(a.menu || (a.initialConfig && a.initialConfig.menu)){
                        item.submenu = Ext.air.SystemTray.setMenu(a.menu || a.initialConfig.menu, menu);
                    }
                }

                if(!_parentMenu){
                    icon.menu = menu;
                }
            }

            return menu;
        }
    };
}();


The source code

Ext.onReady(function() {
    Ext.QuickTips.init();
    // Create our instance of tabScrollerMenu
    var scrollerMenu = new Ext.ux.TabScrollerMenu({
        maxText  : 15,
        pageSize : 5
    });
    new Ext.Window({
        height : 200,
        width  : 400,
        layout : 'fit',
        title  : 'Exercising scrollable tabs with a tabscroller menu',
        items  : {
            xtype           : 'tabpanel',
            activeTab       : 0,
            id              : 'myTPanel',
            enableTabScroll : true,
            resizeTabs      : true,
            minTabWidth     : 75,
            border          : false,
            plugins         : [ scrollerMenu ],
            items           : [
                {
                    title : 'our first tab'
                }
            ]
        }
    }).show();

    // Add a bunch of tabs dynamically
    var tabLimit = 22;
    (function (num) {
        for (var i = 1; i <= tabLimit; i++) {
            var title = 'Tab # ' + i;
            Ext.getCmp('myTPanel').add({
                title    : title,
                html     : 'Hi, i am tab ' + i,
                tabTip   : title,
                closable : true
            });
        }
    }).defer(1000);

});


The source code

/**
 * @class Ext.ux.TabCloseMenu
 * @extends Object
 * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.
 *
 * @ptype tabclosemenu
 */
Ext.ux.TabCloseMenu = function(){
    var tabs, menu, ctxItem;
    this.init = function(tp){
        tabs = tp;
        tabs.on('contextmenu', onContextMenu);
    };

    function onContextMenu(ts, item, e){
        if(!menu){ // create context menu on first right click
            menu = new Ext.menu.Menu({
            items: [{
                id: tabs.id + '-close',
                text: 'Close Tab',
                handler : function(){
                    tabs.remove(ctxItem);
                }
            },{
                id: tabs.id + '-close-others',
                text: 'Close Other Tabs',
                handler : function(){
                    tabs.items.each(function(item){
                        if(item.closable && item != ctxItem){
                            tabs.remove(item);
                        }
                    });
                }
            }]});
        }
        ctxItem = item;
        var items = menu.items;
        items.get(tabs.id + '-close').setDisabled(!item.closable);
        var disableOthers = true;
        tabs.items.each(function(){
            if(this != item && this.closable){
                disableOthers = false;
                return false;
            }
        });
        items.get(tabs.id + '-close-others').setDisabled(disableOthers);
    e.stopEvent();
        menu.showAt(e.getPoint());
    }
};

Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);


The source code

Ext.sql.Table = function(conn, name, keyName){
    this.conn = conn;
    this.name = name;
    this.keyName = keyName;
};

Ext.sql.Table.prototype = {
    update : function(o){
        var clause = this.keyName + " = ?";
        return this.updateBy(o, clause, [o[this.keyName]]);
    },

    updateBy : function(o, clause, args){
        var sql = "UPDATE " + this.name + " set ";
        var fs = [], a = [];
        for(var key in o){
            if(o.hasOwnProperty(key)){
                fs[fs.length] = key + ' = ?';
                a[a.length] = o[key];
            }
        }
        for(var key in args){
            if(args.hasOwnProperty(key)){
                a[a.length] = args[key];
            }
        }
        sql = [sql, fs.join(','), ' WHERE ', clause].join('');
        return this.conn.execBy(sql, a);
    },

    insert : function(o){
        var sql = "INSERT into " + this.name + " ";
        var fs = [], vs = [], a = [];
        for(var key in o){
            if(o.hasOwnProperty(key)){
                fs[fs.length] = key;
                vs[vs.length] = '?';
                a[a.length] = o[key];
            }
        }
        sql = [sql, '(', fs.join(','), ') VALUES (', vs.join(','), ')'].join('');
        return this.conn.execBy(sql, a);
    },

    lookup : function(id){
        return this.selectBy('where ' + this.keyName + " = ?", [id])[0] || null;
    },

    exists : function(id){
        return !!this.lookup(id);
    },

    save : function(o){
        if(this.exists(o[this.keyName])){
            this.update(o);
        }else{
            this.insert(o);
        }
    },

    select : function(clause){
        return this.selectBy(clause, null);
    },

    selectBy : function(clause, args){
        var sql = "select * from " + this.name;
        if(clause){
            sql += ' ' + clause;
        }
        args = args || {};
        return this.conn.queryBy(sql, args);
    },

    remove : function(clause){
        this.deleteBy(clause, null);
    },

    removeBy : function(clause, args){
        var sql = "delete from " + this.name;
        if(clause){
            sql += ' where ' + clause;
        }
        args = args || {};
        this.conn.execBy(sql, args);
    }
};


The source code

Ext.ns('Ext.ux.grid');

/**
 * @class Ext.ux.grid.TableGrid
 * @extends Ext.grid.GridPanel
 * A Grid which creates itself from an existing HTML table element.
 * @history
 * 2007-03-01 Original version by Nige "Animal" White
 * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
 * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
 * The table MUST have some type of size defined for the grid to fill. The container will be
 * automatically set to position relative if it isn't already.
 * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
 * properties: fields and columns which allow for customizing data fields and columns for this grid.
 */
Ext.ux.grid.TableGrid = function(table, config){
    config = config ||
    {};
    Ext.apply(this, config);
    var cf = config.fields || [], ch = config.columns || [];
    table = Ext.get(table);

    var ct = table.insertSibling();

    var fields = [], cols = [];
    var headers = table.query("thead th");
    for (var i = 0, h; h = headers[i]; i++) {
        var text = h.innerHTML;
        var name = 'tcol-' + i;

        fields.push(Ext.applyIf(cf[i] ||
        {}, {
            name: name,
            mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
        }));

        cols.push(Ext.applyIf(ch[i] ||
        {}, {
            'header': text,
            'dataIndex': name,
            'width': h.offsetWidth,
            'tooltip': h.title,
            'sortable': true
        }));
    }

    var ds = new Ext.data.Store({
        reader: new Ext.data.XmlReader({
            record: 'tbody tr'
        }, fields)
    });

    ds.loadData(table.dom);

    var cm = new Ext.grid.ColumnModel(cols);

    if (config.width || config.height) {
        ct.setSize(config.width || 'auto', config.height || 'auto');
    }
    else {
        ct.setWidth(table.getWidth());
    }

    if (config.remove !== false) {
        table.remove();
    }

    Ext.applyIf(this, {
        'ds': ds,
        'cm': cm,
        'sm': new Ext.grid.RowSelectionModel(),
        autoHeight: true,
        autoWidth: false
    });
    Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
};

Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);

//backwards compat
Ext.grid.TableGrid = Ext.ux.grid.TableGrid;


The source code

/**
 * @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,

/**
     * @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){
        if(c && !c.rendered){
            c.render(this.getNextCell(c));
            if(this.extraCls){
                var t = c.getPositionEl ? c.getPositionEl() : c;
                t.addClass(this.extraCls);
            }
        }
    },

    // private
    isValidParent : function(c, target){
        return true;
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;


The source code

/**
 * @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.
    •
 *

 *
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} monitorResize True to automatically monitor window resize events and rerender the layout on
     * browser resize (defaults to true).
     */
    monitorResize : true,

/**
     * @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 none).
     */
    activeTab : null,

/**
     * @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);
        this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

        this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
        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" onclick="return false;"></a>',
         '</tpl>',
         '<a class="x-tab-right" href="#" onclick="return false;" 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.on('add', this.onAdd, this, {target: this});
        this.on('remove', this.onRemove, this, {target: this});

        this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
        this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
        if(this.enableTabScroll){
            this.mon(this.strip, 'mousewheel', this.onWheel, this);
        }
    },

    // private
    findTargets : function(e){
        var item = null;
        var itemEl = e.getTarget('li', 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];
            var 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];
        var p = this.getTemplateArgs(item);
        var el = before ?
                 this.itemTpl.insertBefore(before, p) :
                 this.itemTpl.append(this.strip, p);

        Ext.fly(el).addClassOnOver('x-tab-strip-over');

        if(item.tabTip){
            Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
        }
        item.tabEl = el;

        item.on('disable', this.onItemDisabled, this);
        item.on('enable', this.onItemEnabled, this);
        item.on('titlechange', this.onItemTitleChanged, this);
        item.on('iconchange', this.onItemIconChanged, this);
        item.on('beforeshow', this.onBeforeShowItem, this);
    },

    /**
     *
    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 {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(tp, item, index){
        this.initTab(item, index);
        if(this.items.getCount() == 1){
            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(tp, item){
        Ext.destroy(Ext.get(this.getTabEl(item)));
        this.stack.remove(item);
        item.un('disable', this.onItemDisabled, this);
        item.un('enable', this.onItemEnabled, this);
        item.un('titlechange', this.onItemTitleChanged, this);
        item.un('iconchange', this.onItemIconChanged, this);
        item.un('beforeshow', this.onBeforeShowItem, this);
        if(item == this.activeTab){
            var next = this.stack.next();
            if(next){
                this.setActiveTab(next);
            }else if(this.items.getCount() > 0){
                this.setActiveTab(0);
            }else{
                this.activeTab = null;
            }
        }
        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){
            Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
        }
    },

    /**
     * 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){
        return document.getElementById(this.id + this.idDelimiter + this.getComponent(item).getItemId());
    },

    // 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;
        var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
        var ow = this[ce].dom.offsetWidth;
        var 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([className^=x-tab-edge])");
        for(var i = 0, len = lis.length; i < len; i++) {
            var li = lis[i];
            var inner = Ext.fly(li).child('.x-tab-strip-inner', true);
            var tw = li.offsetWidth;
            var 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(!item || 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');
                }
                this.activeTab.fireEvent('deactivate', this.activeTab);
            }
            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);
            }

            item.fireEvent('activate', item);
            this.fireEvent('tabchange', this, item);
        }
    },

    /**
     * Gets the currently active tab.
     * @return {Panel} The active tab
     */
    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;
        var ow = this.pos.dom.offsetWidth;
        var tw = this.pos.dom.clientWidth;

        var wrap = this.stripWrap;
        var wd = wrap.dom;
        var cw = wd.offsetWidth;
        var pos = this.getScrollPos();
        var 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);
        var pos = this.getScrollPos(), area = this.getScrollArea();
        var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
        var 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();
        var newpos = pos + d;
        var 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();
        var pos = this.getScrollPos();
        var s = Math.min(sw, pos + this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },

    // private
    onScrollLeft : function(){
        var pos = this.getScrollPos();
        var 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() {
        if(this.items){
            this.items.each(function(item){
                if(item && item.tabEl){
                    Ext.get(item.tabEl).removeAllListeners();
                    item.tabEl = null;
                }
            }, this);
        }
        if(this.strip){
            this.strip.removeAllListeners();
        }
        Ext.TabPanel.superclass.beforeDestroy.apply(this);
    }

    /**
     * @cfg {Boolean} collapsible
     * @hide
     */

    /**
     * @cfg {String} header
     * @hide
     */

    /**
     * @cfg {Boolean} headerAsText
     * @hide
     */

    /**
     * @property header
     * @hide
     */

    /**
     * @property 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

Ext.onReady(function(){

    var tabs = new Ext.TabPanel({
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:600,
        height:250,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });

    // tab generation code
    var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        tabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '

'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }

    new Ext.Button({
        text: 'Add Tab',
        handler: addTab,
        iconCls:'new-tab'
    }).render(document.body, 'tabs');
});


The source code

Ext.onReady(function(){
    // basic tabs 1, built from existing content
    var tabs = new Ext.TabPanel({
        renderTo: 'tabs1',
        width:450,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'script', title: 'Short Text'},
            {contentEl:'markup', title: 'Long Text'}
        ]
    });

    // second tabs built from JS
    var tabs2 = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Normal Tab',
                html: "My content was added during construction."
            },{
                title: 'Ajax Tab 1',
                autoLoad:'ajax1.htm'
            },{
                title: 'Ajax Tab 2',
                autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
            },{
                title: 'Event Tab',
                listeners: {activate: handleActivate},
                html: "I am tab 4's content. I also have an event listener attached."
            },{
                title: 'Disabled Tab',
                disabled:true,
                html: "Can't see me cause I'm disabled"
            }
        ]
    });

    function handleActivate(tab){
        alert(tab.title + ' was activated.');
    }
});


The source code

Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
    pageSize       : 10,
    maxText        : 15,
    menuPrefixText : 'Items',
    constructor    : function(config) {
        config = config || {};
        Ext.apply(this, config);
    },
    init : function(tabPanel) {
        Ext.apply(tabPanel, this.tabPanelMethods);

        tabPanel.tabScrollerMenu = this;
        var thisRef = this;

        tabPanel.on({
            render : {
                scope  : tabPanel,
                single : true,
                fn     : function() {
                    var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
                    tabPanel.createScrollers = newFn;
                }
            }
        });
    },
    // private && sequeneced
    createPanelsMenu : function() {
        var h = this.stripWrap.dom.offsetHeight;

        //move the right menu item to the left 18px
        var rtScrBtn = this.header.dom.firstChild;
        Ext.fly(rtScrBtn).applyStyles({
            right : '18px'
        });

        var stripWrap = Ext.get(this.strip.dom.parentNode);
        stripWrap.applyStyles({
             'margin-right' : '36px'
        });

        // Add the new righthand menu
        var scrollMenu = this.header.insertFirst({
            cls:'x-tab-tabmenu-right'
        });
        scrollMenu.setHeight(h);
        scrollMenu.addClassOnOver('x-tab-tabmenu-over');
        scrollMenu.on('click', this.showTabsMenu, this);

        this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
            scrollMenu.show();
        });

        this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
            scrollMenu.hide();
        });

    },
    // public
    getPageSize : function() {
        return this.pageSize;
    },
    // public
    setPageSize : function(pageSize) {
        this.pageSize = pageSize;
    },
    // public
    getMaxText : function() {
        return this.maxText;
    },
    // public
    setMaxText : function(t) {
        this.maxText = t;
    },
    getMenuPrefixText : function() {
        return this.menuPrefixText;
    },
    setMenuPrefixText : function(t) {
        this.menuPrefixText = t;
    },
    // private && applied to the tab panel itself.
    tabPanelMethods : {
        // all execute within the scope of the tab panel
        // private
        showTabsMenu : function(e) {
            if (! this.tabsMenu) {
                this.tabsMenu =  new Ext.menu.Menu();
                this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
            }

            this.tabsMenu.removeAll();

            this.generateTabMenuItems();

            var target = Ext.get(e.getTarget());
            var xy     = target.getXY();

            //Y param + 24 pixels
            xy[1] += 24;

            this.tabsMenu.showAt(xy);
        },
        // private
        generateTabMenuItems : function() {
            var curActive  = this.getActiveTab();
            var totalItems = this.items.getCount();
            var pageSize   = this.tabScrollerMenu.getPageSize();

            if (totalItems > pageSize)  {
                var numSubMenus = Math.floor(totalItems / pageSize);
                var remainder   = totalItems % pageSize;

                // Loop through all of the items and create submenus in chunks of 10
                for (var i = 0 ; i < numSubMenus; i++) {
                    var curPage = (i + 1) * pageSize;
                    var menuItems = [];

                    for (var x = 0; x < pageSize; x++) {
                        index = x + curPage - pageSize;
                        var item = this.items.get(index);
                        menuItems.push(this.autoGenMenuItem(item));
                    }

                    this.tabsMenu.add({
                        text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
                        menu : menuItems
                    });

                }
                // remaining items
                if (remainder > 0) {
                    var start = numSubMenus * pageSize;
                    menuItems = [];
                    for (var i = start ; i < totalItems; i ++ ) {
                        var item = this.items.get(i);
                        menuItems.push(this.autoGenMenuItem(item));
                    }

                    this.tabsMenu.add({
                        text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
                        menu : menuItems
                    });

                }
            }
            else {
                this.items.each(function(item) {
                    if (item.id != curActive.id && ! item.hidden) {
                        menuItems.push(this.autoGenMenuItem(item));
                    }
                }, this);
            }
        },
        // private
        autoGenMenuItem : function(item) {
            var maxText = this.tabScrollerMenu.getMaxText();
            var text    = Ext.util.Format.ellipsis(item.title, maxText);

            return {
                text      : text,
                handler   : this.showTabFromMenu,
                scope     : this,
                disabled  : item.disabled,
                tabToShow : item,
                iconCls   : item.iconCls
            }

        },
        // private
        showTabFromMenu : function(menuItem) {
            this.setActiveTab(menuItem.tabToShow);
        }
    }
});


The source code

Imgorg.TagWindow = Ext.extend(Ext.Window, {
    title: 'Choose Tag',
    layout: 'fit',
    closeAction: 'hide',
    width: 300,
    modal: true,

    initComponent: function() {
        Ext.apply(this, {
            items: [{
                autoHeight: true,
                xtype: 'form',
                id: 'tag-select',
                bodyStyle: 'padding:15px',
                labelWidth: 50,
                items: [{
                    anchor: '95%',
                    fieldLabel: 'Tag',
                    xtype: 'img-tagcombo',
                    name: 'tag',
                    allowBlank: false
                }]
            }],
            buttons: [{
                text: 'Tag Images',
                handler: this.tagImages,
                scope: this
            },{
                text: 'Cancel',
                handler: function() {
                    this.hide();
                },
                scope: this
            }]
        });
        Imgorg.TagWindow.superclass.initComponent.call(this);
    },

    tagImages: function() {
        var af = this.getComponent('tag-select').getForm();
        if (af.isValid()) {
            if (this.selectedRecords) {
                var imageIds = [];
                for (var i = 0; i < this.selectedRecords.length; i++) {
                    var r = this.selectedRecords[i];
                    imageIds.push(r.data.dbid || r.data.id);
                }
                var fld = af.findField('tag');
                var tag = fld.getRawValue();
                var idx = fld.store.find('text', tag);
                if (idx != -1) {
                    rec = fld.store.getAt(idx);
                    tag = rec.data.id;
                }
                Imgorg.ss.Images.tagImage({
                    images: imageIds,
                    tag: tag
                });
            }
            this.hide();
        }
    }
});


The source code

Ext.onReady(function(){
    Ext.QuickTips.init();

    var win = window.nativeWindow;

    var opener = Ext.air.NativeWindow.getRootHtmlWindow();
    var taskId = String(window.location).split('=')[1];
    var isNew = !taskId;
    var completed = false;

    win.title = 'Task - ' + Ext.util.Format.ellipsis(getTask().data.title, 40);

    var tb = new Ext.Toolbar({
        region: 'north',
        height:26,
        id:'main-tb',
        items:[{
            id:'cpl-btn',
            iconCls: 'icon-mark-complete',
            text: 'Mark Complete',
            handler: function(){
                setCompleted(!completed);
                if(completed) {
                    setMsg('This task was completed on ' + new Date().format('l, F d, Y'));
                }
                if(validate()) {
                    (function(){
                        saveData();
                        if (completed) {
                            win.close();
                        }
                    }).defer(250);
                }
            }
        },'-',
            {iconCls: 'icon-delete-task', text: 'Delete', handler: function(){
                Ext.Msg.confirm('Confirm Delete', 'Are you sure you want to delete this task?', function(btn){
                    if(btn == 'yes'){
                        opener.tx.data.tasks.remove(getTask());
                        win.close();
                    }
                });
            }}
        ]
    });

    var title = new Ext.form.TextField({
        fieldLabel: 'Task Subject',
        name: 'title',
        anchor: '100%'
    });

    var dueDate = new Ext.form.DateField({
        fieldLabel: 'Due Date',
        name: 'dueDate',
        width: 135,
        format: 'm/d/Y'
    });

    var list = new ListSelector({
        fieldLabel: 'Task List',
        name: 'listId',
        store: opener.tx.data.lists,
        anchor: '100%'
    });

    list.on('render', function(){
        this.menu.on('beforeshow', function(m){
            list.tree.setWidth(Math.max(180, list.getSize().width));
        });
    });
    win.addEventListener('closing', function(){
        opener.tx.data.lists.unbindTree(list.tree);
    });

    var hasReminder = new Ext.form.Checkbox({
        boxLabel: 'Reminder:',
        checked: false
    });

    var reminder = new Ext.ux.form.DateTime({
        name: 'reminder',
        disabled: true,
        timeFormat: 'g:i A',
        dateFormat: 'm/d/Y',
        timeConfig: {
            tpl: opener.Templates.timeField,
            listClass:'x-combo-list-small',
            maxHeight:100
        }
    });

    var description = new Ext.form.HtmlEditor({
        hideLabel: true,
        name: 'description',
        anchor: '100% -95',  // anchor width by percentage and height by raw adjustment
        onEditorEvent : function(e){
            var t;
            if(e.browserEvent.type == 'mousedown' && (t = e.getTarget('a', 3))){
                t.target = '_blank';
            }
            this.updateToolbar();
        }
    });

    var form = new Ext.form.FormPanel({
        region:'center',
        baseCls: 'x-plain',
        labelWidth: 75,
        margins:'10 10 5 10',

        buttonAlign: 'right',
        minButtonWidth: 80,
        buttons:[{
            text: 'OK',
            handler: function(){
                if(validate()) {
                    saveData();
                    window.nativeWindow.close();
                }
            }
        },{
            text: 'Cancel',
            handler: function(){ window.nativeWindow.close(); }
        }],

        items: [{
            xtype:'box',
            autoEl: {id:'msg'}
        },
        title,{
            layout: 'column',
            anchor: '100%',
            baseCls: 'x-plain',
            items: [{
                width: 250,
                layout: 'form',
                baseCls: 'x-plain',
                items: dueDate
            }, {
                columnWidth: 1,
                layout: 'form',
                baseCls: 'x-plain',
                labelWidth:55,
                items: list
            }]
        },{
            xtype:'box',
            autoEl: {cls:'divider'}
        },{
            layout: 'column',
            anchor: '100%',
            baseCls: 'x-plain',
            items: [{
                width: 80,
                layout: 'form',
                baseCls: 'x-plain',
                hideLabels: true,
                items: hasReminder
            }, {
                columnWidth: 1,
                layout: 'form',
                baseCls: 'x-plain',
                hideLabels: true,
                items: reminder
            }]
        },
        description]
    });

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[tb, form]
    });

    var msg = Ext.get('msg');
    var task = getTask();

    if(task && task.data.completedDate){
        setMsg('This task was completed on ' + task.data.completedDate.format('l, F d, Y'));
    }

    hasReminder.on('check', function(cb, checked){
        reminder.setDisabled(!checked);
        if(checked && !reminder.getValue()){
            reminder.setValue(opener.tx.data.getDefaultReminder(getTask()));
        }
    });

    refreshData.defer(10);

    win.visible = true;
    win.activate();

    title.focus();

    function refreshData(){
        if(!isNew){
            var task = getTask();
            hasReminder.setValue(!!task.data.reminder);
            form.getForm().loadRecord(task);
            setCompleted(task.data.completed);
        }
    }

    function saveData(){
        var task;
        if(isNew){
            task = opener.tx.data.tasks.createTask(
                title.getValue(),
                list.getRawValue(),
                dueDate.getValue(),
                description.getValue(),
                completed
            );
        }else{
            task = getTask();
            task.set('completed', completed);
        }
        if(!hasReminder.getValue()){
            reminder.setValue('');
        }
        form.getForm().updateRecord(task);
    }

    function setCompleted(value){
        completed = value;
        var cplBtn = Ext.getCmp('cpl-btn');
        if (completed) {
            cplBtn.setText('Mark Active');
            cplBtn.setIconClass('icon-mark-active');
            hasReminder.disable();
            reminder.disable();
        }
        else {
            cplBtn.setText('Mark Complete');
            cplBtn.setIconClass('icon-mark-complete');
            setMsg(null);
            hasReminder.enable();
            reminder.setDisabled(!hasReminder.checked);
        }
    }

    function setMsg(msgText){
        var last;
        if(!msgText) {
            msg.setDisplayed(false);
        } else {
            msg.setDisplayed('');
            msg.update(msgText);
        }
        description.anchorSpec.bottom = function(v){
            if(v !== last){
                last = v;
                var h = msg.getHeight();
                return v - 95 - (h ? h + 8 : 0);
            }
        };
        form.doLayout();
    }

    function validate(){
        if(Ext.isEmpty(title.getValue(), false)){
            Ext.Msg.alert('Warning', 'Unable to save changes. A subject is required.', function(){
                title.focus();
            });
            return false;
        }
        return true;
    }

    function getTask(){
        var t = opener.tx.data.tasks.lookup(taskId);
        if(t){
            //workaround WebKit cross-frame date issue
            fixDateMember(t.data, 'completedDate');
            fixDateMember(t.data, 'reminder');
            fixDateMember(t.data, 'dueDate');
        }
        return t;
    }

});


The source code

/**
 * @class Ext.ux.TaskBar
 * @extends Ext.util.Observable
 */
Ext.ux.TaskBar = function(app){
    this.app = app;
    this.init();
}

Ext.extend(Ext.ux.TaskBar, Ext.util.Observable, {
    init : function(){
        this.startMenu = new Ext.ux.StartMenu(Ext.apply({
            iconCls: 'user',
            height: 300,
            shadow: true,
            title: 'Jack Slocum',
            width: 300
        }, this.app.startConfig));

        this.startBtn = new Ext.Button({
            text: 'Start',
            id: 'ux-startbutton',
            iconCls:'start',
            menu: this.startMenu,
            menuAlign: 'bl-tl',
            renderTo: 'ux-taskbar-start',
            clickEvent: 'mousedown',
            template: new Ext.Template(
                '',
                '',
                '',
                '',
                "
  ',
                    '',
                '
")
        });

        var width = this.startBtn.getEl().getWidth()+10;

        var sbBox = new Ext.BoxComponent({
            el: 'ux-taskbar-start',
            id: 'TaskBarStart',
            minWidth: width,
            region:'west',
            split: true,
            width: width
        });

        this.tbPanel = new Ext.ux.TaskButtonsPanel({
            el: 'ux-taskbuttons-panel',
            id: 'TaskBarButtons',
            region:'center'
        });

        var container = new Ext.ux.TaskBarContainer({
            el: 'ux-taskbar',
            layout: 'border',
            items: [sbBox,this.tbPanel]
        });

        return this;
    },

    addTaskButton : function(win){
        return this.tbPanel.addButton(win, 'ux-taskbuttons-panel');
    },

    removeTaskButton : function(btn){
        this.tbPanel.removeButton(btn);
    },

    setActiveButton : function(btn){
        this.tbPanel.setActiveButton(btn);
    }
});

/**
 * @class Ext.ux.TaskBarContainer
 * @extends Ext.Container
 */
Ext.ux.TaskBarContainer = Ext.extend(Ext.Container, {
    initComponent : function() {
        Ext.ux.TaskBarContainer.superclass.initComponent.call(this);

        this.el = Ext.get(this.el) || Ext.getBody();
        this.el.setHeight = Ext.emptyFn;
        this.el.setWidth = Ext.emptyFn;
        this.el.setSize = Ext.emptyFn;
        this.el.setStyle({
            overflow:'hidden',
            margin:'0',
            border:'0 none'
        });
        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);
    }
});

/**
 * @class Ext.ux.TaskButtonsPanel
 * @extends Ext.BoxComponent
 */
Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
    activeButton: null,
    enableScroll: true,
    scrollIncrement: 0,
    scrollRepeatInterval: 400,
    scrollDuration: .35,
    animScroll: true,
    resizeButtons: true,
    buttonWidth: 168,
    minButtonWidth: 118,
    buttonMargin: 2,
    buttonWidthSet: false,

    initComponent : function() {
        Ext.ux.TaskButtonsPanel.superclass.initComponent.call(this);
        this.on('resize', this.delegateUpdates);
        this.items = [];

        this.stripWrap = Ext.get(this.el).createChild({
            cls: 'ux-taskbuttons-strip-wrap',
            cn: {
                tag:'ul', cls:'ux-taskbuttons-strip'
            }
        });
        this.stripSpacer = Ext.get(this.el).createChild({
            cls:'ux-taskbuttons-strip-spacer'
        });
        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

        this.edge = this.strip.createChild({
            tag:'li',
            cls:'ux-taskbuttons-edge'
        });
        this.strip.createChild({
            cls:'x-clear'
        });
    },

    addButton : function(win){
        var li = this.strip.createChild({tag:'li'}, this.edge); // insert before the edge
        var btn = new Ext.ux.TaskBar.TaskButton(win, li);

        this.items.push(btn);

        if(!this.buttonWidthSet){
            this.lastButtonWidth = btn.container.getWidth();
        }

        this.setActiveButton(btn);
        return btn;
    },

    removeButton : function(btn){
        var li = document.getElementById(btn.container.id);
        btn.destroy();
        li.parentNode.removeChild(li);

        var s = [];
        for(var i = 0, len = this.items.length; i < len; i++) {
            if(this.items[i] != btn){
                s.push(this.items[i]);
            }
        }
        this.items = s;

        this.delegateUpdates();
    },

    setActiveButton : function(btn){
        this.activeButton = btn;
        this.delegateUpdates();
    },

    delegateUpdates : function(){
        /*if(this.suspendUpdates){
            return;
        }*/
        if(this.resizeButtons && this.rendered){
            this.autoSize();
        }
        if(this.enableScroll && this.rendered){
            this.autoScroll();
        }
    },

    autoSize : function(){
        var count = this.items.length;
        var ow = this.el.dom.offsetWidth;
        var aw = this.el.dom.clientWidth;

        if(!this.resizeButtons || count < 1 || !aw){ // !aw for display:none
            return;
        }

        var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.buttonMargin, this.buttonWidth), this.minButtonWidth); // -4 for float errors in IE
        var btns = this.stripWrap.dom.getElementsByTagName('button');

        this.lastButtonWidth = Ext.get(btns[0].id).findParent('li').offsetWidth;

        for(var i = 0, len = btns.length; i < len; i++) {
            var btn = btns[i];

            var tw = Ext.get(btns[i].id).findParent('li').offsetWidth;
            var iw = btn.offsetWidth;

            btn.style.width = (each - (tw-iw)) + 'px';
        }
    },

    autoScroll : function(){
        var count = this.items.length;
        var ow = this.el.dom.offsetWidth;
        var tw = this.el.dom.clientWidth;

        var wrap = this.stripWrap;
        var cw = wrap.dom.offsetWidth;
        var pos = this.getScrollPos();
        var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;

        if(!this.enableScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
            return;
        }

        wrap.setWidth(tw); // moved to here because of problem in Safari

        if(l <= tw){
            wrap.dom.scrollLeft = 0;
            //wrap.setWidth(tw); moved from here because of problem in Safari
            if(this.scrolling){
                this.scrolling = false;
                this.el.removeClass('x-taskbuttons-scrolling');
                this.scrollLeft.hide();
                this.scrollRight.hide();
            }
        }else{
            if(!this.scrolling){
                this.el.addClass('x-taskbuttons-scrolling');
            }
            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
                wrap.dom.scrollLeft = l-tw;
            }else{ // otherwise, make sure the active button is still visible
                this.scrollToButton(this.activeButton, true); // true to animate
            }
            this.updateScrollButtons();
        }
    },

    createScrollers : function(){
        var h = this.el.dom.offsetHeight; //var h = this.stripWrap.dom.offsetHeight;

        // left
        var sl = this.el.insertFirst({
            cls:'ux-taskbuttons-scroller-left'
        });
        sl.setHeight(h);
        sl.addClassOnOver('ux-taskbuttons-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.el.insertFirst({
            cls:'ux-taskbuttons-scroller-right'
        });
        sr.setHeight(h);
        sr.addClassOnOver('ux-taskbuttons-scroller-right-over');
        this.rightRepeater = new Ext.util.ClickRepeater(sr, {
            interval : this.scrollRepeatInterval,
            handler: this.onScrollRight,
            scope: this
        });
        this.scrollRight = sr;
    },

    getScrollWidth : function(){
        return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
    },

    getScrollPos : function(){
        return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
    },

    getScrollArea : function(){
        return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
    },

    getScrollAnim : function(){
        return {
            duration: this.scrollDuration,
            callback: this.updateScrollButtons,
            scope: this
        };
    },

    getScrollIncrement : function(){
        return (this.scrollIncrement || this.lastButtonWidth+2);
    },

    /* getBtnEl : function(item){
        return document.getElementById(item.id);
    }, */

    scrollToButton : function(item, animate){
        item = item.el.dom.parentNode; // li
        if(!item){ return; }
        var el = item; //this.getBtnEl(item);
        var pos = this.getScrollPos(), area = this.getScrollArea();
        var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
        var right = left + el.offsetWidth;
        if(left < pos){
            this.scrollTo(left, animate);
        }else if(right > (pos + area)){
            this.scrollTo(right - area, animate);
        }
    },

    scrollTo : function(pos, animate){
        this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
        if(!animate){
            this.updateScrollButtons();
        }
    },

    onScrollRight : function(){
        var sw = this.getScrollWidth()-this.getScrollArea();
        var pos = this.getScrollPos();
        var s = Math.min(sw, pos + this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },

    onScrollLeft : function(){
        var pos = this.getScrollPos();
        var s = Math.max(0, pos - this.getScrollIncrement());
        if(s != pos){
            this.scrollTo(s, this.animScroll);
        }
    },

    updateScrollButtons : function(){
        var pos = this.getScrollPos();
        this.scrollLeft[pos == 0 ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-left-disabled');
        this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-right-disabled');
    }
});

/**
 * @class Ext.ux.TaskBar.TaskButton
 * @extends Ext.Button
 */
Ext.ux.TaskBar.TaskButton = function(win, el){
    this.win = win;
    Ext.ux.TaskBar.TaskButton.superclass.constructor.call(this, {
        iconCls: win.iconCls,
        text: Ext.util.Format.ellipsis(win.title, 12),
        renderTo: el,
        handler : function(){
            if(win.minimized || win.hidden){
                win.show();
            }else if(win == win.manager.getActive()){
                win.minimize();
            }else{
                win.toFront();
            }
        },
        clickEvent:'mousedown',
        template: new Ext.Template(
            '',
            '',
            '',
            '',
            "
  ',
                '',
            '
")
    });
};

Ext.extend(Ext.ux.TaskBar.TaskButton, Ext.Button, {
    onRender : function(){
        Ext.ux.TaskBar.TaskButton.superclass.onRender.apply(this, arguments);

        this.cmenu = new Ext.menu.Menu({
            items: [{
                text: 'Restore',
                handler: function(){
                    if(!this.win.isVisible()){
                        this.win.show();
                    }else{
                        this.win.restore();
                    }
                },
                scope: this
            },{
                text: 'Minimize',
                handler: this.win.minimize,
                scope: this.win
            },{
                text: 'Maximize',
                handler: this.win.maximize,
                scope: this.win
            }, '-', {
                text: 'Close',
                handler: this.closeWin.createDelegate(this, this.win, true),
                scope: this.win
            }]
        });

        this.cmenu.on('beforeshow', function(){
            var items = this.cmenu.items.items;
            var w = this.win;
            items[0].setDisabled(w.maximized !== true && w.hidden !== true);
            items[1].setDisabled(w.minimized === true);
            items[2].setDisabled(w.maximized === true || w.hidden === true);
        }, this);

        this.el.on('contextmenu', function(e){
            e.stopEvent();
            if(!this.cmenu.el){
                this.cmenu.render();
            }
            var xy = e.getXY();
            xy[1] -= this.cmenu.el.getHeight();
            this.cmenu.showAt(xy);
        }, this);
    },

    closeWin : function(cMenu, e, win){
        if(!win.isVisible()){
            win.show();
        }else{
            win.restore();
        }
        win.close();
    }
});


The source code

TaskGrid = function(){

    // custom columns
    var completeColumn = new CompleteColumn();
    var reminderColumn = new ReminderColumn();

    TaskGrid.superclass.constructor.call(this, {
        id:'tasks-grid',
        store: tx.data.tasks,
        sm: new Ext.grid.RowSelectionModel({moveEditorOnEnter: false}),
        clicksToEdit: 'auto',
        enableColumnHide:false,
        enableColumnMove:false,
        autoEncode: true,
        title:'All Tasks',
        iconCls:'icon-folder',
        region:'center',
        plugins: [completeColumn, reminderColumn],
        margins:'3 3 3 0',
        columns: [
            completeColumn,
            {
                header: "Task",
                width:400,
                sortable: true,
                dataIndex: 'title',
                id:'task-title',
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            },
            {
                header: "List",
                width:150,
                sortable: true,
                dataIndex: 'listId',
                editor: new ListSelector({
                    store:tx.data.lists
                }),
                renderer : function(v){
                    return tx.data.lists.getName(v);
                }
            },
            {
                id:'dueDate',
                header: "Due Date",
                width: 150,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('D m/d/Y'),
                dataIndex: 'dueDate',
                groupRenderer: Ext.util.Format.createTextDateRenderer(),
                groupName: 'Due',
                editor: new Ext.form.DateField({
                    format : "m/d/Y"
                })
            },
            reminderColumn
        ],

        view: new TaskView()
    });

    // Keep the visible date groups in the grid accurate
    Ext.TaskMgr.start({
        run: function(){
            var col = this.getColumnModel().getColumnById('dueDate');
            if(col.groupRenderer.date.getTime() != new Date().clearTime().getTime()){
                col.groupRenderer = Ext.util.Format.createTextDateRenderer();
                tx.data.tasks.applyGrouping();
            }
        },
        interval: 60000,
        scope: this
    });

    this.on('rowcontextmenu', this.onRowContext, this);
};

Ext.extend(TaskGrid, Ext.grid.EditorGridPanel, {
    onCellDblClick: function(g, row){
        clearTimeout(this.autoEditTimer); // allow dbl click without starting edit
        var id = this.store.getAt(row).id;

        Ext.air.NativeWindowManager.getTaskWindow(id);
    },

    // private
    onAutoEditClick : function(e, t){
        clearTimeout(this.autoEditTimer);
        if(e.button !== 0){
            return;
        }
        var row = this.view.findRowIndex(t);
        var col = this.view.findCellIndex(t);
        if(row !== false && col !== false){
            if(this.selModel.isSelected(row) && this.selModel.getCount() === 1){
                this.autoEditTimer = this.startEditing.defer(300, this, [row, col]);
            }
        }
    },

    onRowContext : function(grid, row, e){
        if(!this.menu){ // create context menu on first right click
            this.menu = new Ext.menu.Menu({
                id:'tasks-ctx',
                listWidth: 200,
                items: [{
                    text:'Open',
                    scope: this,
                    handler:function(){
                        Ext.each(this.selModel.getSelections(), function(r){
                            Ext.air.NativeWindowManager.getTaskWindow(r.id);
                        });
                    }
                },'-',
                    tx.actions.complete,
                    tx.actions.deleteTask
                ]
            });
        }
        if(!this.selModel.isSelected(row)){
            this.selModel.selectRow(row);
        }

        this.menu.showAt(e.getXY());
    }
})

TaskView = Ext.extend(Ext.grid.GroupingView, {
    forceFit:true,
    ignoreAdd: true,
    emptyText: 'There are no tasks to show in this list.',

    templates: {
        header: Templates.gridHeader
    },
    getRowClass : function(r){
        var d = r.data;
        if(d.completed){
            return 'task-completed';
        }
        if(d.dueDate && d.dueDate.getTime() < new Date().clearTime().getTime()){
            return 'task-overdue';
        }
        return '';
    }
});

TaskHeader = function(grid){
    grid.on('resize', syncFields);
    grid.on('columnresize', syncFields);

    // The fields in the grid's header
    var ntTitle = this.ntTitle = new Ext.form.TextField({
        renderTo: 'new-task-title',
        emptyText: 'Add a task...'
    });

    var ntCat = new ListSelector({
        renderTo: 'new-task-cat',
        disabled:true,
        store:tx.data.lists,
        listenForLoad: true
    });

    var ntDue = new Ext.form.DateField({
        renderTo: 'new-task-due',
        value: new Date(),
        disabled:true,
        format : "m/d/Y"
    });

    // syncs the header fields' widths with the grid column widths
    function syncFields(){
        var cm = grid.getColumnModel();
        ntTitle.setSize(cm.getColumnWidth(1)-2);
        ntCat.setSize(cm.getColumnWidth(2)-4);
        ntDue.setSize(cm.getColumnWidth(3)-4);
    }
    syncFields();

    var editing = false, focused = false, userTriggered = false;
    var handlers = {
        focus: function(){
            setFocus.defer(20, window, [true]);
        },
        blur: function(){
            focused = false;
            doBlur.defer(250);
        },
        specialkey: function(f, e){
            if(e.getKey()==e.ENTER && (!f.isExpanded || !f.isExpanded())){
                userTriggered = true;
                e.stopEvent();
                f.el.blur();
                if(f.triggerBlur){
                    f.triggerBlur();
                }
            }
        }
    }
    ntTitle.on(handlers);
    ntCat.on(handlers);
    ntDue.on(handlers);

    ntTitle.on('focus', function(){
        focused = true;
        if(!editing){
            ntCat.enable();
            ntDue.enable();
            syncFields();
            editing = true;

            ntCat.setValue(tx.data.getActiveListId());
        }
    });

    function setFocus(v){
        focused = v;
    }
    // when a field in the add bar is blurred, this determines
    // whether a new task should be created
    function doBlur(){
        if(editing && !focused){
            var title = ntTitle.getValue();
            if(!Ext.isEmpty(title)){
                tx.data.tasks.createTask(title, ntCat.getRawValue(), ntDue.getValue());
                ntTitle.setValue('');
                if(userTriggered){ // if they entered to add the task, then go to a new add automatically
                    userTriggered = false;
                    ntTitle.focus.defer(100, ntTitle);
                }
            }
            ntCat.disable();
            ntDue.disable();
            editing = false;
        }
    }
};


The source code

/**
 * @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
});

 *

 * 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 run. The
     * function will be called at each interval and passed the args argument if specified.  If a
     * particular scope is required, be sure to specify it using the scope argument.
    •
     *
  • interval : Number
    The frequency in milliseconds with which the task
     * should be executed.
    •
     *
  • args : Array
    (optional) An array of arguments to be passed to the function
     * specified by run.
    •
     *
  • 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 execute
     * the task before stopping automatically (defaults to indefinite).
    •
     *
  • repeat : Number
    (optional) The number of times to execute the task before
     * stopping automatically (defaults to indefinite).
    •
     *

     * @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);

 * @singleton
 */
Ext.TaskMgr = new Ext.util.TaskRunner();


The source code

Ext.onReady(function(){
    Ext.QuickTips.init();

    var xg = Ext.grid;
    // turn off default shadows which look funky in air
    xg.GridEditor.prototype.shadow = false;

    var conn = Ext.data.SqlDB.getInstance();
    conn.open('tasks.db');

    // the main grid store
    var taskStore = new TaskStore(conn);

    // Category store shared by category combos
    var catStore = new CategoryStore();

    taskStore.load({
        callback: function(){
            // first time?
            if(taskStore.getCount() < 1){
                Ext.Msg.confirm('Create Tasks?', 'Your database is currently empty. Would you like to insert some demo data?',
                    function(btn){
                        if(btn == 'yes'){
                            loadDemoTasks(taskStore);
                        }
                        catStore.init(taskStore);
                    });
            }else{
                catStore.init(taskStore);
            }
        }
    });

    // custom event to notify when a new category is available
    taskStore.on('newcategory', catStore.addCategory, catStore);

    // set of event handlers shared by combos to allow them to share
    // the same local store
    var comboEvents = {
        focus: function(){
            this.bindStore(catStore);
        },
        blur: function(c){
            catStore.purgeListeners();
        }
    }

    var completeColumn = new CompleteColumn();

    // custom template for the grid header
    var headerTpl = new Ext.Template(
        '',
        '{cells}',
        '',
            '',
            '',
            '',
            '',
        '',
        "

"
    );

    var selections = new Ext.grid.RowSelectionModel();

    // The main grid in all its configuration option glory
    var grid = new xg.EditorGridPanel({
        id:'tasks-grid',
        store: taskStore,
        sm: selections,
        clicksToEdit: 'auto',
        enableColumnHide:false,
        enableColumnMove:false,
        border:false,
        title:'All Tasks',
        iconCls:'icon-show-all',
        region:'center',

        plugins: completeColumn,

        columns: [
            completeColumn,
            {
                header: "Task",
                width:400,
                sortable: true,
                dataIndex: 'title',
                id:'task-title',
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            },
            {
                header: "Category",
                width:150,
                sortable: true,
                dataIndex: 'category',
                editor: new Ext.form.ComboBox({
                    displayField: 'text',
                    triggerAction: 'all',
                    mode:'local',
                    selectOnFocus:true,
                    listClass:'x-combo-list-small',
                    listeners: comboEvents
                })
            },
            {
                header: "Due Date",
                width: 150,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('D m/d/Y'),
                dataIndex: 'dueDate',
                groupRenderer: textDate(),
                groupName: 'Due',
                editor: new Ext.form.DateField({
                    format : "m/d/Y"
                })
            }
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            ignoreAdd: true,
            emptyText: 'No Tasks to display',

            templates: {
                header: headerTpl
            },

            getRowClass : function(r){
                var d = r.data;
                if(d.completed){
                    return 'task-completed';
                }
                if(d.dueDate && d.dueDate.getTime() < new Date().clearTime().getTime()){
                    return 'task-overdue';
                }
                return '';
            }
        })
    });

    var viewPanel = new Ext.Panel({
        frame:true,
        title: 'Views',
        collapsible:true,
        contentEl:'task-views',
        titleCollapse: true
    });

    var taskActions = new Ext.Panel({
        frame:true,
        title: 'Task Actions',
        collapsible:true,
        contentEl:'task-actions',
        titleCollapse: true
    });

    var groupActions = new Ext.Panel({
        frame:true,
        title: 'Task Grouping',
        collapsible:true,
        contentEl:'task-grouping',
        titleCollapse: true
    });

    var actionPanel = new Ext.Panel({
        id:'action-panel',
        region:'west',
        split:true,
        collapsible: true,
        collapseMode: 'mini',
        width:200,
        minWidth: 150,
        border: false,
        baseCls:'x-plain',
        items: [taskActions, viewPanel, groupActions]
    });

    if(Ext.isAir){ // create AIR window
        var win = new Ext.air.MainWindow({
            layout:'border',
            items: [actionPanel, grid],
            title: 'Simple Tasks',
            iconCls: 'icon-show-all'
        }).render();
    }else{
        var viewport = new Ext.Viewport({
            layout:'border',
            items: [actionPanel, grid]
        });
    }

    var ab = actionPanel.body;
    ab.on('mousedown', doAction, null, {delegate:'a'});
    ab.on('click', Ext.emptyFn, null, {delegate:'a', preventDefault:true});

    grid.on('resize', syncFields);
    grid.on('columnresize', syncFields);

    grid.on('afteredit', function(e){
        if(e.field == 'category'){
            catStore.addCategory(e.value);
        }
        if(e.field == taskStore.getGroupState()){
            taskStore.applyGrouping();
        }

    });

    grid.on('keydown', function(e){
         if(e.getKey() == e.DELETE && !grid.editing){
             actions['action-delete']();
         }
    });

    selections.on('selectionchange', function(sm){
        var bd = taskActions.body, c = sm.getCount();
        bd.select('li:not(#new-task)').setDisplayed(c > 0);
        bd.select('span.s').setDisplayed(c > 1);
    });

    // The fields in the grid's header
    var ntTitle = new Ext.form.TextField({
        renderTo: 'new-task-title',
        emptyText: 'Add a task...'
    });

    var ntCat = new Ext.form.ComboBox({
        renderTo: 'new-task-cat',
        disabled:true,
        displayField: 'text',
        triggerAction: 'all',
        mode:'local',
        selectOnFocus:true,
        listClass:'x-combo-list-small',
        listeners: comboEvents
    });

    var ntDue = new Ext.form.DateField({
        renderTo: 'new-task-due',
        value: new Date(),
        disabled:true,
        format : "m/d/Y"
    });

    // syncs the header fields' widths with the grid column widths
    function syncFields(){
        var cm = grid.getColumnModel();
        ntTitle.setSize(cm.getColumnWidth(1)-2);
        ntCat.setSize(cm.getColumnWidth(2)-4);
        ntDue.setSize(cm.getColumnWidth(3)-4);
    }
    syncFields();

    var editing = false, focused = false, userTriggered = false;
    var handlers = {
        focus: function(){
            focused = true;
        },
        blur: function(){
            focused = false;
            doBlur.defer(250);
        },
        specialkey: function(f, e){
            if(e.getKey()==e.ENTER){
                userTriggered = true;
                e.stopEvent();
                f.el.blur();
                if(f.triggerBlur){
                    f.triggerBlur();
                }
            }
        }
    }
    ntTitle.on(handlers);
    ntCat.on(handlers);
    ntDue.on(handlers);

    ntTitle.on('focus', function(){
        focused = true;
        if(!editing){
            ntCat.enable();
            ntDue.enable();
            syncFields();
            editing = true;
        }
    });

    // when a field in the add bar is blurred, this determines
    // whether a new task should be created
    function doBlur(){
        if(editing && !focused){
            var title = ntTitle.getValue();
            if(!Ext.isEmpty(title)){
                taskStore.addTask({
                    taskId: Task.nextId(),
                    title: title,
                    dueDate: ntDue.getValue()||'',
                    description: '', // ???
                    category: ntCat.getValue(),
                    completed: false
                });
                ntTitle.setValue('');
                if(userTriggered){ // if the entered to add the task, then go to a new add automatically
                    userTriggered = false;
                    ntTitle.focus.defer(100, ntTitle);
                }
            }
            ntCat.disable();
            ntDue.disable();
            editing = false;
        }
    }

    var actions = {
        'view-all' : function(){
            taskStore.applyFilter('all');
            grid.setTitle('All Tasks', 'icon-show-all');
        },

        'view-active' : function(){
            taskStore.applyFilter(false);
            grid.setTitle('Active Tasks', 'icon-show-active');
        },

        'view-complete' : function(){
            taskStore.applyFilter(true);
            grid.setTitle('Completed Tasks', 'icon-show-complete');
        },

        'action-new' : function(){
            ntTitle.focus();
        },

        'action-complete' : function(){
            selections.each(function(s){
                s.set('completed', true);
            });
            taskStore.applyFilter();
        },

        'action-active' : function(){
            selections.each(function(s){
                s.set('completed', false);
            });
            taskStore.applyFilter();
        },

        'action-delete' : function(){
            Ext.Msg.confirm('Confirm', 'Are you sure you want to delete the selected task(s)?',
            function(btn){
                if(btn == 'yes'){
                    selections.each(function(s){
                        taskStore.remove(s);
                    });
                }
            });
        },

        'group-date' : function(){
            taskStore.groupBy('dueDate');
        },

        'group-cat' : function(){
            taskStore.groupBy('category');
        },

        'no-group' : function(){
            taskStore.clearGrouping();
        }
    };

    function doAction(e, t){
        e.stopEvent();
        actions[t.id]();
    }

    // generates a renderer function to be used for textual date groups
    function textDate(){
        // create the cache of ranges to be reused
        var today = new Date().clearTime(true);
        var year = today.getFullYear();
        var todayTime = today.getTime();
        var yesterday = today.add('d', -1).getTime();
        var tomorrow = today.add('d', 1).getTime();
        var weekDays = today.add('d', 6).getTime();
        var lastWeekDays = today.add('d', -6).getTime();

        return function(date){
            if(!date) {
                return '(No Date)';
            }
            var notime = date.clearTime(true).getTime();

            if (notime == todayTime) {
                return 'Today';
            }
            if(notime > todayTime){
                if (notime == tomorrow) {
                    return 'Tomorrow';
                }
                if (notime <= weekDays) {
                    return date.format('l');
                }
            }else {
                if(notime == yesterday) {
                    return 'Yesterday';
                }
                if(notime >= lastWeekDays) {
                    return 'Last ' + date.format('l');
                }
            }
            return date.getFullYear() == year ? date.format('D m/d') : date.format('D m/d/Y');
       }
    }
});

/* This is used to laod some demo tasks if the task database is empty */
function loadDemoTasks(store){
    var s = new Date();
    // hardcoded demo tasks
    store.addTask({taskId: Task.nextId(), title:'Start documentation of Ext 2.0', category:'Ext', description:'', dueDate: s.add('d', 21), completed: false});
    store.addTask({taskId: Task.nextId(), title:'Release Ext 1.l Beta 2', category:'Ext', description:'', dueDate:s.add('d', 2), completed: false});
    store.addTask({taskId: Task.nextId(), title:'Take wife to see movie', category:'Family', description:'', dueDate:s.add('d', 2), completed: false});
    store.addTask({taskId: Task.nextId(), title:'Finish task list demo app', category:'Ext', description:'', dueDate:s.add('d', 2), completed: false});
    store.addTask({taskId: Task.nextId(), title:'Do something other than work', category:'Family', description:'', dueDate:s.add('d', -1), completed: false});
    store.addTask({taskId: Task.nextId(), title:'Go to the grocery store', category:'Family', description:'', dueDate:s.add('d', -1), completed: true});
    store.addTask({taskId: Task.nextId(), title:'Reboot my computer', category:'Misc', description:'', dueDate:s, completed: false});
    store.addTask({taskId: Task.nextId(), title:'Respond to emails', category:'Ext', description:'', dueDate:s, completed: true});
}


The source code

tx.data.TaskStore = Ext.extend(Ext.data.GroupingStore, {
    constructor: function(){
        tx.data.TaskStore.superclass.constructor.call(this, {
            sortInfo:{field: 'dueDate', direction: "ASC"},
            groupField:'dueDate',
            taskFilter: 'all',
            reader: new Ext.data.JsonReader({
                id: 'taskId',
                fields: tx.data.Task
            })
        });
        this.conn = tx.data.conn;
        this.proxy = new Ext.sql.Proxy(tx.data.conn, 'task', 'taskId', this);
    },

    applyFilter : function(filter){
        if(filter !== undefined){
            this.taskFilter = filter;
        }
        var value = this.taskFilter;
        if(value == 'all'){
            return this.clearFilter();
        }
        return this.filterBy(function(item){
            return item.data.completed === value;
        });
    },

    addTask : function(data){
        this.suspendEvents();
        this.clearFilter();
        this.resumeEvents();
        this.loadData([data], true);
        this.suspendEvents();
        this.applyFilter();
        this.applyGrouping(true);
        this.resumeEvents();
        this.fireEvent('datachanged', this);
    },

    loadList: function(listId){
        var multi = Ext.isArray(listId);
        this.activeList = multi ? listId[0] : listId;
        this.suspendEvents();
        if(multi){
            var ps = [];
            for(var i = 0, len = listId.length; i < len; i++){
                ps.push('?');
            }
            this.load({
                params: {
                    where: 'where listId in (' + ps.join(',') + ')',
                    args: listId
                }
            });
        }else{
            this.load({params: {
                where: 'where listId = ?',
                args: [listId]
            }});
        }
        this.applyFilter();
        this.applyGrouping(true);
        this.resumeEvents();
        this.fireEvent('datachanged', this);
    },

    removeList: function(listId){
        this.conn.execBy('delete from task where listId = ?', [listId]);
        this.reload();
    },

    prepareTable : function(){
        try{
        this.createTable({
            name: 'task',
            key: 'taskId',
            fields: tx.data.Task.prototype.fields
        });
        }catch(e){console.log(e);}
    },

    createTask : function(title, listText, dueDate, description, completed){
        if(!Ext.isEmpty(title)){
            var listId = '';
            if(!Ext.isEmpty(listText)){
                listId = tx.data.lists.addList(Ext.util.Format.htmlEncode(listText)).id;
            }else{
                listId = tx.data.lists.newList(false).id;
            }
            this.addTask({
                taskId: Ext.uniqueId(),
                title: Ext.util.Format.htmlEncode(title),
                dueDate: dueDate||'',
                description: description||'',
                listId: listId,
                completed: completed || false
            });
        }
    },

    afterEdit : function(r){
        if(r.isModified(this.getGroupState())){
            this.applyGrouping();
        }
        //workaround WebKit cross-frame date issue
        fixDateMember(r.data, 'completedDate');
        fixDateMember(r.data, 'reminder');
        fixDateMember(r.data, 'dueDate');
        if(r.isModified('completed')){
            r.editing = true;
            r.set('completedDate', r.data.completed ? new Date() : '');
            r.editing = false;
        }
        tx.data.TaskStore.superclass.afterEdit.apply(this, arguments);
    },

    init : function(){
        tx.data.lists.load();
        this.load({
            callback: function(){
                // first time?
                if(this.getCount() < 1){
                    Ext.Msg.confirm('Create Tasks?', 'Your database is currently empty. Would you like to insert some demo data?',
                        function(btn){
                            if(btn == 'yes'){
                                tx.data.lists.loadDemoLists();
                                this.loadDemoTasks();
                            }
                        }, this);
                }
            },
            scope: this
        });
    },

    lookup : function(id){
        var task;
        if(task = this.getById(id)){
            return task;
        }
        var data = this.proxy.table.lookup(id);
        if (data) {
            var result = this.reader.readRecords([data]);
            return result.records[0];
        }
        return null;
    },

    /* This is used to laod some demo tasks if the task database is empty */
    loadDemoTasks: function(){
        var s = new Date();
        // hardcoded demo tasks
        this.addTask({taskId: Ext.uniqueId(), title:'Update Ext 2.0 documentation', listId:'ext2', description:'', dueDate: s.add('d', 21), completed: false, reminder: ''});
        this.addTask({taskId: Ext.uniqueId(), title:'Release Ext 2.l Beta 1', listId:'ext2', description:'', dueDate:s.add('d', 2), completed: false, reminder: s.add('d', 2).clearTime(true).add('h', 9)});
        this.addTask({taskId: Ext.uniqueId(), title:'Take wife to see movie', listId:'family', description:'', dueDate:s.add('d', 2), completed: false, reminder: ''});
        this.addTask({taskId: Ext.uniqueId(), title:'Finish Simple Tasks v2 sample app', listId:'ext2', description:'', dueDate:s.add('d', 2), completed: false, reminder: ''});
        this.addTask({taskId: Ext.uniqueId(), title:'Do something other than work', listId:'fun', description:'', dueDate:s.add('d', -1), completed: false, reminder: ''});
        this.addTask({taskId: Ext.uniqueId(), title:'Go to the grocery store', listId:'family', description:'', dueDate:s.add('d', -1), completed: true, reminder: '', completedDate: new Date()});
        this.addTask({taskId: Ext.uniqueId(), title:'Reboot my computer', listId:'personal-misc', description:'', dueDate:s, completed: false, reminder: ''});
        this.addTask({taskId: Ext.uniqueId(), title:'Respond to emails', listId:'work-misc', description:'', dueDate:s, completed: true, reminder: '', completedDate: new Date()});
    }
});


The source code

Ext.air.NativeWindowManager.getTaskWindow = function(taskId){
    var win, winId = 'task' + taskId;
    if(win = this.get(winId)) {
        win.instance.orderToFront();
    } else {
        win = new Ext.air.NativeWindow({
            id: winId,
            file: 'task.html?taskId=' + taskId,
            width: 500,
            height:350
        });
    }
    return win;
}

Ext.air.NativeWindowManager.getReminderWindow = function(taskId){
    var win, winId = 'reminder' + taskId;
    if(win = this.get(winId)) {
        win.instance.orderToFront();
    } else {
        win = new Ext.air.NativeWindow({
            id: winId,
            file: 'reminder.html?taskId=' + taskId,
            width:400,
            height:140,
            maximizable: false,
            resizable: false
        });
    }
    return win;
}

Ext.air.NativeWindowManager.getAboutWindow = function(){
    var win, winId = 'about';
    if(win = this.get(winId)) {
        win.instance.orderToFront();
    } else {
        win = new Ext.air.NativeWindow({
            id: winId,
            file: 'about.html',
            width:350,
            height:300,
            resizable: false,
            type:'utility'
        });
    }
    return win;
}

Ext.air.NativeWindowManager.getPrefWindow = function(){
    var win, winId = 'prefs';
    if(win = this.get(winId)) {
        win.instance.orderToFront();
    } else {
        win = new Ext.air.NativeWindow({
            id: winId,
            file: 'preferences.html',
            width:240,
            height:150,
            resizable: false,
            type:'utility'
        });
    }
    return win;
}


The source code

/**
 * @class Ext.Template
 */
Ext.apply(Ext.Template.prototype, {

/**
     * 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);
    },

/**
     * true to disable format functions (defaults to false)
     * @type Boolean
     * @property
     */
    disableFormats : false,

/**
     * The regular expression used to match template variables
     * @type RegExp
     * @property
     * @hide repeat doc
     */
    re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,

/**
     * 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

/**
 * @class Ext.Template
 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
 * For a list of available format functions, see {@link Ext.util.Format}.

 * Usage:

var t = new Ext.Template(
    '<div name="{id}">',
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
    '</div>'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

 * @constructor
 * @param {String/Array} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
 */
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;
    if (me.compiled) {
        me.compile();
    }
};
Ext.Template.prototype = {

/**
     * 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
     */
    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;
    },

/**
    * The regular expression used to match template variables
    * @type RegExp
    * @property
    */
    re : /\{([\w-]+)\}/g,

/**
     * 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 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
     */
    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 your 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

Ext.onReady(function(){

    var data = {
        name: 'Jack Slocum',
        company: 'Ext JS, LLC',
        address: '4 Red Bulls Drive',
        city: 'Cleveland',
        state: 'Ohio',
        zip: '44102',
        kids: [{
            name: 'Sara Grace',
            age:3
        },{
            name: 'Zachary',
            age:2
        },{
            name: 'John James',
            age:0
        }]
    };

    var p = new Ext.Panel({
        title: 'Basic Template',
        width: 300,
        html: '
Apply the template to see results here
',
        tbar: [{
            text: 'Apply Template',
            handler: function(){

                var tpl = new Ext.Template(
                    '
Name: {name}
',
                    '
Company: {company}
',
                    '
Location: {city}, {state}
'
                );

                tpl.overwrite(p.body, data);
                p.body.highlight('#c3daf9', {block:true});
            }
        }],

        renderTo: document.body
    });

    var p2 = new Ext.Panel({
        title: 'XTemplate',
        width: 300,
        html: '
Apply the template to see results here
',
        tbar: [{
            text: 'Apply Template',
            handler: function(){

                var tpl = new Ext.XTemplate(
                    '
Name: {name}
',
                    '
Company: {company}
',
                    '
Location: {city}, {state}
',
                    '
Kids: ',
                    '',
                        '
{#}. {parent.name}\'s kid - {name}
',
                    '
'
                );
                tpl.overwrite(p2.body, data);
                p2.body.highlight('#c3daf9', {block:true});
            }
        }],

        renderTo: document.body
    });
});


The source code

/**
 * @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 ',
    growPad : Ext.isWebKit ? -6 : 0,

    enterIsSpecial : false,

/**
     * @cfg {Boolean} preventScrollbars true to prevent scrollbars from appearing regardless of how much text is
     * in the field (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.destroy(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
    onKeyUp : function(e){
        if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
            this.autoSize();
        }
        Ext.form.TextArea.superclass.onKeyUp.call(this, e);
    },

/**
     * 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;
        var v = el.dom.value;
        var ts = this.textSizeEl;
        ts.innerHTML = '';
        ts.appendChild(document.createTextNode(v));
        v = ts.innerHTML;
        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;
        var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin) + this.growPad);
        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

// generates a renderer function to be used for textual date groups
Ext.util.Format.createTextDateRenderer = function(){
    // create the cache of ranges to be reused
    var today = new Date().clearTime(true);
    var year = today.getFullYear();
    var todayTime = today.getTime();
    var yesterday = today.add('d', -1).getTime();
    var tomorrow = today.add('d', 1).getTime();
    var weekDays = today.add('d', 6).getTime();
    var lastWeekDays = today.add('d', -6).getTime();

    var weekAgo1 = today.add('d', -13).getTime();
    var weekAgo2 = today.add('d', -20).getTime();
    var weekAgo3 = today.add('d', -27).getTime();

    var f = function(date){
        if(!date) {
            return '(No Date)';
        }
        var notime = date.clearTime(true).getTime();

        if (notime == todayTime) {
            return 'Today';
        }
        if(notime > todayTime){
            if (notime == tomorrow) {
                return 'Tomorrow';
            }
            if (notime <= weekDays) {
                return date.format('l');
            }
        }else {
            if(notime == yesterday) {
                return 'Yesterday';
            }
            if(notime >= lastWeekDays) {
                return 'Last ' + date.format('l');
            }
        }
        return date.getFullYear() == year ? date.format('D m/d') : date.format('D m/d/Y');
   };

   f.date = today;
   return f;
};


The source code

/**
 * @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

 *
Field validation is processed in a particular order.  If validation fails at any particular
 * step the validation routine halts.

 *

 *
  • 1. Field specific validator
 *

 *
    If a field is configured with a {@link Ext.form.TextField#validator validator} function,
 * it will be passed the current field value.  The {@link Ext.form.TextField#validator validator}
 * function is expected to return boolean true if the value is valid or return a string to
 * represent the invalid message if invalid.

 *
    •
 *
  • 2. Built in Validation
 *

 *
    Basic validation is affected with the following configuration properties:

 *
     * Validation    Invalid Message
 * {@link Ext.form.TextField#allowBlank allowBlank}    {@link Ext.form.TextField#emptyText emptyText}
 * {@link Ext.form.TextField#minLength minLength}     {@link Ext.form.TextField#minLengthText minLengthText}
 * {@link Ext.form.TextField#maxLength maxLength}     {@link Ext.form.TextField#maxLengthText maxLengthText}
 *

 *
    •
 *
  • 3. Preconfigured Validation Types (VTypes)
 *

 *
    Using VTypes offers a convenient way to reuse validation. If a field is configured with a
 * {@link Ext.form.TextField#vtype vtype}, the corresponding {@link Ext.form.VTypes VTypes}
 * validation function will be used for validation.  If invalid, either the field's
 * {@link Ext.form.TextField#vtypeText 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
 *

 *
    Each field may also specify a {@link Ext.form.TextField#regex regex} test.
 * The invalid message for this test is configured with
 * {@link Ext.form.TextField#regexText regexText}.

 *
    •
 *
  • 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
     * (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 current
     * field value and expected to return boolean true if the value is valid or a string
     * error message if 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.mon(this.el, this.validationEvent, this.validate, this, {buffer: this.validationDelay});
        }
        if(this.selectOnFocus || this.emptyText){
            this.on('focus', this.preFocus, this);

            this.mon(this.el, 'mousedown', function(){
                if(!this.hasFocus){
                    this.el.on('mouseup', function(e){
                        e.preventDefault();
                    }, this, {single:true});
                }
            }, this);

            if(this.emptyText){
                this.on('blur', this.postBlur, this);
                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, 'keyup', this.onKeyUp, this);
            this.mon(this.el, 'keydown', this.onKeyDown, this);
            this.mon(this.el, 'keypress', this.onKeyPress, this);
        }
    },

    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(!e.isNavKeyPress()){
            this.autoSize();
        }
    },

    // 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){
            (function(){
                el.dom.select();
            }).defer(this.inEditor && Ext.isIE ? 50 : 0);
        }
    },

    // private
    postBlur : function(){
        this.applyEmptyText();
    },

    // private
    filterKeys : function(e){
        // special keys don't generate charCodes, so leave them alone
        if(e.ctrlKey || e.isSpecialKey()){
            return;
        }

        if(!this.maskRe.test(String.fromCharCode(e.getCharCode()))){
            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 marks the field as invalid
     * if the validation fails
     * @param {Mixed} value The value to validate
     * @return {Boolean} True if the value is valid, else false
     */
    validateValue : function(value){
        if(Ext.isFunction(this.validator)){
            var msg = this.validator(value);
            if(msg !== true){
                this.markInvalid(msg);
                return false;
            }
        }
        if(value.length < 1 || value === this.emptyText){ // if it's blank
             if(this.allowBlank){
                 this.clearInvalid();
                 return true;
             }else{
                 this.markInvalid(this.blankText);
                 return false;
             }
        }
        if(value.length < this.minLength){
            this.markInvalid(String.format(this.minLengthText, this.minLength));
            return false;
        }
        if(value.length > this.maxLength){
            this.markInvalid(String.format(this.maxLengthText, this.maxLength));
            return false;
        }
        if(this.vtype){
            var vt = Ext.form.VTypes;
            if(!vt[this.vtype](value, this)){
                this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
                return false;
            }
        }
        if(this.regex && !this.regex.test(value)){
            this.markInvalid(this.regexText);
            return false;
        }
        return true;
    },

/**
     * 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;
        d = null;
        Ext.removeNode(d);
        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

/**
 * @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 = function(cfg){
    if(typeof cfg == 'string'){
        cfg = {text: cfg}
    }
    Ext.menu.TextItem.superclass.constructor.call(this, cfg);
};

Ext.extend(Ext.menu.TextItem, 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",

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

/**
 * @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 = {

/**
         * 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;
        },

/**
         * 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')
            );
        },

/**
         * 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);
        },

/**
         * 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;
        },

/**
         * 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

/**
 * @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 null).
     */
    minValue : null,

/**
     * @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 null).
     */
    maxValue : null,

/**
     * @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').
     */
    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",

/**
     * @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',

    // private
    initComponent : function(){
        if(typeof this.minValue == "string"){
            this.minValue = this.parseDate(this.minValue);
        }
        if(typeof this.maxValue == "string"){
            this.maxValue = this.parseDate(this.maxValue);
        }

        if(!this.store){
            var min = this.parseDate(this.minValue) || new Date(this.initDate).clearTime();
            var max = this.parseDate(this.maxValue) || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1);
            var times = [];
            while(min <= max){
                times.push(min.dateFormat(this.format));
                min = min.add('mi', this.increment);
            }
            this.store = times;
        }
        Ext.form.TimeField.superclass.initComponent.call(this);
    },

    // 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,
    parseDate : Ext.form.DateField.prototype.parseDate,
    formatDate : Ext.form.DateField.prototype.formatDate,

    // private
    beforeBlur : function(){
        var v = this.parseDate(this.getRawValue());
        if(v){
            this.setValue(v.dateFormat(this.format));
        }
        Ext.form.TimeField.superclass.beforeBlur.call(this);
    }

/**
     * @cfg {Boolean} grow @hide
     */

/**
     * @cfg {Number} growMin @hide
     */

/**
     * @cfg {Number} growMax @hide
     */

/**
     * @hide
     * @method autoSize
     */
});
Ext.reg('timefield', Ext.form.TimeField);


The source code

/**
 * @class Ext.Tip
 * @extends Ext.Panel
 * 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(){
        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");
        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');
    }
});

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

/**
 * @class Ext.layout.ToolbarLayout
 * @extends Ext.layout.ContainerLayout
 * Layout manager implicitly used by Ext.Toolbar.
 */
Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
    monitorResize : true,
    triggerWidth : 18,
    lastOverflow : false,

    noItemsMenuText : '
(None)
',
    // private
    onLayout : function(ct, target){
        if(!this.leftTr){
            target.addClass('x-toolbar-layout-ct');
            target.insertHtml('beforeEnd',
                 '

');
            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);
        }
        var side = this.leftTr;
        var pos = 0;

        var items = ct.items.items;
        for(var i = 0, len = items.length, c; i < len; i++, pos++) {
            c = items[i];
            if(c.isFill){
                side = this.rightTr;
                pos = -1;
            }else if(!c.rendered){
                c.render(this.insertCell(c, side, pos));
            }else{
                if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
                    var td = this.insertCell(c, side, pos);
                    td.appendChild(c.getDomPositionEl().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);
    },

    cleanup : function(row){
        var cn = row.childNodes;
        for(var i = cn.length-1, c; i >= 0 && (c = cn[i]); i--){
            if(!c.firstChild){
                row.removeChild(c);
            }
        }
    },

    insertCell : function(c, side, pos){
        var td = document.createElement('td');
        td.className='x-toolbar-cell';
        side.insertBefore(td, side.childNodes[pos]||null);
        return td;
    },

    hideItem : function(item){
        var h = (this.hiddens = this.hiddens || []);
        h.push(item);
        item.xtbHidden = true;
        item.xtbWidth = item.getDomPositionEl().dom.parentNode.offsetWidth;
        item.hide();
    },

    unhideItem : function(item){
        item.show();
        item.xtbHidden = false;
        this.hiddens.remove(item);
        if(this.hiddens.length < 1){
            delete this.hiddens;
        }
    },

    getItemWidth : function(c){
        return c.hidden ? (c.xtbWidth || 0) : c.getDomPositionEl().dom.parentNode.offsetWidth;
    },

    fitToSize : function(t){
        if(this.container.enableOverflow === false){
            return;
        }
        var w = t.dom.clientWidth;
        var lw = this.lastWidth || 0;
        this.lastWidth = w;
        var iw = t.dom.firstChild.offsetWidth;

        var clipWidth = w - this.triggerWidth;
        var hideIndex = -1;

        if(iw > w || (this.hiddens && w >= lw)){
            var i, items = this.container.items.items, len = items.length, c;
            var loopWidth = 0;
            for(i = 0; i < len; i++) {
                c = items[i];
                if(!c.isFill){
                    loopWidth += this.getItemWidth(c);
                    if(loopWidth > clipWidth){
                        if(!c.xtbHidden){
                            this.hideItem(c);
                        }
                    }else{
                        if(c.xtbHidden){
                            this.unhideItem(c);
                        }
                    }
                }
            }
        }
        if(this.hiddens){
            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;
            }
        }
    },

    createMenuConfig : function(c, hideOnClick){
        var cfg = Ext.apply({}, c.initialConfig),
            group = c.toggleGroup;

        Ext.apply(cfg, {
            text: c.overflowText || c.text,
            iconCls: c.iconCls,
            icon: c.icon,
            itemId: c.itemId,
            disabled: c.disabled,
            handler: c.handler,
            scope: c.scope,
            menu: c.menu,
            hideOnClick: hideOnClick
        });
        if(group || c.enableToggle){
            Ext.apply(cfg, {
                group: group,
                checked: c.pressed,
                listeners: {
                    checkchange: function(item, checked){
                        c.toggle(checked);
                    }
                }
            });
        }
        delete cfg.xtype;
        delete cfg.id;
        return cfg;
    },

    // private
    addComponentToMenu : function(m, c){
        if(c instanceof Ext.Toolbar.Separator){
            m.add('-');
        }else if(Ext.isFunction(c.isXType)){
            if(c.isXType('splitbutton')){
                m.add(this.createMenuConfig(c, true));
            }else if(c.isXType('button')){
                m.add(this.createMenuConfig(c, !c.menu));
            }else if(c.isXType('buttongroup')){
                c.items.each(function(item){
                     this.addComponentToMenu(m, item);
                }, this);
            }
        }
    },

    clearMenu : function(){
        var m = this.moreMenu;
        if(m && m.items){
            this.moreMenu.items.each(function(item){
                delete item.menu;
            });
        }
    },

    // private
    beforeMoreShow : function(m){
        var h = this.container.items.items,
            len = h.length,
            c,
            prev,
            needsSep = function(group, item){
                return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
            };

        this.clearMenu();
        m.removeAll();
        for(var i = 0; i < len; i++){
            c = h[i];
            if(c.xtbHidden){
                if(prev && (needsSep(c, prev) || needsSep(prev, c))){
                    m.add('-');
                }
                this.addComponentToMenu(m, c);
                prev = c;
            }
        }
        // put something so the menu isn't empty
        // if no compatible items found
        if(m.items.length < 1){
            m.add(this.noItemsMenuText);
        }
    },

    initMore : function(){
        if(!this.more){
            this.moreMenu = new Ext.menu.Menu({
                listeners: {
                    beforeshow: this.beforeMoreShow,
                    scope: this
                }
            });
            this.more = new Ext.Button({
                iconCls: 'x-toolbar-more-icon',
                cls: 'x-toolbar-more',
                menu: this.moreMenu
            });
            var td = this.insertCell(this.more, this.extrasTr, 100);
            this.more.render(td);
        }
    },

    destroy : function(){
        Ext.destroy(this.more, this.moreMenu);
        Ext.layout.ToolbarLayout.superclass.destroy.call(this);
    }

/**
     * @property activeItem
     * @hide
     */
});

Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;

/**
 * @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.
     */

    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);
        }
    },

/**
     *
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.constructItem(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.constructItem(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;
    },

    // private
    constructItem : function(item, type){
        return Ext.create(item, type || this.defaultType);
    },

/**
     * 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 Ext.Toolbar.superclass.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
    initMenuTracking : function(item){
        if(this.trackMenus && item.menu){
            this.mon(item, {
                'menutriggerover' : this.onButtonTriggerOver,
                'menushow' : this.onButtonMenuShow,
                'menuhide' : this.onButtonMenuHide,
                scope: this
            });
        }
    },

    // private
    constructButton : function(item){
        var b = item.events ? item : this.constructItem(item, item.split ? 'splitbutton' : this.defaultType);
        this.initMenuTracking(b);
        return b;
    },

    // 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, {
    constructor: function(config){
        if (Ext.isString(config)) {
            config = { autoEl: {cls: 'xtb-text', html: config }};
        } else {
            config.autoEl = {cls: 'xtb-text', html: config.text || ''};
        }
        T.TextItem.superclass.constructor.call(this, config);
    },

/**
     * 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.dom.innerHTML = t;
        } else {
            this.autoEl.html = 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

Ext.onReady(function(){

    var SamplePanel = Ext.extend(Ext.Panel, {
        width: 500,
        height:250,
        style: 'margin-top:15px',
        bodyStyle: 'padding:10px',
        renderTo: 'docbody',
        html: Ext.example.shortBogusMarkup,
        autoScroll: true
    });

    new SamplePanel({
        title: 'Standard',
        tbar: [{
            xtype:'splitbutton',
            text: 'Menu Button',
            iconCls: 'add16',
            menu: [{text: 'Menu Button 1'}]
        },'-',{
            xtype:'splitbutton',
            text: 'Cut',
            iconCls: 'add16',
            menu: [{text: 'Cut Menu Item'}]
        },{
            text: 'Copy',
            iconCls: 'add16'
        },{
            text: 'Paste',
            iconCls: 'add16',
            menu: [{text: 'Paste Menu Item'}]
        },'-',{
            text: 'Format',
            iconCls: 'add16'
        }]
    });

    new SamplePanel({
        title: 'Multi columns',
        tbar: [{
            xtype: 'buttongroup',
            title: 'Clipboard',
            columns: 2,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        },{
            xtype: 'buttongroup',
            title: 'Other Bugus Actions',
            columns: 2,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Button 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        }]
    });

    new SamplePanel({
        title: 'Multi columns (No titles, double stack)',
        tbar: [{
            xtype: 'buttongroup',
            columns: 3,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        },{
            xtype: 'buttongroup',
            columns: 3,
            defaults: {
                scale: 'small'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add16',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add16'
            },{
                text: 'Paste',
                iconCls: 'add16',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add16'
            }]
        }]
    });

    new SamplePanel({
        title: 'Mix and match icon sizes to create a huge unusable toolbar',
        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'
            }]
        },{
            xtype: 'buttongroup',
            columns: 3,
            title: 'Other Actions',
            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 Button 1'}]
            },{
                xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy', iconCls: 'add16'
            },{
                text: 'Format', iconCls: 'add16'
            }]
        }]
    });

    new SamplePanel({
        title: 'Medium icons, arrows to the bottom',
        tbar: [{
            xtype: 'buttongroup',
            title: 'Clipboard',
            defaults: {
                scale: 'medium',
                iconAlign:'top'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add24',
                cls: 'x-btn-as-arrow'
            },{
                text: 'Paste',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format
Stuff',
                iconCls: 'add24'
            }]
        },{
            xtype: 'buttongroup',
            title: 'Other Bogus Actions',
            defaults: {
                scale: 'medium',
                iconAlign:'top'
            },
            items: [{
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Menu Item 1'}]
            },{
                xtype:'splitbutton',
                text: 'Cut',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Cut Menu Item'}]
            },{
                text: 'Copy',
                iconCls: 'add24',
                cls: 'x-btn-as-arrow'
            },{
                text: 'Paste',
                iconCls: 'add24',
                arrowAlign:'bottom',
                menu: [{text: 'Paste Menu Item'}]
            },{
                text: 'Format',
                iconCls: 'add24',
                cls: 'x-btn-as-arrow'
            }]
        }]
    });

    new SamplePanel({
        title: 'Medium icons, text and arrows to the left',
        tbar: [{
            xtype:'buttongroup',
            items: [{
                text: 'Cut',
                iconCls: 'add24',
                scale: 'medium'
            },{
                text: 'Copy',
                iconCls: 'add24',
                scale: 'medium'
            },{
                text: 'Paste',
                iconCls: 'add24',
                scale: 'medium',
                menu: [{text: 'Paste Menu Item'}]
            }]
        }, {
            xtype:'buttongroup',
            items: [{
                text: 'Format',
                iconCls: 'add24',
                scale: 'medium'
            }]
        }]
    });

    new SamplePanel({
        title: 'Small icons, text and arrows to the left',
        tbar: [{
            xtype:'buttongroup',
            items: [{
                text: 'Cut',
                iconCls: 'add16',
                scale: 'small'
            },{
                text: 'Copy',
                iconCls: 'add16',
                scale: 'small'
            },{
                text: 'Paste',
                iconCls: 'add16',
                scale: 'small',
                menu: [{text: 'Paste Menu Item'}]
            }]
        }, {
            xtype:'buttongroup',
            items: [{
                text: 'Format',
                iconCls: 'add16',
                scale: 'small'
            }]
        }]
    });

});


The source code

/**
 * @class Ext.ToolTip
 * @extends Ext.Tip
 * A standard tooltip implementation for providing additional information when hovering over a target element.
 * @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){
                this.target = Ext.get(this.target);
                this.target.un('mouseover', this.onTargetOver, this);
                this.target.un('mouseout', this.onTargetOut, this);
                this.target.un('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.anchor){
            this.targetCounter++;
            var offsets = this.getOffsets();
            var xy = (this.anchorToTarget && !this.trackMouse) ?
                this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) :
                this.targetXY;

            var dw = Ext.lib.Dom.getViewWidth()-5;
            var dh = Ext.lib.Dom.getViewHeight()-5;
            var scrollX = (document.documentElement.scrollLeft || document.body.scrollLeft || 0)+5;
            var scrollY = (document.documentElement.scrollTop || document.body.scrollTop || 0)+5;

            var axy = [xy[0] + offsets[0], xy[1] + offsets[1]];
            var 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);
        }
    },

    // 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.enable.defer(100, this);
        }
    },

    // 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};
    },

    // private
    onDestroy : function(){
        Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
        Ext.ToolTip.superclass.onDestroy.call(this);
    }
});


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xg = Ext.grid;

    var reader = new Ext.data.JsonReader({
        idProperty:'taskId',
        fields: [
            {name: 'projectId', type: 'int'},
            {name: 'project', type: 'string'},
            {name: 'taskId', type: 'int'},
            {name: 'description', type: 'string'},
            {name: 'estimate', type: 'float'},
            {name: 'rate', type: 'float'},
            {name: 'cost', type: 'float'},
            {name: 'due', type: 'date', dateFormat:'m/d/Y'}
        ],
        // additional configuration for remote
        root:'data',
        remoteGroup:true,
        remoteSort: true
    });

    // define a custom summary function
    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
        return v + (record.data.estimate * record.data.rate);
    };

    // utilize custom extension for Hybrid Summary
    var summary = new Ext.ux.grid.HybridSummary();

    var grid = new xg.EditorGridPanel({
        ds: new Ext.data.GroupingStore({
            reader: reader,
            // use remote data
            proxy : new Ext.data.HttpProxy({
                url: 'totals-hybrid.json',
                method: 'GET'
            }),
            sortInfo: {field: 'due', direction: 'ASC'},
            groupField: 'project'
        }),

        columns: [
            {
                id: 'description',
                header: 'Task',
                width: 80,
                sortable: true,
                dataIndex: 'description',
                summaryType: 'count',
                hideable: false,
                summaryRenderer: function(v, params, data){
                    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
                },
                editor: new Ext.form.TextField({
                   allowBlank: false
                })
            },{
                header: 'Project',
                width: 20,
                sortable: true,
                dataIndex: 'project'
            },{
                header: 'Due Date',
                width: 25,
                sortable: true,
                dataIndex: 'due',
                summaryType:'max',
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                editor: new Ext.form.DateField({
                    format: 'm/d/Y'
                })
            },{
                header: 'Estimate',
                width: 20,
                sortable: true,
                dataIndex: 'estimate',
                summaryType:'sum',
                renderer : function(v){
                    return v +' hours';
                },
                editor: new Ext.form.NumberField({
                   allowBlank: false,
                   allowNegative: false,
                    style: 'text-align:left'
                })
            },{
                header: 'Rate',
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'rate',
                summaryType:'average',
                editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    style: 'text-align:left'
                })
            },{
                id: 'cost',
                header: 'Cost',
                width: 20,
                sortable: false,
                groupable: false,
                renderer: function(v, params, record){
                    return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
                },
                dataIndex: 'cost',
                summaryType: 'totalCost',
                summaryRenderer: Ext.util.Format.usMoney
            }
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            showGroupName: false,
            enableNoGroups:false,
            enableGroupingMenu:false,
            hideGroupedColumn: true
        }),

        plugins: summary,

        tbar : [{
            text: 'Toggle',
            tooltip: 'Toggle the visibility of summary row',
            handler: function(){summary.toggleSummaries();}
        }],

        frame: true,
        width: 800,
        height: 450,
        clicksToEdit: 1,
        collapsible: true,
        animCollapse: false,
        trackMouseOver: false,
        //enableColumnMove: false,
        title: 'Sponsored Projects',
        iconCls: 'icon-grid',
        renderTo: document.body
    });

    grid.on('afteredit', function(){
        var groupValue = 'Ext Forms: Field Anchoring';
        summary.showSummaryMsg(groupValue, 'Updating Summary...');
        setTimeout(function(){ // simulate server call
            // HybridSummary class implements updateSummaryData
            summary.updateSummaryData(groupValue,
                // create data object based on configured dataIndex
                {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
        }, 2000);
    });

    // load the remote data
    grid.store.load();

});


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xg = Ext.grid;

    var reader = new Ext.data.JsonReader({
        idProperty: 'taskId',
        fields: [
            {name: 'projectId', type: 'int'},
            {name: 'project', type: 'string'},
            {name: 'taskId', type: 'int'},
            {name: 'description', type: 'string'},
            {name: 'estimate', type: 'float'},
            {name: 'rate', type: 'float'},
            {name: 'cost', type: 'float'},
            {name: 'due', type: 'date', dateFormat:'m/d/Y'}
        ]

    });

    // define a custom summary function
    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
        return v + (record.data.estimate * record.data.rate);
    };

    // utilize custom extension for Group Summary
    var summary = new Ext.ux.grid.GroupSummary();

    var grid = new xg.EditorGridPanel({
        ds: new Ext.data.GroupingStore({
            reader: reader,
            // use local data
            data: app.grid.dummyData,
            sortInfo: {field: 'due', direction: 'ASC'},
            groupField: 'project'
        }),
        columns: [
            {
                id: 'description',
                header: 'Task',
                width: 80,
                sortable: true,
                dataIndex: 'description',
                summaryType: 'count',
                hideable: false,
                summaryRenderer: function(v, params, data){
                    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
                },
                editor: new Ext.form.TextField({
                   allowBlank: false
                })
            },{
                header: 'Project',
                width: 20,
                sortable: true,
                dataIndex: 'project'
            },{
                header: 'Due Date',
                width: 25,
                sortable: true,
                dataIndex: 'due',
                summaryType: 'max',
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                editor: new Ext.form.DateField({
                    format: 'm/d/Y'
                })
            },{
                header: 'Estimate',
                width: 20,
                sortable: true,
                dataIndex: 'estimate',
                summaryType: 'sum',
                renderer : function(v){
                    return v +' hours';
                },
                editor: new Ext.form.NumberField({
                   allowBlank: false,
                   allowNegative: false,
                   style: 'text-align:left'
                })
            },{
                header: 'Rate',
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'rate',
                summaryType: 'average',
                editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    style: 'text-align:left'
                })
            },{
                id: 'cost',
                header: 'Cost',
                width: 20,
                sortable: false,
                groupable: false,
                renderer: function(v, params, record){
                    return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
                },
                dataIndex: 'cost',
                summaryType: 'totalCost',
                summaryRenderer: Ext.util.Format.usMoney
            }
        ],

        view: new Ext.grid.GroupingView({
            forceFit: true,
            showGroupName: false,
            enableNoGroups: false,
            enableGroupingMenu: false,
            hideGroupedColumn: true
        }),

        plugins: summary,

        tbar : [{
            text: 'Toggle',
            tooltip: 'Toggle the visibility of summary row',
            handler: function(){summary.toggleSummaries();}
        }],

        frame: true,
        width: 800,
        height: 450,
        clicksToEdit: 1,
        collapsible: true,
        animCollapse: false,
        trackMouseOver: false,
        //enableColumnMove: false,
        title: 'Sponsored Projects',
        iconCls: 'icon-grid',
        renderTo: document.body
    });

});

// set up namespace for application
Ext.ns('app.grid');
// store dummy data in the app namespace
app.grid.dummyData = [
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
];


The source code

/**
 * @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

/**
 * @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
     * @return {Node} The removed node
     */
    removeChild : function(node){
        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);
        }

        node.setOwnerTree(null);
        // clear any references from the node
        node.parentNode = null;
        node.previousSibling = null;
        node.nextSibling = null;
        this.fireEvent("remove", this.ownerTree, this, node);
        return node;
    },

    /**
     * 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
     * @return {Node} this
     */
    remove : function(){
        this.parentNode.removeChild(this);
        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){
        // if it is a move, we need to update everyone
        if(tree != this.ownerTree){
            if(this.ownerTree){
                this.ownerTree.unregisterNode(this);
            }
            this.ownerTree = tree;
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++) {
                cs[i].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 = 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 scope (this) of
     * function call will be the scope provided or the current 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 of the function (defaults to 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 scope (this) of
     * function call will be the scope provided or the current 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 of the function (defaults to 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 scope (this) of
     * function call will be the scope provided or the current 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 of the function (defaults to current node)
     * @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
     * @return {Node} The found child or null if none was found
     */
    findChild : function(attribute, value){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            if(cs[i].attributes[attribute] == value){
                return cs[i];
            }
        }
        return null;
    },

    /**
     * Finds the first child by a custom function. The child matches if the function passed
     * returns true.
     * @param {Function} fn
     * @param {Object} scope (optional)
     * @return {Node} The found child or null if none was found
     */
    findChildBy : function(fn, scope){
        var cs = this.childNodes;
        for(var i = 0, len = cs.length; i < len; i++) {
            if(fn.call(scope||cs[i], cs[i]) === true){
                return cs[i];
            }
        }
        return null;
    },

    /**
     * Sorts this nodes children using the supplied sort function
     * @param {Function} fn
     * @param {Object} scope (optional)
     */
    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

/**
 * @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

/**
 * @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

/**
 * @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('beforeclick', this.beforeNodeClick, this);
        tree.on('dblclick', this.onNodeDblClick, this);
        this.on('complete', this.updateNode, this);
        this.on('beforestartedit', this.fitToTree, this);
        this.on('startedit', this.bindScroll, this, {delay:10});
        this.on('specialkey', this.onSpecialKey, this);
    },

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


The source code

Ext.tree.TreeEventModel = function(tree){
    this.tree = tree;
    this.tree.on('render', this.initEvents, this);
}

Ext.tree.TreeEventModel.prototype = {
    initEvents : function(){
        var el = this.tree.getTreeEl();
        el.on('click', this.delegateClick, this);
        if(this.tree.trackMouseOver !== false){
            this.tree.innerCt.on('mouseover', this.delegateOver, this);
            this.tree.innerCt.on('mouseout', this.delegateOut, this);
        }
        el.on('dblclick', this.delegateDblClick, this);
        el.on('contextmenu', this.delegateContextMenu, this);
    },

    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 && !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)){
            return;
        }

        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));
        }
    },

    delegateDblClick : function(e, t){
        if(this.beforeEvent(e) && this.getNodeTarget(e)){
            this.onNodeDblClick(e, this.getNode(e));
        }
    },

    delegateContextMenu : function(e, t){
        if(this.beforeEvent(e) && this.getNodeTarget(e)){
            this.onNodeContextMenu(e, this.getNode(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){
        if(this.disabled){
            e.stopEvent();
            return false;
        }
        return true;
    },

    disable: function(){
        this.disabled = true;
    },

    enable: function(){
        this.disabled = false;
    }
};


The source code

/**
 * @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 of the function (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

/**
 * @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(typeof this.paramOrder == 'string'){
        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.
     * 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 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 {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
     * @param (Object) scope
     */
    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, []);
        }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 buf = [], bp = this.baseParams;
        if(this.directFn){
            buf.push(node.id);
            if(bp){
                if(this.paramOrder){
                    for(var i = 0, len = this.paramOrder.length; i < len; i++){
                        buf.push(bp[this.paramOrder[i]]);
                    }
                }else if(this.paramsAsHash){
                    buf.push(bp);
                }
            }
            return buf;
        }else{
            for(var key in bp){
                if(!Ext.isFunction(bp[key])){
                    buf.push(encodeURIComponent(key), "=", encodeURIComponent(bp[key]), "&");
                }
            }
            buf.push("node=", encodeURIComponent(node.id));
            return buf.join("");
        }
    },

    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({
    ...
    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.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 = this;
        }
        if(typeof attr.uiProvider == 'string'){
           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]);
    }
});


The source code

/**
 * @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(typeof attributes == "string"){
        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 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 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 : 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){
        this.ownerTree.getSelectionModel().unselect(node);
        Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments);
        // if it's been rendered remove dom node
        if(this.childrenRendered){
            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 = 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(){
        this.getOwnerTree().getSelectionModel().select(this);
    },

    /**
     * Triggers deselection of this node
     */
    unselect : function(){
        this.getOwnerTree().getSelectionModel().unselect(this);
    },

    /**
     * Returns true if this node is selected
     * @return {Boolean}
     */
    isSelected : function(){
        return this.getOwnerTree().getSelectionModel().isSelected(this);
    },

    /**
     * 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 in which to execute the callback.
     */
    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 in which to execute the callback.
     */
    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 in which to execute the callback.
     */
    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();
        }
    },

    destroy : function(){
        if(this.childNodes){
            for(var i = 0,l = this.childNodes.length; i < l; i++){
                this.childNodes[i].destroy();
            }
            this.childNodes = null;
        }
        if(this.ui.destroy){
            this.ui.destroy();
        }
    },

    // private
    onIdChange: function(id){
        this.ui.onIdChange(id);
    }
});

Ext.tree.TreePanel.nodeTypes.node = Ext.tree.TreeNode;


The source code

/**
 * @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.addClass("x-tree-node-disabled");
            if (this.checkbox) {
                this.checkbox.disabled = 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.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} (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;
    },

    // private
    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 = typeof a.checked == 'boolean';

        var href = a.href ? a.href : Ext.isGecko ? "" : "#";
        var buf = ['
  • ',
            '',this.indentMarkup,"",
            '  ',
            '  ',
            cb ? ('' : '/>')) : '',
            '',n.text,"
    ",
            '
      ',
            "
      • "].join('');

        var nel;
        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;
            var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
            var 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-leaf");
                    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 = [];
            var 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 = "";
            var 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);
        }
        delete this.elNode;
        delete this.ctNode;
        delete this.indentNode;
        delete this.ecNode;
        delete this.iconNode;
        delete this.checkbox;
        delete this.anchor;
        delete this.textNode;

        if (this.holder){
             delete this.wrap;
             Ext.removeNode(this.holder);
             delete this.holder;
        }else{
            Ext.removeNode(this.wrap);
            delete this.wrap;
        }
    }
};

      /**
 * @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

/**
 * @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: "/",

    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(typeof l == 'object' && !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 checkchange
            * Fires when a node with a checkbox's checked property changes
            * @param {Node} this This node
            * @param {Boolean} checked
            */
            "checkchange",
            /**
            * @event dblclick
            * Fires when a node is double clicked
            * @param {Node} node The node
            * @param {Ext.EventObject} e The event object
            */
            "dblclick",
            /**
            * @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 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){
        Ext.destroy(this.root);
        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.innerCt.update('');
            this.afterRender();
        }
        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];
    },

    // 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 container element for this TreePanel.
     * @return {Element} The container element for this TreePanel.
     */
    getEl : function(){
        return this.el;
    },

    /**
     * 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);
        var v = keys.pop();
        if(keys.length > 0){
            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.root.render();
        if(!this.rootVisible){
            this.root.renderChildren();
        }
    },

    onDestroy : function(){
        if(this.rendered){
            this.body.removeAllListeners();
            Ext.dd.ScrollManager.unregister(this.body);
            if(this.dropZone){
                this.dropZone.unreg();
            }
            if(this.dragZone){
               this.dragZone.unreg();
            }
        }
        this.root.destroy();
        this.nodeHash = null;
        Ext.tree.TreePanel.superclass.onDestroy.call(this);
    }

    /**
     * @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 {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

/**
 * @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.getTreeEl().on("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){
        var last = this.selNode;
        if(node == last){
            node.ui.onSelectedChange(true);
        }else if(this.fireEvent('beforeselect', this, node, last) !== false){
            if(last){
                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
     */
    unselect : function(node){
        if(this.selNode == node){
            this.clearSelections();
        }
    },

/**
     * Clear all selections
     */
    clearSelections : function(){
        var n = this.selNode;
        if(n){
            n.ui.onSelectedChange(false);
            this.selNode = null;
            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(){
        var s = this.selNode || this.lastSelNode;
        if(!s){
            return null;
        }
        var ps = s.previousSibling;
        if(ps){
            if(!ps.isExpanded() || ps.childNodes.length < 1){
                return this.select(ps);
            } else{
                var lc = ps.lastChild;
                while(lc && lc.isExpanded() && lc.childNodes.length > 0){
                    lc = lc.lastChild;
                }
                return this.select(lc);
            }
        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
            return this.select(s.parentNode);
        }
        return null;
    },

/**
     * Selects the node above the selected node in the tree, intelligently walking the nodes
     * @return TreeNode The new selection
     */
    selectNext : function(){
        var s = this.selNode || this.lastSelNode;
        if(!s){
            return null;
        }
        if(s.firstChild && s.isExpanded()){
             return this.select(s.firstChild);
         }else if(s.nextSibling){
             return this.select(s.nextSibling);
         }else if(s.parentNode){
            var newS = null;
            s.parentNode.bubble(function(){
                if(this.nextSibling){
                    newS = this.getOwnerTree().selModel.select(this.nextSibling);
                    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.getTreeEl().on("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

// custom menu item to contain Ext trees
Ext.menu.TreeItem = Ext.extend(Ext.menu.Adapter, {
    constructor : function(config){
        Ext.menu.TreeItem.superclass.constructor.call(this, config.tree, config);
        this.tree = this.component;
        this.addEvents('selectionchange');

        this.tree.on("render", function(tree){
            tree.body.swallowEvent(['click','keydown', 'keypress', 'keyup']);
        });

        this.tree.getSelectionModel().on("selectionchange", this.onSelect, this);
    },

    onSelect : function(tree, sel){
        this.fireEvent("select", this, sel, tree);
    }
});

// custom menu containing a single tree
Ext.menu.TreeMenu = Ext.extend(Ext.menu.Menu, {
    cls:'x-tree-menu',
    keyNav: true,
    hideOnClick:false,
    plain: true,

    constructor : function(config){
        Ext.menu.TreeMenu.superclass.constructor.call(this, config);
        this.treeItem = new Ext.menu.TreeItem(config);
        this.add(this.treeItem);

        this.tree = this.treeItem.tree;
        this.tree.on('click', this.onNodeClick, this);
        this.relayEvents(this.treeItem, ["selectionchange"]);
    },

    // private
    beforeDestroy : function() {
        this.tree.destroy();
    },

    onNodeClick : function(node, e){
        if(!node.attributes.isFolder){
            this.treeItem.handleClick(e);
        }
    }
});

// custom form field for displaying a tree, similar to select or combo
Ext.ux.TreeSelector = Ext.extend(Ext.form.TriggerField, {
    initComponent : function(){
        Ext.ux.TreeSelector.superclass.initComponent.call(this);
        this.addEvents('selectionchange');

        this.tree.getSelectionModel().on('selectionchange', this.onSelection, this);
        this.tree.on({
            'expandnode': this.sync,
            'collapsenode' : this.sync,
            'append' : this.sync,
            'remove' : this.sync,
            'insert' : this.sync,
            scope: this
        });
        this.on('focus', this.onTriggerClick, this);
    },

    sync : function(){
        if(this.menu && this.menu.isVisible()){
            if(this.tree.body.getHeight() > this.maxHeight){
                this.tree.body.setHeight(this.maxHeight);
                this.restricted = true;
            }else if(this.restricted && this.tree.body.dom.firstChild.offsetHeight < this.maxHeight){
                this.tree.body.setHeight('');
                this.restricted = false;
            }
            this.menu.el.sync();
        }
    },

    onSelection : function(tree, node){
        if(!node){
            this.setRawValue('');
        }else{
            this.setRawValue(node.text);
        }
    },

    initEvents : function(){
        Ext.ux.TreeSelector.superclass.initEvents.call(this);
        this.el.on('mousedown', this.onTriggerClick, this);
        this.el.on("keydown", this.onKeyDown,  this);
    },

    onKeyDown : function(e){
        if(e.getKey() == e.DOWN){
            this.onTriggerClick();
        }
    },

    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },

    getValue : function(){
        var sm = this.tree.getSelectionModel();
        var s = sm.getSelectedNode();
        return s ? s.id : '';
    },

    setValue : function(id){
        var n = this.tree.getNodeById(id);
        if(n){
            n.select();
        }else{
            this.tree.getSelectionModel().clearSelections();
        }
    },

    // private
    onDestroy : function(){
        if(this.menu) {
            this.menu.destroy();
        }
        if(this.wrap){
            this.wrap.remove();
        }
        Ext.ux.TreeSelector.superclass.onDestroy.call(this);
    },

    // private
    menuListeners : {
        show : function(){ // retain focus styling
            this.onFocus();
        },
        hide : function(){
            this.focus.defer(10, this);
            var ml = this.menuListeners;
            this.menu.un("show", ml.show,  this);
            this.menu.un("hide", ml.hide,  this);
        }
    },

    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        this.menu.on(Ext.apply({}, this.menuListeners, {
            scope:this
        }));

        this.menu.show(this.el, "tl-bl?");
        this.sync();
        var sm = this.tree.getSelectionModel();
        var selected = sm.getSelectedNode();
        if(selected){
            selected.ensureVisible();
            sm.activate.defer(250, sm, [selected]);
        }
    },

    beforeBlur : function(){
        //
    },

    onRender : function(){
        Ext.ux.TreeSelector.superclass.onRender.apply(this, arguments);
        this.menu = new Ext.menu.TreeMenu(Ext.apply(this.menuConfig || {}, {tree: this.tree}));
        this.menu.render();

        this.tree.body.addClass('x-tree-selector');
    },

    readOnly: true
});

/*
 * Custom tree keyboard navigation that supports node navigation without selection
 */
Ext.tree.ActivationModel = Ext.extend(Ext.tree.DefaultSelectionModel, {
    select : function(node){
        return this.activate(Ext.tree.ActivationModel.superclass.select.call(this, node));
    },

    activate : function(node){
        if(!node){
            return;
        }
        if(this.activated != node) {
            if(this.activated){
                this.activated.ui.removeClass('x-tree-activated');
            }
            this.activated = node;
            node.ui.addClass('x-tree-activated');
        }
        node.ui.focus();
        return node;
    },

    activatePrevious : function(){
        var s = this.activated;
        if(!s){
            return null;
        }
        var ps = s.previousSibling;
        if(ps){
            if(!ps.isExpanded() || ps.childNodes.length < 1){
                return this.activate(ps);
            } else{
                var lc = ps.lastChild;
                while(lc && lc.isExpanded() && lc.childNodes.length > 0){
                    lc = lc.lastChild;
                }
                return this.activate(lc);
            }
        } else if(s.parentNode && (this.tree.rootVisible || !s.parentNode.isRoot)){
            return this.activate(s.parentNode);
        }
        return null;
    },

    activateNext : function(){
        var s = this.activated;
        if(!s){
            return null;
        }
        if(s.firstChild && s.isExpanded()){
             return this.activate(s.firstChild);
         }else if(s.nextSibling){
             return this.activate(s.nextSibling);
         }else if(s.parentNode){
            var newS = null;
            s.parentNode.bubble(function(){
                if(this.nextSibling){
                    newS = this.getOwnerTree().selModel.activate(this.nextSibling);
                    return false;
                }
            });
            return newS;
         }
        return null;
    },

    onKeyDown : function(e){
        var s = this.activated;
        // undesirable, but required
        var sm = this;
        if(!s){
            return;
        }
        var k = e.getKey();
        switch(k){
             case e.DOWN:
                 e.stopEvent();
                 this.activateNext();
             break;
             case e.UP:
                 e.stopEvent();
                 this.activatePrevious();
             break;
             case e.RIGHT:
                 e.preventDefault();
                 if(s.hasChildNodes()){
                     if(!s.isExpanded()){
                         s.expand();
                     }else if(s.firstChild){
                         this.activate(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.activate(s.parentNode, e);
                 }
             break;
        };
    }
});


The source code

/**
 * @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

/**
 * @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 {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',

    // private
    onResize : function(w, h){
        Ext.form.TriggerField.superclass.onResize.call(this, w, h);
        if(typeof w == 'number'){
            this.el.setWidth(this.adjustWidth('input', w - this.trigger.getWidth()));
        }
        this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
    },

    // private
    adjustSize : Ext.BoxComponent.prototype.adjustSize,

    // private
    getResizeEl : function(){
        return this.wrap;
    },

    // private
    getPositionEl : function(){
        return this.wrap;
    },

    // private
    alignErrorIcon : function(){
        if(this.wrap){
            this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
        }
    },

    // private
    onRender : function(ct, position){
        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});
        if(this.hideTrigger){
            this.trigger.setDisplayed(false);
        }
        this.initTrigger();
        if(!this.width){
            this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
        }
        if(!this.editable){
            this.editable = true;
            this.setEditable(false);
        }
    },

    afterRender : function(){
        Ext.form.TriggerField.superclass.afterRender.call(this);
    },

    // 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){
            Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
        }
        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;
            Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {delay: 10});
            if(this.monitorTab){
                this.el.on('keydown', this.checkTab, this);
            }
        }
    },

    // private
    checkTab : function(e){
        if(e.getKey() == e.TAB){
            this.triggerBlur();
        }
    },

    // private
    onBlur : function(){
        // do nothing
    },

    // private
    mimicBlur : function(e){
        if(!this.wrap.contains(e.target) && this.validateBlur(e)){
            this.triggerBlur();
        }
    },

    // private
    triggerBlur : function(){
        this.mimicing = false;
        Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
        if(this.monitorTab && this.el){
            this.el.un("keydown", this.checkTab, this);
        }
        Ext.form.TriggerField.superclass.onBlur.call(this);
        if(this.wrap){
            this.wrap.removeClass(this.wrapFocusClass);
        }
    },

    beforeBlur : Ext.emptyFn,

/**
     * 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.  This method
     * is the runtime equivalent of setting the 'editable' config option at config time.
     * @param {Boolean} value True to allow the user to directly edit the field text
     */
    setEditable : function(value){
        if(value == this.editable){
            return;
        }
        this.editable = value;
        if(!value){
            this.el.addClass('x-trigger-noedit').on('click', this.onTriggerClick, this).dom.setAttribute('readOnly', true);
        }else{
            this.el.removeClass('x-trigger-noedit').un('click', this.onTriggerClick,  this).dom.removeAttribute('readOnly');
        }
    },

    // 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);
        this.wrap.setStyle('overflow', 'hidden');
        var triggerField = this;
        ts.each(function(t, all, index){
            t.hide = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = 'none';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            t.show = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = '';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            var triggerIndex = 'Trigger'+(index+1);

            if(this['hide'+triggerIndex]){
                t.dom.style.display = 'none';
            }
            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;
    },

/**
     * 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

var TreeTest = function(){
    // shorthand
    var Tree = Ext.tree;

    return {
        init : function(){
            // yui-ext tree
            var tree = new Tree.TreePanel({
                animate:true,
                autoScroll:true,
                loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
                enableDD:true,
                containerScroll: true,
                border: false,
                dropConfig: {appendOnly:true}
            });

            // add a tree sorter in folder mode
            new Tree.TreeSorter(tree, {folderSort:true});

            // set the root node
            var root = new Tree.AsyncTreeNode({
                text: 'Ext JS',
                draggable:false, // disable root node dragging
                id:'src'
            });
            tree.setRootNode(root);

            // render the tree
            tree.render('tree');

            root.expand(false, /*no anim*/ false);

            //-------------------------------------------------------------

            // YUI tree
            var tree2 = new Tree.TreePanel({
                animate:true,
                autoScroll:true,
                //rootVisible: false,
                loader: new Ext.tree.TreeLoader({
                    dataUrl:'get-nodes.php',
                    baseParams: {lib:'yui'} // custom http params
                }),
                containerScroll: true,
                border: false,
                enableDD:true,
                dropConfig: {appendOnly:true}
            });

            // add a tree sorter in folder mode
            new Tree.TreeSorter(tree2, {folderSort:true});

            // add the root node
            var root2 = new Tree.AsyncTreeNode({
                text: 'My Files',
                draggable:false,
                id:'yui'
            });
            tree2.setRootNode(root2);
            tree2.render('tree2');

            root2.expand(false, /*no anim*/ false);
        }
    };
}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);


The source code

/**
 * @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 async 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 || "javascript:false")
};

/**
 * 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
 * Default Content renderer. Updates the elements innerHTML with the responseText.
 */
Ext.Updater.BasicRenderer = function(){};

Ext.Updater.BasicRenderer.prototype = {

/**
     * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
     * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
     * create an object with a "render(el, response)" method and pass it to setRenderer on the Updater.
     * @param {Ext.Element} el The element being rendered
     * @param {Object} response 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

Imgorg.UploadQueue = Ext.extend(Ext.Panel,{
    swfu: '',
    autoRemove: false,
    uploaded: false,

    initComponent: function() {
        Ext.apply(this,{
            layout: 'fit',
            autoScroll: true,
            items: [{
                xtype: 'dataview',
                id: 'img-uploaddv',
                autoWidth: true,
                tpl: new Ext.XTemplate(
                    '',
                        '
',
                            '
{name}
',
                            '
',
                            '
',
                            '
{size:fileSize}
',
                        '
',
                    ''
                ),
                store: new Ext.data.JsonStore({
                    root: '',
                    id: 'id',
                    fields: [
                        {name: 'creationdate', type: 'date'},
                        {name: 'modificationdate', type: 'date'},
                        'filestatus','id','index','name','size','type','dbid'
                    ]
                }),
                itemSelector: 'div.upload-file',
                selectedClass: 'upload-file-selected',
                singleSelect: true
            }],
            tbar:[{
                text: 'Start Upload',
                handler: this.startUpload,
                scope: this,
                iconCls: 'start-upload'
            },{
                text: 'Clear',
                handler: this.cancelUpload,
                scope: this,
                iconCls: 'cancel'
            },'-',{
                text: 'Add to Album',
                handler: this.addAllAlbum,
                scope: this,
                iconCls: 'album-add'
            },{
                text: 'Tag',
                handler: this.tagAll,
                scope: this,
                iconCls: 'tag'
            },
            '->',{
                xtype: 'checkbox',
                checked: this.autoRemove,
                listeners: {
                    check: function(cb, checked) {
                        this.autoRemove = checked;
                    },
                    scope: this
                }
            },'Auto-Remove Uploaded']
        });
        Imgorg.UploadQueue.superclass.initComponent.call(this);

        this.progressBars = {};

        Ext.ux.SwfuMgr.on('filequeued', this.addFile, this);
        Ext.ux.SwfuMgr.on('uploadprogress', this.updateProgress, this);
        Ext.ux.SwfuMgr.on('uploadsuccess', this.uploadSuccess, this);
    },

    getDv: function() {
        if (!this.imgUplDv) {
            this.imgUplDv = this.getComponent('img-uploaddv');
        }
        return this.imgUplDv;
    },

    startUpload: function() {
        this.swfu.startUpload();
    },

    cancelUpload: function() {
        this.swfu.cancelUpload();
        for (var pb in this.progressBars) {
            this.progressBars[pb].destroy();
        }
        this.getDv().store.removeAll();
        this.uploaded = false;
    },

    addFile: function(swfu, file) {
        this.getDv().store.loadData([file], true);
    },

    addAllAlbum: function(btn) {
        if (!this.uploaded) {
            Ext.Msg.alert('Warning', 'You must upload files before you can add them to an Album');
            return;
        }
        var dv = this.getDv();
        var recs = dv.getRecords(dv.getNodes());
        if (!this.albumWin) {
            this.albumWin = new Imgorg.AlbumWin();
        }
        this.albumWin.selectedRecords = recs;
        this.albumWin.show(btn.btnEl.dom);
    },

    tagAll: function(btn) {
        if (!this.uploaded) {
            Ext.Msg.alert('Warning', 'You must upload files before you can Tag them');
            return;
        }
        var dv = this.getDv();
        var recs = dv.getRecords(dv.getNodes());
        Imgorg.TagWin.selectedRecords = recs;
        Imgorg.TagWin.show(btn.btnEl.dom);
    },

    updateProgress: function(swfu, file, complete, total) {
        if (this.progressBars[file.id]) {
            this.progressBars[file.id].updateProgress(file.percentUploaded/100,Math.round(file.percentUploaded)+'% Completed... '+Ext.util.Format.fileSize(file.currentSpeed)+'s');
        } else {
            this.progressBars[file.id] = new Ext.ProgressBar({
                text:'0% Completed...',
                renderTo: file.id+'-pb'
            });
        }
    },

    uploadSuccess: function(swfu, file, data) {
        var store = this.getDv().store;
        var rec = store.getById(file.id);
        if (this.progressBars[file.id]) {
            this.progressBars[file.id].updateProgress(1, '100% Completed...');
        }
        if (this.autoRemove) {
            store.remove(rec);
        }
        var data = Ext.decode(Ext.util.Format.stripTags(data));
        rec.data.dbid = data.result.res.id;
        this.uploaded = true;
    }
});
Ext.reg('img-uploadqueue', Imgorg.UploadQueue);

Ext.ux.SwfuManager = Ext.extend(Ext.util.Observable, {
    constructor: function(config) {
        Ext.ux.SwfuManager.superclass.constructor.call(this, config);
        this.addEvents(
            'filequeued',
            'uploadstart',
            'uploadprogress',
            'uploaderror',
            'uploadsuccess'
        );
    }
});

Ext.ux.SwfuMgr = new Ext.ux.SwfuManager();


The source code

Ext.ns('App', 'App.user');

/**
 * @class App.user.FormPanel
 * A typical FormPanel extension
 */
App.user.Form = Ext.extend(Ext.form.FormPanel, {
    renderTo: 'user-form',
    iconCls: 'silk-user',
    frame: true,
    labelAlign: 'right',
    title: 'User -- All fields are required',
    frame: true,
    width: 500,
    defaultType: 'textfield',
    defaults: {
        anchor: '100%'
    },

    // private A pointer to the currently loaded record
    record : null,

/**
     * initComponent
     * @protected
     */
    initComponent : function() {
        // build the form-fields.  Always a good idea to defer form-building to a method so that this class can
        // be over-ridden to provide different form-fields
        this.items = this.buildForm();

        // build form-buttons
        this.buttons = this.buildUI();

        // add a create event for convenience in our application-code.
        this.addEvents({

/**
             * @event create
             * Fires when user clicks [create] button
             * @param {FormPanel} this
             * @param {Object} values, the Form's values object
             */
            create : true
        });

        // super
        App.user.Form.superclass.initComponent.call(this);
    },

    /**
     * buildform
     * @private
     */
    buildForm : function() {
        return [
            {fieldLabel: 'Email', name: 'email', allowBlank: false, vtype: 'email'},
            {fieldLabel: 'First', name: 'first', allowBlank: false},
            {fieldLabel: 'Last', name: 'last', allowBlank: false}
        ];
    },

    /**
     * buildUI
     * @private
     */
    buildUI: function(){
        return [{
            text: 'Save',
            iconCls: 'icon-save',
            handler: this.onUpdate,
            scope: this
        }, {
            text: 'Create',
            iconCls: 'silk-user-add',
            handler: this.onCreate,
            scope: this
        }, {
            text: 'Reset',
            handler: function(btn, ev){
                this.getForm().reset();
            },
            scope: this
        }];
    },

/**
     * loadRecord
     * @param {Record} rec
     */
    loadRecord : function(rec) {
        this.record = rec;
        this.getForm().loadRecord(rec);
    },

/**
     * onUpdate
     */
    onUpdate : function(btn, ev) {
        if (this.record == null) {
            return;
        }
        if (!this.getForm().isValid()) {
            App.setAlert(false, "Form is invalid.");
            return false;
        }
        this.getForm().updateRecord(this.record);
    },

/**
     * onCreate
     */
    onCreate : function(btn, ev) {
        if (!this.getForm().isValid()) {
            App.setAlert(false, "Form is invalid");
            return false;
        }
        this.fireEvent('create', this, this.getForm().getValues());
        this.getForm().reset();
    },

/**
     * onReset
     */
    onReset : function(btn, ev) {
        this.fireEvent('update', this, this.getForm().getValues());
        this.getForm().reset();
    }
});


The source code

Ext.ns('App', 'App.user');

/**
 * App.user.Grid
 * A typical EditorGridPanel extension.
 */
App.user.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
    renderTo: 'user-grid',
    iconCls: 'silk-grid',
    frame: true,
    title: 'Users',
    height: 300,
    width: 500,
    style: 'margin-top: 10px',

    initComponent : function() {

        // typical viewConfig
        this.viewConfig = {
            forceFit: true
        };

        // relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
        this.relayEvents(this.store, ['destroy', 'save', 'update']);

        // build toolbars and buttons.
        this.tbar = this.buildTopToolbar();
        this.bbar = this.buildBottomToolbar();
        this.buttons = this.buildUI();

        // super
        App.user.Grid.superclass.initComponent.call(this);
    },

/**
     * buildTopToolbar
     */
    buildTopToolbar : function() {
        return [{
            text: 'Add',
            iconCls: 'silk-add',
            handler: this.onAdd,
            scope: this
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
            handler: this.onDelete,
            scope: this
        }, '-'];
    },

/**
     * buildBottomToolbar
     */
    buildBottomToolbar : function() {
        return ['@cfg:', '-', {
            text: 'autoSave',
            enableToggle: true,
            pressed: true,
            tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',
            toggleHandler: function(btn, pressed) {
                this.store.autoSave = pressed;
            },
            scope: this
        }, '-', {
            text: 'batch',
            enableToggle: true,
            pressed: true,
            tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',
            toggleHandler: function(btn, pressed) {
                this.store.batch = pressed;
            },
            scope: this
        }, '-', {
            text: 'writeAllFields',
            enableToggle: true,
            tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',
            toggleHandler: function(btn, pressed) {
                store.writer.writeAllFields = pressed;
            },
            scope: this
        }, '-'];
    },

/**
     * buildUI
     */
    buildUI : function() {
        return [{
            text: 'Save',
            iconCls: 'icon-save',
            handler: this.onSave,
            scope: this
        }];
    },

/**
     * onSave
     */
    onSave : function(btn, ev) {
        this.store.save();
    },

/**
     * onAdd
     */
    onAdd : function(btn, ev) {
        var u = new this.store.recordType({
            first : '',
            last: '',
            email : ''
        });
        this.stopEditing();
        this.store.insert(0, u);
        this.startEditing(0, 1);
    },

/**
     * onDelete
     */
    onDelete : function(btn, ev) {
        var index = this.getSelectionModel().getSelectedCell();
        if (!index) {
            return false;
        }
        var rec = this.store.getAt(index[0]);
        this.store.remove(rec);
    }
});


The source code

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

/**
 * @class Ext.ux.ValidationStatus
 * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
 * associated form contains validation errors.
 * @extends Ext.Component
 * @constructor
 * Creates a new ValiationStatus plugin
 * @param {Object} config A config object
 */
Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {

    errorIconCls : 'x-status-error',

    errorListCls : 'x-status-error-list',

    validIconCls : 'x-status-valid',

    showText : 'The form has errors (click for details...)',

    hideText : 'Click again to hide the error list',

    submitText : 'Saving...',

    // private
    init : function(sb){
        sb.on('render', function(){
            this.statusBar = sb;
            this.monitor = true;
            this.errors = new Ext.util.MixedCollection();
            this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');

            if(this.form){
                this.form = Ext.getCmp(this.form).getForm();
                this.startMonitoring();
                this.form.on('beforeaction', function(f, action){
                    if(action.type == 'submit'){
                        // Ignore monitoring while submitting otherwise the field validation
                        // events cause the status message to reset too early
                        this.monitor = false;
                    }
                }, this);
                var startMonitor = function(){
                    this.monitor = true;
                }
                this.form.on('actioncomplete', startMonitor, this);
                this.form.on('actionfailed', startMonitor, this);
            }
        }, this, {single:true});
        sb.on('afterlayout', function(){
            // Grab the statusEl after the first layout.
            sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
        }, this, {single: true});
    },

    // private
    startMonitoring : function(){
        this.form.items.each(function(f){
            f.on('invalid', this.onFieldValidation, this);
            f.on('valid', this.onFieldValidation, this);
        }, this);
    },

    // private
    stopMonitoring : function(){
        this.form.items.each(function(f){
            f.un('invalid', this.onFieldValidation, this);
            f.un('valid', this.onFieldValidation, this);
        }, this);
    },

    // private
    onDestroy : function(){
        this.stopMonitoring();
        this.statusBar.statusEl.un('click', this.onStatusClick, this);
        Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
    },

    // private
    onFieldValidation : function(f, msg){
        if(!this.monitor){
            return false;
        }
        if(msg){
            this.errors.add(f.id, {field:f, msg:msg});
        }else{
            this.errors.removeKey(f.id);
        }
        this.updateErrorList();
        if(this.errors.getCount() > 0){
            if(this.statusBar.getText() != this.showText){
                this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
            }
        }else{
            this.statusBar.clearStatus().setIcon(this.validIconCls);
        }
    },

    // private
    updateErrorList : function(){
        if(this.errors.getCount() > 0){
            var msg = '
    ';
            this.errors.each(function(err){
                msg += ('
  • ' + err.msg + '
    • ');
            }, this);
            this.getMsgEl().update(msg+'
');
        }else{
            this.getMsgEl().update('');
        }
    },

    // private
    getMsgEl : function(){
        if(!this.msgEl){
            this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
                cls: this.errorListCls+' x-hide-offsets'
            }, true);

            this.msgEl.on('click', function(e){
                var t = e.getTarget('li', 10, true);
                if(t){
                    Ext.getCmp(t.id.split('x-err-')[1]).focus();
                    this.hideErrors();
                }
            }, this, {stopEvent:true}); // prevent anchor click navigation
        }
        return this.msgEl;
    },

    // private
    showErrors : function(){
        this.updateErrorList();
        this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:.3, easing:'easeOut'});
        this.statusBar.setText(this.hideText);
        this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
    },

    // private
    hideErrors : function(){
        var el = this.getMsgEl();
        if(el.isVisible()){
            el.slideOut('b', {duration:.2, easing:'easeIn'});
            this.statusBar.setText(this.showText);
        }
        this.form.getEl().un('click', this.hideErrors, this);
    },

    // private
    onStatusClick : function(){
        if(this.getMsgEl().isVisible()){
            this.hideErrors();
        }else if(this.errors.getCount() > 0){
            this.showErrors();
        }
    }
});


The source code

/**
 * @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

/**
 * @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_]+$/;
    var alphanum = /^[a-zA-Z0-9_]+$/;
    var email = /^(\w+)([-+.][\w]+)*@(\w[-\w]*\.){1,5}([A-Za-z]){2,4}$/;
    var 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

/**
 * @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/Button} defaultButton
    * The id / index of a button or a button instance to focus when this window received the focus.
    */

/**
    * @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).
     */
    initHidden : true,

/**
    * @cfg {Boolean} monitorResize @hide
    * This is automatically managed based on the value of constrain and constrainToHeader
    */
    monitorResize : 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(){
        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'
        );
        if(this.initHidden === false){
            this.show();
        }else{
            this.hidden = true;
        }
    },

    // 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);
        }
        this.initTools();
    },

    // 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
            });
            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.
         * @type Ext.dd.DD
         * @property dd
         */
        this.dd = new Ext.Window.DD(this);
    },

   // private
    onEsc : function(){
        this[this.closeAction]();
    },

    // private
    beforeDestroy : function(){
        if (this.rendered){
            this.hide();
          if(this.doAnchor){
                Ext.EventManager.removeResizeListener(this.doAnchor, this);
              Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
            }
            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
            });
            this.mon(this.header, 'dblclick', this.toggleMaximize, this);
        }
        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);
        }
        this.focus();
        this.updateHandles();
        this.saveState();
        this.doLayout();
        this.fireEvent('resize', this, box.width, box.height);
    },

/**
     * 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;
        if(t != 'undefined'){
            if(t == 'number' && this.fbar){
                f = this.fbar.items.get(db);
            }else if(t == 'string'){
                f = Ext.getCmp(db);
            }else{
                f = db;
            }
        }
        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 in which to execute the callback
     * @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(animateTarget !== undefined){
            this.setAnimateTarget(animateTarget);
        }
        this.beforeShow();
        if(this.animateTarget){
            this.animShow();
        }else{
            this.afterShow();
        }
        return this;
    },

    // private
    afterShow : function(isAnim){
        this.proxy.hide();
        this.el.setStyle('display', 'block');
        this.el.show();
        if(this.maximized){
            this.fitContainer();
        }
        if(Ext.isMac && Ext.isGecko){ // 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.fireEvent('show', this);
    },

    // private
    animShow : function(){
        this.proxy.show();
        this.proxy.setBox(this.animateTarget.getBox());
        this.proxy.setOpacity(0);
        var b = this.getBox(false);
        b.callback = this.afterShow.createDelegate(this, [true], false);
        b.scope = this;
        b.duration = 0.25;
        b.easing = 'easeNone';
        b.opacity = 0.5;
        b.block = true;
        this.el.setStyle('display', 'none');
        this.proxy.shift(b);
    },

/**
     * 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 in which to execute the callback
     * @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.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();
        var b = this.animateTarget.getBox();
        b.callback = this.afterHide;
        b.scope = this;
        b.duration = 0.25;
        b.easing = 'easeNone';
        b.block = true;
        b.opacity = 0;
        this.proxy.shift(b);
    },

    // 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();
            if(Ext.isMac && Ext.isGecko){ // 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){
            this.hide(null, function(){
                this.fireEvent('close', this);
                this.destroy();
            }, this);
        }
    },

/**
     * 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){
            this.el.removeClass('x-window-maximized');
            this.tools.restore.hide();
            this.tools.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){
                this.tools.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();
        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 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){
      if(this.doAnchor){
          Ext.EventManager.removeResizeListener(this.doAnchor, this);
          Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
      }
      this.doAnchor = function(){
          this.alignTo(el, alignment, 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});
      }
      this.doAnchor();
      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.
     * @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

/**
 * @class Ext.WindowGroup
 * An object that represents 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 (defaults to 9000)
         * @type Number The z-index value
         */
        zseed : 9000,

        // private
        register : function(win){
            list[win.id] = win;
            accessList.push(win);
            win.on('hide', activateLast);
        },

        // private
        unregister : function(win){
            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.
         * @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.
         * @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 the group.
         */
        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 the group.
         * @return {Ext.Window} The active window
         */
        getActive : function(){
            return front;
        },

/**
         * Returns zero or more windows in the group 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 in which to execute the function (defaults to the window
         * 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 the group, 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 in which to execute the function
         */
        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

// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create HttpProxy instance.  Notice new configuration parameter "api" here instead of load.  However, you can still use
// the "url" paramater -- All CRUD requests will be directed to your single url instead.
var proxy = new Ext.data.HttpProxy({
    api: {
        read : 'app.php/users/view',
        create : 'app.php/users/create',
        update: 'app.php/users/update',
        destroy: 'app.php/users/destroy'
    }
});

// Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'id',
    root: 'data'
}, [
    {name: 'id'},
    {name: 'email', allowBlank: false},
    {name: 'first', allowBlank: false},
    {name: 'last', allowBlank: false}
]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: false
});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
    id: 'user',
    proxy: proxy,
    reader: reader,
    writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
    autoSave: true,  // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
    listeners: {
        write : function(store, action, result, res, rs) {
            App.setAlert(res.success, res.message); // <-- show user-feedback for all write actions
        },
        exception : function(proxy, type, action, options, res, arg) {
            if (type === 'remote') {
                Ext.Msg.show({
                    title: 'REMOTE EXCEPTION',
                    msg: res.message,
                    icon: Ext.MessageBox.ERROR,
                    buttons: Ext.Msg.OK
                });
            }
        }
    }
});

// A new generic text field
var textField =  new Ext.form.TextField();

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns =  [
    {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
    {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: textField},
    {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: textField},
    {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: textField}
];

// load the store immeditately
store.load();

Ext.onReady(function() {
    Ext.QuickTips.init();

    // create user.Form instance (@see UserForm.js)
    var userForm = new App.user.Form({
        renderTo: 'user-form',
        listeners: {
            create : function(fpanel, data) {   // <-- custom "create" event defined in App.user.Form class
                var rec = new userGrid.store.recordType(data);
                userGrid.store.insert(0, rec);
            }
        }
    });

    // create user.Grid instance (@see UserGrid.js)
    var userGrid = new App.user.Grid({
        renderTo: 'user-grid',
        store: store,
        columns : userColumns,
        listeners: {
            rowclick: function(g, index, ev) {
                var rec = g.store.getAt(index);
                userForm.loadRecord(rec);
            },
            destroy : function() {
                userForm.getForm().reset();
            }
        }
    });
});


The source code

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var fs = new Ext.FormPanel({
        frame: true,
        title:'XML Form',
        labelAlign: 'right',
        labelWidth: 85,
        width:340,
        waitMsgTarget: true,

        // configure how to read the XML Data
        reader : new Ext.data.XmlReader({
            record : 'contact',
            success: '@success'
        }, [
            {name: 'first', mapping:'name/first'}, // custom mapping
            {name: 'last', mapping:'name/last'},
            'company', 'email', 'state',
            {name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
        ]),

        // reusable eror reader class defined at the end of this file
        errorReader: new Ext.form.XmlErrorReader(),

        items: [
            new Ext.form.FieldSet({
                title: 'Contact Information',
                autoHeight: true,
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        width:190
                    }, {
                        fieldLabel: 'Last Name',
                        name: 'last',
                        width:190
                    }, {
                        fieldLabel: 'Company',
                        name: 'company',
                        width:190
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        width:190
                    },

                    new Ext.form.ComboBox({
                        fieldLabel: 'State',
                        hiddenName:'state',
                        store: new Ext.data.ArrayStore({
                            fields: ['abbr', 'state'],
                            data : Ext.exampledata.states // from states.js
                        }),
                        valueField:'abbr',
                        displayField:'state',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a state...',
                        selectOnFocus:true,
                        width:190
                    }),

                    new Ext.form.DateField({
                        fieldLabel: 'Date of Birth',
                        name: 'dob',
                        width:190,
                        allowBlank:false
                    })
                ]
            })
        ]
    });

    // simple button add
    fs.addButton('Load', function(){
        fs.getForm().load({url:'xml-form.xml', waitMsg:'Loading'});
    });

    // explicit add
    var submit = fs.addButton({
        text: 'Submit',
        disabled:true,
        handler: function(){
            fs.getForm().submit({url:'xml-errors.xml', waitMsg:'Saving Data...'});
        }
    });

    fs.render('form-ct');

    fs.on({
        actioncomplete: function(form, action){
            if(action.type == 'load'){
                submit.enable();
            }
        }
    });

});

// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function(){
    Ext.form.XmlErrorReader.superclass.constructor.call(this, {
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    );
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);


The source code

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'sheldon.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // 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'
           ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
        renderTo:'example-grid',
        width:540,
        height:200
    });

    store.load();
});


The source code

//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
    processAttributes : function(attr){
        if(attr.first){ // is it an author node?

            // Set the node text that will show in the tree since our raw data does not include a text attribute:
            attr.text = attr.first + ' ' + attr.last;

            // Author icon, using the gender flag to choose a specific icon:
            attr.iconCls = 'author-' + attr.gender;

            // Override these values for our folder nodes because we are loading all data at once.  If we were
            // loading each node asynchronously (the default) we would not want to do this:
            attr.loaded = true;
            attr.expanded = true;
        }
        else if(attr.title){ // is it a book node?

            // Set the node text that will show in the tree since our raw data does not include a text attribute:
            attr.text = attr.title + ' (' + attr.published + ')';

            // Book icon:
            attr.iconCls = 'book';

            // Tell the tree this is a leaf node.  This could also be passed as an attribute in the original XML,
            // but this example demonstrates that you can control this even when you cannot dictate the format of
            // the incoming source XML:
            attr.leaf = true;
        }
    }
});

Ext.onReady(function(){

    var detailsText = 'Select a book to see more information...';

    var tpl = new Ext.Template(
        '
{title}
',
        '
Published: {published}
',
        '
Synopsis: {innerText}
',
        '
Purchase from Amazon
'
    );
    tpl.compile();

    new Ext.Panel({
        title: 'Reading List',
        renderTo: 'tree',
        layout: 'border',
        width: 500,
        height: 500,
        items: [{
            xtype: 'treepanel',
            id: 'tree-panel',
            region: 'center',
            margins: '2 2 0 2',
            autoScroll: true,
            rootVisible: false,
            root: new Ext.tree.AsyncTreeNode(),

            // Our custom TreeLoader:
            loader: new Ext.app.BookLoader({
                dataUrl:'xml-tree-data.xml'
            }),

            listeners: {
                'render': function(tp){
                    tp.getSelectionModel().on('selectionchange', function(tree, node){
                        var el = Ext.getCmp('details-panel').body;
                        if(node && node.leaf){
                            tpl.overwrite(el, node.attributes);
                        }else{
                            el.update(detailsText);
                        }
                    })
                }
            }
        },{
            region: 'south',
            title: 'Book Details',
            id: 'details-panel',
            autoScroll: true,
            collapsible: true,
            split: true,
            margins: '0 2 2 2',
            cmargins: '2 2 2 2',
            height: 220,
            html: detailsText
        }]
    });
});


The source code

/**
 * @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({
   totalRecords: "results", // The element which contains the total dataset size (optional)
   record: "row",           // The repeated element which contains row information
   id: "id"                 // The element within the row that provides an ID for the record (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} totalRecords 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} success 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 || {};
    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;
        var q = Ext.DomQuery;
        var recordType = this.recordType, fields = recordType.prototype.fields;
        var sid = this.meta.idPath || this.meta.id;
        var totalRecords = 0, success = true;
        if(this.meta.totalRecords){
            totalRecords = q.selectNumber(this.meta.totalRecords, root, 0);
        }

        if(this.meta.success){
            var sv = q.selectValue(this.meta.success, root, true);
            success = sv !== false && sv !== 'false';
        }
        var records = [];
        var ns = q.select(this.meta.record, root);
        for(var i = 0, len = ns.length; i < len; i++) {
            var n = ns[i];
            var values = {};
            var id = sid ? q.selectValue(sid, n) : undefined;
            for(var j = 0, jlen = fields.length; j < jlen; j++){
                var f = fields.items[j];
                var v = q.selectValue(Ext.value(f.mapping, f.name, true), n, f.defaultValue);
                v = f.convert(v, n);
                values[f.name] = v;
            }
            var record = new recordType(values, id);
            record.node = n;
            records[records.length] = record;
        }

        return {
            success : success,
            records : records,
            totalRecords : totalRecords || records.length
        };
    },

    // TODO: implement readResponse for XmlReader
    readResponse : Ext.emptyFn
});


The source code

/**
 * @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

Ext.ns('Ext.ux.tree');

/**
 * @class Ext.ux.tree.XmlTreeLoader
 * @extends Ext.tree.TreeLoader
 *
A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
 * Any text value included as a text node in the XML will be added to the parent node as an attribute
 * called innerText.  Also, the tag name of each XML node will be added to the tree node as
 * an attribute called tagName.

 *
By default, this class expects that your source XML will provide the necessary attributes on each
 * node as expected by the {@link Ext.tree.TreePanel} to display and load properly.  However, you can
 * provide your own custom processing of node attributes by overriding the {@link #processNode} method
 * and modifying the attributes as needed before they are used to create the associated TreeNode.

 * @constructor
 * Creates a new XmlTreeloader.
 * @param {Object} config A config object containing config properties.
 */
Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {

/**
     * @property  XML_NODE_ELEMENT
     * XML element node (value 1, read-only)
     * @type Number
     */
    XML_NODE_ELEMENT : 1,

/**
     * @property  XML_NODE_TEXT
     * XML text node (value 3, read-only)
     * @type Number
     */
    XML_NODE_TEXT : 3,

    // private override
    processResponse : function(response, node, callback){
        var xmlData = response.responseXML;
        var root = xmlData.documentElement || xmlData;

        try{
            node.beginUpdate();
            node.appendChild(this.parseXml(root));
            node.endUpdate();

            if(typeof callback == "function"){
                callback(this, node);
            }
        }catch(e){
            this.handleFailure(response);
        }
    },

    // private
    parseXml : function(node) {
        var nodes = [];
        Ext.each(node.childNodes, function(n){
            if(n.nodeType == this.XML_NODE_ELEMENT){
                var treeNode = this.createNode(n);
                if(n.childNodes.length > 0){
                    var child = this.parseXml(n);
                    if(typeof child == 'string'){
                        treeNode.attributes.innerText = child;
                    }else{
                        treeNode.appendChild(child);
                    }
                }
                nodes.push(treeNode);
            }
            else if(n.nodeType == this.XML_NODE_TEXT){
                var text = n.nodeValue.trim();
                if(text.length > 0){
                    return nodes = text;
                }
            }
        }, this);

        return nodes;
    },

    // private override
    createNode : function(node){
        var attr = {
            tagName: node.tagName
        };

        Ext.each(node.attributes, function(a){
            attr[a.nodeName] = a.nodeValue;
        });

        this.processAttributes(attr);

        return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
    },

    /*
     * Template method intended to be overridden by subclasses that need to provide
     * custom attribute processing prior to the creation of each TreeNode.  This method
     * will be passed a config object containing existing TreeNode attribute name/value
     * pairs which can be modified as needed directly (no need to return the object).
     */
    processAttributes: Ext.emptyFn
});

//backwards compat
Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;


The source code

/**
 * @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.
 */
Ext.data.XmlWriter = Ext.extend(Ext.data.DataWriter, {

/**
     * Final action of a write event.  Apply the written data-object to params.
     * @param {String} action [Ext.data.Api.create|read|update|destroy]
     * @param {Record[]} rs
     * @param {Object} http params
     * @param {Object} data object populated according to DataReader meta-data "root" and "idProperty"
     */
    render : function(action, rs, params, data) {
        // no impl.
    },

/**
     * createRecord
     * @param {Ext.data.Record} rec
     */
    createRecord : function(rec) {
        // no impl
    },

/**
     * updateRecord
     * @param {Ext.data.Record} rec
     */
    updateRecord : function(rec) {
        // no impl.

    },

/**
     * destroyRecord
     * @param {Ext.data.Record} rec
     */
    destroyRecord : function(rec) {
        // no impl
    }
});


The source code

/**
 * @class Ext.XTemplate
 * @extends Ext.Template
 *
A template class that supports advanced functionality like autofilling arrays, conditional processing with
 * basic comparison operators, sub-templates, basic math function support, special built-in template variables,
 * inline code execution and more.  XTemplate also provides the templating mechanism built into {@link Ext.DataView}.

 *
XTemplate supports 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.  The following examples demonstrate all of the supported features.
 * 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 for="." is specified, the data object provided
 * is examined. If the variable in for is an array, it will auto-fill, repeating the template
 * block inside the tpl tag for each item in the array:

 *

var tpl = new Ext.XTemplate(
    '<p>Kids: ',
    '<tpl for=".">',
        '<p>{name}</p>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
 *

 *
Scope switching
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);
 *

 *
Access to parent object from within sub-template scope
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 &gt; 1">',  // <-- Note that the > is encoded
            '<p>{name}</p>',
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);

 *
Array item index and basic math support
While processing an array, the special variable {#}
 * will provide the current array index + 1 (starts at 1, not 0). Templates also support the basic math operators
 * + - * and / that can be applied directly on numeric data values:

 *

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

 *
Auto-rendering of flat arrays
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);

 *
Basic conditional logic
Using the tpl tag and the if
 * operator you can provide conditional checks for deciding whether or not to render specific parts of the template.
 * Note that there is no else operator — if needed, you should use two opposite if statements.
 * Properly-encoded attributes are required as seen in the following 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>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite(panel.body, data);

 *
Ability to execute arbitrary inline code
In an XTemplate, 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 defined directly on the config
 * 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>',
        '<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>', {
     isGirl: function(name){
         return name == 'Sara Grace';
     },
     isBaby: function(age){
        return age < 1;
     }
});
tpl.overwrite(panel.body, data);

 * @constructor
 * @param {String/Array/Object} parts The HTML fragment or an array of fragments to join(""), or multiple arguments
 * to join("") that can also include a config object
 */
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){
            return "'"+ sep +'('+code+')'+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

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 = {},
        isXUL = Ext.isGecko ? function(node){
            return Object.prototype.toString.call(node) == '[object XULElement]';
        } : function(){
        }, isTextNode = Ext.isGecko ? function(node){
            try{
                return node.nodeType == 3;
            }catch (e){
                return false;
            }
        } : function(node){
            return node.nodeType == 3;
        }, elContains = function(parent, child){
            if(parent && parent.firstChild){
                while(child){
                    if(child === parent){
                        return true;
                    }
                    try{
                        child = child.parentNode;
                    }catch (e){
                        return false;
                    }
                    if(child && (child.nodeType != 1)){
                        child = null;
                    }
                }
            }
            return false;
        }, checkRelatedTarget = function(e){
            var related = Ext.lib.Event.getRelatedTarget(e);
            return !(isXUL(related) || elContains(e.currentTarget, related));
        };

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

})();


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
安装支持: 支持安装及卸载